Kolayca kullanılabilen teknolojilere giriş.
Sayfa yükleme hızı neden önemlidir?
Çoğu kullanıcı, yavaş sayfa yüklemelerini düzenli olarak ana hayal kırıklığı kaynağı olarak tanımlıyor (Google tarafından gerçekleştirilen bir kullanıcı araştırmasında% 54). Bu nedenle, sayfaların daha hızlı yüklenmesinin bir işletme için daha iyi sonuçlar sağlamasına şaşırmamak lazım. Gerçekten de, ziyaretçiler bir web sitesiyle etkileşime girmeden önce bile hayal kırıklığına uğrarsa, sitenin değerini anlayacak kadar uzun süre sitede kalmaları pek olası değildir. 254 e-ticaret, finans ve seyahat sitesinde yapılan başka bir Google araştırması, iki saniye veya daha kısa sürede yüklenen sitelerin dönüşüm oranlarının% 15 daha yüksek olduğunu gösterdi.
Largest Contentful Paint'i (LCP) hızlandırma
Ne demişler? Ölçmediğiniz bir şeyi geliştiremezsiniz. Web'deki kullanıcı deneyimleri için Önemli Web Verileri'nin, kullanıcı deneyiminin temel yönlerini yakalamak amacıyla tasarlanmış kullanıcı merkezli sağlam metriklerden oluşan bir grup olduğuna inanıyoruz. Özellikle Largest Contentful Paint (LCP), kullanıcının gördüğü en büyük metin veya resim bloğunu görüntülemek için geçen süreyi bildirerek sayfalarınızın yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfa ilk yüklenmeye başladıktan sonraki 2, 5 saniye içinde (yani iyi LCP eşiği) gerçekleşmelidir.
Tipik bir sayfanın LCP'sine nelerin katkıda bulunduğunu inceleyelim.
Bir kullanıcı bir sayfayı ziyaret ettiğinde, tarayıcı sunucudan HTML'yi ister. Sunucu, HTML ile yanıt verir. Bu da tarayıcıya, CSS, JavaScript, yazı tipleri ve resimler de dahil olmak üzere bir sonraki getirilecek öğe konusunda daha fazla ipucu verir. Bu yanıtlar geri geldiğinde, tarayıcının da bunları değerlendirmek için biraz çalışma yapması ve sonunda sayfadaki bileşenleri düzenleyip boyaması gerekir. Ancak, zamanın büyük kısmı bu paketlerin cihazdan sunucuya gitmesini ve ardından cihaza geri dönmesini beklemekle geçer. Aslında verilerimiz (Android için Chrome; ortanca değer) genellikle kullanıcının görebildiği gecikmenin yaklaşık% 40'ının, ilk baytın sunucudan geri gelmesini bekleyen tarayıcı tarafından harcandığını göstermektedir.
Önceden getirmenin gücü
Bu dosyaların tümü önceden getirilebilirse (yani, kullanıcı sayfayı ziyaret etmeden önce dosyalar getirilebilirse) bu işlem, sayfayı görüntülemeden önce yalnızca birkaç görev bırakacak, yani değerlendirme, düzeni hesaplama ve boyama gibi çok büyük bir hız artışı sağlayacaktır.
Daha önce paylaşılan veriler göz önüne alındığında, yalnızca ana kaynak önceden getirilebilir ve sayfa yükleme hızı önemli ölçüde hızlı olabilir. Aynı sitede, bu tür teknikler rel=prefetch gibi temel öğelerle kolayca kullanılabilir. Ancak, siteler arası senaryolar söz konusu olduğunda bu süreç o kadar kolay değildir.
Siteler arası gezinme
Önceden getirme uzun bir süredir kullanılıyor olsa da, kullanıcı başka bir sitedeyken bir siteden sayfalar önceden getirilirken dikkate alınması gereken bir diğer konu daha var.
Bir yönlendiren sitenin tarayıcıya farklı bir sitedeki sayfayı önceden getirmesi talimatını verdiğini varsayalım. Kullanıcı önceden getirilmiş bu sayfanın bağlantısını tıkladığında, çok daha hızlı bir sayfa yüklemesi ile daha iyi bir kullanıcı deneyimi yaşayacağı bellidir. Ancak, kullanıcı bu bağlantıyı hiç tıklamazsa ne olur? Bağlantılı bir web sitesinin, yönlendiren sitede bir konuya göz atarken o konuyla ilgileniyor olabileceğini öğrenmesini beklemezler. Yine de, önceden getirme istekleri kullanıcının IP adresini ve varsa çerezleri diğer normal isteklerde olduğu gibi taşıyacağı için bu büyük bir risk teşkil eder.
Çözümler
Gizlilik açısından güvenli siteler arası önceden getirme özelliğini etkinleştirmek için son 3 yılda iki çözüm geliştirdik: Özel Önceden Getirme Proxy'si ve İmzalı Takaslar (SXG). Kaynaklar arası önceden getirmenin önemli hız avantajları sağladığını doğrulamak için büyük ölçekli bir deneme de yaptık. Somut olarak, Google'ın kullanıcının bir sonraki gezinmesi için ana HTML'yi güvenli bir şekilde önceden getirebildiği durumlara baktığımızda, "iyi" LCP'ye sahip sayfa yüklemelerinin oranının yüzde 14 oranında arttığını gördük.
Göz önünde bulundurulması gereken önemli noktalar
Özel Önceden Getirme Proxy'si ve İmzalı Değişim aynı kullanım alanını çözse de her teknoloji farklı bir ödünleşim grubu sunar. Dolayısıyla en iyi seçim aslında sitenizin özel ihtiyaçlarına bağlıdır. Aşağıdaki bölümlerde, siteler arası önceden getirmenin etkinleştirilmesi ve mevcut iki teknoloji arasından seçim yapılması ile ilgili iki temel noktanın açıklandığı, söz konusu dengeleme ile ilgili bir fikir edinebilirsiniz. Her teknolojiye ilişkin ayrıntılı makalelerde daha fazla ayrıntı bulabilirsiniz.
Tekrar gelen ziyaretçiler
Siteler arası önceden getirme, sitenizi ilk kez ziyaret eden kullanıcılar için kolayca etkinleştirilebilir. Tekrar gelen ziyaretçiler için bu, sitenizde ne kadar kişiselleştirme yapıldığına bağlıdır. Bu, siteler arası önceden getirme isteklerinin gizlilik nedeniyle çerez içeremeyeceği gerçeğine dayanır.
- İlk kez gelen ziyaretçiler için başlangıçta herhangi bir çerez olmadığı için bu kısıtlama herhangi bir soruna yol açmaz. Sonuç olarak, sitenizde herhangi bir değişiklik yapmadan bu kullanıcılar için siteler arası önceden getirme özelliğini etkinleştirebilirsiniz.
- Tekrar gelen ziyaretçiler için siteler arası önceden getirme özelliğini etkinleştirmek istiyorsanız ve siteniz çerezlere göre kişiselleştirildiyse kullanıcı gezindikten sonra bu kişiselleştirilmiş öğeleri geç yüklemeniz gerekir. Kullanıcı açık bir şekilde web sitenizi ziyaret etmeyi seçtiğinden, gezinme sırasında çerezlere ilişkin kısıtlamaya artık gerek kalmadığı için bu yöntem işe yarar. Dolayısıyla siteniz gezinme sırasında her zamanki gibi çerezlerine erişebilir. Somut rehberlik için geç yüklemeyle ilgili en iyi uygulamaları inceleyin.
- Şu anda kişiselleştirmeyi doğrudan HTML'nizde kodluyorsanız çerezler mevcut olduğunda da bunu yapmaya devam edebilir ve önceden getirilen sayfalar için yedek strateji olarak geç yüklemeyi kullanabilirsiniz.
- Siteniz çerezlere göre kişiselleştirilmediyse veya kişiselleştirme çok önemli değilse tekrar gelen ziyaretçilere, ilk kez gelen ziyaretçilere olduğu gibi aynı içeriği sunmayı seçebilirsiniz.
Şu anda Özel Önceden Getirme Proxy'si, yalnızca ilk kez gelen ziyaretçiler (çerezsiz bağlantılar) için etkindir ve kapsamı tekrar ziyaret eden kullanıcıları (çerezli bağlantılar) kapsayacak şekilde genişletmek için çalışmaya devam etmektedir. Diğer yandan, İmzalı Takas hem ilk kez gelen hem de tekrar gelen ziyaretçiler için siteler arası önceden getirme işlemini zaten desteklemektedir (yukarıda açıklanan yaklaşımlarla).
Önceden getirmeden ek veri sunma
Siteler arası önceden getirme özelliğinin etkinleştirilmesi, fazladan veri sunulmasına neden olabilir. Gerçekten de, yönlendirenin sayfanızı önceden getirmesine rağmen kullanıcı bağlantıyı tıklamazsa, bu sizin için ek trafik anlamına gelir.
- Bu sorunu azaltmak amacıyla, yönlendirenden ön getirme isteklerinde daha az agresif davranması istenebilir. Benzer şekilde, yönlendiren veya tarayıcı, nispeten hafif ancak kritik kaynaklara (ör. ana kaynak, kritik CSS veya JavaScript alt kaynakları) odaklanarak bunu hafifletebilir. Bu temel olarak, hız avantajları ile ekstra trafik arasında bir denge sağlar.
- Alternatif olarak, ek önbelleğe almayı etkinleştirerek bu trafikten kurtulabilirsiniz (daha fazla ayrıntı için İmzalı Değişim ile ilgili bu bölüme bakın). Bunun dezavantajı, içeriği çok uzun süre önbelleğe almanın kullanıcılarınıza eski bilgilerin gösterilmesine yol açabilmesidir. Bu, temel olarak ekstra veri sunumu ile içerik güncelliği arasında bir dengedir.
Bu konuda en iyi kararı vermek için, kendinize, sitenizin maksimum yenileme ile minimum ek istek arasındaki kayan ölçekte nerede olduğunu sorun. Bu sorunun cevabı sonuç olarak işletmenizin ve kullanıcılarınızın özel ihtiyaçlarına bağlıdır.
Başlarken
Sitelerin LCP'lerini hemen iyileştirmeye başlayabilmesi için bu teknolojiler Google Arama'ya entegre edilmiştir. Bu özelliğin, diğer popüler yönlendirenleri de izlemeye teşvik edeceğini ve web'in her alanda çok daha hızlı hale getirilmesine yardımcı olacağını umuyoruz!
Bu teknolojiler aynı kullanım alanını çözse de, daha önce açıklanan temel hususlarda farklı dengeler sunar. Hatta bir teknolojiyle başlayıp ihtiyaçlarınız ya da elde ettiğiniz faydaların karşılığı değiştikçe diğerine geçiş yapabilirsiniz. Durumunuza en uygun teknolojinin hangisi olduğunu öğrenmek için bu ayrıntılı incelemelere göz atın: