Google PageSpeed Insights (Web.dev) web site hızını ölçerken bu hata ile karşılaşmış olabilirsiniz. Core Web Vitals (Önemli Web Verileri) testinden geçmek için bu problemlerin çözülmesi gerekiyor.

Web sitenizde görüntülenmesini engelleyen kaynakları kaldırın. Bu, Google sayfa hızı testinin iyi bilinen bir önerisidir. Kaynaklar temel olarak, ziyaretçi web sitesini görüntülediğinde ilk olarak yüklenen dosyalara atıfta bulunur.

Dosyaların yüklenmesi gerekiyorsa, bu ayrı olarak yüklenir ve dosyanın tamamı yüklenene kadar bu dosyalar etkinleştirilmez. Bu, web sitesinin yüklenmesinde gecikmeye ve görüntülemenin engellenmesine neden olabilir. Sayfa hızı ve Web Vitals giderek daha da seo trendi haline gelmektedir. Dolayısıyla, bu bildirimden nasıl kaçınılacağına bakmaya başlamanın zamanı geldi. Her zaman en iyi 5 sayfanızı hız testinden geçirin.

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın

Kaynaklar, sayfanızda ilk boyamayı engelliyor. Kritik JS/CSS’yi satır içinde yayınlama ve kritik olmayan tüm JS/stilleri erteleme seçeneğini değerlendirin

Bunlar çoğunlukla web sitesinin html’sinin başında yüklenen js ve css dosyalarıdır. Önemli olan, neyin en önemli olduğuna ve gerçekten neye ihtiyacınız olduğuna bakmaktır. En iyisi sadece ihtiyacınız olanı (minimum temel özellikleri) kullanmaktır. Kaldırabileceğiniz her şey (modül, eklenti veya fonksiyon) sayfa hızınız ve Web Vitals için iyi bir kazançtır.

JQuery kullananlar her zaman onu en önce yüklemek zorunda kalacaklardır. Bunları daha sonra yüklemek doğru değildir, diğer tüm javascript dosyalarını footer’a aktarabilirsiniz.

• WordPress için cache eklentisi kullanabilir; javascript delay yapabilirsiniz.

Satır içi CSS ve JavaScript

Önemli css’ler için en iyisi dosyayı ayrı olarak yüklemek yerine satır içi olarak yerleştirmektir. Bu, yükleme sürecini büyük ölçüde iyileştirir. Zaten satır içi olduğu için, dosyanın ayrıca yüklenmesi gerekmez ve yükleme sırasında hemen kullanılabilir.

Başka bir sunucudan yüklenmeleri gerekmiyorsa bunu JavaScript dosyalarıyla da yapabilirsiniz. JQuery’ye bağlı olan dosyalar için, defer (erteleme) ile yüklemek veya altbilgiye yerleştirmek daha iyidir. Doğrudan yüklenmeleri gerekmiyorsa, bunları altbilgiye satır içi dosyalar olarak da yerleştirebilirsiniz. Emin değilseniz, javascript’i footer’dan yüklemeyi seçin.

Async, defer ve diğer etiketler

Ayrıca, tarayıcının ne zaman yüklenip yüklenmeyeceğini daha iyi anlayabilmesi için gerekli dosyaları farklı şekilde kodlayabilirsiniz. Js dosyaları için async ve defer etiketleri vardır. “Async” dosyanın eşzamansız olarak yüklenip yüklenmeyeceğini, “defer” ise en son yüklenmesi gerektiğini belirtir. Emin değilseniz “async” kullanın.

Örnek async kullanımı:

<script async=”” src=”https://code.jquery.com/jquery-latest.min.js”></script>

Yine de önce jQuery’nizi yüklemek en mantıklısıdr çünkü diğer js dosyalarının çalışması için önce onun yüklenmesi gerekir.

CSS dosyaları için bazı etiketler de kullanabilirsiniz. Gerekli değilse ve yüklenmesi gerekmiyorsa, “devre dışı” yapabilirsiniz. Bu şekilde dosya yüklenmez. Javascript ile bunu daha sonra kaldırabilirsiniz, ancak son sayfa hızınız için pek yardımcı olmaz.

Son seçenekte, dosyanın hala yüklenmesi gerekirse css’yi satır içine koymak daha doğru olacaktır.