Kullanılmayan CSS’leri kaldırmak için birden farklı “online araç” kullanıp daha sonra bunları test etmek gerekir. CSS bir oluşturma engelleyici olduğu için optimize edilmesi çok önemlidir.
Kullanılmayan CSS Nedir?
Kullanılmayan CSS, sayfanıza yüklenen CSS dosyasındaki kullanılmayan kodlardır. Tanımı okuduğumuzda işlem aslında basit gibi görünsede detaylı bir işlem.
Genellikle hazır CSS kütüphaneleri ve WordPress temaları bu problemin başlıca nedeni diyebiliriz.
Tek bir tool ile kullanılmayan CSS’leri tespit etmek oldukça zor. Kullanılmayan CSS sorununun kaynağını ve çözüm yollarını sizlere bu blog yazısında aktaracağım.
Kullanılmayan CSS’leri Kaldırırsak Neler Olacak?
Kullanılmayan CSS genellikle CSS Kütüphanelerinden (Bootstrap) kaynaklanır. Bootstrap bir yüzlerce yazılımcının destek verdiği bir CSS kütüphanesidir.
Bootstrap genel olarak sitenizde daha önceden yazılmış kodların kullanılması sağlar. Fakat bu kodlar binlerce farklı varyasyon bulundurduğu için siz yalnızca belli bir bölümünü kullanacaksınız ve kullanmadığınız tüm kodlarda bu kütüphane ile birlikte sitenize yüklenecek. İşte burası kullanılmayan CSS bölümü. Sayfanız yalnızca 20 kB’lik bir kod satırı kullanırken 200 kB’lik bir dosyayı yüklemek zorunda kalacaktır.
Aslında bunu bir görsellerde yapmak oldukça basit. Eğer PNG kullanıyorsanız onu JPG yaptığınızda çok daha kolay tasarruf sağlayabilirsiniz. Fakat bunu CSS’de yapmak daha önemli çünkü CSS, siteyi oluşturmaya engelleyen bir dosyadır.
Yani CSS küçültmek yerine bunu görselleri optimize edip sorunu çözeriz diye düşünmeyin.
Kullanılmayan CSS Nasıl Bulunur?
Ne olduğunu ve neden çözmemiz gerektiğini anladık. Şimdi bunları bulalım. Kullanılmayan CSS’leri bulmak için Chrome DevTools kullanacağız ve daha sonrasında birkaç farklı Online Araç (Tool) inceleyeceğiz. Tüm bunları yaparken örnek olarak www.whitehouse.gov/ sitesini kullanalım.
Chrome DevTools İle Nasıl Yapılır?
Sitemizin ana sayfasını açıp işlemlere başlayalım.
Aşağıdaki bölümü açmak için Chrome DevTools içinde bulunan “Coverage” sekmesini açmanız gerekmektedir.
Daha sonra sayfayı yenilememiz istenecek ve yeniledikten sonra aşağıdaki gibi bir ekran bizi karşılayacak.
Gördüğünüz gibi yüklenen sayfada %86.6 oranında kullanılmayan CSS kodu bulunmakta. Bir WordPress teması, kendi CSS kodlarını kullanmakta ve tüm bunları tek bir CSS dosyasında yüklemektedir. Görüldüğünü gibi ana sayfada bu kodların yalnızca %13.4’ü kullanılmış durumda. O zaman geri kalan tüm kodları silersek sitemiz daha mı hızlı açılır? Hayır. Çünkü kullanılmadığını düşündüğümüz %86.6’lık bölüm aslında sitenin diğer sayfalarında kullanılıyor olabilir. Kategori sayfası veya blog detay sayfalarının yapıları daha farklıdır ve kodların bir bölümü orada kullanılıyor olabilir. Kırmızı ile işaretlenen kodlar aslında ana sayfada kullanılmıyor fakat “post” bölümünde kullanılıyor.
Biraz Daha Derine İnmek Gerekirse
Muhtemelen kırmızı ile işaretlenen kodları silince problemin çözüleceğini düşünebilirsiniz fakat “Coverage” sekmesine tüm bunları yapmak çok mantıklı görünmüyor. Çünkü sitede bulunan tüm kullanılmayan CSS leri bulmak için sırasıyla,
Her bir ayrı sayfa için coverage raporunu kontrol etmelisiniz
Bunları yaparken Javascriptleri sakın iptal etmeyin çünkü etkileşime geçmesi gereken kodlar olabilir.
Sitede bulunan tüm animasyonları kontrol etmelisiniz. (Butona basınca renginin değişmesi bile.)
Bunu sadece Desktop için değil tüm site kırılımları içinde yapmalısınız.
Ve bunların yaparken her bir kodu bir kenara yazmanız gerekmektedir.
Yani sitede bulunan tüm varyasyonları ve uç noktaları kontrol etmeniz gerekmekte. Bunun için kodların düzgün ve özenli yazılması gerekmekte fakat yapabileceğimiz birkaç method var.
Kullanılmayan CSS Bulma Araçları
1- UnusedCSS
2- PurifyCSS
3- PurgeCSS
4- UnCSS
Gerçekten bu araçlara CSS lerimizi atıp, kullanılmayan CSS’leri sildikten sonra geri aldığımızda problemimiz çözülecek mi? Hayır. Çünkü bu toollar yeteri kadar düzgün çalışmıyor. Sitenizde bulunan Javascript ile etkileşime geçmesi gereken CSS kodlarını da siliyor ya da :hover etiketlerini görmezden geliyor. Fakat yinede yukarıda listelenen tüm toolları bir kontrol edelim.
UnusedCSS
En popüler tool’lardan bir tanesidir. Ücretli ve ücretsiz olmak üzere 2 farklı sürümü var. Ücretsiz sürümünde, sitenizin URL’ini attıktan sonra sitenizi tarayarak gerekli işlemlerin tamamını yapıyor fakat CSS dosyalarınızı indirmenize izin vermiyor.
Sadece 1 sayfayı analiz ediyor gibi görünsede aslında tüm sayfaları analiz edip size bir mail atıyor.
Not: CSS dosyalarınızı değiştirdek sonra sitenizin tamamen kontrol etmeden yayına almayın. Çünkü bazı çalışan kodları silme ihtimali var.
PurifyCSS
Online olarak çalışan bu araçta birden fazla URL’i aynı anda tarayabiliyoruz. Böylelikle bizim elimizde yapmamız gereken bazı işlemleri hızlıca tool hallediyor. Fakat bu tool’u canlı web sitesinde kullanmak yerine siteyi geliştirme sürecinde kullanmak çok daha mantıklı. Daha sonra UnusedCSS tool’una atarak kodlarınızı 2 kere kontrol edebilirsiniz.
PurgeCSS
Sitenizde TailwindCSS, Bootstrap, MaterializeCSS, Foundation gibi CSS kütüphaneleri kullanıyorsanız bu tool kesinlikle size göre. Aslında bu tool’un asıl amacı siteyi geliştirirken kullanmaktır. Sitenizi geliştirdiniz ve artık kontrollere başlıyorsanız PurgeCSS burada rol oynamaya başlıyor. PurgeCSS içeriğinizi ve CSS dosyalarınızı analiz eder. Daha sonra tüm dosyalarınızda kullanılan seçicileri(class,id gibi) içerik dosyalarınızdaki seçicilerle eşleştirir. Gerekli işlemleri yaptıktan sonra size temiz bir CSS dosyasını iletir.
UnCSS
UnCSS, PurgeCSS ile çok benzer bir şekilde kullanılır fakat daha fazla manuel işleme ihtiyaç duyar. Sonuçları çok daha tutarlı diyebiliriz. UnCSS’i diğer araçlar ile kullandığımızda en doğru sonucu yakalıyoruz.
Kullanılmayan CSS Nasıl Kaldırılır?
Kullanılmayan CSS’leri manuel bir şekilde bulmanın ne kadar zor olduğunu anlamış olduk. Fakat bunları CSS Araçları ile daha kolay bir şekilde ortaya çıkarabiliriz.
Özetlemek gerekirse;
1- Birden fazla Kullanılmayan CSS aracını kullanarak en temiz dosyaya ulaşın
2- Çıkan sonuçları öncelikle bir test ortamında belli bir süre deneyin
3- Tüm bu işlemleri yaparken Javascript’i kapatmayın
4- Tüm işlemler ve test aşaması tamamlandıktan sonra orjinal sitenizin ve CSS dosyalarınızın yedeğini alın
Geliştirmek gerekirse;
Hazır kütüphaneler kullanmaktan kaçının
CSS dosyalarınızı parçalara bölün
homePage.css
blogDetailPage.css
productPage.css
Yeni ve güncel metodlar kullanın ve performansını deneyin
Styled Component
CSS module gibi
Eğer WordPress kullanıyorsanız, gereksiz eklentilerinizi kaldırın.
Her eklentinin ayrı bir CSS dosyası vardır.
Eğer WordPress kullanıyorsanız, temanızda bulunan ama kullanmadığınız özelliklerin CSS kodlarını silin.
Blog yazınız yoksa blog bölümünü
Ürün satmıyorsanız E ticaret bölümünü
Bize Ulaşın
Kariyer
İletişim
Diğer içeriklerimize de göz atın.
Arama Motoru Optimizasyonu	
YouTube SEO İpuçları: Video İçeriği Sıralamanın En Hızlı Yolu
Buse Kalkavan11/11/2021
Arama Motoru Optimizasyonu	
Artırılmış Gerçeklik AR (Augmented Reality) Nedir? E-Ticaretten Kullanım Örnekleri
Buse Kalkavan25/08/2021
Arama Motoru Optimizasyonu	
Footer Tasarımı: Neler Eklenmeli? Nelerden Kaçınılmalı?
Berkin Can12/07/2021
Anasayfa | Hizmetler | Başarı Hikayeleri | İletişim | Kariyer | EN
Categories
Arama Motoru Optimizasyonu
Başarı Hikayeleri
Dönüşüm Optimizasyonu
Hype over Advertising
Veri Analizi ve Entegrasyon
Veri Odaklı Reklam Yönetimi
Çerez Politikası | © Hype 2013 – 2020
Recent Posts
Google Analytics 4 Nedir? GA4 ile Universal Analytics Farkları Nelerdir?
#304: 💳 TikTok Kapılarını E-Ticarete Açıyor.
#303: ✈️ Pegasus’la Yeni Başarı Hikayemiz Yayında!
#302: ⚖️ Google ve Apple’a Karşı ‘Walled Garden’ Hamlesi
Hizmetlerimiz
Başarı Hikayeleri
Blog
İletişim
Kariyer
English
Hype
Esentepe Mahallesi
Ecza Sokak 6/1
Levent, İstanbul
+90 (532) 744 4943
[email protected]
Tercihlerinizi ve düzenli ziyaretlerinizi hatırlayarak size en iyi kullanıcı deneyimini sunabilmek için sitemizde çerezlerden faydalanıyoruz. Aşağıdaki ‘Kabul Et’ butonuna tıklayarak sitemizdeki tüm çerezlere izin verebilirsiniz. Fakat tercihlerinize göre daha detaylı seçimler yapmak isterseniz ‘Çerez Ayarları’ butonuna tıklayabilirsiniz.
Çerez AyarlarıKABUL ET
Manage consent
Kapat
Gizlilik Ayarları
Bu web sitesi size daha iyi bir kullanıcı deneyimi sunabilmek için çerezler kullanmaktadır. Bu çerezlerden olan İşlevsel Çerezler, sitenin doğru şekilde ve güvenli olarak çalışabilmesi için ve tarayıcınızda depolanır. Bu web sitesinde, ziyaretçilerin siteyi ne şekilde kullandığını anlamak ve analiz etmek için üçüncü parti çerezler de kullanılmaktadır. Bu tip çerezler yalnızca onay verdiğiniz takdirde tarayıcınızda depolanacaktır. Bu çerezlere onay vermeme imkanınız da bulunmakta. Fakat bazı çerezlere onay verilmemesi bu sitedeki deneyiminizi olumsuz etkileyebilir.
Reklamcılık
reklamcilik
Reklamcılık çerezleri ziyaretçilere daha alakalı reklamların gösterilmesi ve reklam kampanyaları gösterilmesini sağlar. Bu çerezler ziyaretçileri siteler arasında anonim olarak takip eder ve özelleştirilmiş reklamlar gösterilebilmesi için gerekli bilgileri toplar.
Ölçümleme
olcumleme
Ölçümleme çerezleri ziyaretçilerin web sitesiyle ne şekilde etkileşime geçtiğini anlamak için kullanılır. Bu çerezler siteyi ziyaret eden kullanıcı sayısı, trafik kaynağı, hemen çıkma oranı gibi metriklerin ölçümlenmesini sağlar.
İşlevsel Çerezler
islevsel-cerezler
İşlevsel çerezler web sitesinin doğru şekilde çalışması için mutlaka bulunması gereken çerezlerdir. Bu kategori sitenin temel fonksiyonlarının ve güvenlik önlemlerinin çalışabilmesi için gerekli çerezleri kapsar. Bu çerezler herhangi bir kişisel bilgi depolamaz.
İşlevsel Olmayan Çerezler
islevsel-olmayan-cerezler
İşlevsel olmayan çerezler, web sitenin fonksiyon ve güvenlik önlemlerinden bağımsız olan çerezlerdir. Ağırlıklı olarak ölçümleme, reklamlar ve gömülü içerikler ile kullanıcı bilgisi toplamayı sağlar. Bu çerezlerin kullanılabilmesi için ziyaretçilerin iznine ihtiyaç vardır.
Performans
performans
Performans çerezleri, ziyaretçilere daha iyi bir kullanıcı deneyimi sunabilmek için gerekli verilerin toplanması ve analiz edilebilmesini sağlar.