Yükleme hızını iyileştirmek için önemli öğeleri önceden yükleyin

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.

Önceden yükleme, genellikle tarayıcı tarafından geç keşfedilen kaynaklar için en uygun yöntemdir.

Chrome Geliştirici Araçları Ağ panelinin ekran görüntüsü.
Bu örnekte Pacifico yazı tipi, stil sayfasında @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.

Ön yükleme uygulandıktan sonra Chrome Geliştirici Araçları Ağ panelinin ekran görüntüsü.
Bu örnekte Pacifico yazı tipi önceden yüklenir. Bu nedenle indirme işlemi, stil sayfasıyla paralel olarak gerçekleşir.

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.

Lighthouse&#39;ın anahtar isteklerini önceden yükleme denetimi.

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ılmayan önceden yüklenmiş kaynaklarla ilgili Chrome Geliştirici Araçları Konsolu uyarısı.

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 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ğ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:

  1. font-display için varsayılan block değ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ı tiplerini font-display: block; ile yüklemek, web yazı tipleriyle 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üklemeyi font-display: block; ile birleştirmek kabul edilebilir bir uzlaşma olabilir.
  2. font-display için fallback değerini kullanırken yazı tiplerini önceden yükleyin. fallback, swap ve block arasında bir uzlaşmadır. Bu uzlaşmanın nedeni, fallback'ün son derece kısa bir engelleme süresine sahip olmasıdır.
  3. font-display için ön yükleme olmadan optional değ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ıyorsa optional değerini kullanmayı düşünün. Olumsuz koşullarda optional, sayfa metnini yedek yazı tipinde gösterirken yazı tipini sonraki gezinme için 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 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şimin hemen başında yüklenen JavaScript'e ihtiyaç duyuyorsa 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.