Bir web sayfasını açtığınızda tarayıcı, HTML belgesini bir sunucudan ister, içeriğini ayrıştırır ve referans verilen 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şılacağı açıklanmaktadır.
Önceden 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ıyla tanımlanmıştır. Tarayıcı, yazı tipi dosyasını yalnızca stil sayfasını indirip ayrıştırmayı tamamladıktan sonra yükler.Belirli bir kaynağı önceden yükleyerek tarayıcıya, mevcut sayfa için önemli olduğundan emin olduğunuz için kaynağı tarayıcının normalde keşfedeceğinden daha önce getirmek istediğinizi söylersiniz.
Kritik istek zinciri, tarayıcı tarafından önceliklendirilen ve getirilen kaynakların sırasını gösterir. Lighthouse, bu zincirin üçüncü düzeyindeki öğeleri geç keşfedilmiş olarak tanımlar. Önceden yüklenecek kaynakları belirlemek için Önemli istekleri önceden yükleyin denetimini kullanabilirsiniz.
HTML belgenizin başlık kısmına rel="preload" ile birlikte bir <link> etiketi ekleyerek kaynakları önceden yükleyebilirsiniz:
<link rel="preload" as="script" href="critical.js">
Tarayıcı, önceden yüklenen kaynakları gerektiğinde hemen kullanılabilmeleri için önbelleğe alır. (Komut dosyalarını çalıştırmaz veya stil sayfalarını uygulamaz.)
Örneğin, preconnect ve prefetch gibi kaynak ipuçları, tarayıcının 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 özelliğini az kullanmak ve yalnızca en kritik kaynakları önceden yüklemek önemlidir.
Kullanılmayan ön yüklemeler, load etkinliğinden yaklaşık 3 saniye sonra Chrome'da bir konsol 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ın. Ekranın üst kısmındaki içeriğin oluşturulması için gereken kritik CSS, dokümanın <head> bölümünde satır içi olarak yer alır ve kritik olmayan CSS genellikle JavaScript ile geç yüklenir. Kritik olmayan CSS'yi yüklemeden önce JavaScript'in yürütülmesini beklemek, kullanıcılar kaydırdığında oluşturmada gecikmelere neden olabilir. Bu nedenle, indirme işlemini daha erken başlatmak için <link rel="preload"> kullanmak iyi bir fikirdir.
JavaScript dosyalarını önceden yükleme
Tarayıcılar önceden yüklenen dosyaları yürütmediğinden, önceden yükleme, getirme işlemini yürütme işleminden ayırmak için kullanışlıdır. Bu da Time to Interactive gibi metrikleri iyileştirebilir. JavaScript paketlerinizi böldüğünüzde ve yalnızca kritik parçaları önceden yüklediğinizde önceden yükleme en iyi şekilde çalışır.
rel=preload nasıl uygulanır?
preload'yı uygulamanın en basit yolu, belgenin <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 getirilmiş kaynağın önceliğini türüne göre ayarlamasına, doğru başlıkları belirlemesine ve kaynağın önbellekte zaten mevcut 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. Bu ürünler 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ğlantılı kaynağın MIME türünü içeren bir type özelliği 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. Bir tarayıcı, belirtilen kaynak türünü desteklemiyorsa <link rel="preload"> öğesini yoksayar.
Ayrıca, Link HTTP üstbilgisi aracılığıyla her tür kaynağı önceden yükleyebilirsiniz:
Link: </css/style.css>; rel="preload"; as="style"
HTTP üstbilgisinde preload belirtmenin avantajı, tarayıcının bunu bulmak için belgeyi ayrıştırması gerekmemesidir. 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 önceden yükleme etiketlerinin yerleştirilmesini destekleyip desteklemediğini kontrol etmeniz gerekir. webpack 4.6.0 veya sonraki sürümlerde, import() içinde sihirli yorumlar kullanılarak önceden 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.
Ö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 Core Web Vitals metriklerinde değişikliklere yol açabilir. Bu nedenle, bu değişikliklerin farkında olmanız önemlidir.
Largest Contentful Paint (LCP)
Önceden yükleme, yazı tipleri ve resimler söz konusu olduğunda Largest Contentful Paint (LCP) üzerinde güçlü bir etkiye sahiptir. Bunun nedeni, hem resimlerin hem de metin düğümlerinin LCP adayı olabilmesidir. Web yazı tipleri kullanılarak oluşturulan anahtar resimler ve büyük metinler, iyi yerleştirilmiş bir önceden yükleme ipucundan önemli ölçüde yararlanabilir. Bu nedenle, bu önemli içerik parçalarını kullanıcıya daha hızlı sunma fırsatları olduğunda 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çbir kaynağa öncelik verilmemiş olur. Aşırı önceden yükleme ipuçlarının etkileri, özellikle bant genişliği anlaşmazlığının daha belirgin olacağı yavaş ağlarda daha da zararlı olacaktır.
Bunun yerine, iyi yerleştirilmiş bir ön yüklemeden yararlanacağı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 tarayıcı desteğine sahip olduğundan, LCP adayı bir metin düğümü ise WOFF 1.0 veya TrueType (TTF) gibi eski biçimleri kullanmak 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 çalışması için sunucudan tam işaretleme gönderdiğinizden emin olmanız gerekir. Biçimlendirmeyi oluşturmak için tamamen JavaScript'e dayanan ve sunucu tarafında oluşturulan HTML gönderemeyen bir deneyim sunuyorsanız tarayıcı önceden yükleme tarayıcısının yapamayacağı bir noktada devreye girip yalnızca JavaScript yüklenip yürütüldüğünde keşfedilebilecek kaynakları önceden yüklemek avantajlı olacaktır.
Cumulative Layout Shift (CLS)
Kümülatif düzen kayması (CLS), web yazı tipleri söz konusu olduğunda özellikle önemli bir metriktir. CLS, yazı tiplerinin nasıl yüklendiğini yönetmek için font-display CSS özelliğini kullanan web yazı tipleriyle önemli bir etkileşime sahiptir. 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 kullanırken yazı tiplerini önceden yükleyin. Bu hassas bir dengedir. Yedek yazı tipi olmadan yazı tiplerinin görüntülenmesini engellemek, kullanıcı deneyimi sorunu olarak kabul edilebilir. Bir yandan,font-display: block;ile yazı tiplerinin yüklenmesi, web yazı tipiyle ilgili düzen kaymalarını ortadan kaldırır. Öte yandan, kullanıcı deneyimi için kritik öneme sahipse web yazı tiplerinin mümkün olan en kısa sürede yüklenmesini istersiniz. Ön yüklemeyifont-display: block;ile birleştirmek kabul edilebilir bir çözüm olabilir.font-displayiçinfallbackdeğerini kullanırken yazı tiplerini önceden yükleyin.fallback, son derece kısa bir engelleme süresine sahip olması nedeniyleswapveblockarasında bir uzlaşmadır.- Ön yükleme yapılmayan
font-displayiçinoptionaldeğerini kullanın. Bir web yazı tipi kullanıcı deneyimi için kritik öneme sahip değilse ancak yine de önemli miktarda sayfa metnini oluşturmak için kullanılıyorsaoptionaldeğerini kullanmayı düşünebilirsiniz. Olumsuz koşullardaoptional, bir sonraki gezinme için yazı tipini arka planda yüklerken sayfa metnini yedek yazı tipiyle gösterir. Bu koşullarda, sistem yazı tipleri hemen oluşturulacağından ve sonraki sayfa yüklemelerinde yazı tipi düzen kaymaları olmadan hemen yükleneceğinden CLS iyileştirilir.
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 veya daha kötü hale getirip getirmediğini belirlemek için alan 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 bir kısmı JavaScript tarafından sağlandığından, önemli etkileşimleri destekleyen JavaScript'i önceden yüklemek bir sayfanın INP'sini düşük tutmaya yardımcı olabilir. Ancak başlangıç sırasında çok fazla JavaScript'in önceden yüklenmesinin, bant genişliği için çok fazla kaynak rekabet ettiğinde 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şlangıçta yüklenen JavaScript miktarını azaltmak için mükemmel bir optimizasyon olsa da etkileşimler, etkileşimin en başında yüklenen JavaScript'e bağlıysa gecikebilir. Bunu telafi etmek için kullanıcının amacını incelemeniz ve etkileşim gerçekleşmeden önce gerekli JavaScript parçaları için bir ön yükleme eklemeniz gerekir. Buna örnek olarak, formdaki alanlardan herhangi birine odaklanıldığında formun içeriğini doğrulamak için gereken JavaScript'in önceden yüklenmesi verilebilir.
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 özelliğini dikkatli kullanın ve gerçek dünyadaki etkisini ölçün.