Oluşturmayı engelleyen kaynakları ortadan kaldırın

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.

Lighthouse Oluşturma engelleyici kaynakları ortadan kaldırma denetiminin ekran görüntüsü

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:

Chrome Geliştirici Araçları: Kapsam sekmesi
Chrome Geliştirici Araçları: Kapsam sekmesi.

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.

Kaynaklar