Web Sayfaları Anında Nasıl Yüklenir (Uzman Teknikler ve Araçlar)

Hızlı. Daha hızlı. Ani.

2024'e adım atarken, ufukta çığır açıcı bir dönem açılıyor; site ziyaretçilerinin anında sayfa yüklemenin yeni norm haline gelmesi yönünde önemli bir değişim öngörebileceği bir dönem.

Web'de gezinmenin evrimini keşfederken ve site ziyaretçilerinize anlık deneyimler sunmanın yollarını genişletirken bize katılın.

Sayfaları Anında Yüklemek Ne Demektir?

Sayfaların anında yüklenmesi, web sayfalarının kullanıcı isteği üzerine hızlı ve kesintisiz görüntülenmesini ifade eder. Basitçe söylemek gerekirse, bir site ziyaretçisi web sitenizden bir sayfa yüklediğinde 0 saniyeye yakın bir yükleme süresi elde etmek.

Anında sayfa yüklemeyi gerçekleştirmek, dosya boyutlarını en aza indirmek, tarayıcı önbelleğinden yararlanmak ve içerik dağıtım ağlarını (CDN'ler) kullanmak gibi çeşitli arka uç ve ön uç kaynaklarının optimize edilmesini içerir.

Optimizasyon araç kutunuza eklenecek en son teknikler hakkında bilgi edinmek için okumaya devam edin.

Anında Sayfa Yüklemeleri Neden Önemlidir?

Amaç, web sitenize kullanıcı katılımını ve memnuniyetini korumak için çok önemli olan bilgilere hızlı ve duyarlı erişim sağlayarak kullanıcı deneyimini geliştirmektir.

NitroPack tarafından yapılan son kullanıcı araştırması, site ziyaretçilerinin bir sayfayı 2,75 saniyede terk ettiğini ve sonraki sayfalar 3 saniyeden kısa sürede yüklenirse %60 daha fazla sayfayı ziyaret edeceğini ortaya çıkardı.

Anında deneyimler sunmak aynı zamanda gerçek kullanıcıların web sitenizle nasıl etkileşim kurduğunu da olumlu yönde etkileyerek özellikle Temel Web Verileri ve En Büyük İçerikli Boya'nın geçmesine yol açar.

En zorlu performans ölçütü olarak bilinen LCP, optimize edilmesi karmaşık bir husustur ve neyse ki anında yükleme tekniklerinden büyük ölçüde etkilenir.

Şimdi Web'de Gezinmenin Zorlukları

Ağ mühendisleri World Wide Web'in doğasında olan zayıflıkları telafi etmek için ellerinden geleni yaparken, mobil kullanıcıların %53'ü sayfaların 3 saniye veya daha kısa sürede hızlı bir şekilde yüklenmesini bekliyor.

Bu boşluğu kapatmak için site sahipleri bugün bekleme süresini kısaltmak ve rekabetçi kalabilmek için sayısız strateji kullanıyor:

• Web performansı bütçe ayarları
• Manuel ve otomatik sayfa yükleme optimizasyonu
• Görüntüler, medya ve kod sıkıştırma
• Gerçek dünya performansı (Önemli Web Verileri) optimizasyonu
• Kullanıcı davranışı analizi, müşteri yolculuğu optimizasyonu ve çok daha fazlası!

Ancak site sahiplerinin yalnızca şirket içi kaynaklara güvenmesi gerekmez.

Google Chrome gibi tarayıcılar ve NitroPack gibi optimizasyon araçları, yakalanması zor "anlık deneyimi" hedefleyerek yükleme sürelerini hızlandırmaya yardımcı olacak yolları giderek daha fazla buluyor.

Otomatik anlık deneyimlerin kilidini açmak için ilk yapay zeka destekli iyileştirici, NitroPack'in Navigasyon Yapay Zekası için bekleme listesine katılın →

Manuel Anında Sayfa Yükleme Teknikleri

Tarayıcı Özelliklerinden ve Kaynak İpuçlarından Yararlanma

Anında gezinme deneyimlerini aşmanın bir yolu, web sitenizi gelecekteki hızlı gezinmeler için optimize etmektir.

link rel=prefetch gibi kaynak ipuçları, web sayfasının oluşturulmasında daha düşük önceliğe sahip, uygulanması kolay API'lerdir. Web sitenizin HTML'sine eklenir ve tarayıcılar tarafından oldukça iyi desteklenir (Safari geride kalıyor).

Barry Pollard'ın kendisi tarafından tanıtılan, Chromium'daki son zamanların heyecan verici gelişmelerinden biri de Spekülasyon Kuralları API'sidir.

Spekülasyon Kuralları API'si, web sayfalarının tamamının önceden getirilmesi veya önceden oluşturulması için daha yeni, daha iyi tanımlanmış bir API'dir. Önceden oluşturulmuş veya önceden oluşturulmuş bağlantıların ve çok daha gelişmiş kullanım durumlarının belirlenmesine olanak tanıyan JSON tabanlı bir API'dir.

Spekülasyon Kuralları API'sini kullanarak, ilk sayfa yükleme sürelerinin 2,5 saniyeden çok daha hızlı olmasını ve hatta ilk birkaç milisaniyeye yaklaşmasını bekleyebilirsiniz. Bu, tarayıcının arka planda yürüteceği, önceden oluşturma veya önceden getirme için web sayfalarına yönelik URL'lerin bir listesini belirtmek üzere API'den yararlanılarak mümkündür.

Ocak 2024'ün sonu itibarıyla Spekülasyon Kuralları API'si, URL'leri liste yerine bir belgeye ekleyerek bize URL'ler üzerinde daha fazla kontrol sağlayan yepyeni bir iyileştirmeye kavuştu. Bu, tetikleyicileri ve sayfalar için dahil edilen URL'lerin ve sayfalardaki öğelerin tarayıcı tarafından yürütülme önceliğini belirlememize olanak tanır. Daha sonra, temel olarak bir kullanıcının bu bağlantıları tıklayacağından ne kadar emin olduğunuzu temsil eden bir "heves" düzeyi belirleyebilirsiniz.

WordPress'te Anında Sayfa Yüklemenin Kilidini Açma

Adam Silverstein, WordPress Performans ekibinin yeni Spekülasyon Kuralları API'sinin daha istikrarlı uygulamaları üzerinde çalıştığını açıkladı.

Şu anda odak noktası, API'nin işlevselliğinin küçük bir kısmını, ekosistemdeki site sahiplerinin ve geliştiricilerin, API'yi çekirdeğin bir parçası haline getirmeden önce verimliliğini ve benimseme oranını test etmeleri için kullanılabilir hale getirmeye devam ediyor. WordPress kullanıcılarının şu ana kadar yararlanabileceği şeyler:

• Performance Lab eklentisindeki bir modül

• Yalnızca Spekülasyon Kuralları API'sinin ön ucunu uygulayan bağımsız bir eklenti (muhafazakar "heves" düzeyini uygular, ancak geliştiriciler davranışı değiştirmekte özgürdür)

• WP-admin rotaları varsayılan olarak hariç tutulur, ancak kaçınmak veya öncelik vermek istedikleri rotaları belirlemek WP geliştiricilerine kalmıştır (yani, alışveriş sepetlerini önceden oluşturmaktan ve önceden getirmekten kaçının, ancak gelecekteki belirgin gezinmelere öncelik verin)

WordPress Performans ekibi aynı zamanda ekosistemdeki eklentiler içinde daha karmaşık uygulamalar üzerinde de çalışıyor. Bu, geliştiricilerin hangi rotaların öncelikli olduğunu ve hangilerinin yapılmayacağını belirlerken yapması gereken bazı ağır işleri hafifletmeyi amaçlıyor.

Herhangi Bir Web Sitesine Sayfalar Otomatik Olarak Anında Nasıl Yüklenir?

NitroPack'in sunduğu Navigasyon Yapay Zekası ile tanışın (beta sürümde)

Navigasyon AI, NitroPack'in en son ürünüdür. Müşteri yolculuğu sırasında tüm sayfaları önceden oluşturmak için kullanıcı davranışını aktif olarak tahmin eden ve analiz eden, yapay zeka destekli bir web tarama iyileştiricisidir. Navigasyon AI, site sahiplerinin hem masaüstü hem de mobil cihazlarda anında gezinme deneyimleri sunmasına olanak tanıyarak müşteri katılımını ve dönüşüm oranlarını artırır.

Navigasyon AI bekleme listesine katılın ve sitenizi anlık kullanıcı deneyimlerine hazırlayın →

Navigasyon AI nasıl çalışır?

NitroPack'in Navigasyon Yapay Zekası, Spekülasyon Kuralları API'sini temel alır ve önceden oluşturulmuş ve önceden oluşturulmamış sayfalar arasında yüksek ödüllü, düşük riskli bir denge kurmaya yönelik otomatik bir çözüm sunar. Yalın bir JavaScript pasajı tarafından uygulanır ve tarayıcıda çalıştığı için tamamen platformdan bağımsızdır.

Navigasyon yapay zekası, tüm süreci iki aşamaya bölerek bu karmaşık denklemi çözebilir:

• İlk aşama: Henüz Spekülasyon Kuralları API'sine aktarmadan verilere dayalı olarak sayfa yüklemede AI ile geliştirilmiş ilk tahminlerin uygulanması (tarayıcıyı bunaltmamak için)

• İkinci aşama: Kullanıcı davranışını analiz etmek, tahminleri ayarlamak ve bir sonraki eylemin ne olacağından emin olduktan sonra Spekülasyon Kuralları API'sine bir sayfayı önceden oluşturması (veya önceden getirmesi) talimatını vermek.

Sonuç, bu sayfanın arka planda zaten boyalı olması sayesinde sayfanın anında yüklenmesidir. Mobil cihazlarda Navigasyon AI, kullanıcının sayfada nerede olduğunu belirlemeye dayanır ve küçük görünüm alanı göz önüne alındığında, nereye dokunacaklarını kolayca tahmin edebilir.

Navigasyon yapay zekasını bu kadar güçlü kılan şey nedir? (+ Veri)

Navigasyon yapay zekası başarıyı üç özel ölçüme göre ölçer:

• Tahmin kesinliği: Navigasyon AI'nın tüm kullanıcı etkileşimlerinden kaç tanesini başarıyla tahmin ettiği

• Atık hassasiyeti: Navigasyon AI'nın tüm kullanıcı etkileşimlerinden kaç tanesini tahmin edemediği ve tarayıcının zorlanmasına neden olduğu

• Tarayıcı onur oranı: Bir sayfanın gerçekten düzgün bir şekilde önceden oluşturulup/önceden getirilip getirilmediğini belirtir (değilse, Navigasyon AI'nın benzer durumlara uyum sağlamasına yardımcı olmak için tarayıcı verimliliğini veya kullanıcının ağ gücünü kontrol ederiz)

1.200 web sitesini temel alan Navigasyon Yapay Zekası şimdiden olağanüstü sonuçlar gösteriyor.

Navigasyon Yapay Zekası Gerçek Dünya Sonuçları

• Sonuç #1:Navigasyon AI kullanan web sayfaları, Navigasyon Yapay Zekası olmayan 6.12 saniyeye kıyasla sürekli olarak ~2,86 saniyelik bir yükleme süresi gösteriyor

• Sonuç #2: Navigasyon AI ile önceden oluşturulmuş sayfalar %85'lik bir LCP iyileşmesi (3,1 saniyeden 0,4 saniyeye) ve %80'lik bir CLS iyileşmesi (0,3 saniyeden 0,06 saniyeye)gösterir. Önceden getirilen sayfalar için Navigasyon AI, LCP'yi %52 artırır (3,1 saniyeden 1,5 saniyeye).

• Sonuç #3: Navigasyon AI ile tüm web sitesine ilişkin performans ölçümleri önemli ölçüde iyileşiyor: LCP %15, CLS %8 ve TTFB %26

Hızlı ilk sayfa yükleme süreleri, istikrarlı düzenler ve etkileşimlere hızlı yanıt verme, site sahiplerine kullanıcıları daha uzun süre mutlu ve etkileşimde tutma ve sonunda daha yüksek oranlarda dönüşüm sağlama olanağı verir.

Anında Yükleme Teknikleri: Doğruluk ve Dengeler

Hangi sayfaların önceden oluşturulacağına/önceden getirileceğine karar verirken doğru dengeyi yakalamak, kullanıcılarınızın davranışlarını ne kadar iyi anladığınızla bağlantılıdır. Manuel yaklaşım, "orta risk, orta ödül" senaryosuna ulaşmak için geçmiş kullanıcı deneyimlerinin ve veri analizinin dikkatli bir şekilde değerlendirilmesini gerektirir.

İdeal olarak, ısı haritalarını iki katına çıkarmak ve kullanıcıların web sayfalarınızda neler yaptığını (nereyi tıkladıklarını, ne kadar aşağı kaydırdıklarını ve neyi görmezden geldiklerini) araştırmak istersiniz.

Tarayıcılar sınırlı miktarda önceden oluşturma/önceden getirme isteklerini işleyebildiğinden, site sahipleri ve geliştiriciler şunları yapmalıdır:

• Logo bağlantıları, çıkış yapılan sayfalar, başarılı satın alma sayfaları, sepete ekleme sayfaları vb. rotaları hariç tutun .

• Ana harekete geçirici mesaj (CTA) düğmeleri gibi rotalara öncelik verin , daha fazla sayfa öğrenin, sonraki mantıksal gezinmeler vb.

Alternatif olarak, verileri analiz etme ve tahmin etme gücünü Navigasyon Yapay Zekası gibi otomatik bir araca devredebilirsiniz.

SSS

Arka planda önceden oluşturulan/önceden getirilen sayfalar analizlerde gösteriliyor mu?

Kullanıcı söz konusu sayfaya ulaşmadıysa bu, örneğin Google Analytics gibi analizlere dahil edilmez. Spekülasyon Kuralları API'sinin henüz başlangıç ​​aşamasında olduğunu ve kullandığınız analiz sağlayıcılarına bağlı olarak bu verileri bir şekilde eklemeye karar verebileceklerini unutmayın. Şimdilik, önceden oluşturulan/önceden getirilen sayfalar yalnızca kullanıcının gerçekten bu sayfalara ulaşması durumunda Chrome Kullanıcı Deneyimi Raporu'na (CrUX) dahil edilir.

Tarayıcı, önceden oluşturulmuş sayfaların önbelleğe alınmış sürümlerini ne kadar süreyle saklar?

Geliştiricilerin süre üzerinde kontrolü yoktur. Ancak Chrome, kullanıcı tarafından seçilmeyen, önceden oluşturulmuş sayfaların önbelleğe alınmış tüm sürümlerini HTTP önbelleğinde saklar. Bu şekilde, kullanıcı daha sonra bunlara geri dönmeye karar verirse yüklenmeleri daha hızlı kalır.

Kullanıcı eylemlerini inceleyen Navigasyon Yapay Zekası'ndaki yapay zeka ne kadar ağır?

Yapay zeka tamamen NitroPack sunucuları tarafından yönetilir ve tarayıcıda yürütülmez. Navigasyon AI JavaScript'i, tüm AI modelini çalıştırmak yerine yalnızca NitroPack sunucularından gelen hazır sonuçları kullanır.

Anında yükleme teknikleri, kullanıcıların açıldığı ilk sayfa (ana sayfa gibi) için mi yoksa yalnızca sonraki göz atma işlemleri için mi işe yarar?

Web sitesinin ilk kez ziyaret edilmesi durumunda önceden oluşturma/önceden getirme teknikleri geçerli değildir. Ancak Chrome URL çubuğu, sıklıkla aradığımız URL'leri tanıyarak ve bunları önceden yükleyerek önceden oluşturmayı kullanmaya başlıyor

Örneğin, www.goo yazmak büyük olasılıkla www.google.com sayfasının arka planda yüklenmesini tetikleyecektir (tabii ki bireysel kullanıcı arama etkinliğine bağlı olarak).

Şu anda, Google arama motoru çubuğunun önceden oluşturmayı nasıl içerebileceğine dair araştırmalar da var.