Perfmatters kullanılmayan CSS'leri kaldırmak için 19 Ocak tarihli 1.8.5 sürümüne şu anda Beta aşamasında olan yeni bir özellik ekledi. Blogunuzun performansını artırmak istiyorsanız vazgeçilmez bir tamamlayıcı haline gelen bu eklentiyi tavsiye etmekten asla yorulmayacağım.
için 25 USD Bir yıldan kısa bir süre içinde, sürekli iyileştirmeler ekledikleri güçlü bir araç sunuyor. İşte burada bir yapılandırma kılavuzu.
YWordPress 5.8 ve 5.9-RC üzerinde test ettim ve şu ana kadar hiçbir şey bozulmadı. Kullanılmayan CSS'yi zaten kontrol altında tutmama rağmen Script Manager Bu eklentinin sadece bu seçeneğini etkinleştirerek en azından birkaç istek ve birkaç Kb tasarruf edebilirsiniz.
¿Por qué eliminar el CSS no utilizado?
Olağan uyarılar PageSpeed Kullanılmayan CSS'yi kaldır" veya "Kullanılmayan CSS içeriğini azalt" genellikle yüklenecek CSS kullanılmadığında görüntülenir.a por un plugin o plantilla no es necesario o no se utiliza en una página en concreto.
Geliştiriciler normalde bir stil sayfasını yalnızca kullanılıyorsa enqueue eder. Ancak, çoğu zaman ihtiyaç duyulmayabilecek ek stiller de eklenir. Bu da çok fazla kullanılmayan CSS ile sonuçlanır ve yüklemeyi yavaşlatır.
Bazen, "Oluşturmayı engelleyen kaynakları kaldır" uyarılarını da tetikleyebilir.
Daha iyi bir PageSpeed puanı elde etmenin ötesinde, kullanılmayan CSS'nin kaldırılması, sayfanın yüklenmeye başlamasından sayfa içeriğinin herhangi bir kısmının ekranda oluşturulmasına kadar geçen süreyi (FCP), bir web sayfasının ana içeriğinin indirilmesi ve kullanıcı için tamamen hazır olması için geçen süreyi (LCP) ve sayfanın yüklenmeye başlamasından tamamen etkileşimli olmasına kadar geçen süreyi (TTI) azaltmada önemli bir etkiye sahiptir. Kısacası, biliyorsunuz, Türkiye'nin tarihinin önemli bir kısmı Core Web Vitals.
Kullanılmayan CSS nasıl bulunur?
Kullanılmayan CSS'leri bulmanın en kolay yolu URL'yi PageSpeed ile test etmektir. Kullanılmayan CSS varsa, yalnızca Google'ın uyaracak kadar önemli gördüğü eşik aşıldığında tetiklenecek olan uyarıyı göreceksiniz, bu nedenle algılanan yükleme hızı (deneyimlediğiniz gerçek hız) iyiyse çok fazla takıntı yapmayın.
Kullanılmayan CSS'leri bulmanın diğer bir yolu da Chrome DevTools'u kullanmaktır. Chrome'da denetçiyi açın (Ctrl+Shift-I), Shitft+Control+P tuşlarına basın, "Coverage" yazın ve orada hem CSS hem de JS için kullanılmayan baytları bulacaksınız. Kırmızı kullanılmayanları, mavi/yeşil ise kullanılanları gösterir.
Buradan, her bir CSS'yi tanıdığınızı, ne işe yaradığını ve ölçüm yaptığınız sayfadan kaldırıp kaldıramayacağınızı veya devre dışı bırakıp bırakamayacağınızı anladıktan sonra, belirli eklentileri daha hafif olanlarla değiştirmek, şablonu gözden geçirmek veya değiştirmeyi düşünmek, JS ve CSS'yi seçici olarak devre dışı bırakmak için Komut Dosyası Yöneticisini kullanmak gibi çeşitli seçenekler vardır.
PageSpeed uyarılarını kaldırmanın en kolay yolu Perfmatters'da "Kullanılmayan CSS'leri kaldır" işlevini etkinleştirmektir, bu işlev tüm bunları otomatik olarak yapar. Bunu yüzlerce URL üzerinde (farklı şablonlar ve yapılandırmalarla) test ettiklerini iddia ediyorlar ve bu sonuçları bildiriyorlar:
FCP'deki ortalama düşüş 15,20%.
Ortalama LCP düşüşü 19,66%.
Ortalama TTI düşüşü 14,95%.
Etkinleştirmeden önce
Perfmatters, bu seçeneği etkinleştirmeden önce Perfmatters'da yapılandırılmış olan tüm mevcut CSS ön yüklemelerini kaldırmanızı önerir (yerel stil sayfaları hariç Google kaynakları) ve CSS'yi birleştirmeyin.
CSS birleştirme, HTTP/2'den beri kullanımdan kaldırılmış bir optimizasyon tekniğidir. Bazı durumlarda, CSS birleştirme performansa zarar bile verebilir. Yine, her sayfanın yapılandırmasına bağlı olarak farklı davranacağını ve durumunuz için en iyi hatasız sonucu bulana kadar test edip gözlemlemenin en iyisi olduğunu unutmayın.
Aynı işlevleri etkinleştirerek birbiriyle çakışabilecek veya birbirini geçersiz kılabilecek diğer performans veya önbellek eklentilerinin olası yapılandırmalarının da farkında olmalısınız.
Etkinleştirildikten sonra üç seçenek bulacaksınız:
1- Gecikme (varsayılan ve önerilen).
CSS'niz eskiden satır içi idi ve tüm CSS stil sayfaları (kullanılmayan CSS) geciktirilir ve kullanıcı etkileşimi ile yüklenir.
2- Async
Kullandığınız CSS satır içi hale dönüştürülür ve tüm CSS stil sayfaları (kullanılmayan CSS) eşzamansız olarak yüklenir. Bu yöntem, sayfa yüklenirken stil sayfaları eşzamansız olarak yürütüldüğü için pop-in'i önlemeye yardımcı olabilir. Bu yöntem, önceki gecikme davranışından biraz daha yüksek bir LCP/FCP ile sonuçlanacaktır.
3- Delete
Kullandığınız CSS satır içi hale gelir ve tüm orijinal CSS stil sayfaları (kullanılmayan CSS) kaldırılır. Bu en agresif yöntemdir, ancak istisnaların eklenmesini gerektirmesi de muhtemeldir. Yalnızca ileri düzey kullanıcılar için önerilir.
Etkinleştirildikten sonra sayfalar ve girişler farklı davranacaktır.
Sayfalar çok sayıda benzersiz CSS'ye sahip olma eğilimindedir ve bu nedenle kullanılan CSS ilk ziyarette her sayfa için ayrı ayrı oluşturulur ve satır içi hale gelir. Ancak, girişler çok sayıda CSS'yi paylaşma eğiliminde olduklarından, kullanılan CSS yalnızca bir kez, ilk ziyarette oluşturulur ve satır içi hale gelir. Girişlerin sayfalara kıyasla farkı, kullanılan CSS'nin oluşturulmasının yalnızca bir kez gerçekleşmesidir.
Perfmatters tarafından oluşturulan tüm kullanılan CSS yerel olarak bu yolda saklanacaktır:
/wp-content/cache/perfmatters/tudominio.com/css/
Perfmatters tarafından oluşturulan CSS, sayfalar, gönderiler, kategoriler, etiketler, aramalar, ana sayfa veya 404'ler için bu şekilde görünür.
"Hariç Tutulan Stil Sayfaları" kutusunda, tam kaynak URL'sini (loquesea.css) veya kaynak URL'sinin tek bir bölümünü ekleyerek belirli stil sayfalarını "Kullanılmayan CSS'yi Kaldır" işlevinden hariç tutabilirsiniz. Biçim: her satır için bir tane.
Aşağıdaki "Hariç Tutulan Seçiciler" kutusunda, öğe kimliği, sınıf adı vb. ekleyerek (#id, .class) belirli CSS'leri (seçiciler) "Kullanılmayan CSS'yi kaldır" işlevinden hariç tutabilirsiniz. Format: her satır için bir tane.
Muhtemelen bir noktada kullanılan CSS'yi silmeniz gerekecektir. Örneğin, bir sayfayı yeniden tasarladıktan veya yeni bir öğe ekledikten sonra. Oluşturulan CSS'yi silmek ve sonraki ziyaretlerden sonra yeniden oluşturulmasını sağlamak için, en alttaki "Kullanılan CSS'yi Temizle" seçeneğine tıklamanız yeterlidir.
Kullanılmayan CSS'yi Kaldır işlevini kullanarak tek bir gönderiyi, sayfayı veya özel bir gönderi türünü hariç tutabilirsiniz. Düzenleyicide, sağ tarafta "Kullanılmayan CSS" seçeneğinin işaretini kaldırın.
Bu, tüm sayfayı hariç tutacaktır ve örneğin sitenin geri kalanından daha fazla sorunu olabilecek bir alışveriş sepeti, ödeme veya iletişim sayfası için yararlı olabilir.
Filtre ayrıca aşağıdakiler için de kullanılabilir perfmatters_remove_unused_css sitenizde kullanılmayan CSS'nin kaldırıldığı yeri değiştirmek için. Bu örnek, yalnızca sayfalarda kullanılmayan CSS'yi devre dışı bırakmak için kullanılır.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
