WordPress'te Kullanılmayan CSS Nasıl Kaldırılır (Doğru Yol)

WordPress web sitesi sahipleri olarak hepimiz hızlı ve optimum bir kullanıcı deneyimi sunmaya çalışırız. Bu, ziyaretçileri meşgul tutmakla kalmaz, aynı zamanda web sitelerimizin arama sonuçlarında daha üst sıralarda yer almasına da yardımcı olur.

Temalarınızın ve eklentilerinizin genellikle sayfalarınızın ihtiyaç duyduğundan çok daha fazla CSS kodu yüklediğini fark etmeyebilirsiniz. Bu kullanılmayan CSS, web sitenizi gizlice yavaşlatıyor olabilir.

Ziyaretçilerinizin indirmesi gereken her ek kod satırı, yükleme süresine değerli saniyeler ekler. Ve günümüz dünyasında, bir saniyelik bir gecikme bile size ziyaretçi ve satış kaybettirebilir.

Bu nedenle, WordPress'ten kullanılmayan CSS'yi doğru şekilde kaldırmaya yönelik bu eksiksiz kılavuzu hazırladık. Şişkin stil sayfalarını temizlemek ve herhangi bir şeyi bozmadan siteleri hızlandırmak için kullandığımız kesin yöntemleri size göstereceğiz.

WordPress'te Kullanılmayan CSS Nedir?

WordPress'te kullanılmayan CSS, web sayfalarınızda yüklenen ancak o belirli sayfalarda görünür hiçbir şeyi biçimlendirmek için aslında kullanılmayan CSS kodunu ifade eder. 

Bu ekstra kod, ziyaretçilerin tarayıcılarını gereksiz dosyaları indirmeye ve işlemeye zorlar, bu da sayfa yükleme sürelerinizi yavaşlatır. Birkaç saniye bile kullanıcı deneyiminize ve arama motoru sıralamalarınıza zarar verebilir, potansiyel olarak ziyaretçi ve dönüşüm kaybetmenize neden olabilir.

Kullanılmayan CSS'nin sitenizi etkileyip etkilemediğini, Google Pagespeed Insights üzerinden çalıştırarak kolayca kontrol edebilirsiniz. Sonuçlarınızda 'Kullanılmayan CSS'yi kaldır' uyarısını arayın. Hangi dosyaların işleri yavaşlattığını tam olarak gösterecektir.

WordPress Neden Kullanılmayan CSS Yükler?

İşte durum şu: WordPress, hangi CSS'yi yükleyeceği konusunda seçici olmak üzere tasarlanmamıştır. Sizin WordPress temanız muhtemelen hiç kullanmayacağınız öğeler için bile stil kuralları içeren ana bir stil sayfası (genellikle style.css olarak adlandırılır) ile birlikte gelir.

Ancak temanız sadece başlangıç. Yüklediğiniz her eklenti kendi CSS dosyalarını karışıma ekler. WooCommerce, mağaza stilini her sayfada (blog yazılarınızda bile) yükler, sayfa oluşturucular CSS'lerini global olarak yükler ve iletişim formu eklentileri form olmayan sayfalarda form stillerini yükler.

Özel yazı tipleri, simge kütüphaneleri ve diğer tasarım öğelerini eklediğinizde, çok fazla CSS şişkinliğiyle karşılaşırsınız. Her bir dosya küçük olsa da, hızla birikir ve sitenizin hızını etkiler.

WordPress'te Kullanılmayan CSS Nasıl Kaldırılır

Şimdi iyi haberlere gelelim: WordPress web sitenizdeki kullanılmayan CSS'yi temizlemenin birkaç etkili yolu vardır. Birden çok yaklaşımı test ettik ve sitenizi bozmadan güvenilir bir şekilde çalışan yöntemler bulduk.

İşte önceden bilmeniz gerekenler: WordPress'in dinamik olarak içerik yükleme şekli nedeniyle kullanılmayan CSS'nin %100'ünü tamamen ortadan kaldırmak neredeyse imkansızdır WordPress'in dinamik olarak içerik yükleme şekli. İnteraktif öğeler, koşullu içerik ve farklı sayfa türleri için bazı CSS'lerin hazır kalması gerekir.

Ancak endişelenmeyin, büyük iyileştirmeler görmek için mükemmelliğe ihtiyacınız yok. Kullanılmayan CSS'nin %50-70'ini kaldırmak bile sitenizi önemli ölçüde hızlandırabilir.

Performans kazançları ve site kararlılığı arasında doğru dengeyi kuran iki kanıtlanmış yöntemi göstereceğiz, böylece rahatlık seviyenize uyan yaklaşımı seçebilirsiniz.

1. WP Rocket Kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırma
2. Remove Unused CSS in WordPress Using Asset CleanUp

Yöntem 1: WP Rocket Kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırma

Bu yöntem daha kolaydır ve yeni başlayanlar için önerilir. WordPress web sitenizde CSS dosyalarının genel teslimatını büyük ölçüde iyileştirir, çoğu kullanılmayan CSS'yi kaldırmak da buna dahildir.

Yeni başlayanlar için en iyi çözüm olduğunu düşünüyoruz çünkü daha kolaydır ve kullanıcılarınız için daha iyi bir deneyim sunma ana hedefine ulaşır. Bu, web sitenizin hız test araçlarında hızlı yüklendiği ve kullanıcılarınız için de hızlı hissettirdiği anlamına gelir.

Öncelikle, WP Rocket eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, yeni başlayanlar için bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, Ayarlar » WP Rocket sayfasına gitmeniz ve 'Dosya Optimizasyonu' sekmesine geçmeniz gerekir.

Ardından, CSS Dosyaları bölümüne aşağı kaydırmanız ve 'Kullanılmayan CSS'i Kaldır (Beta)' seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

WP Rocket'ın bu özelliği beta sürümünde olduğundan, ayarı etkinleştirmek isteyip istemediğinizi tekrar soracaktır. Devam edip 'Kullanılmayan CSS'i Kaldır' düğmesine tıklayabilirsiniz.

'Kullanılmayan CSS'yi Kaldır' seçeneği etkinleştirildikten sonra, 'CSS beyaz listesi' kutusunun altına kaldırılmaması gereken CSS dosya adlarını, kimliklerini veya sınıflarını belirtebilirsiniz.

Bunları kutuya girmeniz yeterlidir.

Ardından, aşağı kaydırıp 'Değişiklikleri Kaydet' düğmesine tıklayarak değişikliklerinizi kaydetmeniz gerekecektir.

Bunu yaptığınızda, WP Rocket CSS dosyalarınızı işlemeye başlayacak ve size bir ilerleme çubuğu gösterecektir.

Eklentinin sitenizdeki kullanılmayan CSS dosyalarını işlemesi ve kaldırması birkaç dakika sürecektir.

Eklenti işlemi tamamladığında 'Kullanılmayan CSS Kaldırma tamamlandı!' mesajını göreceksiniz.

Şimdi Google Pagespeed Insights aracını ziyaret edin ve sitenizin performansını test edin.

WordPress için Engelleme Yapan CSS'leri Kaldırın

WP Rocket, CSS dosyalarınızı optimize etmenize ve web sitenizden oluşturma engelleme CSS'sini kaldırmanıza olanak tanır.

Başlamak için WP Rocket'teki 'Dosya Optimizasyonu' sekmesine gidebilirsiniz. Buradan CSS Dosyaları bölümüne aşağı kaydırın ve ardından 'CSS teslimini optimize et' seçeneğinin yanındaki kutuyu işaretleyin.

Bu seçenek, web sitenizin yalnızca görünür kısmını görüntülemek için gereken CSS kodunu içeren bir CSS dosyası oluşturur. Bu dosyayı önce yükler, sayfayı ziyaretçilerinize gösterir ve ardından ertelenmiş yükleme adı verilen bir teknoloji kullanarak diğer CSS dosyalarını yükler.

Bu oluşturma engelleme CSS'sini kaldırarak, web siteniz, tüm CSS dosyalarının sayfa görüntülenmeden önce yüklenmesi gerekseydi olacağından çok daha hızlı bir şekilde kullanıcılara görünür hale gelir.

'CSS teslimini optimize et' seçeneğini etkinleştirdikten sonra, 'Değişiklikleri Kaydet' düğmesine tıklayın ve WP Rocket'in tüm gönderileriniz ve sayfalarınız için gerekli CSS dosyasını oluşturmasını bekleyin. Ayrıca web sitenizin önbelleğini otomatik olarak temizleyecektir.

İşiniz bittiğinde, Google Pagespeed Insights kullanarak web sitesi performansınızı tekrar test edebilirsiniz.

Performansı Artırmak İçin Ek Dosya Teslim Ayarlamaları

WP Rocket ayrıca sorgu dizelerini statik dosyalardan kaldırmanıza, Google Fonts dosyalarını birleştirmenize ve HTML'yi küçültmenize olanak tanır.

Bu ince ayarların tümü, genel hızınıza küçük iyileştirmeler ekler ve bu da ziyaretçileriniz için daha hızlı bir yükleme deneyimi oluşturur.

CSS dosyalarını küçültme ve birleştirme seçeneklerini de göreceksiniz. Bu seçenekler HTTP isteklerini azaltacak ve size ek bir hız artışı sağlayacaktır.

Ancak, bu ayarları etkinleştirdikten sonra hiçbir şeyin bozulmadığından emin olmak için web sitenizi dikkatlice kontrol etmeniz gerekecektir hiçbir şeyin bozulmadığından emin olun.

Ek olarak, web sitenizdeki JavaScript dosyaları için de aynı optimizasyonu uygulayabilirsiniz.

Performans iyileştirmeleri için bunları tek bir dosya olarak sunmak ve JavaScript dosyalarının yüklenmesini ertelemek üzere küçültebilir ve birleştirebilirsiniz.

Daha fazla ayrıntı için, WordPress'te WP Rocket'ı doğru bir şekilde nasıl kuracağınıza dair adım adım eğitimimize bakın.

Yöntem 2: Asset CleanUp Kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırma

Bu yöntem biraz gelişmiştir ancak inanılmaz derecede güçlüdür ve WordPress web sitenizin herhangi bir sayfasındaki kullanılmayan CSS'yi kolayca kaldırmanıza olanak tanır.

Ancak, bu biraz karmaşıktır ve hiçbir şeyin bozulmadığından emin olmak için web sitenizin işlevselliğini ve görünümünü kapsamlı bir şekilde test etmeniz gerekecektir.

İlk olarak, Asset Cleanup eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, Asset CleanUp » Ayarlar sayfasına gitmeniz ve Test Modu sekmesine geçmeniz gerekir. Buradan, ‘Test Modunu Etkinleştir’ seçeneğini açmanız gerekir.

Bu, yönetici olarak farklı ayarları denemenize ve bunları web sitesi ziyaretçilerini etkilemeden test etmenize olanak tanır.

Bundan sonra, Asset CleanUp » CSS/JS Manager sayfasına gitmeniz gerekir. Buradan, sayfa bazında istenmeyen CSS ve JavaScript dosyalarını kaldırabilirsiniz.

İlk olarak ana sayfanızı getirecek ve o sayfada yüklenen tüm CSS ve JavaScript dosyalarını size gösterecektir.

Aşağı kaydırmanız ve yüklenen dosyaları incelemeniz gerekir. İhtiyacınız olmayan bir dosya görürseniz, onu belirli bir sayfa, gönderi türü veya site genelinde devre dışı bırakabilirsiniz.

Eklenti ayrıca buradan belirli gönderileri veya sayfaları seçmenize olanak tanır veya aynı seçeneklere, gönderiyi veya sayfayı normalde yaptığınız gibi düzenleyerek erişebilirsiniz.

Gönderi düzenleme ekranında, Varlık Temizleme kutusunu gönderi düzenleyicisinin hemen altında bulacaksınız.

Eklenti, bir ziyaretçi web sitenizdeki bu sayfayı görüntülediğinde yüklenen tüm dosyaları ve varlıkları otomatik olarak alacak ve listeleyecektir.

Ardından, o sayfada ihtiyacınız olmayan kullanılmayan CSS veya JavaScript dosyalarını kolayca kaldırabilirsiniz.

Önemli: Herhangi bir kullanılmayan CSS veya JavaScript'i kaldırdıktan sonra her şeyin yolunda gittiğinden emin olmak için web sitenizi test etmeyi unutmayın.

Kullanılmayan CSS ve JavaScript dosyalarını devre dışı bırakıp kaldırdıktan sonra, eklentinin ayarlar sayfasına geri dönebilir ve 'Test Modu'nu kapatabilirsiniz.

Değişikliklerinizi kaydetmek için ‘Tüm Ayarları Güncelle’ düğmesine tıklamayı unutmayın.

Kullanılmayan CSS bildirimiyle ilgili değişikliği görmek için artık web sitenizi Google Pagespeed Insights kullanarak test edebilirsiniz.

WordPress Performansını İyileştirme Üzerine Uzman Rehberleri

Umuyoruz ki bu makale, WordPress'te kullanılmayan CSS'yi nasıl kolayca kaldıracağınızı öğrenmenize yardımcı olmuştur. WordPress performansını iyileştirmeyle ilgili diğer bazı rehberlere de göz atmak isteyebilirsiniz:

• WordPress Hızını ve Performansını Artırmak İçin Nihai Rehber
• WooCommerce Performansını Nasıl Hızlandırırsınız
• Bir Web Sitesi Hız Testini Doğru Bir Şekilde Nasıl Çalıştırırsınız (En İyi Araçlar)
• WordPress Sitenizde Ölçülmesi Gereken Önemli Metrikler
• WordPress için Core Web Vitals Nasıl Optimize Edilir (Nihai Rehber)
• WordPress Site Performansını İyileştirmek İçin GTmetrix Eklentisi Nasıl Kullanılır
• WordPress CSS Teslimatını Kolayca Optimize Etme
• En Hızlı WordPress Barındırma (Performans Testleri)
• Kaliteyi Kaybetmeden Web Performansı İçin Resimleri Nasıl Optimize Edersiniz
• Web Sitenizi Hızlandırmak İçin En İyi WordPress Önbellekleme Eklentileri

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.