Bir web sayfasını açtığınızda, tarayıcı bir sunucudan HTML dokümanını ister, içeriğini ayrıştırır ve başvurulan kaynaklar için ayrı istekler gönderir. Bir geliştirici olarak, sayfanızın ihtiyaç duyduğu tüm kaynakları ve bunların hangilerinin en önemli olduğunu zaten biliyorsunuz. Bu bilgilerden yararlanarak önemli kaynakları önceden talep edebilir ve yükleme işlemini hızlandırabilirsiniz. Bu yayında, bunu <link rel="preload"> ile nasıl gerçekleştirebileceğiniz açıklanmaktadır.
Önceden yüklemenin işleyiş şekli
Önceden yükleme, genellikle tarayıcı tarafından daha sonra keşfedilen kaynaklar için idealdir.
@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, kaynağın geçerli sayfa için önemli olduğundan eminseniz, tarayıcı tarafından keşfedileceğinden 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şfedilen şekilde tanımlar. Hangi kaynakların önceden yükleneceğini belirlemek için Anahtar istekleri önceden yükleme denetimini kullanabilirsiniz.
HTML dokümanınızın 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.)
Örneğin preconnect ve prefetch gibi kaynak ipuçları, tarayıcının uygun gördüğü şekilde çalıştırılır. Diğer yandan, preload tarayıcı için zorunludur. Modern tarayıcılar kaynakları önceliklendirme konusunda zaten oldukça iyi. Bu nedenle preload kullanımını ölçülü 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 veya CSS dosyalarında tanımlanan arka plan resimleriyle tanımlanan yazı tipleri, tarayıcı bu CSS dosyalarını indirip ayrıştırana kadar keşfedilmez. Bu kaynakların önceden yüklenmesi, CSS dosyaları indirilmeden ö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ği oluşturmak için gereken kritik CSS, dokümanın <head> bölümünde satır içine eklenmiştir ve kritik olmayan CSS genellikle JavaScript ile geç yüklenir. Kritik olmayan CSS'yi yüklemeden önce JavaScript'in çalışmasını beklemek, kullanıcılar sayfayı kaydırırken oluşturmada gecikmelere neden olabileceğinden 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üklenmiş dosyaları yürütmediğinden, getirme işlemini yürütme işleminden ayırmak için önceden yükleme yararlı olur. Bu da Etkileşime Hazır Olma Süresi gibi metrikleri iyileştirebilir. Önceden yükleme, JavaScript paketlerinizi böldüğünüzde ve yalnızca kritik parçaları önceden yüklediğinizde en iyi sonucu verir.
rel=preload uygulama
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 belirlemesine, doğru başlıkları ayarlamasına 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. Aşağıdaki işlemler 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"> öğesini yoksayar.
Ayrıca Link HTTP üst bilgisi ile her türlü kaynağı önceden yükleyebilirsiniz:
Link: </css/style.css>; rel="preload"; as="style"
HTTP Başlığında preload belirtmenin 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, önceden yükleme etiketlerinin yerleştirilmesini destekleyip desteklemediğini kontrol etmeniz gerekir. webpack 4.6.0 veya sonraki sürümlerinde, import() içindeki sihirli yorumların kullanımıyla ö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 Önemli Web Verileri üzerindeki etkileri
Önceden yükleme, yükleme hızı üzerinde etkisi olan güçlü bir performans optimizasyonudur. Bu tür optimizasyonlar sitenizin Önemli Web Verileri'nde değişikliklere yol açabilir ve bunlardan haberdar olmanız önemlidir.
Largest Contentful Paint (LCP)
Hem resimler hem de metin düğümleri LCP adayları olabileceğinden, önceden yüklemenin yazı tipleri ve resimler söz konusu olduğunda Largest Contentful Paint (LCP) üzerinde güçlü bir etkisi vardır. Web yazı tipleri kullanılarak oluşturulan hero resimler ve büyük metin parçaları, 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 söz konusu olduğunda dikkatli olmak istersiniz! Özellikle, çok fazla kaynağı önceden yüklemekten kaçının. Çok fazla kaynağa öncelik verilirse hiçbirine öncelik verilmez. Aşırı sayıda önceden yükleme ipucunun etkileri, bant genişliği çakışmasının daha fazla göze çarpacağı yavaş ağlardakiler için zararlı olur.
Bunun yerine, iyi yerleştirilmiş bir önceden yükleme işleminden faydalanacağı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, WOFF 1.0 veya TrueType (TTF) gibi daha eski biçimlerin kullanılması, LCP adayı bir metin düğümüyse LCP'nizde gecikmeye neden olur.
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 işaretlemenin tamamını gönderdiğinizden emin olmak istersiniz. İşaretlemeyi oluşturmak için tamamen JavaScript'e dayanan bir deneyim sunuyor ve sunucu tarafından oluşturulan HTML'yi gönderemiyorsanız, tarayıcı tarafından oluşturulan HTML'yi gönderemiyorsanız, tarayıcı önyükleme tarayıcısının yapamadığı durumlara uygulamak ve yalnızca JavaScript'in yüklenmesi ve çalıştırılması bittiğinde bulunabilecek kaynakları önceden yüklemek avantajlı olacaktır.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS), web yazı tipleri söz konusu olduğunda ö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şime girer. 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. Yazı tiplerinin yedek olmadan gösterilmesini engellemek, kullanıcı deneyimi sorunu olarak değerlendirilebilir. 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 çok önemliyse bu web yazı tiplerinin en kısa sürede yüklenmesini sağlamanız gerekir. Önceden 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 olduğundanswapileblockarasında yaşanan bir anlaşmadır.font-displayiçinoptionaldeğerini önceden yükleme olmadan kullanın. Bir web yazı tipi, kullanıcı deneyimi açısından önemli değilse ancak yine de önemli miktarda sayfa metni oluşturmak için kullanılıyorsaoptionaldeğerini kullanabilirsiniz. Olumsuz koşullardaoptional, bir sonraki gezinme için yazı tipini arka planda yüklerken sayfa metnini yedek yazı tipinde görüntüler. Sonraki sayfa yüklemelerinde düzen kayması olmadan yazı tipi hemen yüklenirken, sistem yazı tipleri hemen oluşturulacağı ve bu koşullarda elde edilecek net sonuç daha iyi CLS'dir.
CLS, web yazı tipleri söz konusu olduğunda optimize edilmesi zor bir metriktir. Her zaman olduğu gibi, lab'de deneme yapın ancak yazı tipi yükleme stratejilerinizin CLS'yi iyileştirip iyileştirmediğini belirlemek 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şimdeki payı JavaScript'ten kaynaklandığı için, önemli etkileşimleri destekleyen JavaScript'in önceden yüklenmesi bir sayfanın INP'sini daha düşük tutmaya yardımcı olabilir. Bununla birlikte, başlatma sırasında çok fazla JavaScript'in önceden yüklenmesinin, bant genişliği için rekabet eden çok fazla kaynak varsa istenmeyen olumsuz sonuçlar doğurabileceğini unutmayın.
Ayrıca kod bölme konusunda dikkatli olun. 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 yüklenen JavaScript'e bağlı olan etkileşimler gecikebilir. Bunu telafi etmek için kullanıcının niyetini incelemeniz ve etkileşim gerçekleşmeden önce gerekli JavaScript parçaları için bir önceden yükleme yerleştirmeniz gerekir. Bir örnek, formdaki alanlardan herhangi biri odaklanıldığında formun içeriğini doğrulamak için gereken JavaScript'i önceden yüklemek olabilir.
Sonuç
Sayfa hızını artırmak için tarayıcı tarafından geç keşfedilen önemli kaynakları önceden yükleyin. Her şeyin önceden yüklenmesi ters etki yaratacağından, preload politikasını dikkatli bir şekilde kullanın ve etkiyi gerçek dünyada ölçün.