Jaki jest pożytek z wstępnego ładowania strony internetowej? Wstępne ładowanie strony internetowej technologia instant.page

Szybkość ładowania strony ma wpływ na pozycję SEO Twojej witryny e-commerce w wyszukiwarkach.

Co to jest wstępne ładowanie strony internetowej?

Istnieje technika zwana prefetch, która w rzeczywistości jest techniką wstępnego ładowania.

• Gdy użytkownik celowo odwiedza stronę, przeglądarka wstępnie ją ładuje.
• Gdy użytkownik faktycznie kliknie łącze, bezpośrednio odczytuje zawartość strony ze wstępnie załadowanej pamięci podręcznej i skraca czas ładowania strony.
• Amazon i inni odkryli, że opóźnienie 100 milisekund stanowi 1% sprzedaży, ale opóźnienia w sieci są trudne do pokonania.

Wstępne pobieranie strony internetowejJaki jest pożytek z wstępnego ładowania?

instant.page wykorzystuje błyskawiczne wstępne ładowanie - wstępnie ładuje stronę, zanim użytkownik kliknie ▼

• Zanim użytkownik kliknie link, najedzie na link.
• Gdy użytkownik najedzie na 65 ms, będzie miał szansę kliknąć link, więc instant.page zaczyna się w tym momencie wstępnie ładować, średnio ponad 300 ms na wstępne wczytywanie strony.
• Na urządzeniach mobilnych użytkownicy zaczynają dotykać ekranu przed zwolnieniem, a wstępne wczytywanie strony zajmuje średnio 90 ms.

Wstępne pobieranie przyspiesza ładowanie stron internetowych

• Ludzki mózg potrzebuje mniej niż 100 milisekund, aby natychmiast dostrzec akcję.
• Dlatego technologia wstępnego ładowania strony instant.page może sprawić, że Twoja witryna będzie działać błyskawicznie nawet w sieci 3G (zakładając, że szybkość renderowania strony jest duża).

Jak rozwiązać problem powolnego ładowania stron internetowych?

Strony są wstępnie ładowane tylko wtedy, gdy istnieje duże prawdopodobieństwo, że użytkownik je odwiedzi, i tylko wstępnie ładuje kod HTML tej strony, z poszanowaniem przepustowości i procesora użytkownika i serwera.

• Wykorzystuje pasywne detektory zdarzeń, aby Twoje strony były płynne.
• Nie jest wstępnie ładowany, gdy użytkownik włączy ochronę danych (od wersji 1.2.2).
• To 1 kB i ładuje się po wszystkim innym.Jest darmowy i open source (licencja MIT).

Jaki jest efekt wstępnego pobierania strony internetowej instant.page?

Po przetestowaniu dodania kodu instant.page poprawa szybkości dostępu do strony jest nadal stosunkowo duża.

• Domyślnie będzie filtrować w celu wstępnego załadowania tylko linków do tej witryny i nie będzie ładować linków z innych witryn.
• Gdy myszką kliknie łącze do artykułu po lewej stronie przez ponad 65 ms, sieć wstępnie załaduje stronę artykułu.
• Podczas zawisu przez mniej niż 65 ms wstępne ładowanie nie jest wykonywane (czerwona część)▼

Korzystanie z instant.page znacznie zwiększy PV Twojej witryny i liczbę żądań:

• Znajomy powiedział, że jego średnia liczba wizyt na wizytę wynosiła 13.84.
• Po wykorzystaniu liczba odwiedzin per capita wzrosła do 17.43, co odpowiada otwarciu 4 dodatkowych stron na osobę.

Uwaga:

• Należy zauważyć, że blogerzy korzystający z płatnych sieci CDN i otwartych sieci CDN z pełną witryną powinni robić to ostrożnie.
• Ale nie martw się, wstępne ładowanie ładuje tylko strony html, obrazy i inne pliki nie, więc nie będzie dużej utraty ruchu.

Jak korzystać z technologii wstępnego ładowania stron internetowych?

W rzeczywistości w tagu linku html5 znajduje się atrybut rel, z których jeden to prefetch, ale liczba konsumentów jest niewielka.

Wprowadzona w tym artykule strona instant.page to skrypt wykorzystujący tę technikę.

• Ten skrypt oceni na podstawie tego, jak długo użytkownik najedzie myszą na link.
• Gdy osiągnie 65 ms, użytkownik ma połowę szans na otwarcie linku, a Instant.page wstępnie załaduje tę stronę.

Strona internetowa wstępnie ładuje kod skryptu JS

1) Oficjalna strona internetowa udostępnia skrypt JS z akceleracją Cloudflare ▼

Korzystanie z instant.page jest bardzo proste, wystarczy dodać poniższy kod do swojej strony internetowejTuż przed etykietą.

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2) Samodzielnie zarządzane przez Chen Weiliang ▼

• Skrypt znajduje się na serwerze Instantclick-1.2.2.js, więc nie musisz się martwić o spowolnienie działania. 

Dodaj następujący kod do swojej witrynyTuż przed etykietą:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>