WordPress'te Minify CSS Sorunu Nasıl Onarılır?

WordPress, bir web sitesine şekil vermek için temel yazılım, tema ve eklentileri kullanır. Basamaklı Stil Sayfaları veya CSS, mizanpaj tasarımınızın belkemiğidir ve bu öğelerin her biri kendi CSS'lerini ekleyecektir. Tarayıcıda sayfa kaynağına bakarak sitenizde kullanılan CSS dosyalarını görüntüleyebilirsiniz. Bir WordPress sitesinin sayfa yükleme hızını iyileştirmek için bu CSS dosyalarını optimize etmek gerekir.

CSS Minify nedir?

Bu, dosyanın boyutunu sıkıştırmaya ve küçültmeye yardımcı olur, böylece bu dosyaları sunucudan indirmek için gereken süreyi azaltır. Geliştiriciler, anlama ve izleme amacıyla CSS dosyalarındaki yorumları kullanır. Ancak, bu yorumlar işlevsellik için gerekli değildir ve dolayısıyla bunları kaldırmak web sitenizin çalışma tasarımını etkilemeyecektir.

Neden CSS'yi Küçültmelisiniz?

Aklınıza bir sonraki soru, neden sadece birkaç KB'yi küçültmek için birinin bir metin dosyasındaki boşlukları ve yorumları kaldırması gerektiğidir. Sorun şu ki, dosya boyutunu küçültmezseniz Google PageSpeed ​​Insights ve diğer hız ölçüm araçları CSS dosyalarının küçültülmesi için bir öneri gösterecektir.

• Bu sorunu Google PageSpeed ​​Insights aracının "Fırsatlar" bölümünde "CSS'yi Küçült" olarak bulabilirsiniz.
• Araç ayrıca size CSS küçültme ile elde edebileceğiniz tasarrufların boyutunu da gösterecektir.
• "CSS'yi küçült" sorunu, First Contentful Paint'i (FCP) ve Largest Contentful Paint'i (LCP) etkiler. LCP, Önemli Web Verilerinin bir parçası olduğundan, CSS dosyalarını küçültmezseniz sayfa deneyiminiz etkilenir.
• Küçültülmüş CSS dosyası sunmak bu sorunu çözecektir ve kontrolün geçtiğini ve “Geçti Denetimler” bölümünde yeşil renkte gösterildiğini görebilirsiniz.

İçeriği ve Dosyayı Küçültme Örneği

Aşağıda, boşluklar ve yorumlar içeren küçük bir CSS kodu örneği verilmiştir.

 /* Content */ div.content{ padding-left: 390px; background: #fff; position: relative; } div.panes{ max-width: 1400px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 40px; } .section{ padding-top: 40px; } /* End Content */

CSS küçültme aracımıza gidin ve yukarıdaki kodu yapıştırın.

Sonuç olarak küçültülmüş kodu almak için “Gönder” düğmesine tıklayın.

Küçültülmüş kod aşağıdaki gibi görünecektir:

 div.content{padding-left:390px;background:#fff;position:relative;}div.panes{max-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 40px;}.section{padding-top:40px;}

Gördüğünüz gibi, küçültülmüş çıktıdaki tüm yorumlar ve boşluklar kaldırılmıştır. Çoğu WordPress teması style.css dosyasını kullanır ve aynı aracı style.css dosyasının tamamını yüklemek ve sonuç olarak küçültülmüş dosyayı almak için kullanabilirsiniz.

Küçültülmüş dosyayı bilgisayarınıza almak için “İndir” düğmesine tıklayın.

Son çıktı dosyası, tüm beyaz boşlukları ve küçültülmüş boyutta yorumları kaldıran tek bir satıra sahip olacaktır.

WordPress'te CSS ve JS'yi küçültme

Artık küçültmenin amacını ve nasıl çalıştığını anlıyorsunuz. Ancak, dosyaları küçültmek için çevrimiçi araçları kullanmak, aşağıdaki nedenlerden dolayı WordPress'te çalışmayacaktır:

• Temanız, eklentileriniz ve temel WordPress tarafından kullanılan birçok dosya olacaktır. Orijinal dosyaları manuel olarak küçültmek ve değiştirmek zaman alan bir iştir.
• Dosyalar temanız, eklentiniz ve temel WordPress güncellemeniz ile güncellenecektir. Bu nedenle, manuel olarak yüklenen dosya, her güncellemede normal sürümle değiştirilecektir.

Bu manuel zahmetten kaçınmak için, güncelleme sürecini etkilemeden işi otomatik ve dinamik olarak yapmak için bir küçültme eklentisi kullanabilirsiniz. Bu eklentiler dosyalarınızı sıkıştıracak ve orijinal dosya yerine küçültülmüş dosyanın sunulduğunu belirten .min uzantısıyla hizmet verecektir.

Bazen temanız ve eklentileriniz dosyaların küçültülmüş versiyonlarını da sunabilir ve bunları tekrar küçültmeniz gerekmez.

WordPress'te CSS ve JS Dosyaları Nasıl Küçültülür?

WordPress'te CSS ve JavaScript'i küçültmek için kullanılabilecek birçok eklenti vardır. Ancak, kullanım duruma bağlıdır ve sizin için işi yapan farklı eklentileri açıklayacağız. Google PageSpeed ​​Insights'ta “WordPress eklentileri”ne bir bağlantı göreceksiniz ve üzerine tıklayın. Bu sizi bir arama filtresi minify+CSS uygulayarak WordPress eklenti deposu sayfasına götürecektir.

Sorgu Dizelerini Kaldırma

CSS dosyalarınızı küçültmeyi denemeden önce, dosya URL'lerine eklenen sorgu dizesi parametrelerini kaldırmanızı öneririz. Statik CSS ve JS dosyaları için çalışmaların küçültülmesi aşağıdakine benzer:

 https://www.your-site.com/wp-content/themes/theme-name/style.css

Ancak, tema ve eklenti dosyaları, URL'ye eklenmiş bir sorgu dizesi olarak bir sürüm parametresine sahip olacaktır. Genellikle aşağıdaki gibi görünür ve bu URL'ler doğası gereği dinamik olarak kabul edilir.

 https://www.your-site.com/wp-content/themes/theme-name/style.css?ver=1626631618

Küçültmenin daha iyi çalışması için, dosya URL'lerinden sorgu dizelerinin kaldırılması önerilir. Bu aynı zamanda CDN ve diğer sistemlerin (sunucular ve tarayıcılar) dosyalarınızı etkili bir şekilde önbelleğe almasına yardımcı olacaktır. Bu gerçeği göz önünde bulundurarak, minify ve sorgu dizesi kaldırma özellikleri sunan eklentileri açıklayacağız.

1. Sinek Kuşu – Ücretsiz Seçenek

W3 Total Cache gibi eklentilerin yüzlerce seçeneği vardır ve yeni WordPress kullanıcıları için kurulumu zordur. Öte yandan, Autoptimize gibi basit eklentiler, dosyaları ayrı ayrı yapmadan birleştirir ve küçültür. Bu, özellikle dosyaları birleştirmeye ihtiyaç duymayan HTTP/2 sunucuları ile tüm barındırma ortamlarında çalışmayabilir. Ayrıca, birleştirme düzeni kolayca bozabilir ve davranışı kontrol etmek için seçenekleri ayrı ayrı küçültmek ve birleştirmek daha iyidir.

Hummingbird, WordPress'te CSS'yi küçültmek için en iyi ücretsiz eklentilerden biridir. Ayrıca siteniz için bir önbellek eklentisi olarak kullanabilmeniz için eksiksiz bir önbellekleme çözümü sunar.

• WordPress yönetici panelinizde “Eklentiler > Yeni Ekle” bölümüne gidin.
• "Sinek Kuşu - Hızı Optimize Et, Önbelleği Etkinleştir, CSS'yi Küçült ve Kritik JS'yi Ertele" eklentisini bulmak için "küçült" ifadesini arayın. Eklentiyi sitenizde kullanmaya başlamak için “Yükle” düğmesine ve ardından “Etkinleştir”e tıklayın.

• Eklenti, seçenekleri taramanızı ve önermenizi isteyecektir. Ancak, bu makalede sorgu dizesini kaldırma ve CSS'yi küçültme ayarlarına odaklanacağız.
• “Sinek Kuşu > Gelişmiş Araçlar” bölümüne gidin. "Genel" bölümünde "URL Sorgu Dizeleri" karşısında "Varlıklarımdan sorgu dizelerini kaldır" seçeneğini etkinleştirin. Aşağı kaydırın ve "Değişiklikleri Kaydet" düğmesini tıklayın.

• “Sinek Kuşu > Varlık Optimizasyonu” menüsüne gidin ve “Varlıklar” bölümünde “Otomatik” seçeneğini etkinleştirin.
• Aşağı kaydırın ve “Yapılandırmalar” bölümünün altındaki “CSS dosyalarını” etkinleştirin. Unutmayın, bu bölümün hemen üstünde, CSS dosyalarını birleştirmek için "Varlıklar" bölümünün altında "Hızlı" adlı bir seçeneğiniz var. Düzenin bozuk olduğunu fark ederseniz bunu devre dışı bırakabilirsiniz.

• Değişiklikleri sitenize uygulamak için "Değişiklikleri Yayınla" düğmesini tıklayın.

2. WP Rocket – Premium Eklenti

WP Rocket, insanların WordPress sitelerini optimize etme şeklini değiştiren tek premium eklentidir. Gerekli seçenekler arasında güçlük çekmeden gezinmek ve geçiş yapmak için basit bir pano bölümünüz var.

• Geliştirici sitesinden WP Rocket satın alın ve sitenize kurun.
• Eklenti güncellemesini ve desteğini almak için lisans anahtarını etkinleştirmeniz gerekir.
• “Dosya Optimizasyonu” sekmesine gidin ve “CSS dosyaları” bölümünün altındaki “CSS dosyalarını küçült” seçeneğini etkinleştirin.

Yukarıda belirtildiği gibi, WP Rocket, CSS dosyaları için ayrı seçenekler olarak küçültme ve birleştirme sunar. Ayrıca, HTTP/2 sunucuları için birleştirme seçeneğinin etkinleştirilmemesi için bir öneri göreceksiniz. Bu şekilde, Google PageSpeed ​​Insights ve diğer araçlarda iyi bir sayfa hızı puanı almak için gerekli seçenekleri değiştirebilirsiniz.

3. SiteGround Optimizer – Barındırma Sağlanan Eklenti

Günümüzde, birçok barındırma sağlayıcısının kendi optimizasyon eklentilerini sunduğu bir trend. Eklenti yerel barındırma ortamında daha iyi çalıştığı için bu en iyi seçenektir. Burada SiteGround Optimizer eklentisi ile açıklıyoruz ve barındırma şirketinizle küçültme amacıyla herhangi bir eklenti sunup sunmadıklarını kontrol etmeniz gerekiyor.

• SiteGround Hosting'e WordPress yüklediğinizde SiteGround Optimizer eklentisi sitenizle önceden yüklenmiş olarak gelir.
• “SiteGround > Frontend” menüsüne gidin ve “CSS” bölümünün altında “Minify CSS Files”ı etkinleştirin.

• Ayarlarınız otomatik olarak kaydedilecek ve “CSS Minification Enabled” yazan bir başarı mesajı göreceksiniz. Eski önbelleğe alınmış dosyalarınızı temizlemek için üst yönetici çubuğunda gösterilen “Önbelleği Temizle” seçeneğini tıkladığınızdan emin olun.
• Ön uçta herhangi bir sorun varsa, belirli CSS dosyalarını hariç tutmak ve sorunu gidermek için "CSS Küçültmeden Hariç Tut" seçeneğini kullanın.

Gördüğünüz gibi, SiteGround Optimizer eklentisi, sonucu etkili bir şekilde yönetmek için iki farklı seçenek olarak küçültme ve birleştirme sunar.

4. CDN Like Cloudflare ile küçültün

Hemen hemen her WordPress sitesi sahibi HTML, CSS ve JS statik dosyalarının teslimini hızlandırmak için İçerik Dağıtım Ağı'nı (CDN) kullanır. Bu dosyalar statik olduğundan ve her zaman değişmediğinden, sitenizde ek olarak bir eklenti kullanmak yerine CDN kurulumunuzda küçültme özelliğini kullanmak iyi bir seçenektir. Burada Cloudflare CDN'de küçültme seçeneğini etkinleştirmeyi açıklayacağız. Küçült seçeneğinin nasıl etkinleştirileceği konusunda CDN sağlayıcınızla görüşmeniz gerekebilir.

• Cloudflare hesabına giriş yapın ve CSS'yi küçült seçeneğini etkinleştirmek istediğiniz sitenizi seçin.
• “Hız” bölümünün altındaki “Optimizasyon” ayarlarına gidin.
• Sağ bölmede aşağı kaydırın ve “Otomatik Küçült”e karşı “CSS” seçeneğini etkinleştirin.
• Ayarlarınız otomatik olarak kaydedilir ve Cloudflare ile WordPress siteniz için CSS küçültme etkinleştirilir.

CDN kurulumunuzla küçültme özelliğini kullanırken dikkat etmeniz gereken iki önemli nokta vardır:

• Önbelleğe alma eklentisi veya sunucu tarafı küçültme seçeneğini kullanıyorsanız bu özelliğin çakışmadığından emin olun. Örneğin, WP Rocket eklentisi, paraziti önlemek için Cloudflare kurulumunu yapılandırmak için bir eklenti sunar. Benzer şekilde, Cloudflare ayarlarını SiteGround barındırma panelinde (Site Araçları olarak adlandırılır) yapılandırabilirsiniz.
• Sitenizde bir şey güncellediğinizde, CDN kurulumunuza gidin ve önbelleği temizleyin. Bu, eski CSS ve JS dosyalarının sunulmasını önleyecek ve en son güncellenmiş sürümleri kullanmaya başlayacaktır.

Minifying Works'ü Nasıl Bilirim?

Dosyalarınızın küçültülmüş olup olmadığını kontrol etmenin kolay yolu, sayfa kaynağını kontrol etmektir. Küçültme seçeneklerini etkinleştirmeden önce, sayfanızdan herhangi birini Chrome'da veya başka bir tarayıcıda açın, boş bir alana sağ tıklayın ve "Sayfa Kaynağını Görüntüle" seçeneğini seçin. Bu, sayfanın kaynak içeriğini, temanın style.css dosyasını arayabileceğiniz yeni bir sekmede açar. Örneğin, aşağıda, sürüm numarasıyla style.css'yi gösteren GeneratePress alt temasıyla nasıl göründüğü gösterilmektedir.

Sorgu dizesini kaldırdıktan ve küçültmeyi uyguladıktan sonra, tüm statik dosyaların sıkıştırıldığını ve .min.css sürümü ile küçültüldüğünü görmelisiniz. Örneğimizde, GeneratePress alt temasının style.css dosyası, aşağıdaki gibi herhangi bir sorgu dizesi olmadan style.min.css olarak mevcut olacaktır:

Kontrol etmenin başka bir yolu da web sitenizi Google PageSpeed ​​Insights aracında test etmektir. "Geçti Denetimler" bölümünün altında "CSS'yi Küçült" öğesini yeşil renkte görmelisiniz. Bu, dosyaların sıkıştırıldığını ve küçültülmüş boyutta sunulduğunu gösterir.

Son sözler

WordPress'te CSS'yi küçültmek, dosya boyutunu azaltmaya yardımcı olan eklentileri kullanan basit bir iştir. Yukarıda belirtilen seçeneklerden birini kullanabilir ve CSS'yi küçültme sorununu Google PageSpeed ​​Insights aracında düzeltebilirsiniz. Bunu yapmak için ücretsiz eklenti yeterli olsa da, gerektiğinde uygun desteği almak için her zaman WP Rocket gibi premium eklentileri kullanmanızı öneririz.