Lighthouse'da "Kullanılmayan CSS'yi Kaldırın" Uyarısını Düzeltin.

Kullanılmayan CSS Nedir?

Kullanılmayan CSS, bir web sayfasında hiçbir yerde kullanılmayan CSS bildirimlerinden oluşur.
CSS'nin bir kısmının kullanılmaması oldukça normaldir. Örneğin, bazı CSS bildirimleri masaüstü veya mobil gibi başka bir cihaz için yazılmış olabilir. Bazen  stil sayfasında tanımlanan bir öğe (örneğin bir düğme) bu belirli sayfada kullanılmıyor olabilir.
Kullanılmayan CSS, genellikle bootstrap gibi bir framework kullandığınızda ortaya çıkar; çünkü CSS'de varsayılan olarak hiçbir zaman kullanmayacağınız çok daha fazla öğe tanımlanmıştır. Ya da sayfanızı yeniden tasarladığınızda eski CSS öğelerini kaldırmayı unuttuğunuzda.

Kullanılmayan CSS sayfa hızı için neden kötüdür?

CSS sayfa yüklemesini yavaşlatır. Bir sayfa yüklendiğinde, tarayıcı önce bu sayfanın HTML'sini alır. Bu HTML, DOM düğümlerine dönüştürülür. Ardından tarayıcı tüm stil sayfalarını alır. Bu CSS dosyalarında bulunan stiller de başka bir formata, yani CSSOM'a dönüştürülür. DOM ve CSSOM bir render ağacında birleştirilir. Ancak bu render ağacı oluşturulduktan sonra tarayıcı ilk içeriği boyamaya başlar.
Bu mekanizma nedeniyle CSS dosyaları her zaman web sayfanızın oluşturulmasını engeller. Bir CSS dosyası olması gerekenden büyükse, bu dosyayı indirmek daha uzun sürer ve bu ilk gecikmeye neden olur.  Bir CSS dosyası kullanılmayan CSS içeriyorsa, render ağacını oluşturmak daha uzun sürer. 

Kullanılmayan CSS'yi manuel olarak nasıl bulabilirsiniz?

Google Chrome'da kullanılmayan CSS'yi Code Coverage görünümünde görebilirsiniz. Code Coverage, Chrome DevTools'un bir parçasıdır. DevTools, her Chrome tarayıcısında bulunan bir dizi yerleşik araçtır. 

Önce Ctrl-Shift-J kısayoluyla DevTools'u açın. Ardından Ctrl-Shift-P  yazarak Komut Paletini açın. Şimdi 'coverage' yazın. Coverage'ı seçin ve sayfayı yeniden yükleyin. Artık sayfa tarafından yüklenen ve kullanılan CSS ve JavaScript dosyalarının bir genel görünümünü göreceksiniz. Ayrıca dosyaların ne kadar büyük olduğunu ve kodun ne kadarının gerçekten kullanıldığını görebilirsiniz.
Hangi CSS kurallarının kullanıldığını (yeşil) ve hangilerinin kullanılmadığını (kırmızı) görmek için bir CSS dosyasına tıklayın. 

'Kullanılmayan CSS'yi kaldırın' uyarısı nasıl çözülür

Lighthouse'daki 'kullanılmayan CSS'yi kaldırın' mesajını çözmenin birkaç yolu vardır. Herhangi bir nedenle uyarıyı düzeltmek mümkün değilse, kullanılmayan CSS'nin sayfanızın yüklenme süresi üzerindeki etkisini azaltmak için CSS dağıtımını optimize edebilirsiniz. Kullanılmayan CSS'yi düzeltme seçeneklerinizi aşağıda kısaca ele alacağım.

1. Kullanılmayan CSS'yi elle silin

En mantıklı ve en iyi yol, ancak aynı zamanda en zahmetli yol, kullanılmayan CSS'yi manuel olarak kaldırmaktır. Adımlar basittir:

1. Orijinal CSS dosyalarınızı yedekleyin. Gereğinden fazla CSS kaldırabilirsiniz.
2. Google Chrome'da Code Coverage sekmesini açın ve her CSS dosyası için hangi bildirimlere ihtiyacınız olmadığını görüntüleyin.
3. Sunucudaki (veya yerel) CSS dosyasını açın ve kullanılmayan her CSS bildirimini kontrol edin. Kaldırılıp kaldırılamayacağını belirleyin. Ancak dikkatli olun: kullanılmayan bir CSS bildirimi, bu bildirime hiçbir zaman ihtiyacınız olmayacağı anlamına gelmez. Bunu kendiniz değerlendirmelisiniz!
4. Her CSS bildiriminin CSS'de tekrarlanıp tekrarlanmadığını kontrol edin. Tekrarlanan CSS de kullanılmayan olarak işaretlenecektir. 
5. Her CSS kuralını kısaltma yöntemleri açısından kontrol edin.  CSS'yi kısaltmak mümkün mü? O zaman kısaltın!

2. CSS'yi birkaç dosyaya bölün

CSS kural sayısını hızla azaltmanın basit bir yolu vardır! Sadece cihazınız için gerekli stilleri yükleyin. Sayfanız genellikle mobilde ziyaret edilir. Bu mobil cihaz için masaüstü ve yazdırma stillerini indirmenize aslında gerek yoktur. Bu stilleri indirmemek zaman kazandırır ve böylece Lighthouse'daki kritik istek zincirini kısaltır.

Bunu gerçekleştirmek için media özniteliğini kullanın. media özniteliği, bir stil sayfasının yalnızca media özniteliği o anda kullandığınız medyayla eşleştiğinde kullanılmasını sağlar.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" 
 media="screen and (min-device-width: 1024px)">

3. Otomatik CSS temizleme aracı kullanın

CSS dosyalarınızı otomatik olarak temizleyebilecek ve kullanılmayan CSS referanslarını kaldırabilecek bir dizi akıllı araç vardır.
Araçlar harika çalışsa da mükemmel değildir. Bazen bu araçlar gereğinden fazla CSS bildirimi kaldırır. Bu yüzden bunları dikkatli kullanın ve CSS'nizi her zaman kendiniz kontrol edin.
En iyi CSS temizleme araçları PurifyCSS ve PurgeCSS'dir. Bu araçlar NodeJS üzerinde çalışır. NodeJS, Google'ın V8 JavaScript motoruna dayanan, JavaScript betiklerini çalıştırabileceğiniz bir JavaScript çalışma zamanıdır.  Ayrıca purifyCSS çevrimiçi sürümünü de deneyebilirsiniz.

4.  Critical CSS

Critical CSS, web sitenizin görüntü alanında (görünür kısmında) ihtiyaç duyulan CSS kurallarının bir koleksiyonudur. Başka bir deyişle:  Critical CSS, sayfanızın görünür kısmını oluşturmak için gerekli olan CSS'dir.

Sayfanızdan CSS'yi filtreleyip çıkarabilen bir dizi araç vardır. Critical CSS daha sonra satır içi olarak, sayfanızın head bölümüne yerleştirilirken, orijinal CSS dosyaları eşzamansız olarak yüklenir (tarayıcının daha sonra kullanması için).

Bu, kullanılmayan CSS sorununu tamamen çözmez. Sonunda kullanılmayan CSS yüklenecek ve ayrıştırılacaktır, ancak tarayıcınız ilk render aşamasında bundan 'etkilenmeyecektir'.

Critical CSS'yi bulmak ve çıkarmak için en yaygın kullanılan araç NodeJS betiği Critical'dir. Ayrıca Critical Path CSS Generator ve başka bir Critical Path CSS Generator gibi çevrimiçi araçlar da mevcuttur.

5. CSS dosyalarını küçültün (minify)

Kullanılmayan CSS, yukarıda okuduğunuz gibi sayfayı 2 şekilde yavaşlatır. Birincisi, CSS dosyaları daha büyük olduğu için indirilmesi daha uzun sürer. 

Bu sorunu, CSS dosyalarını küçülterek (minify ederek) CSS dosya boyutunu azaltarak çözebiliriz. Bu, bir CSS minifier aracılığıyla yapılır.  Bir CSS minifier, boşlukları, yorumları ve biçimlendirmeyi kaldırarak CSS dosyalarını küçültür. Ayrıca bir CSS minifier, değişkenleri ve CSS kodunu daha az bayt aktarılacak şekilde yeniden yazabilir.

İyi bilinen bir CSS minify aracı css-minify'dir. Tüm CSS dosyalarınızı komut satırından css-minify -f filename komutuyla küçültün. Ayrıca çevrimiçi CSS minifier'lar da mevcuttur, örneğin cssminifier.com

6. CSS framework'ünüzü yeniden derleyin

Bootstrap CSS gibi bir CSS framework'ü mü kullanıyorsunuz? Bu, tüm sitenizi stillendirebileceğiniz bir CSS framework'üdür. Bu framework o kadar kapsamlıdır ki, büyük bölümlerini hiçbir zaman kullanmama olasılığınız yüksektir.

Neyse ki bootstrap ve diğer CSS framework'lerinin yapımcıları bunu dikkate almıştır. Bu framework SASS ile yazılmıştır. Bu, CSS'ye çok benzeyen bir dildir. Basit değişkenler ve fonksiyonlar kullanabilen birkaç küçük SASS dosyasından oluşur. Bu, biraz bilgiyle framework'ü kendinize göre ayarlamayı ve kişiselleştirmeyi kolaylaştırır. Kullanmadığınız kısımları atlayabilir ve kolayca 1 son CSS dosyasına derleyebilirsiniz.

Ayrıca standart CDN'den bir CSS framework'ünü değiştirilmemiş şekilde yüklemediğinizden emin olun. Framework'ü indirin ve SASS ile tam istediğiniz gibi, yalnızca kullandığınız CSS sınıflarıyla derleyin.

7. Farklı bir CSS stratejisi düşünün

Gerçekten hızlı olmak mı istiyorsunuz? O zaman CSS stratejinizi yeniden düşünmek iyi bir fikir olabilir. Bunun nasıl yapılacağı sitenize bağlıdır. Roma'ya giden birçok yol vardır.

Örneğin bizim sitemizi ele alalım. Biz sayfa başına sadece gerçekten ihtiyacımız olan CSS'yi yüklüyoruz. CSS sınıfları, CMS'imiz tarafından yalnızca ihtiyaç duyulduğunda otomatik olarak içe aktarılır. CSS'yi satır içi olarak (sayfanın head bölümünde) yerleştiriyoruz. Bu bize ekstra bir ağ isteği kazandırır. Bu çözüm son derece hızlı ve bakımı kolaydır.

Dikkatli bir okuyucu şöyle düşünebilir: "Peki ya CSS Önbelleğe Alma, son CSS dosyaları önbelleğe alındığında CSS daha hızlıdır. Evet, doğru. Bu yüzden görünür alandaki tüm bağlantıları önceden yüklüyoruz, böylece bir sayfa CSS dahil her zaman önbellekten alınır.

WordPress'te 'kullanılmayan CSS'yi kaldırın' uyarısını düzeltin

Kullanılmayan CSS'yi kaldırmaya hazır mısınız? WordPress'te nasıl başlayacağınız aşağıda açıklanmıştır. WordPress'te CSS 3 şekilde eklenebilir:

• Doğrudan şablona. Şablon klasörünüzde header.php adlı bir dosya bulunur. Bu dosyada genellikle şablona özgü CSS dosyaları vardır. Bu CSS dosyalarını yukarıda anlattığım gibi değiştirebilirsiniz. Orijinal CSS dosyalarınızı yedeklemeyi unutmayın ve bir tema güncellemesinin CSS dosyalarınızın üzerine yazabileceğini aklınızda tutun.
• Bir eklenti tarafından eklenen CSS. WordPress'teki eklentiler HTML'nize sınırsız CSS dosyası ekleyebilir. Bu eklentiler  wp_register_style ve wp_enqueue_style fonksiyonlarını kullanır. Çoğu eklenti, mevcut sayfada aktif olup olmadığını kontrol etmeye zahmet etmez. O sayfada eklentiye özgü CSS'ye ihtiyaç olmasa bile her sayfaya CSS enjekte ederler. Bununla her gün karşılaşıyorum. Bu durumda, bu stilleri sayfalardan kaldırmak için wp_dequeue_style ve wp_deregister_style fonksiyonlarını kullanabilirsiniz. Bu hassas bir iştir. Bunu nasıl düzelteceğinizden emin değilseniz, geliştiricilere başvurun veya benden yardım isteyin. Ayrıca Asset CleanUp eklentisini de kullanabilirsiniz; bu eklentiyle sayfa türü başına hangi eklenti, stil ve betiklerin yüklenebileceğini ayarlayabilirsiniz.
• JavaScript tarafından eklenen CSS. JavaScript kullanarak sayfaya stil sayfaları 'enjekte etmek' de mümkündür. Tıpkı stil sayfalarında olduğu gibi, bu betikleri de wp_dequeue_script fonksiyonuyla sayfa başına devre dışı bırakabilirsiniz. JavaScript yüklenmediğinde, stil sayfası da enjekte edilmeyecektir.
  Betik ve stil sayfasına ihtiyacınız varsa ancak yükleme sonrasında hemen değilse, JavaScript'in yüklenmesini script defer özniteliği aracılığıyla ertelemek mümkündür. Bunu functions.php'ye şu kodu ekleyerek yapabilirsiniz

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );