Bir web sayfasını açtığınızda tarayıcı sunucudan HTML belgesini ister, dokümanın içeriğini ayrıştırır ve başvurulan kaynaklar için ayrı istekler gönderir. Geliştirici olarak, sayfanızın ihtiyaç duyduğu tüm kaynakları ve bunların hangilerinin en önemli olduğunu zaten biliyorsunuz. Bu bilgiyi, kritik kaynakları önceden istemek ve yükleme sürecini hızlandırmak için kullanabilirsiniz. Bu yayında, <link rel="preload"> ile bu hedefe nasıl ulaşabileceğiniz açıklanmaktadır.
Önceden yükleme nasıl çalışır?
Önceden yüklemenin en uygun olduğu kaynak, genellikle tarayıcı tarafından geç keşfedilen kaynaklardır.
@font-face kuralıyla tanımlanmıştır. Tarayıcı, yazı tipi dosyasını yalnızca stil sayfasını indirmeyi ve ayrıştırmayı bitirdikten sonra yükler.Belirli bir kaynağı önceden yükleyerek, tarayıcıya, söz konusu kaynağın geçerli sayfa için önemli olduğundan emin olduğunuz için onu bulmasından daha erken getirmek istediğinizi bildirmiş olursunuz.
Kritik istek zinciri, tarayıcı tarafından öncelik verilen ve getirilen kaynakların sırasını temsil eder. Lighthouse, bu zincirin üçüncü seviyesindeki öğeleri geç keşfedildi olarak tanımlar. Hangi kaynakların önceden yükleneceğini belirlemek için Önemli istekleri önceden yükle denetimini kullanabilirsiniz.
HTML belgenizin başına rel="preload" içeren bir <link> etiketi ekleyerek kaynakları önceden yükleyebilirsiniz:
<link rel="preload" as="script" href="critical.js">
Tarayıcı, önceden yüklenmiş kaynakları önbelleğe alır, böylece gerektiğinde bu kaynaklar hemen kullanılabilir. (Komut dosyalarını yürütmez veya stil sayfalarını uygulamaz.)
preconnect ve prefetch gibi kaynak ipuçları, tarayıcıya uygun şekilde uygulanır. Öte yandan preload, tarayıcı için zorunludur. Modern tarayıcılar, kaynakları önceliklendirme konusunda zaten oldukça iyidir. Bu nedenle, preload ürününü tutumlu bir şekilde kullanmak ve yalnızca en kritik kaynakları önceden yüklemek önemlidir.
Kullanılmayan önceden yüklemeler, load etkinliğinden yaklaşık 3 saniye sonra Chrome'da bir Console uyarısını tetikler.
Kullanım alanları
CSS'de tanımlanan kaynakları önceden yükleme
@font-face kurallarıyla tanımlanan yazı tipleri veya CSS dosyalarında tanımlanan arka plan resimleri, tarayıcı bu CSS dosyalarını indirip ayrıştırana kadar keşfedilmez. Bu kaynakların önceden yüklenmesi, CSS dosyaları indirilmeden önce getirilmesini sağlar.
CSS dosyalarını önceden yükleme
Kritik CSS yaklaşımını kullanıyorsanız CSS'nizi iki bölüme ayırırsınız. Ekranın üst kısmındaki içeriği oluşturmak için gereken kritik CSS, dokümanın <head> içinde satır içidir ve kritik olmayan CSS genellikle JavaScript ile geç yüklenir. Kritik olmayan CSS'leri yüklemeden önce JavaScript'in çalışmasını beklemek, kullanıcılar sayfayı kaydırdığında oluşturmada gecikmelere neden olabilir. Bu nedenle, indirme işlemini daha erken başlatmak için <link rel="preload"> kullanılması önerilir.
JavaScript dosyalarını önceden yükleme
Tarayıcılar önceden yüklenmiş dosyaları yürütmediği için önceden yükleme işlemi, getirme işleminin yürütme işleminden ayrılmasında yararlıdır. Bu da, Etkileşime Hazır Olma Süresi gibi metrikleri iyileştirebilir. Önceden yükleme işlemi, JavaScript paketlerinizi böldüğünüzde ve yalnızca kritik parçaları önceden yüklerseniz en iyi sonucu verir.
rel=preload nasıl uygulanır?
preload öğesini uygulamanın en basit yolu, dokümanın <head> öğesine bir <link> etiketi eklemektir:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
as özelliğinin sağlanması, tarayıcının önceden getirilen kaynağın önceliğini türüne göre ayarlamasına, doğru üst bilgileri ayarlamasına ve kaynağın zaten önbellekte olup olmadığını belirlemesine yardımcı olur. Bu özellik için kabul edilen değerler şunlardır: script, style, font, image ve diğerleri.
Yazı tipleri gibi bazı kaynak türleri anonim modda yüklenir. Bunlar için crossorigin özelliğini preload ile ayarlamanız gerekir:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
<link> öğeleri, bağlı kaynağın MIME türünü içeren type özelliğini de kabul eder. Tarayıcılar, kaynakların yalnızca dosya türü destekleniyorsa önceden yüklendiğinden emin olmak için type özelliğinin değerini kullanır. Tarayıcı, belirtilen kaynak türünü desteklemiyorsa <link rel="preload"> parametresini yoksayar.
Ayrıca Link HTTP üst bilgisi aracılığıyla herhangi bir kaynağı önceden yükleyebilirsiniz:
Link: </css/style.css>; rel="preload"; as="style"
HTTP üst bilgisinde preload belirtmenin bir faydası, tarayıcının dokümanı keşfetmek için ayrıştırmasına gerek olmamasıdır. Bu da bazı durumlarda küçük iyileştirmeler sağlayabilir.
JavaScript modüllerini web paketiyle önceden yükleme
Uygulamanızın derleme dosyalarını oluşturan bir modül paketleyici kullanıyorsanız programın önceden yükleme etiketlerinin eklenmesini destekleyip desteklemediğini kontrol etmeniz gerekir. Webpack'in 4.6.0 veya sonraki sürümlerinde önceden yükleme, import() içindeki sihirli yorumların kullanılmasıyla desteklenir:
import(_/* webpackPreload: true */_ "CriticalChunk")
Webpack'in eski bir sürümünü kullanıyorsanız preload-webpack-plugin gibi bir üçüncü taraf eklentisi kullanın.
Önceden yüklemenin Core Web Vitals üzerindeki etkileri
Önceden yükleme, yükleme hızını etkileyen güçlü bir performans optimizasyonudur. Bu tür optimizasyonlar, sitenizin Önemli Web Verileri'nde değişikliklere neden olabilir ve bunların farkında olmak önemlidir.
Largest Contentful Paint (LCP)
Hem resimler hem de metin düğümleri LCP adayları olabileceğinden, önceden yükleme, yazı tipleri ve resimler söz konusu olduğunda Largest Contentful Paint (LCP) üzerinde güçlü bir etkiye sahiptir. Web yazı tipleri kullanılarak oluşturulan hero resimler ve çok sayıda metin, iyi yerleştirilmiş bir önceden yükleme ipucundan önemli ölçüde yararlanabilir ve bu önemli içerik parçalarını kullanıcıya daha hızlı sunma fırsatları olduğunda kullanılmalıdır.
Ancak, önceden yükleme ve diğer optimizasyonlar konusunda dikkatli olmanız gerekir. Özellikle, çok fazla kaynağı önceden yüklemekten kaçının. Çok fazla kaynağa öncelik verilirse hiçbiri etkili olmaz. Aşırı sayıda önceden yükleme ipuçlarının etkileri, özellikle bant genişliği çekişmesinin daha belirgin olduğu yavaş ağlarda zarara neden olur.
Bunun yerine, iyi yerleştirilmiş bir önceden yüklemenin faydalı olacağını bildiğiniz birkaç yüksek değerli kaynağa odaklanın. Yazı tiplerini önceden yüklerken, kaynak yükleme süresini mümkün olduğunca azaltmak için yazı tiplerini WOFF 2.0 biçiminde sunduğunuzdan emin olun. WOFF 2.0 mükemmel bir tarayıcı desteğine sahip olduğundan, WOFF 1.0 veya TrueType (TTF) gibi daha eski biçimlerin kullanılması, LCP adayı bir metin düğümüyse LCP'nizi geciktirir.
LCP ve JavaScript söz konusu olduğunda, tarayıcının önceden yükleme tarayıcısının düzgün bir şekilde çalışması için işaretlemenin tamamını sunucudan gönderdiğinizden emin olmak istersiniz. İşaretlemeyi oluşturmak için tamamen JavaScript'e dayanan ve sunucu tarafından oluşturulan HTML gönderemeyen bir deneyim sunuyorsanız, tarayıcının önceden yükleme tarayıcısının yapamayacağı ve yalnızca JavaScript'in yüklenmesini ve yürütülmesini bitirdiğinde keşfedilebilecek kaynakları önceden yüklemesi avantajlı olacaktır.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS), web yazı tiplerinin söz konusu olduğu durumlarda özellikle önemli bir metriktir. CLS, yazı tiplerinin yüklenme şeklini yönetmek için font-display CSS özelliğini kullanan web yazı tipleriyle önemli düzeyde etkileşim sağlar. Web yazı tipiyle ilgili düzen kaymalarını en aza indirmek için aşağıdaki stratejileri göz önünde bulundurun:
font-displayiçin varsayılanblockdeğerini kullanarak yazı tiplerini önceden yükleyin. Bu hassas bir dengedir. Yedek içermeyen yazı tiplerinin gösterilmesinin engellenmesi, kullanıcı deneyimi sorunu olarak kabul edilebilir. Bir yandan, yazı tiplerininfont-display: block;ile yüklenmesi web yazı tipiyle ilgili düzen kaymalarını ortadan kaldırır. Diğer yandan, kullanıcı deneyimi için büyük önem taşıyan bu web yazı tiplerinin en kısa sürede yüklenmesini sağlamalısınız. Önceden yüklemeyifont-display: block;ile birleştirmek kabul edilebilir bir güvenlik ihlali olabilir.font-displayiçinfallbackdeğerini kullanırken yazı tiplerini önceden yükleyin.fallback, çok kısa bir engelleme süresine sahip olması nedeniyleswapileblockarasında bir uzlaşmadır.- Önceden yükleme olmadan
font-displayiçinoptionaldeğerini kullanın. Bir web yazı tipi, kullanıcı deneyimi için önemli değilse ancak yine de sayfa metninin önemli bir kısmını oluşturmak için kullanılıyorsaoptionaldeğerini kullanmayı düşünün. Olumsuz koşullardaoptional, bir sonraki gezinme için arka planda yazı tipini yüklerken sayfa metnini yedek yazı tipinde gösterir. Sistem yazı tipleri hemen oluşturulurken, sonraki sayfa yüklemeleri ise yazı tipini düzen kaymaları olmadan hemen yüklediğinden, bu koşullarda ortaya çıkan net sonuç CLS'de iyileşme sağlar.
Web yazı tipleri söz konusu olduğunda CLS optimizasyonu zor olan bir metriktir. Her zaman olduğu gibi, laboratuvarda denemeler yapın. Ancak yazı tipi yükleme stratejilerinizin CLS'yi iyileştirip kötüleştirdiğini anlamak için alan verilerinize güvenin.
Sonraki Boyamayla Etkileşim (INP)
Sonraki Boyamayla Etkileşim, kullanıcı girişine duyarlılığı ölçen bir metriktir. Web'deki etkileşim açısından en büyük pay JavaScript'e bağlı olduğundan, önemli etkileşimleri destekleyen JavaScript'in önceden yüklenmesi sayfanın INP değerinin düşük tutulmasına yardımcı olabilir. Bununla birlikte, bant genişliği için çok fazla kaynak rekabet ediyorsa başlatma sırasında çok fazla JavaScript'in önceden yüklenmesinin istenmeyen olumsuz sonuçlar doğurabileceğini unutmayın.
Kod bölme konusunda da dikkatli olmanız gerekir. Kod bölme, başlatma sırasında yüklenen JavaScript miktarını azaltmak için mükemmel bir optimizasyondur, ancak etkileşimin hemen başında JavaScript yüklenmesi varsa etkileşimler gecikebilir. Bunu telafi etmek amacıyla, kullanıcının amacını incelemeniz ve etkileşim gerçekleşmeden önce gerekli JavaScript parçaları için bir önceden yükleme eklemeniz gerekir. Örneğin, formdaki alanlardan herhangi birine odaklanıldığında formun içeriğini doğrulamak için gereken JavaScript'in önceden yüklenmesi gerekebilir.
Sonuç
Sayfa hızını artırmak için tarayıcı tarafından geç keşfedilen önemli kaynakları önceden yükleyin. Her şeyi önceden yüklemek verimsiz olacaktır, bu nedenle preload özelliğini dikkatli kullanın ve gerçek dünyadaki etkiyi ölçün.