WordPress'te Kullanılmayan CSS Nasıl Güvenle Kaldırılır

WordPress'te kullanılmayan CSS'yi kaldırmak ve web sitenizi daha hızlı hale getirmek ister misiniz?

Web sitesi optimizasyonunun temel amacı, gereksiz kodları kaldırmaktır. Bu, web sitenizin sayfalarının toplam boyutunu azaltır ve daha hızlı sayfa yükleme sürelerine ve ziyaretçiler için daha iyi bir kullanıcı deneyimine yol açar.

Web sitesi sayfalarının boyutunu büyük ölçüde azaltabileceğiniz bir alan stildir. Web sitesi stili, HTML ve Javascript'in yanı sıra World Wide Web'in temel yapı taşlarından biri olan Basamaklı Stil Sayfaları adı verilen kural tabanlı bir dil aracılığıyla kontrol edilir.

Daha yaygın olarak CSS olarak kısaltılan stil sayfaları, sayfa renklerini, yazı tiplerini, arka planları, görüntü stilini, kenar boşluklarını, dolguyu ve daha fazlasını tanımlamak için kullanılabilir. Aşağıdaki örnekte CSS kodu, başlıkların ortalanmasını ve kırmızı renkte görüntülenmesini sağlıyor.

 h1 { text-align: center; color: red; }

Tipik bir WordPress web sitesi, bir sayfayı doğru şekilde görüntülemek için birçok stil sayfası gerektirir. WordPress'in temel sürümünde kullanılan CSS stiline ek olarak, CSS çağrıları, etkinleştirilmiş WordPress temanız ve WordPress eklentileriniz tarafından yapılır. Bu nedenle, bir WordPress web sitesi, her şeyi doğru bir şekilde biçimlendirmek için bir düzine CSS dosyası gerektirebilir.

Basamaklı Stil Sayfaları, dosyalar çok büyükse veya çok fazla CSS dosyası çağrılırsa sayfa yükleme sürelerini artırabilir. Bu sorunu çözmek için Ertele, Küçült ve Birleştir gibi bir dizi teknik kullanılabilir.

Aşağıda bu tekniklerin bir özeti bulunmaktadır.

CSS'nin ağırlığını daha da azaltmak istiyorsanız, ziyaretçiler tarafından yalnızca gerekli stilin indirilmesi için WordPress'te kullanılmayan CSS kurallarını kaldırmanızı öneririm. Tarayıcının gereksiz CSS kodu yüklemesini engelleyerek sayfa yüklemesini hızlandırabilir ve ziyaretçilere daha iyi bir kullanıcı deneyimi sunabilirsiniz.

Kullanılmayan CSS'ye daha yakından bakalım ve kullanılmayan CSS kodunu WordPress web sitenizden nasıl kaldırabileceğinizi inceleyelim.

WordPress'te Kullanılmayan CSS Nedir ve Neden Oluşur?

Kullanılmayan CSS, geçerli sayfada çağrılmayan CSS kurallarını ifade eder. Bu, sayfaların nadiren bir stil sayfasından her bir CSS kuralını çağırması gerektiğinden sık sık olur. Örneğin, stil sayfanız kırmızı rengi kullanan bir başlığı görüntülemek için bir CSS kuralı içerebilir, ancak gerçekten istenmemişse bu, kullanılmayan CSS olarak sınıflandırılır.

Tarayıcılar kullanılmayan CSS kurallarına ihtiyaç duymadığından, kod gereksiz yere CSS dosyalarının boyutunu büyütüyor. Bu nedenle, WordPress'te kullanılmayan CSS kodunu kaldırarak sayfa yükleme sürelerini iyileştirebilirsiniz.

WordPress temalarının, stilleri.css dosyasını ana stil sayfası olarak kullanması gerekir, ancak temaların yazı tipleri, tema dış görünümleri ve diğer tasarım öğeleri için ek stil sayfaları kullanması yaygın bir durumdur. Tema CSS dosyalarında yer alan CSS kurallarının birçoğu yalnızca belirli durumlarda gereklidir. Buna rağmen, bu CSS dosyaları genellikle web sitenizin her sayfasına yüklenir.

WordPress eklentileri, geliştiriciler varsayılan olarak tüm sayfalara sık sık stil sayfaları yüklediğinden, kullanılmayan CSS'yi sayfalara eklemek için özellikle kötüdür.

WordPress'te kullanılmayan CSS'yi kaldırmak iyi bir uygulamadır, ancak web sitenizin tasarımı için önemli olan herhangi bir CSS kodunu kaldırırsanız web sitenizin tasarımı bozulur.

Peki ya Kritik CSS?

Sıkça duyabileceğiniz bir başka terim de Kritik CSS'dir . İçeriği kaydırmadan kullanıcılara hemen göstermek için gerekli olan herhangi bir stili ifade eder. Bu alan , Ekranın Üstü olarak adlandırılır ve bir tarayıcının içeriği ekranın üst kısmına yüklemesi için geçen süre , İlk İçerikli Boyama (FCP) olarak adlandırılır.

Google, First Contentful Paint'in hızlı bir şekilde yüklenmesini sağlamak için Kritik CSS'nin ayıklanmasını, küçültülmesini ve HEAD öğesinde satır içinde görüntülenmesini önerir. Daha az önemli CSS dosyalarının ilk sayfa yüklemesini yavaşlatmamasını sağlamak için kritik olmayan CSS dosyalarını daha sonra yüklemek için erteleme kullanılabilir.

Kullanılmayan CSS Nasıl Bulunur?

Bir sayfada kullanılmayan CSS'yi keşfetmenin hızlı bir yolu, URL'sini GTmetrix, Google PageSpeed ​​Insights veya Pingdom Web Sitesi Hız Testi gibi bir performans raporu aracına girmektir. Rapor, kullanılmayan CSS'yi vurgulayacak ve kullanılmayan kuralların kaldırılmasını veya ertelenmesini önerecektir.

Modern tarayıcılar, bir web sitesinin tasarımını ve kodunu analiz etmenize yardımcı olacak geliştirici araçları sağlar. Google Chrome'daki geliştirici seçeneklerine Chrome DevTools adı verilir ve Kapsama sekmesi , kullanılmayan Javascript ve CSS kodunu bulmak için kullanılabilir. Birçok kullanılmayan kuralı olan CSS dosyalarını bulmanın hızlı ve etkili bir yoludur.

Chrome DevTools'u yüklemek için tek yapmanız gereken bir sayfayı sağ tıklayıp İncele'yi seçmektir. Ardından, her dosyanın URL'sini ve dosyanın Javascript, CSS veya her ikisi olup olmadığını görmek için Kapsam sekmesine tıklayabilirsiniz. Sağda, dosyanın bayt cinsinden toplam boyutunu ve kullanılmayan bayt sayısını görebilirsiniz. Bir görselleştirme çubuğu, kullanılmayan kodu kırmızı ve gerekli kodu mavi-yeşil renkte görüntüler. Bu, alt panelde özetlenmiştir, ancak belirli bir dosyaya tıklarsanız, yukarıdaki panelde kullanılmayan CSS kurallarının kırmızıyla vurgulandığını göreceksiniz.

Kapsam sekmesinin nasıl çalıştığı hakkında daha fazla bilgi için Chrome Geliştirici Kapsamı sayfasına bakın.

Diğer birçok ücretsiz ve premium kullanılmamış CSS aracı çevrimiçi olarak bulunabilir.

• JitBit Unused CSS aracı – Web sitenizdeki her sayfayı tarayan ve hiçbir yerde kullanılmayan CSS seçicileri vurgulayan ücretsiz bir hizmet
• PurifyCSS Online – Kullanılmayan kodu vurgulayan ve size temiz CSS dosyaları sağlayan kullanışlı ücretsiz bir araç
• UnusedCSS – Sayfa URL'lerini tarayan ve gereksiz kod içermeyen daha temiz CSS dosyaları sağlayan birinci sınıf bir hizmet (fiyatlandırma aylık 25 ABD dolarından başlar)

Chrome DevTools ve PurifyCSS Online gibi araçlar, web sitelerinde kullanılmayan CSS kurallarını görüntülemek için yararlı olabilirken, WordPress gibi dinamik bir platformda kullanılmayan CSS sorununu çözmek için her zaman pratik değildir.

WordPress temaları ve eklentileri, web sitenize farklı stil sayfalarının yüklenmesini gerektirir, bu nedenle kullanılmayan CSS miktarı sayfadan sayfaya değişir. Bu nedenle, WordPress'te kullanılmayan CSS'yi kaldırmak (veya ertelemek) için optimizasyon WordPress eklentilerini kullanmanın genellikle daha iyi olduğuna inanıyorum.

Kullanılmayan CSS'yi WordPress web sitenizden kaldırmanıza yardımcı olan bazı yararlı WordPress eklentilerine daha yakından bakalım.

WP Rocket Kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırma

WP Rocket, piyasadaki en popüler WordPress performans çözümlerinden biridir. WP Rocket lisansı yılda 49 ABD doları karşılığında mevcuttur.

Eklenti, kullanılmayan tüm CSS'leri bir düğmeye tıklayarak web sitenizden kaldırabilen bir araca sahiptir. Arka planda, WP Rocket'in yaptığı şey, her sayfadaki tüm stil sayfalarını ve komut dosyalarını incelemek ve CSS kurallarını HTML kodunda bulunan CSS seçicilerle eşleştirmek. Bu işlem harici olarak WP Rocket sunucularında yapılır, bu nedenle WordPress güvenlik eklentinizin sunucu IP adreslerini beyaz listeye aldığından emin olun.

WP Rocket, kullanılmayan tüm CSS kodlarını otomatik olarak kaldırdığından, bu aracın iletişim formu gibi web sitenizin tasarımının bir bölümünü bozabileceği durumlarla karşılaşabilirsiniz. Böyle bir durumda, ilgili CSS dosyasını, kimliğini veya sınıfını WP Rocket CSS güvenli listesine ekleyin.

Önerilen Okuma: WordPress veritabanı nasıl temizlenir

Perfmatters Kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırma

Perfmatters, web sitemde kullanılmayan CSS kodunu kaldırmak için kullandığım optimizasyon çözümüdür. Yılda yalnızca 24,95 ABD doları karşılığında sunulan birinci sınıf bir WordPress eklentisidir.

Perfmatters Komut Dosyası Yöneticisi ile, web sitenizdeki belirli gönderilerde ve sayfalarda CSS dosyalarını ve Javascript dosyalarını etkinleştirebilir ve devre dışı bırakabilirsiniz. Normal ifadelere, bir kullanıcının oturum açma durumuna ve cihaz türüne göre komut dosyası hariç tutmalarında istisnalar yapılabilir.

Eklentinin, kötü optimize edilmiş WordPress eklentileriyle mücadelede oldukça etkili olduğunu gördüm. Örneğin Jetpack'i ele alalım. Web sitenizin ön yüzü için herhangi bir Jetpack modülü kullanmasanız bile, web sitenizin her sayfasına 85.1 KB CSS dosyası yükleyecektir. Aşağıda görebileceğiniz gibi Perfmatters, bu gereksiz CSS dosyasının yüklenmesini durdurmama izin veriyor.

Asset CleanUp Kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırma

Perfmatters'a harika bir alternatif Asset CleanUp'tır. Eklentinin kullanımı ücretsizdir, ancak birçok ek özelliğin kilidini açan 42,08 € karşılığında premium bir sürüm mevcuttur.

Asset CleanUp'ın CSS ve Javascript yöneticisi, dosyaları önceden yüklemenize ve web sitenizdeki belirli sayfalardaki dosyaları devre dışı bırakmanıza olanak tanır. Oturum açmış kullanıcılar için istisnalar yapılabilir.

Asset CleanUp Pro'ya yükseltirseniz, web sitenizin CSS ve Javascript dosyalarının yüklendiği alanlar üzerinde daha fazla kontrole sahip olursunuz ve ekran boyutu ile normal ifadeler için ek istisnalar ekleyebilirsiniz.

RapidLoad Kullanarak Kullanılmayan CSS Dosyalarını Kaldırma

Autoptimize, CSS, Javascript ve HTML dosyalarını toplamanıza, küçültmenize ve önbelleğe almanıza izin veren etkili bir optimizasyon WordPress eklentisidir. WordPress eklentisi RapidLoad Power-Up, WordPress'te kullanılmayan CSS'yi kaldırmanıza yardımcı olarak Autoptimize'ı daha da genişletir.

WP Rocket'in CSS optimizasyon aracı gibi, RapidLoad Power-Up da hangi CSS kurallarının gerçekten gerekli olduğunu inceleyerek sayfa yükleme sürelerini azaltır.

Adından da anlaşılacağı gibi eklenti, CSS dosyalarının boyutunu azaltmak için RapidLoad hizmetini kullanır. Bu nedenle, RapidLoad Power-Up'ı kullanmak için RapidLoad hizmetine kaydolmanız gerekecektir. RapidLoad için aylık 5,83 ABD Doları karşılığında aylık planlar mevcuttur.

Son düşünceler

Geliştiriciler, web sitelerimizi şekillendiren ve şekillendiren stil sayfalarını optimize etmek için yeterince çaba göstermiyor. Birçok WordPress temasının ve eklentisinin, bu kurallar yalnızca belirli sayfalarda gerekli olsa bile web sitenizdeki tüm CSS kurallarını yüklediğini göreceksiniz.

Kendi web sitenizde ne kadar kullanılmayan CSS kodu olduğunu görmek için GTmetrix, Google PageSpeed ​​Insights veya Pingdom Web Sitesi Hız Testi gibi bir performans raporu aracında bazı kıyaslamalar yapmanızı öneririm. CSS'nin sayfalara ne kadar gereksiz ağırlık kattığını görmek için Chrome DevTools ve PurifyCSS Online gibi geliştirici araçları da kullanılabilir.

Neyse ki, bir dizi WordPress performans çözümü kullanarak WordPress'te kullanılmayan CSS'yi kaldırabiliriz. Süreci otomatikleştirmeyi tercih ederseniz, WP Rocket veya RapidLoad Power-Up kullanmanızı tavsiye ederim. WordPress bakımı konusunda daha uygulamalı bir yaklaşıma sahip olanlar Perfmatters ve Asset CleanUp'ı tercih edeceklerdir çünkü bu eklentiler web sitenizin CSS ve Javascript dosyalarının yüklendiği alanlar üzerinde tam kontrol sağlar.

Önemli CSS kodunu kaldırmanın web sitesi tasarımınızın bozulmasına neden olacağını unutmayın, bu nedenle her şeyin doğru çalıştığından emin olmak için web sitesi sayfalarınızı düzenli olarak kontrol ettiğinizden emin olun.

Önerilen Okuma: WordPress'te javascript'in ayrıştırılması nasıl ertelenir

İyi şanlar.

kevin