Web sayfası önyüklemesinin kullanımı nedir? Önceden getir web sayfası önceden yüklenmiş instant.page teknolojisi

Sayfa yükleme hızı , e-ticaret sitenizin arama motorlarındaki SEO sıralamasını etkileyecektir .

Web sayfası ön yükleme nedir?

Prefetch adı verilen ve aslında bir ön yükleme tekniği olan bir teknik var.

• Bir kullanıcı kasıtlı olarak bir sayfayı ziyaret ettiğinde, tarayıcı sayfayı önceden yükler.
• Kullanıcı bağlantıyı gerçekten tıkladığında, kullanıcı önceden yüklenmiş önbellekten doğrudan sayfa içeriğini okur ve sayfa yükleme süresini azaltır.
• Amazon ve diğerleri, 100 milisaniyelik gecikmenin satışların %1'ini oluşturduğunu buldu, ancak web'deki gecikmenin üstesinden gelmek zor.

Web sayfasını önceden getirÖn yükleme ne işe yarar?

instant.page anında önyükleme kullanır - kullanıcı tıklamadan önce sayfayı önceden yükler ▼

• Kullanıcı bağlantıyı tıklamadan önce fareyle bağlantının üzerine gelir.
• Kullanıcı fareyi 65 ms'ye getirdiğinde, bağlantıya tıklama şansı olacak, bu nedenle instant.page bu noktada önyüklemeye başlar ve sayfanın önyüklenmesi için ortalama 300 ms'nin üzerindedir.
• Mobil cihazlarda kullanıcılar, sayfayı önceden yüklemek için ortalama 90 ms'lik bir süre alarak, serbest bırakmadan önce ekranlarına dokunmaya başlarlar.

Prefetch, web sayfalarının daha hızlı yüklenmesini sağlar

• İnsan beyni, bir eylemi anında algılamak için 100 milisaniyeden daha az zaman alır.
• Bu nedenle, instant.page ön yükleme teknolojisi, web sitenizi 3G'de bile anında hissettirebilir (sayfa oluşturma hızınızın hızlı olduğu varsayılarak).

Web sayfalarının yavaş yüklenmesi nasıl çözülür?

Sayfalar, yalnızca kullanıcının onları ziyaret etme olasılığı yüksek olduğunda önceden yüklenir ve kullanıcının ve sunucunun bant genişliğine ve CPU'suna saygı duyarak yalnızca o sayfanın HTML'sini önceden yükler.

• Sayfalarınızı sorunsuz tutmak için pasif olay dinleyicileri kullanır.
• Kullanıcı veri korumasını etkinleştirdiğinde (sürüm 1.2.2'den itibaren) önceden yüklenmez.
• 1 kB ve her şeyden sonra yükleniyor.Ücretsiz ve açık kaynak kodludur (MIT lisansı).

Prefetch web sayfasının instant.page'i önceden yüklemesinin etkisi nedir?

Instant.page kodunu eklemeyi test ettikten sonra, web sitesi erişim hızındaki iyileşme hala nispeten büyük.

• Varsayılan olarak, yalnızca bu site bağlantılarını önceden yüklemek için filtre uygular ve diğer sitelerden bağlantılar yüklemez.
• Fare soldaki makale bağlantısına 65 ms'den fazla tıkladığında, Ağ makale sayfasını önceden yükleyecektir.
• 65ms'den daha kısa bir süre gezinirken, ön yükleme yapılmaz (kırmızı kısım)▼

instant.page'i kullanmak sitenizin PV'sini ve istek hacmini önemli ölçüde artıracaktır:

• Bir arkadaşım, ziyaret başına ortalama ziyaret sayısının 13.84 olduğunu söyledi.
• Kullanımdan sonra kişi başına ziyaret sayısı 17.43'e yükseldi, bu da kişi başına 4 sayfa daha açılmasına eşdeğer.

Önlemler:

• Ücretli CDN'leri ve açık tam site CDN'lerini kullanan blog yazarlarının bunu dikkatli yapmaları gerektiği unutulmamalıdır.
• Ama merak etmeyin, ön yükleme sadece html sayfalarını yükler, resimler ve diğer dosyalar olmaz, bu yüzden fazla trafik kaybı olmaz.

Web sayfası ön yükleme teknolojisi nasıl kullanılır?

Aslında, html5'in bağlantı etiketinde, biri önceden getirme olan bir rel özelliği vardır, ancak tüketici sayısı azdır.

Bu makalede tanıtılan instant.page, bu tekniği kullanan bir komut dosyasıdır.

• Bu komut dosyası, kullanıcının fareyi bağlantının üzerinde ne kadar süreyle gezdirdiğine göre karar verecektir.
• 65 ms'ye ulaştığında, kullanıcının bağlantıyı açma şansı yarıya düşer ve Instant.page bu sayfayı önceden yükler.

Web sayfası önceden yüklenmiş JS komut dosyası kodu

1) Resmi web sitesi Cloudflare hızlandırmasıyla çalışan bir JS betiği sunmaktadır▼

Instant.page'in kullanımı çok basit, web sitenize aşağıdaki kodu eklemeniz yeterli.Etiketten hemen önce.

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

2) Chen Weiliang tarafından yönetilmektedir ▼

• Komut dosyası Instantclick-1.2.2.js sunucusunda bulunur, bu nedenle işleri yavaşlatma konusunda endişelenmenize gerek yoktur. 

Lütfen aşağıdaki kodu web sitenize ekleyinEtiketten hemen önce:

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