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