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üklemenin en uygun olduğu kaynak, genellikle tarayıcı tarafından geç keşfedilen kaynaklardır.
@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, mevcut sayfa için önemli olduğundan tarayıcıya bu kaynağı tarayıcı tarafından keşfedileceğinden daha erken getirmek 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şfedildi 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, 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ğ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 yavaş 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 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'ü 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 ayarlamasına 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ğerleri.
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 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. 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 ü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 webpack ile ö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 4.6.0 veya sonraki sürümlerde, import() içinde sihirli yorumlar kullanılarak ön yükleme desteklenir:
import(_/* webpackPreload: true */_ "CriticalChunk")
Web paketinin 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 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. İş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)
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 ölçüde etkileşim içindedir. 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. Yedeği olmayan yazı tiplerinin görüntülenmesini engellemek 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. Ö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 yöntemin engelleme süresi son derece kısadır.font-displayiçin ön yükleme yapmadanoptionaldeğ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, sayfa metnini yedek yazı tipinde gösterirken bir sonraki gezinme için yazı tipini arka planda yükler. Bu koşullarda net sonuç, sistem yazı tipleri hemen oluşturulacağından ve sonraki sayfa yüklemeleri yazı tipini düzen geçişleri olmadan hemen yükleyeceğinden CLS'nin iyileştirilmesidir.
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 kötüleştirdiğini anlamak 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 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 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 olacağından preload'ü dikkatli kullanın ve gerçek dünyadaki etkiyi ölçün.