İpucu: WordPress Eklentisiz Site Optimizasyonu - Gereksiz Kodlardan Kurtularak Site Hızlandırma

Arkadaşlar merhaba, vereceğim ipucu forumda var mı bilmiyorum, ben görsel destekli anlatmak istedim, yeni bir site açtım ve tema tercihimden kaynaklı bir çok kişiselleştirme özelliği bulunuyordu ve bir özelliği seçtiğimde geri aktif olmayan onlarca özellik boşuna css ve js kodlarında yer kaplıyordu, Geliştirici Araçları (CTRL + SHIFT + I ) ile sitemizde kullanılmayan kodların tespit edip gerekli diğer adımları uyguluyoruz.


Gördüğünüz gibi açtığımız Coverage aracı açtık sol taraftan kayıt açıp kapatarak, yukarıdaki resimde kırmızı alanda ki gibi bir css dosyasıları listelenir ve kırmızı ile css ya da js dosyasındaki kullanılmayan alanları göstermekte, ben başlangıç olarak test etmek amacıyla 391.463 bytes olan bir css dosyasını seçtim, %95 e yakın kullanılmayan alan mevcut, bu yüzdeyi orada da görebiliyorsunuz, yukarı tarafta (Source) kısmında hangi kodların kullanılıp kullanılmadığını görüyorsunuz, ve yeşil olan satırları notpad++ dan açtığım yeni bir sekmede toplamaya başladım.

Gördüğünüz gibi yeşil alanları toplayarak yani kullanılan alanları toplayarak 10292 satır (391.463 bytes) koddan 540 satır (24.382 bytes) koda indirgedik , sonrasında bu topladıklarımızı css compresor sitesi yardımıyla sıkıştırdım, kullandığım site: https://csscompressor.com/ - 540 satır kodu da sıkıştırarak kendi içinde %15 lik ayrıca bir gereksiz alanı silmiş oldum

Final
sadece bir dosyadan bu kadar büyük alan kazanmış olmamız inanılmaz bir şey, diğer css ve js dosyalarına aynı işlemleri yaparak çok büyük hız kazandırabiliriz, böylelikle eklentisiz site optimizasyonu yapmış olduk, tek bir dosyayı - 391 kb dan 21kb a dosya boyutunu küçülttük, eminim yazılımsal olarak daha çok daha iyisi olacağını düşünmüyorum, teşekkürler okuduğunuz için yorumu eksik görmeyin
____
Zamanı olmayan arkadaşlar varsa ücretli destek sağlayıp kullanılmayan kodlarını temize çekebilirim

Şimdi anlattığınız güzel bir şey ama ; şöyle bir durum var örnek veriyorum style.css dosyasında bu düzenlemeyi yaptığınız zaman sitede bozulmalar olucaktır anasayfada olmaz testi anasayfada yaptysan ama diğer sayfalarda olucak bu hatalar . Yapacak olan arkadaşlar var ise yedeğini almadan yapmasın

Taktik güzel ama dediği gibi ana sayfada kullanılmayan şey farklı sayfada kullanılıyorsa bu bozulmalara sebep olacaktır.

Valla tam aradığım şey ama anlayamadığım kısım var.o source kısmından düşürmek istediğimiz cssyi mi seçeceğiz ve o kısımdan hangi kodlar gereksiz olduğunu nereden anlayacağız? kırmızı kesimler mi gereksiz kodlar onlarımı silmemiz gerek?


Gördüğünüz gibi açtığımız Coverage aracı açtık sol taraftan kayıt açıp kapatarak, yukarıdaki resimde kırmızı alanda ki gibi bir css dosyasıları listelenir ve kırmızı ile css ya da js dosyasındaki kullanılmayan alanları göstermekte, ben başlangıç olarak test etmek amacıyla 391.463 bytes olan bir css dosyasını seçtim, %95 e yakın kullanılmayan alan mevcut, bu yüzdeyi orada da görebiliyorsunuz, yukarı tarafta (Source) kısmında hangi kodların kullanılıp kullanılmadığını görüyorsunuz, ve yeşil olan satırları notpad++ dan açtığım yeni bir sekmede toplamaya başladım.

Bakın iki örnek göstereyim, şimdi style css dosyasını mobil görünümle açtığınız da masa üstü kodlarını kullanılmayan olarak gösteriyor, masa üstü açtığınız da bu sefer de mobili kullanılmıyor olarak gösteriyor. Dikkatli olursanız taktik çok iyi etki eder ama aksi halde siteniz yamulur

Aynı kod satırı aşağıda farklı görünmekte dikkat etti iseniz.

Benim site de baya yavaş ya...

Siteyi p.m atar mısın bana Bu aralar hız takıntım var 95 üstü yapamazsam rahat edemiyorum, belki sana da bir nebze faydam olur

Size o zaman 0 puanlık sitemi atıyorum

PM attım sayın hocam