Lighthouse raporunuzun Fırsatlar bölümünde, sayfanızda ilk boyamayı engelleyen tüm URL'ler listelenir. Amaç, kritik kaynakları satır içi olarak ekleyerek, kritik olmayan kaynakları erteleyerek ve kullanılmayan her şeyi kaldırarak bu oluşturma işlemini engelleyen URL'lerin etkisini azaltmaktır.
Hangi URL'ler oluşturmayı engelleyen kaynak olarak işaretlenir?
Lighthouse, iki tür oluşturmayı engelleyen URL'yi işaretler: komut dosyaları ve stil sayfaları.
Aşağıdakileri yapan bir <script> etiketi:
- Dokümanın
<head>bölümünde yer alıyor. deferözelliği yok.asyncözelliği yok.
Aşağıdakileri yapan bir <link rel="stylesheet"> etiketi:
disabledözelliği yok. Bu özellik mevcut olduğunda tarayıcı stil sayfasını indirmez.- Kullanıcının cihazıyla özel olarak eşleşen bir
mediaözelliği yoktur.media="all", oluşturmayı engelleyen bir öğe olarak kabul edilir.
Kritik kaynakları belirleme
Oluşturma işlemini engelleyen kaynakların etkisini azaltmanın ilk adımı, hangilerinin önemli olup olmadığını belirlemektir. Kritik olmayan CSS ve JS'yi belirlemek için Chrome Geliştirici Araçları'ndaki Kapsam sekmesini kullanın. Bir sayfayı yüklediğinizde veya çalıştırdığınızda sekme, ne kadar kodun kullanıldığını ve ne kadarının yüklendiğini gösterir:
Yalnızca ihtiyacınız olan kodu ve stilleri göndererek sayfalarınızın boyutunu küçültebilirsiniz. Bir URL'yi tıklayarak bu dosyayı Kaynaklar panelinde inceleyebilirsiniz. CSS dosyalarındaki stiller ve JavaScript dosyalarındaki kodlar iki renkle işaretlenir:
- Yeşil (kritik): İlk boyama için gerekli olan 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 olan stiller; sayfanın temel işlevinde kullanılmayan kod.
Oluşturmayı engelleyen komut dosyalarını kaldırma
Kritik kodu belirledikten sonra bu kodu, oluşturmayı engelleyen URL'den HTML sayfanızdaki satır içi bir script etiketine taşıyın.
Sayfa yüklendiğinde, sayfanın temel işlevini yerine getirmek için gerekenlere sahip olur.
Oluşturma işlemini engelleyen bir URL'de kritik olmayan bir kod varsa bu kodu URL'de tutabilir ve ardından URL'yi async veya defer özellikleriyle işaretleyebilirsiniz (ayrıca JavaScript ile Etkileşimli İçerik Ekleme başlıklı makaleyi inceleyin).
Hiç kullanılmayan kod kaldırılmalıdır (Kullanılmayan kodu kaldırma sayfasına göz atın).
Oluşturmayı engelleyen stil sayfalarını ortadan kaldırma
Bir <script> etiketine kod eklemeye benzer şekilde, HTML sayfasının head bölümündeki bir <style> bloğunun içine ilk boyama için gerekli kritik stilleri ekleyin.
Ardından, preload bağlantısını kullanarak stillerin geri kalanını eşzamansız olarak yükleyin (Kullanılmayan CSS'yi erteleme bölümüne bakın).
Kritik aracı kullanarak "Ekranın Üst Kısmı" CSS'sini çıkarma ve satır içine alma işlemini otomatikleştirmeyi düşünün.
Oluşturma işlemini engelleyen stilleri ortadan kaldırmanın bir başka yolu da bu stilleri medya sorgusuna göre düzenlenmiş farklı dosyalara bölmektir. Ardından her stil sayfası bağlantısına bir medya özelliği ekleyin. Tarayıcı, bir sayfayı yüklerken yalnızca kullanıcının cihazıyla eşleşen stil sayfalarını almak için ilk boyamayı engeller (Oluşturma işlemini engelleyen CSS bölümüne bakın).
Son olarak, fazla boşlukları veya karakterleri kaldırmak için CSS'nizi küçültmek istersiniz (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öndermiş olursunuz.
Gruba özel yönergeler
AMP
Sunucu tarafı oluşturma AMP düzenleri için AMP Optimize Edici gibi araçlar kullanın.
Drupal
Kritik CSS ve JavaScript'leri satır içi yapmak için modül, kritik olmayan CSS veya JavaScript'ler için ise ertele özelliğini kullanabilirsiniz.
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.