Lighthouse raporunuzun Fırsatlar bölümünde, sayfanızın ilk boyamasını engelleyen tüm URL'ler listelenir. Amaç, kritik kaynakları satır içine alarak, kritik olmayan kaynakları erteleyerek ve kullanılmayanları kaldırarak bu oluşturmayı engelleyen URL'lerin etkisini azaltmaktır.
Hangi URL'ler oluşturmayı engelleyen kaynak olarak işaretlenir?
Lighthouse, iki tür oluşturma engelleme URL'sini işaretler: komut dosyaları ve stil sayfaları.
Aşağıdaki özellikleri taşıyan bir <script>
etiketi:
- Belgenin
<head>
içinde yer alıyor. defer
özelliği yok.async
özelliği yok.
Aşağıdaki özellikleri taşıyan bir <link rel="stylesheet">
etiketi:
disabled
özelliği yok. Bu özellik mevcut olduğunda, tarayıcı stil sayfasını indirmez.- Özel olarak kullanıcının cihazıyla eşleşen bir
media
özelliği içermiyor.media="all"
, oluşturmayı engelleyen bir işlev olarak kabul edilir.
Kritik kaynakları belirleme
Oluşturmayı engelleyen kaynakların etkisini azaltmanın ilk adımı, neyin kritik olduğunu, neyin olmadığını belirlemektir. Kritik olmayan CSS ve JS'yi tanımlamak için Chrome Geliştirici Araçları'ndaki Kapsam sekmesini kullanın. Bir sayfayı yüklediğinizde veya çalıştırdığınızda, bu sekmede kodun ne kadar kullanıldığı ve ne kadar kod kullanıldığı belirtilir:
Yalnızca ihtiyacınız olan kodu ve stilleri göndererek sayfalarınızın boyutunu azaltabilirsiniz. Bir dosyayı incelemek için Kaynaklar panelinde o URL'yi tıklayın. CSS dosyalarındaki stiller ve JavaScript dosyalarındaki kod iki renkte işaretlenir:
- Yeşil (kritik): İlk boyama için gereken stiller; sayfanın temel işlevi için kritik olan kod.
- Kırmızı (kritik olmayan): Hemen görünmeyen içerik için geçerli stiller; kod, sayfanın temel işlevinde kullanılmıyor.
Oluşturma engelleyici komut dosyaları nasıl ortadan kaldırılır?
Kritik kodu belirledikten sonra, bu kodu oluşturma engelleyici URL'den HTML sayfanızdaki bir satır içi script
etiketine taşıyın.
Sayfa yüklendiğinde, sayfanın temel işlevini yerine getirmek için gereken özelliklere sahip olacaktır.
Oluşturmayı engelleyen bir URL'de kritik olmayan kod varsa bu kodu URL'de tutabilir ve ardından URL'yi async
veya defer
özellikleriyle işaretleyebilirsiniz (ayrıca bkz. JavaScript ile Etkileşim Ekleme).
Hiç kullanılmayan kod kaldırılmalıdır (Kullanılmayan kodu kaldırma bölümüne bakın).
Oluşturmayı engelleyen stil sayfaları nasıl ortadan kaldırılır?
Kodu <script>
etiketinde satır içine yerleştirmeye benzer şekilde, HTML sayfasının head
konumunda <style>
bloğunun içindeki ilk boyama için satır içi kritik stiller gereklidir.
Daha sonra, preload
bağlantısını kullanarak geri kalan stilleri eşzamansız olarak yükleyin (Kullanılmayan CSS'yi erteleme bölümüne bakın).
Kritik araç'ı kullanarak "Ekranın Üst Kısmındaki" CSS'yi ayıklama ve satır içine alma işlemini otomatikleştirmeyi düşünün.
Oluşturma engelleme stillerini ortadan kaldırmaya yönelik bir başka yaklaşım da, bu stilleri medya sorgusuna göre düzenlenmiş farklı dosyalara bölmektir. Sonra her stil sayfası bağlantısına bir medya özelliği ekleyin. Bir sayfa yüklenirken tarayıcı yalnızca kullanıcının cihazıyla eşleşen stil sayfalarını almak için ilk boyamayı engeller (CSS Oluşturmayı Engelleme bölümüne bakın).
Son olarak, fazla boşlukları veya karakterleri kaldırmak için CSS'nizi küçültmeniz gerekir (CSS'yi küçültme bölümüne bakın). Bu sayede kullanıcılarınıza mümkün olan en küçük paketi gönderebilirsiniz.
Yığına özel rehberlik
AMP
Sunucu tarafı oluşturma AMP düzenleri için AMP Optimize Edici gibi araçlar kullanın.
Drupal
Advanced CSS/JS Aggregation modülü gibi bir modül kullanarak kritik CSS ve JavaScript'leri satır içi yapmayı veya JavaScript ile öğeleri eşzamansız olarak yüklemeyi düşünebilirsiniz.
Joomla
Kritik öğeleri satır içi yapmanıza veya daha az önemli kaynakları ertelemenize yardımcı olabilecek çeşitli Joomla eklentileri vardır.
WordPress
Kritik öğeleri satır içi yapmanıza veya daha az önemli kaynakları ertelemenize yardımcı olabilecek çeşitli WordPress eklentileri vardır.