WordPress siteniz ücretli bir WordPress teması veya resmi WordPress Temaları deposundan popüler bir tema kullanıyorsa, temanın çeşitli kullanım durumları için geliştirilme olasılığı yüksektir. Ve temada bulunan tüm özelliklerin yalnızca küçük bir setini kullanıyor olabilirsiniz.
Bu durumda siteniz, sitenizin sayfalarını biçimlendirmek için gerekli olmayan çok sayıda kullanılmayan CSS yüklüyor. Örneğin, kullandığınız WordPress temasının WooCommerce sayfaları için de stilleri olabilir, ancak WordPress sitenizde yalnızca bir blog çalıştırıyorsanız, sitenizdeki WooCommerce sayfaları için dahil edilen CSS'yi kullanmıyorsunuz ve bu nedenle kullanılmayan hizmet veriyorsunuz. Kullanıcılara CSS.
Web sitenizi Google Pagespeed aracında test ettiyseniz, sitenizde kullanılmayan CSS sorunları olduğunu muhtemelen zaten biliyorsunuzdur. Bu kılavuzda, önce kullanılmayan CSS'yi nasıl kontrol edeceğinizi, ardından kullanılmayan CSS'yi WordPress sitenizden kaldırmak için ücretsiz bir araç kullanmayı göstereceğiz.
Kullanılmayan CSS Nasıl Kontrol Edilir
Google Chrome DevTools (bağlam menüsünde "İncele" seçeneğini tıkladığınızda gördüğünüz), Kaynaklar sekmesinde bir Kapsam özelliğine sahiptir. Web sitenizin yüklediği kullanılmayan CSS ve JS'yi bulmak için Kapsam seçeneğini kullanabilirsiniz.
- Web sitenizi masaüstünde Chrome'da açın.
- Sitenizde boş bir beyaz alana sağ tıklayın ve İncelemek bağlam menüsünden.
- Tıkla Kaynaklar sekme, basın Ctrl + Üst Karakter + P bir komut penceresi açmak için yazın kapsama ve seçin Enstrümantasyon kapsamına başlayın ve sayfayı yeniden yükleyin mevcut komutlardan
- Kapsam sekmesi altında, URL filtresi alanına girin ve yalnızca dahili CSS/JS dosyalarını göstermek için sitenizin kök etki alanını buraya girin.
└ Kontrol edin Kullanılmayan bayt Temanızdan bir CSS/JS dosyasına yüklenen verilerin yüzdesini görmek için sütun.
- Siteniz tarafından yüklenen kullanılmayan CSS'yi (kırmızı çubuklarla işaretlenmiştir) görüntülemek için bir CSS dosyasına tıklayın. Geçerli sayfada kullanılan CSS, yeşil çubuklarla gösterilecektir.
Web sitenize yüklenen kullanılmayan tüm CSS'leri analiz ettikten sonra, bunları kaldırmanın zamanı geldi. Kullanılmayan CSS'yi web sayfalarından kaldırmak için kullanılabilecek birkaç ücretsiz araç vardır. Aşağıda, kendi projelerimde test ettiğim ve kullandığım popüler araçlardan biri var.
Kullanılmayan CSS'yi Kaldırmak için PurifyCSS Online'ı kullanın
Genellikle, WordPress'te hemen hemen her şey için bir eklenti bulabilirsiniz. Ancak kullanılmayan CSS'yi kaldırmak için maalesef tek bir eklenti mevcut değil. Bu nedenle, kullanılmayan CSS'yi sitenizden kaldırmak için wordpress'e özgü olmayan manuel araçları kullanacağız.
PurifyCSS en çok dostu geliştirici olmayan araç kullanılmayan CSS ile başa çıkmak için bulabilirsiniz. Araç, kullanıcıların Web Sitesi URL'sini VEYA HTML ve CSS kodunu sağlamalarına izin veren basit bir kullanıcı arayüzüne sahiptir. WordPress için, URL seçeneğini kullanacağız ve aracın tüm CSS'yi almasına ve kullanılmayan CSS için optimize etmesine izin vermek için sitenizdeki her tür sayfaya bağlantılar sağlayacağız.
Araca eklemeniz gereken sayfaların hızlı bir listesi:
- Ana sayfa URL'si
- Sitenizdeki her Kategoriden birden çok gönderi sayfası URL'si
└ Bu, tüm gönderi öğeleri için CSS'nin dahil edilmesini sağlamak içindir.
- İletişim, Hakkında, Gizlilik ve sitenizde olabilecek her türlü farklı sayfa.
- Arşiv sayfası, Arama sayfası, Yazar sayfaları
- Özel Gönderi Türü sayfaları
Sıcak İpucu: Genel olarak kullandığınız Tablo, Resim Galerisi, Kod, Ön, Sıralı listeler, Sırasız listeler, Formlar, Sekmeler, Akordeonlar, Gutenberg Blokları gibi kullandığınız veya gelecekte kullanabileceğiniz tüm tema öğelerini içeren bir 'özellikler' yazısı/sayfası oluşturun. , vb.
Sık kullanılan öğeler için CSS'nin dahil edildiğinden emin olmak için PurifyCSS Çevrimiçi aracındaki bu "özellikler" gönderi URL'sini kullanın.
I vur CSS'yi temizle PurifyCSS Online aracına sitenizden ilgili tüm URL türlerini ekledikten sonra düğmesine basın.
Araç tarafından oluşturulan yeni CSS'yi kopyalayın ve sitenizde kullanın. Emin olun orijinal style.css dosyasını yedekleyin PurifyCSS tarafından oluşturulan yeni CSS'yi değiştirmeden önce temanızdaki diğer CSS dosyaları.
Uç: Temanızın CSS dosyalarını düzenlemek için yerleşik WordPress Tema Düzenleyicisini kullanabilir veya sunucuya bağlanmak ve bir Not Defteri düzenleyicisi kullanarak dosyaları rahatça düzenlemek için bir FTP/SFTP programı kullanabilirsiniz.