İpucu: Doğru CSS Kullanımı Nasıl Olmalı? "Remove unused CSS"

Herkese Merhaba

Bir konuda bir kaç bilgi vermek istiyorum. Çoğu işlem yaptığım web sitesinde bana gelen en çok şikayet "Remove unused CSS " hatası. Türkçe karşılığı "Kullanılmayan CSS'i kaldır."
Hazır altyapı kullanılan sitelerin en büyük problemlerinden biri bu. Bazı sitelerde ise yapılan en büyük hata, tüm css dosyasını tek bir dosya içinde birleştirip sunmak. 2-3mb lık css dosyaları gördüm maalesef. Amaç istek sayısını azaltmak vb olsa da, günün sonunda yarardan çok zarar getirmekte. (HTML Doom inşası sırasında CSS'in neler etki ettiğini bilmeden bu hata yapılıyor maalesef.)

Html iskeleti oluşturulurken, tüm alt yapılarda değişkenlik gösterse de (Layout, Masterpage) kavramı bulunmakta. PHP tarafında arkadaşlar bunu header.php, footer.php şeklinde yapıyorlar, Asp.Net Web Form veya MVC tarafında Masterpade.aspx ve Layout.cshtml ile.

Çoğu site bootstrap css framework kullanmakta, buradaki amaç site için bir iskelet oluşturmak. Fakat yine çok yapılan bir hata ise sayfada hiç kullanılmayan css içeriğini bu dosyaya import etmekle oluşuyor.

Kısaca şöyle özetlemekte fayda var. Siteniz ortak bir header (Linkler, logo, giriş yap, kayıt ol) gibi kısımların olduğu, birde footer (sosyal linkler, kurumsal linkler adres) vb kısımların olduğu.

Şimdi siz iskelet.css adında bir css dosyası oluşturup sadece buralara etki edecek css'leri yazsanız, ardından ana sayfanızdaki haber slider vb.. içerikler için anasayfa.css hazırlamış olsanız ve anasayfa.css dosyasını sadece ana sayfa da çağırsanız, kategori veya yazı sayfanızda gereksiz yere ana sayfadaki haber slider için yazılan css'i bu sayfada kullanmamış olursunuz. "Remove unused CSS" bu hata ilede karşılaşmamış olursunuz.

Not: Bu işlemi yapmak zor bir süreç bunu kabul ediyorum. Sayfaların ayrışması, her sayfanın özel css'nin yazılması ama emin olun günün sonunda kazanan siz olursunuz.

Bilgilendirici bir yazı olmuş teşekkür ederim.

Artık bu forumda denk geliyorum yavaş yavaş bazı arkadaşlar header, gövde ve footeri ayrı ayrı CSS'ye döküp çağırmaya başladı.
Bence de en sağlıklı döküm bu. Pagespeed insights değeri bu şekilde daha da yüksek veriyor ve googlenin sevdiği bir yaklaşım.

Hocam maşallah bugün de formundasın
Sektörel tecrübelerin forumdaki optimizasyon diyen birçok arkadaşla yol gösterecektir, yazının kalitesi de bunu ispatlıyor zaten

Teşekkürler, güzel bir yazı olmuş.

2007-2008 arasında front-end işi yapıyordum, o zamanlar bu şekilde kodluyorduk sonra ne oldu ise değişti tekrar eski ye dönmeleri güzel arkadaşların.

Senin güzel düşüncelerin bunlar çok sağ ol. İşinde çok iyi arkadaşlar var burada.

Jannah tema kullanıyorum.
Pagespeed değerlerine baktığımda mobil 99, masaüstü 100. Tek sıkıntım kullanılmayan css ve js sorunu.

100 puan takıntım yok ancak eminim ki %80 e yakın kullanılmayan bu kodları silersem sitem çok daha hızlı olacak. Buna bir çözüm yolu arıyorum.

Child tema kullanıyorum. Kullanılmayan kodları tespit edip child tema da bunlardan arındırılmış yeni dosyalarım kullanmayı düşünüyorum. Sizce işe yarar mı? Aynı zamanda wp rocket kullanıyorum. Bu eklentide ki kritik css bölümünden de bir şeyler yapabileceği mi düşünüyorum.

Öyle bir çalışma yapmalıyım ki tema yapımcısının sık güncellemelerinden etkilenmemeli. Sizin bir Öner’iniz olur mu?

WP alt yapısı hakkında tecrübem yok maalesef. Tecrübeli arkadaşlar cevap verecektir.