Ön Yükleme, Ön Bağlantı, Ön Getirme: Kaynak İpuçları ile Sitenizin Performansını İyileştirin

Modern web tarayıcıları, web sitenizin genel performansını iyileştirmek için her türlü farklı tekniği kullanır - en önemli kaynaklara öncelik vermekten ve bunları ilk önce getirmekten, kullanıcının bir sonraki hangi sayfayı ziyaret edeceğini tahmin etmeye kadar.

Ancak, sitenizin performansıyla ilgili tüm kararları almak için olabilecekleri kadar gelişmiş tarayıcılara güvenmemelisiniz.

Bir web sitesi sahibi olarak, hangi kaynakların en önemli olduğunu ve sitenizdeki gerçek kullanıcı yolculuğunun ne olduğunu bilen kişi sizsiniz. Web sitenizin genel performansını, algılanan hızını ve kullanıcı deneyimini iyileştirmek için bu bilgiyi tarayıcıların sayfalarınızı daha hızlı yüklemesine yardımcı olmak için kullanabilirsiniz.

Kaynak ipuçlarının geldiği yer burasıdır.

İlerleyen satırlarda bunlara ve avantajlarından en iyi şekilde nasıl yararlanılacağına göz atacağız.

Hadi buna dalalım.

Tarayıcılar Nasıl Çalışır (Özetle)

Kaynak ipuçlarını ve bunların uygulanabilir olduğu yerleri daha iyi anlamak için tarayıcıların içeriği nasıl yüklediğine hızlıca bir göz atalım.

Bir tarayıcının bir sayfayı yükleme sürecini üç adıma bölebiliriz:

• Bağlantı kuruluyor;
• Kodun indirilmesi, ayrıştırılması ve işlenmesi;
• Sayfayı interaktif hale getirmek;

İlk aşamada, tarayıcının kaynakları indirebilmesi için sunucuyla bağlantı kurması gerekir. Buna etki alanı adının aranması ve bir IP adresine çözümlenmesi, sunucuyla bağlantı kurulması ve bağlantının güvenlik için şifrelenmesi dahildir.

Her şey yapıldıktan sonra, tarayıcı bilgileri indirme ve ayrıştırma, Belge Nesne Modeli (DOM) ve CSS Nesne Modeli (CSSOM) oluşturma ve ardından içeriği işleme ile devam edebilir.

Son kısım ise sayfayı interaktif hale getirmektir. Yukarıda bahsedilen işlemlerin tümü ana iş parçacığında gerçekleşir. Bu nedenle, tarayıcının ana iş parçacığı sayfayı ayrıştırma, oluşturma ve boyama ile tamamlandıktan sonra, sayfayı kaydırma, dokunma ve diğer etkileşimler için kullanılabilir hale getirmek için ertelenmiş JavaScript dosyalarına bakmanın zamanı geldi.

Özetle, her sayfa yüklendiğinde perde arkası işlem budur.

Kaynak ipuçlarını entegre ederek bu aşamaların her birini nasıl olumlu yönde etkileyebileceğinizi görelim.

Kaynak İpuçları: Önceden Getirme, Ön Bağlantı, Ön Yükleme

Adından da anlaşılacağı gibi, kaynak ipuçları, tarayıcıya belirli kaynakları veya web sayfalarını nasıl kullanması gerektiğini söyleyen ipuçları veya talimatlardır. Başka bir deyişle, bu talimat seti, alınması ve işlenmesi gereken kökenlere veya kaynaklara öncelik vermede tarayıcıya yardımcı olmanıza olanak tanır.

Tüm kaynak ipuçları, HTML belgelerinizin başında bulacağınız bağlantı öğesinin rel niteliğini kullanır.

Bu HTML kod parçacıklarını web sitenize entegre etmek, tarayıcının seçilen dosyaları, tarayıcının normal sayfa yükleme sürecinde bulmasına kıyasla daha erken yüklemeye başlamasına olanak tanır.

Artık temel bilgiler geride kaldığına göre, burada bulunduğunuz kısma geçelim - kaynak ipuçlarına, faydalarına ve ne zaman kullanılacağına genel bakış.

önceden getir

link rel=prefetch , tarayıcının daha sonra gerekebilecek kaynakları almasına ve bunları tarayıcının önbelleğinde saklamasına olanak tanıyan düşük öncelikli bir kaynak ipucudur.

Önceden getirme çok düşük bir öncelik ayarladığından , yüksek öneme sahip dosyalar için bu ipucunu kullanmayın .

Harika kullanım örneklerinden biri, sonraki sayfaların yükleme süresini iyileştirmek için önceden getirmeyi kullanmaktır. Örneğin, bir kullanıcının kimlik doğrulaması sırasında prefetch yönergesini uygulayabilirsiniz. Bu şekilde, bir sonraki görecekleri sayfa için gereken kaynakları önceden yüklemek için kimlik bilgilerini girmeleri için geçen süreden yararlanabilirsiniz.

Ziyaretçilerinizin sitenizdeki adımlarını tahmin ederek ve kaynakları önceden getirerek, İlk İçerikli Boyama ve Etkileşim Süresi gibi metrikleri iyileştirebilirsiniz. Netflix'in yaptığı ve Etkileşim Süresini %30 azaltan bir şey.

Bu noktaya kadar bahsettiğimiz her şey, bağlantı önceden getirme olarak da bilinen önceden getirme ile ilgilidir. Ancak eşit derecede önemli olan iki ön yükleme türü daha vardır ve şunu belirtmemiz gerekir:

1. DNS Önceden Getirme
Tarayıcının, ana bilgisayara (başlangıç ​​sunucusu) bağlanmadan önce bir ana bilgisayar adını (URL) bir IP adresine dönüştürmek için bir DNS araması yapması gerekir.

Bu genellikle yalnızca milisaniye sürse de, bir web sitesi çoğu web sitesinin yaptığı gibi üçüncü taraf bir alan adından dosya yüklerse, tarayıcının her alan için bir DNS araması yapması gerekir. Bazı siteler (örneğin haber siteleri) çok fazla dış kaynak kullanır, bu da sayfa başına düzinelerce DNS araması gerekebileceği anlamına gelir.

Bu durumlarda, dns-prefetch ipucunu kullanmak, talimat tarayıcıya bu işlemi hemen başlatmasını söylediği için, yükleme işleminde daha sonra ihtiyaç keşfedildiği için değil, birkaç milisaniye kazandırabilir.

Web Almanac 2021'de önerildiği gibi, optimal sonuçlar için dns-prefetch ile preconnect ipucunu birleştirmek iyi bir uygulamadır. Nedenini preconnect hakkında konuştuğumuz bölümde görebilirsiniz.

2. Ön işleme
Önceden oluşturma, kullanıcının bir sonraki adımda gezinebileceği kaynakları optimize etmesi bakımından önceden getirmeye çok benzer. Aradaki fark, önceden oluşturmanın aslında belirli kaynaklar yerine tüm sayfayı oluşturmasıdır.

ön bağlantı

dns-prefetch gibi, preconnect yönergesi, sunucuya bir ilk istek göndermeden önce tarayıcının erken bağlantılar kurmasına yardımcı olur.

Ancak, ön bağlantı ipucu bir adım daha ileri götürür. DNS aramalarını gerçekleştirirken, TLS görüşmelerini ve TCP el sıkışmalarını da içerir. Bu da gidiş-dönüş gecikmesini ortadan kaldırır ve daha da fazla zaman kazandırır.

Ama işte soru geliyor:

Preconnect , dns-prefetch'in yaptığı her şeyi yapıyorsa ve daha fazlasını yapıyorsa, neden ilk etapta dns-prefetch kullanayım ?

Çoğu durumda, ön bağlantı, dns-prefetch için tercih edilen seçenektir, ancak sorun, ön bağlantının bazı tarayıcılar tarafından desteklenmemesidir:

Kaynak: caniuse.com

İşin iyi yanı, bunlardan en iyi şekilde yararlanmak için bunları birlikte kullanabilmenizdir. dns-prefetch'e geri dönüşle onu destekleyen tarayıcılarda ön bağlantıdan yararlanabilirsiniz:

Google'a göre:

2019'da Chrome, önemli kaynaklara önceden bağlanarak Etkileşim Süresini neredeyse 1 saniye iyileştirmeyi başardı.

ön yükleme

Preload direktifinin nasıl çalıştığını açıklamadan önce bir şeyi netleştirmemiz gerekiyor.

Ön yüklemeden düzenli olarak "Kaynak İpucu" olarak bahsedilse de, öyle değildir. Ön yükleme, bildirimsel bir getirmedir ve tarayıcılar için zorunludur , bu da onu bir ipucu yerine bir komut haline getirir.

Bununla birlikte, ön yükleme , tarayıcıyı bir kaynağı tarayıcının keşfedeceğinden daha erken indirmeye zorlamak için kullanılır, çünkü bu sayfa için çok önemlidir.

Ön yükleme yönergesi en iyi, kritik oluşturma yolunun parçası olan ancak tarayıcı tarafından kolayca keşfedilemeyen kaynaklarda çalışır. Örneğin, yazı tipleri, CSS veya kritik JavaScript.

dns-prefetch ve preconnect ipuçlarından bir diğer fark, yalnızca rel ve href özniteliklerine ihtiyaç duymalarına rağmen, önyüklemenin daha karmaşık olmasıdır. Önceden yüklemek istediğiniz kaynağın içerik türünü belirten as özniteliğini eklemeniz gerekir.

Google'da bir mühendislik müdürü olan Addy Osmani'ye göre, önyükleme zorunlu olduğunda bir as özelliği sağlıyor:

Aşağıda, belirtebileceğiniz değerler olarak tam bir liste verilmiştir:

As özniteliğinin dahil edilmesi, tarayıcının türüne göre önceden getirilen kaynağın önceliğini belirlemesine ve kaynağın önbellekte zaten var olup olmadığını belirlemesine yardımcı olur.

Farklı kaynak türlerinin nasıl önceliklendirildiği hakkında daha fazla bilgi edinmek için Chrome Kaynak Öncelikleri ve Planlama belgesine göz atın.

Yazı tipleri gibi bazı kaynaklar için crossorigin niteliğini de eklemeniz gerekir.

crossorigin özelliği, isteğin modunu bir HTTP CORS İsteği olarak ayarlar. CORS (Çapraz Kaynak Kaynak Paylaşımı), bir sunucunun, bir tarayıcının kaynak yüklemeye izin vermesi gereken, kendisinden başka herhangi bir kaynağı belirtmesine izin veren bir mekanizmadır. Bu makalenin odak noktası olmadığı için bu konuya derinlemesine girmeyeceğiz, ancak burada daha fazla bilgi bulabilirsiniz.

As özniteliğine benzer şekilde, fontları crossorigin olmadan önceden yüklemek iki kez getirecektir. Addy Osmani'nin konuyla ilgili makalesinden başka bir alıntı:

Daha Fazla Kaynak İpuçları, Daha Fazla Sorun

Şimdiye kadarki her şeyi okuyarak, mümkün olduğunca çok kaynak ipucu kullanmanın yalnızca tarayıcıların sayfalarınızı yıldırım hızında yüklemesine yol açacağını düşünmeye başlayabilirsiniz.

Ne yazık ki, durum böyle değil.

Kaynak ipuçlarını entegre ederken göz önünde bulundurmanız gereken bazı aksaklıklar şunlardır:

1. Önceden getirme, veri tüketimini artırabilir

Önceden getirme düşük bir indirme önceliği belirlemesine rağmen, bu zararsız olduğu anlamına gelmez. Kullanımı sitenizdeki veri tüketimini artırabilir, bu da hem sizin (sunucunuzda artan trafik) hem de kullanıcılarınız (gereksiz aşırı kaynak tüketimi) için sorunlar oluşturabilir. Ek olarak, sonunda kullanılmayabilecek fazladan bayt yükleyebilirsiniz. Bu yüzden entegre etmeden önce iki kez düşünün.

2. Prerender, bant genişliği israfına neden olabilir

Tüm sayfaları önceden indirdiğiniz için önceden oluşturma ile kumar önceden getirmeden bile daha büyüktür. Bu, ipucunu kaynak açısından ağır hale getirir ve özellikle mobil cihazlarda bant genişliği israfına neden olabilir. Ve en kötü yanı, kullanıcılar sayfayı talep etmezlerse ipucunun etkisini bile göremeyebilirler.

3. Ön bağlantı, ekstra CPU kullanımına neden olabilir

Ön bağlantı , düşük öncelikli bir ipucu olsa da, web sitenizin performansına zarar verebilir. Kurulan bir bağlantı hızlı bir şekilde kullanılmazsa (Chrome'da 10 saniye içinde), ön bağlantı yönergesi yalnızca ekstra CPU kullanımı ekler ve tarayıcı tarafından otomatik olarak kapatılır. Ek olarak, diğer önemli kaynaklar için bant genişliği ile rekabet edecek olan şifreleme sertifikalarının boyutu yaklaşık 3 KB olduğundan ön bağlantıyı dikkatli kullanmalısınız.

4. Ön yükleme, tarayıcının çözümleyicisi tarafından belirlenen öncelikleri geçersiz kılar

ön yükleme , tarayıcının bir kaynağı hemen indirmesine izin verdiği için güçlü bir talimattır. Bununla birlikte, modern web tarayıcıları kaynaklara öncelik vermede oldukça iyidir, bu nedenle aşırı önyükleme kullanımı olumsuz sonuçlara yol açabilir. Örneğin, eşzamansız bir kaynak URL'si ile eşleşen bir ön yükleme yönergesi eklerseniz, tarayıcı onu daha hızlı getirir, bu nedenle daha hızlı ayrıştırır ve ana iş parçacığını sayfa yüklemesinin çok başında keserek eşzamansız özelliğinizin etkisini geçersiz kılar.

Özet

Bu makalede çok şey anlattık, o yüzden en önemli noktaların kısa bir özetini yapalım:

• dns-prefetch ve preconnect , alan adlarına öncelik vermek için kullanılır (ör. https://example.com).
• önceden getirme ve ön yükleme, kaynakların yüklenmesine öncelik vermek için kullanılır. Önceden getirme , sonraki sayfaların yükleme süresini iyileştirmek için kullanılsa da, önceden yükleme, geçerli sayfa için kritik kaynaklarda en iyi sonucu verir.
• prerender bir sayfanın tamamına başvurur (ör. blog.html).
• prefetch , prerender ve preconnect kaynak ipuçlarıdır ve tarayıcının uygun gördüğü şekilde yürütülürler. Preload yönergesi, tarayıcılar için zorunlu olan bir komuttur.
• preload kullanırken, çift getirmeyi önlemek için as ve crossorigin özniteliklerini sağlamayı unutmayın.
• Kaynak ipuçları düşük öncelikli talimatlar olsa da, sitenizin performansı için hala bir tehdit oluşturuyor. Bunları ölçülü olarak ve yalnızca gerektiğinde kullanın.
• preload , tarayıcının analizörünün önceliklerini geçersiz kılabilen güçlü bir yönergedir. Modern tarayıcıların kaynaklara öncelik vermede oldukça iyi olduğunu unutmayın, bu nedenle önyükleme “ipucunu” idareli kullanın.

İçerik ve varlıkların teslimini hızlandırmak ve sitenizin genel performansını iyileştirmek için kaynak ipuçları hakkında yeni edindiğiniz bilgileri kullanın. Ve her değişiklik yaptığınızda web sitenizi gerçek dünyada (saha verilerine odaklanın) test etmeyi unutmayın.