Öncelikli İpuçları ve getirme önceliği ile Kaynak Yüklemeyi Hızlandırın

En kritik kaynaklarınız ne kadar hızlı yükleniyor?

Bu kesin soru, iğneler ve iğneler üzerinde web sitesi sahiplerine (ve deneyimli web uzmanlarına) sahiptir. Ve öyle olur ki, web sitenizi ilk milisaniyede yapan veya bozan şeydir.

Kaynak yüklemeyi optimize etmeye gelince, iki seçeneğiniz vardır:

1. Kaynakları en uygun sırayla indirmek ve getirmek için tamamen tarayıcıların mekanizmalarına güvenin.
2. Kaynak ipuçlarını uygulayarak onlara yardım etmeye çalışın.

Ne yazık ki, modern tarayıcılar ne kadar iyi olursa olsun, her site/uygulama kurulum ve bağlam açısından farklılık gösterir. Kaynak önceliklerini atamada oldukça iyi olsalar da, bazı durumlarda bu yeterli değildir.

Ne yazık ki, kaynak ipuçları, kaynak önceliklendirme üzerinde sınırlı bir etki sağlar.

Neyse ki, web performansı araç kutunuza ekleyebileceğiniz yeni bir ipucu var – Öncelikli İpuçları.

Ve bu makalede, hakkında daha fazla bilgi edineceksiniz:

• Öncelikli İpuçları Nelerdir;
• Bunları ne zaman kullanmalı;
• Fetchpriority ile nasıl uygulanır;
• Bunları sitenizde nasıl test edebilirsiniz.

Hadi başlayalım!

Öncelikli İpuçları nedir?

Öncelikli İpuçları, web sitesi sahiplerinin ve geliştiricilerin, tarayıcılar bunları yüklediğinde kaynakların önceliğini (örn. resimler, yazı tipleri, CSS, komut dosyaları ve iframe'ler) belirtmelerine olanak tanıyan bir sinyaldir.

Tarayıcı, bir web sayfası oluşturma sürecinde her türlü kaynağı indirmek zorundadır. Öncelikli bir kaynak olarak, önce HTML belgesini ister ve indirir.

Ancak bir tarayıcı daha sonra neyin yükleneceğini nasıl belirler?

Tarayıcıların her kaynak türü için önceden belirlenmiş bir dizi önceliği vardır:

Bu varsayılan öncelikler genellikle oldukça iyi çalışır ve bu da iyi web performansı sağlar.

Bununla birlikte, Addy Osmani'nin Priority ipuçları hakkındaki makalesinde bahsettiği gibi, tarayıcılar daha sonra ne getirileceği konusunda oldukça iyi eğitimli tahminler yapabilir.

Ama projenizi sizin kadar iyi bilmiyorlar.

Bu yüzden biraz ince ayar gerekli olabilir:

"Chrome gibi tarayıcılar, görünüm alanında olup olmadıkları gibi sinyallere dayalı olarak uygun önceliğe sahip kaynakları getirmeye çalışmak için buluşsal yöntemlere sahiptir. Bununla birlikte, Öncelik İpuçları olmadan, Chrome yalnızca bir kez düzenlendiğinde görünüm içi görüntüler için önceliği artırabilir. tamamlandı. Bu genellikle çok geç olur ve bu noktada diğer her şeyle rekabet edebilir. İpuçlarını kullanmayı düşünmenin bir başka nedeni de, bir sayfa yazarı olarak, kullanıcılarınızın ilk önce neyi görmesi için en önemli olduğunu bilmeniz ve tarayıcıyı, kullanım durumunuz için optimize edebilmesi için bilgilendirebilir."

Önceden, yapabileceğiniz tek şey ya ön yükleme ya da ön bağlantı kullanmaktı.

Ön yükleme , tarayıcıların uyması gereken zorunlu bir yönerge olmasına rağmen, bazı durumlarda önceden yüklenmiş kaynak yine de düşük bir önceliğe sahip olabilir.

Örneğin, önceden yüklenmiş bir Largest Contentful Paint (LCP) görüntüsü düşük önceliğe sahip olabilir ve diğer yüksek öncelikli kaynaklar tarafından geri itilebilir. Bu gibi durumlarda, Öncelikli İpuçları önyüklemeyi mükemmel bir şekilde tamamlayabilir ve kaynakların ne kadar sürede yükleneceğine yardımcı olabilir.

Pat Meenan'ın Chrome'daki Öncelikli İpuçları hakkında konuştuğu ve hatta bunları LCP için "hile kodu" olarak adlandırdığı Öncelikli İpuçları hakkında bir web semineri:

Bu, Öncelikli İpuçlarının gücünün en iyi örneğidir.

Şimdi, web performans stratejinizde Öncelikli İpuçlarını ne zaman uygulamanız gerektiğini görelim.

Öncelikli İpuçları Ne Zaman Kullanılır?

Google'a göre Öncelikli İpuçlarının yardımcı olabileceği 5 ana senaryo vardır:

1. Ekranın üst kısmında birkaç resminiz var, ancak hepsinin aynı önceliğe sahip olması gerekmiyor. Örneğin, bir görüntü karuselinde, yalnızca ilk görünen görüntünün diğerlerine kıyasla daha yüksek bir önceliğe ihtiyacı vardır.
   
2. Vitrin içindeki kahraman görüntüleri düşük bir öncelikle başlar. Düzen tamamlandıktan sonra Chrome, bunların 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.

Not: Komut dosyalarını zaman uyumsuz veya erteleme olarak bildirmek, tarayıcıya bunları zaman uyumsuz olarak yüklemesini söyler. Ancak, yukarıdaki şekilde görüldüğü gibi, bu komut dosyalarına da "düşük" bir öncelik atanmıştır. Özellikle kullanıcı deneyimi için kritik olan tüm komut dosyaları için zaman uyumsuz indirme sağlarken önceliklerini artırmak isteyebilirsiniz.

Kaynakları veya verileri eşzamansız olarak getirmek için JavaScript fetch() API'sini kullanabilirsiniz. Getirmeye, tarayıcı tarafından yüksek bir öncelik atanır. Tüm getirmelerinizin yüksek öncelikli olarak yürütülmesini istemediğiniz ve bunun yerine farklı öncelikli ipuçlarını kullanmayı tercih ettiğiniz durumlar olabilir. Bu, arka planda API çağrıları çalıştırırken ve bunları otomatik tamamlamada olduğu gibi kullanıcı girişine yanıt veren API çağrılarıyla karıştırırken yardımcı olabilir. Arka plan API çağrıları düşük öncelikli olarak etiketlenebilir ve etkileşimli API çağrıları yüksek öncelikli olarak işaretlenebilir.

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.

Hemen hemen her web sitesi ilk iki senaryonun altına girer. Geri kalan herhangi biri üzerinde çalışmanız gerekip gerekmediğini belirlemek için (HTML/JS) kodunuzu derinlemesine inceleyin veya bir web geliştiricisinden yardım isteyin.

Öncelikli İpuçları Nasıl Uygulanır: fetchpriority Özelliği

Fetchpriority HTML özniteliğini kullanarak Öncelikli İpuçları uygulayabilirsiniz.

Özelliği aşağıdakilerle kullanabilirsiniz:

• bağlantı
• resim
• senaryo
• iframe etiketleri

fetchpriority özelliği şu üç değerden birini kabul eder:

• yüksek: kaynağı kritik olarak gördüğünüzü ve tarayıcının ona öncelik vermesini istediğinizi belirtir.
• düşük: kaynağın daha az önemli olduğunu düşündüğünüzü ve tarayıcının onu önceliksizleştirmesini istediğinizi belirtir.
• auto: bir tercihiniz olmadığında varsayılan bir değerdir ve tarayıcının uygun önceliğe karar vermesine izin verir.

Alternatif olarak, JavaScript Getirme API'sini kullanabilirsiniz:

fetchpriority niteliğini kullanırken akılda tutulması gereken birkaç şey:

• fetchpriority , daha yüksek öncelikli bir kaynağın aynı türdeki diğer (düşük öncelikli) kaynaklardan önce yüklenmesini sağlamaz.
• fetchpriority , yükleme sırasını kontrol etmek için kullanılmamalıdır.
• fetchpriority zorunlu bir yönerge değildir ve tarayıcıyı bir kaynağı getirmeye veya getirmesini engellemeye zorlayamaz. Kaynağı alıp almayacağı tarayıcıya bağlıdır.

Önemli: Kaynak ipuçlarına benzer şekilde, Aşırı kullanım performans iyileştirmelerinden ziyade yavaşlamalara neden olabileceğinden, Öncelikli İpuçları dikkatli kullanılmalıdır.

Öncelikli İpuçları ile Sitenizi Nasıl Test Edebilirsiniz?

Testlerinizi çalıştırmadan önce, Öncelikli İpuçlarının yalnızca Chrome 101 (veya üstü) ve Edge 101 (veya üstü) sürümlerinde kullanılabildiğini bilmelisiniz:

Şimdi eldeki soruya:

En kolay yol bir araç kullanmaktır, böylece kodunuzu manuel olarak değiştirmeniz gerekmez.

Neyse ki, WebPageTest'in Deneyler özelliği, kodunuzu değiştirmeden Öncelikli İpuçları gibi performans özelliklerini test etmenize olanak tanır.

Ancak, WebPageTest'in Deneme özelliği ücretli aboneliklerinin bir parçasıdır, bu nedenle bazı ekstra harcamalar için planlama yapmanız gerekir.

Aksine, teknik becerileriniz varsa, sitenizin kodunu kendi başınıza ince ayar yapabilir ve Öncelikli İpuçlarının etkisini test edebilirsiniz.

Yaptığınız her değişiklikten sonra testler yaptığınızdan emin olun.

Özet

Çok yol kat ettik, işte en önemli noktaların kısa bir özeti:

• Öncelik İpuçları, sitenizin kaynaklarının önceliğini belirtmenize olanak tanır.
• Öncelikli İpuçları, ekranın üst kısmındaki resimlerin, kahraman resimlerin (LCP öğesi), eşzamansız ve ertelenmiş komut dosyalarının, CSS'nin ve yazı tipi dosyalarının yüklenmesini hızlandırmanıza yardımcı olabilir.
• Priority İpuçları, fetchpriority özniteliği aracılığıyla uygulanabilir.
• fetchpriority niteliğini link, img, script ve iframe etiketleriyle birlikte kullanabilirsiniz.
• fetchpriority özelliği şu üç değerden birini kabul eder: yüksek, düşük ve otomatik.
• Dikkat: Aşırı kullanımları hız iyileştirmelerinden ziyade performansın düşmesine yol açabileceğinden, Öncelikli İpuçları dikkatli bir şekilde uygulanmalıdır.
• fetchpriority zorunlu bir yönerge değildir ve tarayıcıyı bir kaynağı getirmeye veya getirmesini engellemeye zorlayamaz. Kaynağı alıp almayacağı tarayıcıya bağlıdır.
• Öncelikli İpuçları, Chrome 101 veya sonraki sürümlerde mevcuttur.

Öncelikli İpuçlarının siteniz üzerindeki etkisini ölçmek için her değişiklikten sonra testler yapın.

Popüler test araçları:

• Sayfa Hızı Analizleri
• GTMetrix
• Web Sayfası Testi
• deniz feneri
• Pingdom