Web Dev - Kullanılmayan CSS,JS Azaltın

Merhabalar, kendi yazdığım bir script de pagespeed.web.dev üzerinde query.min.js ve bootstrap.min.css dosyalarım için kullanılmayanları azaltın diyor ama bu sorunu nasıl çözebilirim önerisi olan var mı?

https://prnt.sc/lMjIOuoqa-BO

Kullanılmayanları tespit edip kaldırın fakat benim tavsiyem geciktirin sadece. Bazen pagespeed kullanılmıyor olarak görüyor fakat bir saniye sonra kullanılıyor aslında o kod.

Yani JS'ye ve CSS'e defer eklediğimde sorun çözülür mü hocam?

Yüksek ihtimal çözülür hocam bir deneyin isterseniz yoksa başka bir yöntem deneyelim. Bu arada gtmetrix sorgusuda yapın siteye. Orası daha doğru söylüyor bence verileri. Fakat gtmetrix'in yurtdışından analiz ettiğini es geçmeyin. Oradaki veriler neyse aslında bir tık fazla iyisi sizin siteniz.

Aslında bu js ve css hatası masaüstü testinde çıkmıyor sadece mobilde çıkıyor. Neden böyle anlamadım gtmetrixte bir sorun gözükmüyor. https://prnt.sc/0PXP_aEwITP4

Çünkü masaüstünde yüksek internet hızlı cihazdan test ediliyor fakat mobil'de mobil veri ile test ediyor. Mobilde insanlar genelde mobil veri ile bağlandığı için. Aslında önemli olan mobil tabiki, günümüzde analizlere baktığımda %80 üstü mobil cihaz kullanıyor benim siteme girenler.

Üzerinde çok da fazla durulması gereken bir yük değil aslında. Kullanılmayan css ve js'leri kaldırırken dikkatli olmakta fayda var.
Muhtemelen, tek bir sayfada kullanılıyor o kodlar ve siz sitenizin ana sayfasını v.s test ettiğiniz için kullanılmayan css ve js uyarısı veriyor.

Wordpress üzerinden örnek vereyim, Contact Form eklentisi var iletişim formu oluşturmaya yarayan. Doğal olarak css dosyası ile yapıyor bunu.
Fakat, sadece iletişim formunun olduğu değil, sitenin ana sayfası, kategori ve içerik sayfalarında da bu css dosyası gereksiz yere yükleniyor.
Sitenin iletişim formunun olduğu url'i test ettiğimizde kullanılmayan css uyarısı vermiyor ama bu sayfa hariç ana sayfa ve diğer alt sayfalarda kullanılmayan css uyarısı veriyor.

Sizde de muhtemelen bu durum tarzı bir şey var.

Bu gibi durumlarda en iyi seçenek, bahsi geçen css ve js'leri header'da değil de, kendi özelindeki url'de kullanacak şekilde kodlama yapmanızdır.

bu işlem çoğunlukla sağlıklı sonuç vermiyor. çünkü bozulmalar oluyor.
yine de sorunsuza en yakın yöntemi bu videodan izleyebilirsiniz.


https://www.youtube.com/watch?v=yX9jMcU_hcU

Sayfalarda kullanılan critical css'leri head'a ekleyip diğerlerini geciktirin. Bunu perfmatters ile yapabilirsiniz. Jquery'e gelirse, ilk başta jquery'e bağımlı bir script veya internal code yoksa jquery'i de ilk kullanıcı aksiyonuna kadar geciktirin