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

Sitenizin daha hızlı yüklenmesi için WordPress'te kullanılmayan CSS'yi kaldırmak istiyor musunuz?

Kullanılmayan CSS, gerçekten ihtiyacınız olmayan WordPress temanız veya eklentileriniz tarafından eklenen herhangi bir CSS kodudur. Bu CSS kodunun kaldırılması, WordPress performansını ve kullanıcı deneyimini geliştirir.

Bu yazıda, WordPress'te kullanılmayan CSS'yi web sitenizi bozmadan nasıl kolayca kaldırabileceğinizi göstereceğiz.

WordPress'te Kullanılmayan CSS Nedir?

WordPress'te kullanılmayan CSS, web sitenize yüklenen ancak sayfayı görüntülemek için aslında gerekli olmayan CSS kodudur.

Fazladan kod, bir ziyaretçinin tarayıcısının bir sayfayı oluşturmasının biraz daha uzun sürmesine neden olabilir ve bu da kötü bir kullanıcı deneyimi yaratır. Daha yavaş yükleme süreleri, arama sıralamalarınızı bile etkileyerek sitenize daha az trafik gelmesine neden olabilir.

Google Pagespeed Insights'ı kullanarak kullanılmayan CSS kodunun web sitenizi nasıl etkilediğini görebilirsiniz. Hangi CSS dosyalarının yükleme sürelerinizi etkilediğinin ayrıntılarını içeren 'Kullanılmayan CSS'yi Kaldır' başlıklı bir bölüm gösterecektir.

Kullanılmayan CSS Neden WordPress'e Eklendi?

CSS, WordPress web sitenizin görünümünü biçimlendirmek için kullanılır. WordPress temanız, çoğu tek bir style.css dosyasında bulunan CSS içerir.

Temanızın CSS'sine ek olarak, WordPress eklentileriniz kendi CSS'lerini de yükleyecektir. Örneğin, WooCommerce ürünleri görüntülemek için CSS'yi yükler, bir sayfa oluşturucu eklentisi özel sayfalarınızı görüntülemek için kendi CSS'sini ekler ve bir form oluşturucu eklentisi, formlarınızı biçimlendirmek için CSS'yi içerir.

Ardından, kendi CSS dosyalarını da eklemesi gereken web fontlarınız, simge fontlarınız ve diğer öğeleriniz olur.

Genellikle bu dosyalar çok küçüktür ve hızlı yüklenir. Ancak, WordPress sitenizde bunlardan birçoğu varsa, efektler toplanabilir ve sitenizin hızı üzerinde gözle görülür bir etkisi olabilir.

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

WordPress web sitenizde kullanılmayan CSS'yi azaltmanın birkaç farklı yolu vardır.

Ancak, WordPress'te kullanılmayan tüm CSS'leri tamamen kaldırmak oldukça zor bir iş olacaktır. WordPress'in perde arkasında çalışma şekli nedeniyle, kullanılmayan bazı CSS'leri bulmak ve kaldırmak zor olabilir.

Bununla birlikte, kullanılmayan CSS'yi kaldırmak için size iki yöntem göstereceğiz ve sizin için en uygun olanı seçebilirsiniz.

Yöntem 1. WP Rocket kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırın

Bu yöntem daha kolaydır ve yeni başlayanlar için önerilir. Kullanılmayan CSS'lerin çoğunu kaldırmak da dahil olmak üzere, WordPress web sitenizdeki CSS dosyalarının genel dağıtımını büyük ölçüde iyileştirir.

Yeni başlayanlar için en iyi çözüm olduğunu düşünüyoruz çünkü daha kolay ve kullanıcılarınız için daha iyi bir deneyim sağlama ana hedefine ulaşıyor. Bu, web sitenizin hız testi araçlarına hızlı yüklendiği ve ayrıca kullanıcılarınıza hızlı geldiği anlamına gelir.

Öncelikle WP Rocket eklentisini kurmanız ve etkinleştirmeniz gerekiyor. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Aktivasyondan sonra Ayarlar » WP Roket sayfasını ziyaret etmeniz ve 'Dosya Optimizasyonu' sekmesine geçmeniz gerekir.

Ardından, CSS dosyaları bölümüne kaydırmanız gerekir. Buradan, 'CSS dağıtımını optimize et' seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

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

Oluşturmayı engelleyen bu CSS'yi kaldırarak, web siteniz, sayfa görüntülenmeden önce tüm CSS dosyalarını yüklemeniz gerektiğinden çok daha hızlı bir şekilde kullanıcılar tarafından görüntülenebilir hale gelir.

'CSS dağıtımını optimize et' seçeneğini etkinleştirdikten sonra, Değişiklikleri Kaydet düğmesini 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.

Bitirdikten sonra, Google Pagespeed Insights'ı kullanarak web sitenizin performansını tekrar test edebilirsiniz.

Performansı Artırmak için Ek Dosya Teslimi Tweaks

WP Rocket ayrıca statik dosyalardan sorgu dizelerini kaldırmanıza, Google Fonts dosyalarını birleştirmenize ve HTML'yi küçültmenize olanak tanır. Tüm bu ince ayarlar, genel hızınıza küçük iyileştirmeler ekleyerek ziyaretçileriniz için daha hızlı bir yükleme deneyimi sağlar.

Ayrıca 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 gerekir.

Ek olarak, aynı optimizasyonu web sitenizdeki JavaScript dosyaları için de uygulayabilirsiniz. Tek bir dosya olarak hizmet etmek için bunları küçültebilir ve birleştirebilir ve performansı artırmak için JavaScript dosyalarının yüklenmesini erteleyebilirsiniz.

Daha fazla ayrıntı için, WordPress'te WP Rocket'in nasıl düzgün şekilde kurulacağına ilişkin adım adım eğitimimize bakın.

Yöntem 2. Asset CleanUp kullanarak WordPress'te Kullanılmayan CSS'yi Kaldırın

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

Ancak, 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ü iyice test etmeniz gerekecektir.

Öncelikle Asset Cleanup eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından Varlık Temizleme » Ayarlar sayfasını ziyaret etmeniz ve Test Modu sekmesine geçmeniz gerekir. Buradan, 'Test Modunu Etkinleştir' seçeneğini açmanız gerekir.

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

Bundan sonra Varlık Temizleme » CSS/JS Yöneticisi sayfasını ziyaret etmeniz gerekir. Buradan, istenmeyen CSS ve JavaScript dosyalarını sayfa bazında kaldırabilirsiniz.

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

Aşağı kaydırmanız ve yüklenen dosyaları gözden geçirmeniz gerekir. İhtiyacınız olmayan bir dosya görürseniz, söz konusu sayfa, gönderi türü veya site geneli için dosyayı kaldırabilirsiniz.

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

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

Eklenti, bir ziyaretçi bu sayfayı web sitenizde görüntülediğinde yüklenen tüm dosyaları ve varlıkları otomatik olarak getirir ve listeler. Ardından, o sayfada ihtiyacınız olmayan kullanılmayan CSS veya JavaScript dosyalarını kaldırabilirsiniz.

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

Kullanılmayan CSS ve JavaScript dosyalarını kaldırmayı ve kaldırmayı tamamladığınızda, 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.

Artık kullanılmayan CSS bildirimindeki değişikliği görmek için web sitenizi Google Pagespeed Insights kullanarak test edebilirsiniz.

Bu makalenin, WordPress'te kullanılmayan CSS'yi nasıl kolayca kaldıracağınızı öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, bir web sitesi kurmanın ne kadara mal olduğu konusunda eksiksiz kılavuzumuzu takip etmek ve en iyi yönetilen WordPress barındırma listemize göz atmak isteyebilirsiniz.

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