Kaynak yüklemeyi optimize edin

Önceki modülde, kritik oluşturma yolunun arkasındaki teoriden bazıları ve oluşturma engelleyici ve ayrıştırıcı önleyici kaynakların bir gecikmeyi nasıl sayfasını görüntüler. Arka plandaki teoriyi anlamak için artık kritik öneme sahip anahtar kelimeleri optimize etmek için oluşturma yolunu izleyin.

Sayfa yüklenirken, HTML içinde birçok kaynağa başvurulur. Bu kaynak, etkileşimine ve CSS üzerinden görünümü ile düzenine göre yardımcı olur. Bu modülde, proje yönetimiyle ilgili birçok önemli kavram, bu kaynaklar ve bunların sayfanın yükleme süresini nasıl etkilediği ele alınmaktadır.

Oluşturma engelleme

Önceki modülde açıklandığı gibi CSS, bir render-blocking kaynağıdır. Tarayıcının CSS Nesne Modeli"ne kadar içerikleri oluşturmasını engeller. (CSSOM) oluşturulur. Tarayıcı, Flash'ten gelen Flash'ın Stilsiz İçerik (FOUC), kullanıcı deneyimi açısından istenmeyen bir durumdur.

Önceki videoda, sayfa içeriği olmadan duruma herhangi bir stil. Daha sonra, sayfanın CSS'si reklam yüklendikten sonra ağdan yüklemeyi bitirir ve sayfanın stilize edilmemiş versiyonu hemen stil özellikli sürümle değiştirildi.

Genel olarak, FOUC normalde görmediğiniz bir şeydir ancak tarayıcının oluşturmayı neden engellediğini anlamanız açısından önemlidir. devam ettirilir. Oluşturma engelleme istenmeyen bir durum değildir, ancak süre tahminini en aza indirmek optimize etmenizi sağlar.

Ayrıştırıcı engelleme

Ayrıştırıcı engelleme kaynağı, <script> gibi HTML ayrıştırıcıyı kesintiye uğratır öğesi (async veya defer özellikleri olmayan) Ayrıştırıcı, <script> öğesi yoksa tarayıcının komut dosyasını önceden değerlendirip yürütmesi gerekir kalan HTML kodunu ayrıştırma işlemine geçin. Bu tasarım gereğidir, çünkü komut dosyaları oluşturulma aşamasındaki bir süre boyunca DOM'de değişiklik yapabilir veya DOM'ye erişebilir.

<!-- This is a parser-blocking script: -->
<script src="/script.js"></script>

Harici JavaScript dosyaları kullanılırken (async veya defer olmadan), ayrıştırıcı indirilinceye, ayrıştırılıncaya ve ayrıştırılana kadar; yürütüldü. Satır içi JavaScript kullanılırken ayrıştırıcı benzer şekilde engellenir. satır içi komut dosyası ayrıştırılır ve yürütülür.

Önceden yükleme tarayıcısı

Önceden yükleme tarayıcı, ikincil HTML biçimindeki bir tarayıcı optimizasyonudur. bulmak ve tahmine dayalı olarak getirmek için ham HTML yanıtını tarayan ayrıştırıcı birincil HTML ayrıştırıcısının normalde bu kaynakları keşfetmesinden önce kaynaklanmış olması gerekir. Örneğin, Örneğin, önceden yükleme tarayıcısı, tarayıcının bir HTML ayrıştırıcı engellenmiş olsa bile bir <img> öğesinde belirtilen kaynak CSS ve JavaScript gibi kaynakları getirirken ve işlerken.

Önceden yükleme tarayıcısından yararlanmak için kritik kaynakların dahil edilmesi gerekir. sunucu tarafından gönderilen HTML işaretlemesinde gösterilir. Aşağıdaki kaynak yükleme kalıpları önceden yükleme tarayıcısı tarafından keşfedilemiyor:

• Resimler, background-image özelliği kullanılarak CSS tarafından yüklenen resimlerdir. Bu resimler referanslar CSS'de olduğu için önceden yükleme tarayıcısı tarafından keşfedilemiyor.
• <script> öğe işaretlemesi yerleştirilerek dinamik olarak yüklenen komut dosyaları JavaScript kullanılarak veya dinamik import() kullanılarak yüklenen modüller kullanılarak DOM'ye eklenebilir.
• JavaScript kullanılarak istemcide oluşturulan HTML. Bu tür işaretleme, dizeleri JavaScript kaynaklarında bulunur ve önceden yükleme tarafından keşfedilemez tarayıcı.
• CSS @import bildirimleri.

Bu kaynak yükleme kalıplarının tümü geç keşfedilen kaynaklardır ve önceden yükleme tarayıcısından yararlanamaz. Mümkün olduğu sürece bunlardan kaçının. Eğer bu tür kalıplardan kaçınmak mümkün değildir, ancak Kaynak keşif gecikmelerini önlemek için preload ipucu.

CSS

CSS, bir sayfanın sunumunu ve düzenini belirler. Daha önce açıklandığı üzere, reklam oluşturmayı engelleyen bir kaynaktır. Bu nedenle, CSS'nizi optimize etmek toplam sayfa yüklenme süresine etkisi.

Küçültme

CSS dosyalarını küçültmek, CSS kaynağının dosya boyutunu küçültür ve dolayısıyla daha hızlı indirir. Bu, öncelikle bir kaynak CSS dosyası (boşluklar ve diğer görünmez karakterler gibi) ve çıkış sonucu yeni optimize edilmiş bir dosyaya dönüştürün:

/* Unminified CSS: */

/* Heading 1 */
h1 {
  font-size: 2em;
  color: #000000;
}

/* Heading 2 */
h2 {
  font-size: 1.5em;
  color: #000000;
}

/* Minified CSS: */
h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}

CSS küçültme, en temel biçimiyle, açık bir şekilde uygulanabilecek web sitenizin FCP'sini ve hatta bazı durumlarda LCP'yi bile iyileştirebilir. Örneğin, paketleyiciler üretimde bu optimizasyonu sizin için otomatik olarak gerçekleştirebilir inşa eder.

Kullanılmayan CSS'yi kaldırın

Herhangi bir içerik oluşturmadan önce, tarayıcının tüm içeriği indirmesi ve ayrıştırması gerekir oluşturabilirsiniz. Ayrıştırma işlemini tamamlamak için gereken süre, mevcut sayfada kullanılmıyor. Tüm CSS'leri birleştiren bir paketleyici kullanıyorsanız tek bir dosyada saklamasını sağlamak, kullanıcılarınız muhtemelen daha fazla CSS indiriyordur. sayfayı görüntülemek için gereklidir.

Geçerli sayfa için kullanılmayan CSS'yi keşfetmek için Chrome'daki Kapsam aracını kullanın Geliştirici Araçları'nı tıklayın.

Kullanılmayan CSS'yi kaldırmanın iki etkisi vardır: indirme sayısını azaltmaya için tarayıcının yeniden oluşturma ihtiyacından dolayı oluşturma ağacı yapısını optimize etmiş olursunuz. daha az CSS kuralı işler.

CSS @import bildirimlerinden kaçının

Her ne kadar kullanışlı görünse de CSS'de @import bildirimlerinden kaçınmanız gerekir:

/* Don't do this: */
@import url('style.css');

<link> öğesinin HTML'de çalışma şekline benzer şekilde, @import bildirimi harici bir CSS kaynağını stil sayfasından içe aktarmanıza olanak tanır. İlgili içeriği oluşturmak için kullanılan bu iki yaklaşım arasındaki en önemli fark, HTML <link> öğesinin HTML yanıtının bir parçasıdır ve bu nedenle, bir CSS'den çok daha erken keşfedilebilir. dosyası, @import beyanıyla indirildi.

Bunun nedeni, bir @import beyanının dosyayı içeren CSS dosyasının önce indirilmesi gerekir. Bu istek zinciri olarak bilinen bu durum, CSS'de de gecikmelere neden olur. oluşturulma süresini ölçmenizi sağlar. Bir diğer dezavantaj ise @import bildirimi kullanılarak yüklenen stil sayfaları, ve dolayısıyla geç keşfedilen, oluşturma engelleyen kaynaklar haline gelir.

<!-- Do this instead: -->
<link rel="stylesheet" href="style.css">

Çoğu durumda, @import öğesini bir <link rel="stylesheet"> öğesi. <link> öğeleri, stil sayfalarının @import ile kıyaslandığında eş zamanlı olarak indirildi ve genel yükleme süresi azaldı. bildirimleri tanımlamaya çalışın.

Kritik CSS'leri satır içine alın

CSS dosyalarının indirilmesi için gereken süre, bir sayfanın FCP'sini artırabilir. Satır içine alma <head> dokümanındaki kritik stiller sayesinde, bir CSS kaynağı ve doğru yapıldığında Kullanıcının tarayıcı önbelleği hazırlanmaz. Kalan CSS yüklenebilir eşzamansız olarak veya <body> öğesinin sonuna eklenir.

<head>
  <title>Page Title</title>
  <!-- ... -->
  <style>h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}</style>
</head>
<body>
  <!-- Other page markup... -->
  <link rel="stylesheet" href="non-critical.css">
</body>

Olumsuz yönden bakıldığında, çok sayıda CSS'yi satır içi yapmak baştaki satıra daha fazla bayt ekler. HTML yanıtı. HTML kaynakları genellikle çok uzun bir süre boyunca veya all—bu, satır içi CSS'nin yayınlanabilecek sonraki sayfalar için önbelleğe alınmadığı anlamına gelir harici stil sayfalarında aynı CSS'yi kullanmalıdır. Sayfanızın performansını test edin ve verdiğiniz çabaya değdiğinden emin olmak için performansı test etmelisiniz.

CSS demoları

JavaScript

Web'deki etkileşimin büyük bir kısmını JavaScript sağlar ancak bunun bir maliyeti vardır. Çok fazla JavaScript göndermek, sayfa sırasında web sayfanızın yanıt vermeyi yavaşlatmasına neden olabilir. olabilir, hatta etkileşimleri yavaşlatan yanıt verme sorunları bile ortaya çıkabilir. ve bu da kullanıcılar için can sıkıcı olabilir.

Oluşturmayı engelleyen JavaScript

defer veya async özellikleri olmadan <script> öğelerini yüklerken tarayıcı, komut dosyası indirilene, ayrıştırılana ve yürütüldü. Benzer şekilde, satır içi komut dosyaları, komut dosyası ayrıştırılana kadar ayrıştırıcıyı engeller. ve yürütülmüştür.

async - defer maçı

async ve defer, harici komut dosyalarının HTML'yi engellemeden yüklenmesine izin veriyor ayrıştırıcısı ise type="module" içeren komut dosyaları (satır içi komut dosyaları dahil) otomatik olarak ertelenir. Ancak async ve defer arasında bazı farklılıklar vardır: bunların anlaşılması önemlidir.

async ile yüklenen komut dosyaları ayrıştırılır ve indirildikten hemen sonra yürütülür defer ile yüklenen komut dosyaları, HTML belgesi ayrıştırma işlemi yapıldığında yürütülür tamamlandı - bu, tarayıcının DOMContentLoaded etkinliğiyle aynı anda gerçekleşir. Ayrıca, async komut dosyaları sırasız yürütülebilir, defer komut dosyası ise işaretleri işaretlemede göründükleri sırayla yürütülür.

İstemci tarafı oluşturma

Genel olarak, herhangi bir eleştirel içeriği veya bir sayfasının LCP öğesine dokunun. Bu, istemci tarafı oluşturma olarak bilinir ve bir tekniktir. Bu, Tek Sayfalık Uygulamalarda (SPA'lar) yaygın olarak kullanılmaktadır.

JavaScript tarafından oluşturulan işaretleme, kaynak olarak önceden yükleme tarayıcısını atlar içinde yer alan işaretlemeler, istemci tarafından oluşturulan işaretlemede bulunamaz. Bu LCP görüntüsü gibi önemli kaynakların indirilmesini geciktirebilir. Tarayıcı LCP resmini yalnızca komut dosyası yürütüldükten sonra indirmeye başlar ve DOM'ye ekleyin. Sonuç olarak, komut dosyası yalnızca bulunabilir, indirilebilir ve ayrıştırılabilir. Bu, kritik istek olarak bilinir ve zincirindeki gibi bu tür durumlardan kaçınılmalıdır.

Ayrıca, JavaScript kullanarak işaretleme oluşturmak, uzun görevler, bir gezinme sonucunda sunucudan indirilen işaretlemeye göre isteğinde bulunabilirsiniz. HTML'nin istemci tarafında oluşturulmasının kapsamlı kullanımı, etkileşim gecikmesi. Bu, özellikle bir sayfanın DOM'sinin çok büyük, bu da JavaScript değişiklik yaptığında önemli bir oluşturma işi DOM.

Küçültme

CSS'ye benzer şekilde, JavaScript'i küçültmek bir komut dosyası kaynağının dosya boyutunu küçültür. Bu, indirme işleminin daha hızlı olmasını ve tarayıcının ve derleme işlemini daha hızlı bir şekilde yapabilirsiniz.

Ayrıca, JavaScript'in küçültülmesi, küçültme işleminden bir adım daha ileri gider. diğer öğeleri kullanabilirsiniz. JavaScript küçültüldüğünde, sadece sadeleştirilerek boşluk, sekme ve yorum gibi öğelerin yanı sıra kaynakta simgeler JavaScript kodları kısaltılmıştır. Bu işlem bazen kullanıcı onayı olarak da bilinir. Alıcı: farkı görmek için aşağıdaki JavaScript kaynak kodunu alın:

// Unuglified JavaScript source code:
export function injectScript () {
  const scriptElement = document.createElement('script');
  scriptElement.src = '/js/scripts.js';
  scriptElement.type = 'module';

  document.body.appendChild(scriptElement);
}

Önceki JavaScript kaynak kodu düzeltildiğinde, sonuç aşağıdaki kod snippet'i gibi bir şey kullanabilirsiniz:

// Uglified JavaScript production code:
export function injectScript(){const t=document.createElement("script");t.src="/js/scripts.js",t.type="module",document.body.appendChild(t)}

Önceki snippet'te, okunabilir değişkenin Kaynaktaki scriptElement kısaltıldı ve t olarak kısaltıldı. Uygulandığında çok fazla tasarruf sağlandığından, bir web sitesinin üretim JavaScript'inin sağladığı özellikler.

Web sitenizin kaynak kodunu işlemek için bir paketleyici kullanıyorsanız, hata ayıklama genellikle üretim derlemeleri için otomatik olarak yapılır. Terser gibi kötü amaçlı yazılımlar, Yüksek düzeyde yapılandırılabilir. Bu sayede, en yüksek kazancı elde etmek amacıyla hata ayıklama algoritmasının agresifliğini korur. Ancak, hata ayıklama araçlarının varsayılanları genellikle ihlal için yeterlidir. ve özelliklerin korunması arasında doğru bir denge kurmaktır.

JavaScript demoları

Bilginizi test etme

Sıradaki: Kaynak ipuçlarıyla tarayıcıya destek olma

Artık <head> öğesinde kaynakların nasıl yüklendiğini bildiğinize göre ilk sayfa yüklemesini ve çeşitli metrikleri etkilemesi durumunda, devam edebilirsiniz. Sonraki modülünde, kaynak ipuçlarının incelendiği ve edinilen bilgilerin, kaynak yüklemeye ve kaynaklar arası bağlantıları açmaya başlamak için tarayıcı diğer sunuculardan daha erken teslim edilmesini sağlar.