Google CWV, geliştiricileri ve yayıncıları, Önemli Web Verilerini ve kullanıcı deneyimini iyileştirmeye yardımcı olabilecek yeni (ve deneysel) “önem” önceliği ipucu özelliğini kullanmaya teşvik eden bir makale yayınladı . Chrome tarayıcı ekibi, Priority İpucu HTML özniteliği ile yüklenen bir arka plan görüntüsünün, yalnızca o görüntüde, indirme süresinde 1,9 saniye tasarruf sağladığı bir örnek paylaştı.
Öncelikli İpuçlarının Çözdüğü Sorun
Yayıncılar, kullanarak web sayfası kaynaklarının keşfini hızlandırabilir ve ayrıca “ async ” ve “ defer ” özniteliklerini kullanarak komut dosyalarının nasıl ve ne zaman indirileceğini ve yürütüleceğini yönlendirebilir . Ancak yayıncılar, tarayıcıya hangi kaynakların önemli olduğunu ve hangilerinin önemsiz olduğunu söylemek için bir sinyal gönderemezler. Google, Öncelikli İpuçları’nın çözdüğü sorunlara ilişkin şu örnekleri sağlar:
“Görüntü alanı içindeki kahraman görüntüleri düşük bir öncelikle başlar. Düzen tamamlandıktan sonra Chrome, görünüm alanında olduklarını keşfeder ve önceliklerini artırır (maalesef geliştirme araçları yalnızca son önceliği gösterir – WebPageTest her ikisini de gösterir). Bu genellikle görüntünün yüklenmesine önemli bir gecikme ekler. İşaretlemede öncelik ipucunun sağlanması, görüntünün yüksek bir öncelikle başlamasına ve çok daha erken yüklenmeye başlamasına olanak tanır. Tarayıcı, CSS’ye ve yazı tiplerine yüksek bir öncelik atar, ancak bu tür kaynakların tümü LCP için eşit derecede önemli veya gerekli olmayabilir . Bu kaynaklardan bazılarının önceliğini azaltmak için öncelik ipuçlarını kullanabilirsiniz.”
Önem Özelliği Kaynak İpucu
HTML’de bir web sayfasını oluşturan bölümlere Öğeler denir. Bu, div, başlıklar, paragraf etiketleri, resim etiketleri, bağlantı öğesi vb. HTML etiketi olarak adlandırılan her şeyin aslında bir HTML öğesi olduğundan oldukça eminim , bu bir öğenin ne olduğunu hatırlamanın kolay bir yolu. Her öğe, Nitelik denen şeyle değiştirilebilir. nofollow özelliğini hatırlıyor musunuz? Nofollow nitelik değiştirir öğesi. Önem özelliği, web tarayıcısına bir web sayfası öğesinin önemli olup olmadığı veya yalnızca tarayıcının karar vermesine izin verme konusunda bir ipucu vererek web sayfası öğelerini değiştirir. Önem niteliğine Öncelik İpucu denir. Nitelik, tarayıcıya belirli bir öğenin önemli olduğuna (veya önemli olmadığına) ve ona daha yüksek (veya daha düşük) bir öncelik vermesine dair bir ipucu verir. “ önem ” özniteliğinin iletebileceği değerler şunlardır:
- Yüksek
- Düşük
- Oto
Önem özniteliği kaynak ipucu aşağıdaki öğeler için geçerlidir:
- bağlantı
- resim
- senaryo
- iframe
Kaynak İpuçları Temel Web Verilerini Nasıl İyileştirir?
Tarayıcılar, kaynakları indirmek için öncelik seviyelerini otomatik olarak hesaplar. “Ön yükleme” özelliği gibi mevcut araçlar, örneğin yazı tipleri ve resimler gibi önemli kaynakların indirilmesi için kaynak ipuçları vermeye yardımcı olur. Diğer kaynak ipuçları zaman uyumsuz ve ertelemedir. Bunların tümü, toplam belgenin indirilmesini hızlandırmaya ve belgeyi daha hızlı görüntülenebilir ve etkileşimli hale getirmeye yardımcı olur. Ancak tarayıcının hala hangisinin daha önemli olduğuna karar vermesi gerekiyor. Web.dev’e göre, önceden yüklenmiş bir resim indirilecek ancak yine de tarayıcı tarafından düşük bir öncelik atayacak ve gecikecektir. Açıklama şu:
“Önceden yüklendiğinde düşük önceliğe sahip olacak bir En Büyük Contentful Paint görüntüsü alın. Diğer erken düşük öncelikli kaynaklar tarafından geri itilirse, Öncelikli İpuçları kullanmak görüntünün ne kadar kısa sürede yükleneceği konusunda yine de yardımcı olabilir.”
Önem özniteliğinin nasıl yararlı olduğuna bir örnek, bir web sayfasının görünümün (tarayıcının site ziyaretçisinin şu anda gördüğü kısmı) üst kısmında bir resim döngüsüne sahip olmasıdır. Döngü beş görüntü içeriyorsa, tümü önceden yüklenebilir. Ancak birincisine ” yüksek ” önem niteliği atanırsa ve diğerlerine ” düşük ” özniteliği verilirse , tarayıcı artık ilk resme yüksek öncelik vermeyi bileceği için web sayfası daha hızlı görüntülenecektir. Google tarafından verilen bir diğer örnek ise web sayfasının üst kısmındaki öne çıkan görseldir. Tarayıcı, görüntüye düşük bir öncelik verir ve yalnızca web sayfası düzeninin geri kalanı tamamlandıktan sonra oluşturur. Google şöyle açıklıyor:
“İşaretlemede öncelik ipucunun sağlanması, görüntünün yüksek bir öncelikle başlamasına ve çok daha erken yüklenmeye başlamasına olanak tanır. CSS arka planları olarak dahil edilen LCP görüntülerinin erken keşfedilmesi için önyüklemenin hala gerekli olduğunu ve önyüklemeye önem=’high’ eklenerek öncelikli ipuçlarıyla birleştirilebileceğini unutmayın, aksi takdirde görüntüler için varsayılan “Düşük” öncelikle başlayacaktır. ”
Aynı şey, zaman uyumsuz veya erteleme olarak indirilen komut dosyalarında da olur, her ikisine de düşük öncelik atanır. Önemli komut dosyalarına Öncelikli İpucu ekleyerek, tarayıcı sayfayı daha hızlı oluşturabilecek ve daha iyi bir kullanıcı deneyimi sunabilecektir.
Site Ziyaretçileri Daha Hızlı Yüklemeyi Deneyimleyecek
Öncelikli İpuçları, Google’ın Origin Denemesi dediği süreçten geçiyor. Chrome iki yıl önce bir deneme yaptı ancak fazla ilgi görmedi. Chrome bunu, 21 Kasım 2021’de yayınlanması planlanan Chrome 96’da kullanıma sunuyor. Chrome’un test sürümü olan Chrome Canary’de öncelikli ipuçları zaten mevcut . Bu özellikler, adres çubuğuna aşağıdakini yazarak mevcut Chrome sürümlerinde etkinleştirilebilir:
chrome://flags/
ve ardından aşağı kaydırıp şu etiketli bölümü etkinleştirin: Deneysel Web Platformu özellikleri
Kaynak Öncelik Düzeyi Nasıl İncelenir
Kaynakların öncelik seviyeleri, herhangi bir Chrome sürümünde, Ağ sekmesi altındaki Geliştirme Araçları’nda incelenmek üzere mevcuttur. Sağ üst köşedeki üç noktayı (üç nokta menüsü) tıklayın, > Diğer araçlar > Geliştirici araçları (ardından Ağ sekmesini seçin). Buradan bir web sayfası yüklersiniz, sütunlardan birine sağ tıklayın (Zaman veya Şelale gibi) ve Öncelik’i seçin ve öncelik seviyelerini görüntüleyebilirsiniz. Öncelikli İpuçları denemesi için kaydolduğunuzda, kaynaklar için güncellenmiş önceliği ve ayrıca kullanıma sunulduğunda Chrome 96 sürümünde görüntülemek için Chrome Canary’yi kullanabilirsiniz.
Bu denemeye katıldığınızda, site ziyaretçinizin tarayıcılarına öncelikli ipuçları gösterilecek ve Önemli Web Verilerinde yapılan iyileştirmeler bundan yansıtılacaktır. Ancak, bunların bir direktif değil, öncelikli ipuçları olduğuna dikkat etmek önemlidir. Bu, tarayıcının öncelikli ipuçlarını kesinlikle takip etmesi gerekmediği anlamına gelir. Tarayıcı ipuçlarını görmezden gelmeyi ve kendi sırasını atamayı ve bilgisayarlamayı seçebilir. Bu, yukarıda açıklandığı gibi Ağ sekmesi altındaki Chrome Geliştirme Araçları’nda kontrol edilebilir.
