Ö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 dinamikimport()
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.
![Chrome Geliştirici Araçları'ndaki kapsam aracının ekran görüntüsü. Alt bölmesindeki CSS dosyası, geçerli sayfa düzeni tarafından kullanılmayan önemli miktarda CSS'yi gösteriyor.](https://web.dev/static/learn/performance/optimize-resource-loading/image/fig-1.png?authuser=9&hl=tr)
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
Tarayıcıda birden fazla CSS dosyası yüklemenin en iyi yolu nedir?
@import
beyanı.<link>
öğesi.Tarayıcı önceden yükleme tarayıcısı ne yapar?
<link rel="preload">
öğeyi algılar:
HTML kaynağı.
Tarayıcı neden JavaScript kaynaklarını indiriyor musunuz?
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.