WordPress'te Kullanılmayan CSS Nasıl Kaldırılır (2 Kolay Yöntem)

Yüklediğiniz her tema ve eklenti, WordPress sitenize gereksiz CSS ekleyebilir. Bu, daha yavaş yükleme sürelerine yol açabilir. Tipik olarak, bu stil sayfalarına bir sayfadaki içeriğin işlenmesi için ihtiyaç duyulmaz, ancak yine de kodda bulunurlar. Bu nedenle, WordPress'te kullanılmayan CSS'yi kaldırmanın kolay bir yolunu arıyor olabilirsiniz.

Neyse ki, süreç düşündüğünüzden daha basit. Sitenizdeki gereksiz kodu belirledikten sonra, onu silmek ve sitenizin hızını artırmak için bir eklenti kullanabilirsiniz.

Neden kullanılmayan CSS'yi kaldırmalısınız?

Kullanılmayan CSS, aslında bir sayfa yüklemek için gerekli olmayan koddur. WordPress söz konusu olduğunda, genellikle sitenize yüklediğiniz temalarda ve eklentilerde bulunur.

Ardından, bir kullanıcı web sitenize eriştiğinde, tarayıcının yine de bu kullanılmayan CSS'yi indirmesi ve oluşturması gerekir. Bu, daha uzun yükleme sürelerine katkıda bulunabilir ve bu da sitenizin genel performansı üzerinde olumsuz bir etkiye sahip olacaktır.

Aslında, kullanılmayan CSS, Önemli Web Verilerinde zayıf bir En Büyük İçerikli Boyama (LCP) puanına yol açabilir:

En Büyük İçerikli Boyama, bir sayfanın ekrandaki en büyük öğeyi tamamen yüklemesi için geçen süreyi ölçen bir ölçümdür. Bu genellikle bir kahraman görüntüsü gibi görsel bir öğedir.

Basitçe söylemek gerekirse, kullanılmayan CSS kodu sayfanıza şişkinlik katar. Sonuç olarak, resimler gibi içeriğin yüklenmesi daha uzun sürer.

Siteniz yavaşsa, potansiyel dönüşümleri kaçırıyor olabilirsiniz. Ayrıca, arama sonuçlarında daha düşük sıralamalara yol açabilir. Bu nedenle, kullanılmayan CSS'yi kaldırmak ve sitenizi hızlandırmak için uygun önlemleri almanız önemlidir.

Sitenizde kullanılmayan CSS nasıl belirlenir?

İyi haber şu ki, sitenizde kullanılmayan CSS'yi belirlemek kolay bir iştir. PageSpeed ​​Insights'ta bir performans testi çalıştırarak başlayabilirsiniz. Tek yapmanız gereken URL'nizi girmek ve Analiz Et'e tıklamak :

Test hazır olduğunda, Fırsatlar bölümüne gidin ve Kullanılmayan CSS'yi azalt sekmesini bulun. Üzerine tıklarsanız, bu kod hakkında daha fazla bilgi göreceksiniz:

Ayrıca, hangi CSS dosyalarının ve eklentilerinin yükleme sürelerinizi etkilediğini de gösterecektir:

Kullanılmayan CSS'yi kaldır için turuncu bir kare "İyileştirme Gerekiyor" anlamına gelirken, kırmızı bir üçgen çok düşük bir puanı temsil eder. Test sonuçlarınızda bu bölümü göremiyorsanız, bu, sitenizde ( veya en azından test ettiğiniz belirli sayfada) herhangi bir önemli CSS sorununuz olmadığı anlamına gelir; emin olmak için diğer sayfaları test etmek isteyebilirsiniz. ).

WordPress'te kullanılmayan CSS nasıl kaldırılır

PageSpeed ​​Insights sitenizde kullanılmayan CSS'yi işaretlediyse, sitenizin performansını optimize etmek için onu kaldırmak isteyeceksiniz.

Bunu, tüm ağır işleri sizin yerinize yapan bir WordPress eklentisi kullanarak yapabilirsiniz. Alternatif olarak, sizin açınızdan biraz el emeği gerektirecek farklı bir eklenti kullanabilirsiniz, ancak ödül olarak süreç üzerinde daha fazla kontrol sahibi olursunuz. Bu bölümde, daha kolay olandan başlayarak her iki yöntemde de size yol göstereceğiz.

Yöntem 1: Kullanılmayan CSS'yi Debloat ile kaldırın

Tartıştığımız gibi, "kullanılmayan" CSS gerekli değildir. Bu nedenle, bu dosyaları silmenin web sayfalarınızın tasarımı üzerinde herhangi bir etkisi olmayacaktır.

Ancak yanlışlıkla yanlış kodu kaldırırsanız sitenizi bozabilirsiniz. Bu nedenle, kodlamaya aşina değilseniz, kullanılmayan CSS'yi kaldırmak için bir eklenti kullanmak isteyeceksiniz.

Bunu göz önünde bulundurarak, kullanılmayan CSS kodunu kaldırmak için Debloat'ı öneririz. Ayrıca, oluşturmayı engelleyen kaynakları geciktirerek, kodu küçülterek ve daha fazlasını yaparak Önemli Web Verilerinizi geliştirmenize yardımcı olabilecek ücretsiz bir optimizasyon eklentisidir.

Başlamak için eklentiyi sitenize yüklemeniz ve etkinleştirmeniz gerekir. Ardından, Ayarlar > Debloat: Optimize'a gidin ve CSS'yi Optimize Et sekmesini seçin:

Kullanılmayan CSS'yi kaldırmayı planlıyorsanız, en üstte bir önbellek eklentisi kullanmanızı öneren bir mesaj göreceksiniz. Bu ilginizi çekiyorsa, W3 Total Cache veya WP-Optimize gibi ücretsiz bir aracı denemeyi düşünebilirsiniz.

Ardından, sayfanın en altına gidin ve Kullanılmayan CSS'yi Kaldır kutusunu işaretleyin:

Bu, diğer birkaç seçeneği ortaya çıkaracaktır. Ancak, kod işleme konusunda rahat değilseniz endişelenmeyin, yalnızca birkaç ayar seçmeniz gerekecek.

Enable for Plugins CSS ve Enable for Theme CSS kutularını işaretlemek isteyeceksiniz:

Ardından, CSS'yi Kaldır seçeneğine ilerleyin ve Tüm Sayfalar için kutuyu seçin:

Hazır olduğunuzda Değişiklikleri Kaydet'i tıklayın. Eklenti, eklenti ve tema dosyalarınızdaki kullanılmayan CSS'yi kaldıracaktır.

Bu yöntemin %100 doğru olmadığını ve kullanılmayan bazı kodların çatlaklardan düşebileceğini unutmayın. Yine de, bu ayarları etkinleştirdikten sonra başka bir hız testi yaparsanız, sitenizin performansında önemli bir iyileşme görmeniz gerekir.

Daha güçlü bir eklenti kullanmak istiyorsanız, WP Rocket'e bakmak isteyebilirsiniz. Bu premium araç, sayfa ve tarayıcı önbelleğe alma, GZIP sıkıştırma, kod küçültme ve yavaş yükleme gibi optimizasyon özellikleriyle birlikte gelir. Ayrıca kullanılmayan CSS'yi sitenizden kaldırabilir.

Yöntem 2: Asset CleanUp ile kullanılmayan CSS'yi kaldırın

İlk yöntemde, gereksiz kodları sitenizden otomatik olarak kaldıran bir eklenti kullandık. Tek yapmanız gereken birkaç ayarı etkinleştirmek olduğundan, bu yöntem oldukça kullanışlıdır.

Ancak, hangi dosyaların kaldırılacağı ve hangilerinin tutulacağı konusunda size daha fazla kontrol sağlayan bir yöntem arıyor olabilirsiniz. Durum buysa, Asset CleanUp sizin için daha iyi bir seçim olabilir. Bu eklenti, istenmeyen CSS dosyalarını sayfa sayfa seçmenize ve kaldırmanıza olanak tanır.

Bu yaklaşımın biraz zaman alabileceğini ve biraz teknik bilgi gerektirebileceğini unutmayın. Ayrıca, yaptığınız değişikliklerin sitenizin tasarımını ve işlevselliğini etkilemediğinden emin olmak için her sayfayı sürekli olarak test etmeniz ve yenilemeniz gerekecektir.

1. Adım: Asset CleanUp eklentisini kurun ve test modunu etkinleştirin

Yine de bu yöntemi denemek istiyorsanız, devam edin ve Asset CleanUp'ı sitenize yükleyin. Ardından Varlık Temizleme > Ayarlar'a gidin. Bundan sonra, yan menüden Test Modu'nu seçin ve bu özelliği etkinleştirmek için geçiş anahtarını kullanın:

Bu şekilde, sitenizde yaptığınız herhangi bir değişiklik ön uçtaki kullanıcı deneyimini etkilemez. Kullanılmayan CSS dosyalarını güvenli bir ortamda kaldırabilir ve her şeyin düzgün çalıştığından emin olduktan sonra test modunu devre dışı bırakabilirsiniz.

2. Adım: Kullanılmayan CSS dosyalarını her sayfada kaldırın

Şimdi, CSS & JS Manager sekmesine tıklayın. Burada, ana sayfadan başlayarak istenmeyen dosyaları sitenizden kaldırabilirsiniz:

Aşağı kaydırırsanız, bu sayfada yüklenen tüm dosyaların bir listesini görürsünüz:

Bir CSS dosyasını kaldırmak için, bu sayfadaki Boşalt için geçiş anahtarını kullanmanız yeterlidir:

Asset CleanUp, bu dosyaya bağlı olan ve kaldırılmasından etkilenebilecek herhangi bir "alt" dosya olup olmadığını size bildirir. Bağımlılık kuralını yoksay kutusunu işaretleyebilir ve bu dosyaları korumak için "alt öğeleri" yüklenmiş halde tutabilirsiniz .

Hangi CSS dosyalarının kaldırılacağından emin değilseniz PageSpeed ​​Insights'ta sonuçlarınıza başvurabileceğinizi unutmayın. Kullanılmayan CSS'yi Azalt bölümünün altında bu dosyaların URL'sini göreceksiniz:

Daha sonra bunları Asset CleanUp'ta arayabilirsiniz. Sayfalar sekmesine giderseniz, sitenizdeki belirli bir sayfayı arayabilir ve bu sayfada yüklü olan CSS dosyalarını inceleyebilirsiniz:

Kaldırmak istediğiniz bir dosyayı seçtikten sonra, bu değişiklikleri kaydetmek için Güncelle'ye tıklamanız gerekir.

3. Adım: Sitenizi test edin

Son olarak, düzgün çalıştığından emin olmak için her dosya kaldırma işleminden sonra sitenizi test etmenizi öneririz. Bu değişiklikleri görmek için WordPress yönetici kontrol panelinizde oturum açmış olmanız gerektiğini unutmayın. Siteye ziyaretçi olarak erişirseniz (ör. oturumu kapatmış bir kullanıcı), test modunu etkinleştirdiğiniz için sayfanızdaki herhangi bir sorunu tespit edemezsiniz.

Test modunu etkinleştirdiğiniz sürece PageSpeed ​​Insights'ta herhangi bir gelişme görmeyeceğinizi de unutmayın. Sonuçlar, kullanılmayan CSS dosyalarını görüntülemeye devam edecektir.

Kaldırılan dosyaların sitenizi etkilemediğinden emin olduktan sonra devam edip test modunu devre dışı bırakabilirsiniz. Ardından, PageSpeed ​​Insights'ta bir hız testi yapın. Bu noktada, silinen CSS dosyalarının sonuçlarda çıkmaması gerekir.

Kullanılmayan CSS'yi kaldırmak için premium WordPress eklentileri

Yukarıdaki her iki araç da ücretsiz olsa da, ödemeye hazırsanız kullanılmayan CSS'yi kaldırmak için gerçekten basit bazı WordPress eklentileri de bulabilirsiniz.

En iyi seçeneklerden ikisi WP Rocket (59 dolardan) ve FlyingPress'tir (60 dolardan).

WP Rocket ile, tüm sitenizi tarayan ve kullanılmayan CSS'yi sayfa sayfa kaldıran, kullanılmayan CSS'yi tek tıklamayla kaldır özelliğine sahip olursunuz.

FlyingPress ayrıca, kullanılmayan CSS'yi daha uygun yollarla yükleme veya tamamen kaldırma seçenekleriyle, benzer bir tek tıklamayla kullanılmayan CSS kaldırma sunar.

Her iki araç da sitenizin kodunu kendi sunucularında işlemeye dayanır; bu şekilde, bu kadar basit bir sayfa sayfa kaldırma yaklaşımı sunabilirler.

Kullanılmayan CSS'yi azaltmaya yardımcı olacak birkaç ipucu

Sitenizden kullanılmayan CSS'yi (veya en azından çoğunu) kaldırdıktan sonra, gelecekte daha fazla gereksiz kod eklemekten kaçınmak isteyeceksiniz. Bu cephede, sitenizin sorunsuz çalışmasını sağlamak için yapabileceğiniz birkaç şey var.

Öncelikle, hafif bir tema kullandığınızdan emin olmak isteyeceksiniz. Genel olarak konuşursak, hafif bir WordPress teması hızlı bir WordPress temasıdır. Basitçe söylemek gerekirse, temanız minimum düzeyde kod içermeli ve Önemli Web Verileri için optimize edilmelidir.

Örneğin, Neve temamız hıza ve performansa öncelik verir. Aslında, varsayılan bir WordPress kurulumunda bu temanın yüklenmesi 1 saniyeden az sürer ve dosya boyutu 28 KB'dir:

Aynı şekilde, siteniz için hafif eklentiler seçmek isteyeceksiniz. Eklentilere göz atarken hafif etiketi arayabilirsiniz:

Yeni bir eklenti yükledikten sonra bir hız testi yapmanızı öneririz. Bu şekilde, kullanılmayan CSS içerip içermediğini kontrol edebilirsiniz.

Ek olarak, sitenizdeki eklenti sayısını sınırlamayı deneyebilirsiniz. Bu, sayfalarınızda kullanılmayan CSS olma olasılığını en aza indirirken genel performansınızı artırmanıza yardımcı olabilir.

Bu nedenle, artık ihtiyacınız olmayan herhangi bir eklenti varsa, bunları kaldırmayı düşünün. Bunları devre dışı bırakmanın yeterli olmayabileceğini unutmayın; yine de gereksiz kod yükleyebilir ve veritabanınızda yer kaplayabilirler. Bu nedenle, bunları sitenizden tamamen silmeniz önemlidir.

Kullanılmayan CSS'yi bugün web sitenizden kaldırın

Bunu sitenizden kaldırarak Önemli Web Verileri performansınızı artırabilir ve daha iyi bir kullanıcı deneyimi sağlayabilirsiniz.

Özetlemek gerekirse, WordPress'te kullanılmayan CSS'yi şu şekilde kaldırabilirsiniz:

Sitenizin Önemli Web Verileri ölçümlerini iyileştirmenin diğer bazı yolları için, En Büyük İçerikli Boyamayı hızlandırma ve Kümülatif Düzen Kaymasını nasıl azaltacağınızla ilgili kılavuzlarımızı da okuyabilirsiniz.

WordPress'te kullanılmayan CSS'nin nasıl kaldırılacağı hakkında herhangi bir sorunuz var mı? Aşağıdaki yorumlar bölümünde bize bildirin!