Bir web sayfasını açtığınızda tarayıcı, HTML dokümanlarını bir sunucudan ister, içeriklerini ayrıştırır ve referans verilen kaynaklar için ayrı istekler gönderir. Geliştirici olarak, sayfanızı oluşturmak için ihtiyaç duyduğunuz tüm kaynakları ve bunların en önemlilerini zaten biliyorsunuzdur. Bu bilgileri kullanarak kritik kaynakları önceden isteyebilir ve yükleme sürecini hızlandırabilirsiniz. Bu yayında, <link rel="preload"> ile bunu nasıl yapacağınız açıklanmaktadır.
Ön yüklemenin işleyiş şekli
Önceden yükleme, genellikle tarayıcı tarafından geç keşfedilen kaynaklar için en uygun yöntemdir.
@font-face kuralı ile tanımlanmıştır. Tarayıcı, yazı tipi dosyasını yalnızca stil sayfasını indirip ayrıştırdıktan sonra yükler.Belirli bir kaynağı önceden yükleyerek tarayıcıya, mevcut sayfa için önemli olduğundan tarayıcı tarafından keşfedileceğinden daha erken getirmesini istediğinizi bildirirsiniz.
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şfedilen olarak tanımlar. Hangi kaynakların önceden yükleneceğini belirlemek için Önemli istekleri önceden yükleme 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 alarak gerektiğinde hemen kullanılabilir hale getirir. (Komut dosyalarını yürütmez veya stil sayfalarını uygulamaz.)
preconnect ve prefetch gibi kaynak ipuçları, tarayıcı uygun gördüğü şekilde yürütülür. Öte yandan preload, tarayıcı için zorunludur. Modern tarayıcılar kaynaklara öncelik verme konusunda zaten oldukça iyidir. Bu nedenle, preload'ü az miktarda kullanmak ve yalnızca en önemli kaynakları önceden yüklemek önemlidir.
Kullanılmayan ön yüklemeler, load etkinliğinden yaklaşık 3 saniye sonra Chrome'da bir Konsol uyarısı 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ı önceden yüklemek, CSS dosyalarının indirilmesinden önce getirilmelerini 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ğin oluşturulması için gereken kritik CSS, dokümanın <head> bölümüne satır içi olarak eklenir ve kritik olmayan CSS genellikle JavaScript ile ertelenmiş olarak yüklenir. Kritik olmayan CSS'yi yüklemeden önce JavaScript'in yürütülmesini 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"> kullanmayı tercih edebilirsiniz.
JavaScript dosyalarını önceden yükleme
Tarayıcılar önceden yüklenmiş dosyaları yürütmediğinden, getirme işlemini yürütme işleminden ayırmak için ön yükleme yapmak yararlı olur. Bu da etkileşime geçme süresi gibi metrikleri iyileştirebilir. Önceden yükleme, JavaScript paketlerinizi böldüğünüz ve yalnızca kritik parçaları önceden yüklediğinizde en iyi sonucu verir.
rel=preload nasıl uygulanır?
preload'ü uygulamanın en basit yolu, dokümanın <head> bölümüne bir <link> etiketi eklemektir:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
as özelliğini sağlamak, tarayıcının önceden getirilen kaynağın önceliğini türüne göre belirlemesine, doğru üstbilgileri belirlemesine ve kaynağın önbellekte bulunup bulunmadığını belirlemesine yardımcı olur. Bu özellik için kabul edilen değerler şunlardır: script, style, font, image ve diğer.
Yazı tipleri gibi bazı kaynak türleri anonim modda yüklenir. Bu öğeler 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 bir type özelliğini de kabul eder. Tarayıcılar, kaynakların yalnızca dosya türleri destekleniyorsa önceden yüklenmesini sağlamak için type özelliğinin değerini kullanır. Belirtilen kaynak türünü desteklemeyen tarayıcılar <link rel="preload"> öğesini yoksayar.
Link HTTP üst bilgisi aracılığıyla da her tür kaynağı önceden yükleyebilirsiniz:
Link: </css/style.css>; rel="preload"; as="style"
HTTP üstbilgisinde preload belirtmenin bir avantajı, tarayıcının bunu keşfetmek için dokümanı ayrıştırmak zorunda kalmamasıdır. Bu da bazı durumlarda küçük iyileştirmeler sağlayabilir.
JavaScript modüllerini webpack ile önceden yükleme
Uygulamanızın derleme dosyalarını oluşturan bir modül paketleyici kullanıyorsanız ön yükleme etiketlerinin eklenmesini destekleyip desteklemediğini kontrol etmeniz gerekir. webpack 4.6.0 veya sonraki sürümlerde, import() içinde sihirli yorumlar kullanılarak ön yükleme 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.
Ön yüklemenin Core Web Vitals'a etkileri
Önceden yükleme, yükleme hızını etkileyen güçlü bir performans optimizasyonudur. Bu tür optimizasyonlar, sitenizin Core Web Vitals metriğinde değişikliklere neden olabilir. Bu değişikliklerden haberdar olmanız önemlidir.
Largest Contentful Paint (LCP)
Hem resimler hem de metin düğümleri LCP adayı 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 büyük metin blokları, iyi yerleştirilmiş bir ön yükleme ipucundan önemli ölçüde yararlanabilir. Bu önemli içerik parçalarını kullanıcıya daha hızlı sunma fırsatları olduğunda bu ipucu kullanılmalıdır.
Ancak ön 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 öncelikli olmaz. Aşırı ön yükleme ipuçlarının etkileri, özellikle bant genişliği çekişmesinin daha belirgin olacağı daha yavaş ağlardaki kullanıcılar için zararlı olacaktır.
Bunun yerine, iyi yerleştirilmiş bir ön yüklemeden fayda sağlayacağı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 yayınladığınızdan emin olun. WOFF 2.0, mükemmel tarayıcı desteğine sahip olduğundan, LCP adayı bir metin düğümüyse WOFF 1.0 veya TrueType (TTF) gibi eski biçimler kullanmak LCP'nizi geciktirir.
LCP ve JavaScript söz konusu olduğunda, tarayıcının ön yükleme tarayıcısının düzgün çalışması için sunucudan eksiksiz işaretleme gönderdiğinizden emin olmanız gerekir. İşaretleri oluşturmak için tamamen JavaScript'e dayanan bir deneyim sunuyorsanız ve sunucu tarafından oluşturulmuş HTML gönderemiyorsanız tarayıcının ön yükleme tarayıcısının yapamadığı durumlarda devreye girip yalnızca JavaScript'in yüklenmesi ve yürütülmesi tamamlandığında bulunabilecek kaynakları önceden yüklemeniz avantajlı olacaktır.
Cumulative Layout Shift (CLS)
Kümülatif Düzen Değişimi (CLS), web yazı tipleri söz konusu olduğunda özellikle önemli bir metriktir ve CLS, yazı tiplerinin nasıl yükleneceğini yönetmek için font-display CSS mülkünü kullanan web yazı tipleriyle önemli bir etkileşime sahiptir. Web yazı tipleriyle ilgili düzen değişikliklerini en aza indirmek için aşağıdaki stratejileri değerlendirin:
font-displayiçin varsayılanblockdeğerini kullanırken yazı tiplerini önceden yükleyin. Bu hassas bir dengedir. Yedeği olmayan yazı tiplerinin görüntülenmesini engellemek kullanıcı deneyimi sorunu olarak kabul edilebilir. Bir yandan, yazı tiplerinifont-display: block;ile yüklemek, web yazı tipiyle ilgili düzen kaymalarını ortadan kaldırır. Öte yandan, kullanıcı deneyimi açısından önemli olan web yazı tiplerini en kısa sürede yüklemek istersiniz. Ön yüklemeyifont-display: block;ile birleştirmek kabul edilebilir bir uzlaşma olabilir.font-displayiçinfallbackdeğerini kullanırken yazı tiplerini önceden yükleyin.fallback,swapveblockarasında bir uzlaşmadır. Bu uzlaşmanın nedeni,fallback'ün son derece kısa bir engelleme süresine sahip olmasıdır.font-displayiçin ön yükleme olmadanoptionaldeğerini kullanın. Bir web yazı tipi kullanıcı deneyimi açısından çok önemli değilse ancak yine de önemli miktarda sayfa metnini oluşturmak için kullanılıyorsaoptionaldeğerini kullanmayı düşünün. Olumsuz koşullardaoptional, sayfa metnini yedek yazı tipinde gösterirken bir sonraki gezinme için yazı tipini arka planda yükler. Bu koşullarda net sonuç, CLS'nin iyileştirilmesidir. Sistem yazı tipleri hemen oluşturulur ve sonraki sayfa yüklemeleri, yazı tipini düzen geçişleri olmadan hemen yükler.
CLS, web yazı tipleri söz konusu olduğunda optimize edilmesi zor bir metriktir. Her zaman olduğu gibi, laboratuvarda denemeler yapın ancak yazı tipi yükleme stratejilerinizin CLS'yi iyileştirip iyileştirmediğini belirlemek için sahada toplanan verilerinize güvenin.
Interaction to Next Paint (INP)
Interaction to Next Paint, kullanıcı girişine verilen yanıtı ölçen bir metriktir. Web'deki etkileşimin büyük kısmı JavaScript tarafından sağlandığından, önemli etkileşimleri destekleyen JavaScript'i önceden yüklemek sayfanın INP'sini daha düşük tutmaya yardımcı olabilir. Ancak, başlangıç sırasında çok fazla JavaScript ön yüklemenin, bant genişliği için çok fazla kaynak yarışıyorsa istenmeyen olumsuz sonuçlara yol açabileceğini unutmayın.
Ayrıca kod bölme işlemini nasıl yapacağınız 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şimlerin hemen başında yüklenen JavaScript'e bağlı olması durumunda etkileşimler gecikebilir. Bu sorunu telafi etmek için kullanıcının amacını incelemeniz ve etkileşim gerçekleşmeden önce gerekli JavaScript parçaları için önceden yükleme işlemi yapmanız gerekir. Örneğin, formdaki alanlardan herhangi biri odaklandığında formun içeriğini doğrulamak için gereken JavaScript'i önceden yükleyebilirsiniz.
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 olacağından preload'ü dikkatli kullanın ve gerçek dünyadaki etkiyi ölçün.