Kullanılmayan CSS, JS ve HTML Kodlarını Bulma Yöntemleri

Ana Sayfa - Blog
Kullanılmayan CSS, JS ve HTML Kodlarını Bulma Yöntemleri

Bu makalemizde kullanılmayan CSS, JS ve HTML kodlarını bulma yöntemlerini ve nasıl tespit edebileceğimizi açıklamaya çalışacağız. Fakat asıl konumuza geçmeden önce CSS, JavaScript ve HTML nedir? ne işe yarar? konusuna bir açıklama getirelim.

CSS, JavaScript, HTML Nedir? Ne İşe Yarar?

Web sitelerinin oluşturulmasında kullanılan temel dil HTML’dir. HTML bir programlama dili olmayıp işaretleme dilidir. HTML hakkında en doğru tabir onu internet sitelerinin omurgasına benzetmek olacaktır.

Bu temel iskelet; web sitelerinin temel yapısını, içerik kısmını ve bölümlerini kapsamaktadır. Peki CSS nedir? CSS teknolojisini, sitelere daha fazla görsellik katmak ve kullanıcı memnuniyetini artırmak için HTML dosyalarının biçimlendirilmesi olarak tanımlayabiliriz. Önceki örneğimizden devam edecek olursak HTML iskeleti meydan getirirken CSS bu iskeletin deri ile kaplanma işlemidir.

HTML ile oluşturulan web sayfalarının görselliğinin artırılması, renklendirilmesi, yazı biçimlerinin ayarlanması vb. işlemlerde CSS kodları kullanılır. CSS kodlarının kullanılmaması durumunda HTML tek başına sadece siyah-beyaz bir sayfa kullanıcıya sunabilir ve bu durumda kullanıcı memnuniyetini oldukça azaltacaktır.

JavaScript, CSS, HTML Sıkıştırma Nedir, Ne işe Yarar? konulu yazımızı da https://www.onyazilim.com/javascript-css-html-sikistirma-nedir-ne-ise-yarar sayfasından okumanızı tavsiye ediyoruz.

Son dönemde iyice popüler hale gelen betik dillerinden biriside JavaScript yani JS’dir. JavaScript kodlarının amacı esasında HTML kodları ile hazırlanan web sayfalarına işlevsellik kazandırmaktır. Vücut örneğinden devam edecek olur ise JS kodlarının vücudun fonksiyonlarına benzetebiliriz. Örneğin, bir form doldururken size yardımcı olan veya yaptığınız hatalarda uyarı veren sistemlerin altında JS teknolojisi yer almaktadır.

Yani CSS ve JavaScript kodları aslında internet sayfaları ve bu sayfaları ziyaret eden kullanıcılar için vazgeçilmezdir. Fakat bu noktada bir hususun altını çizelim; bu kodlar web sitelerinde her ne kadar görselliği ve fonksiyonelliği artırsada, CSS ve JavaScript kodlarının fazla kullanımının sitelerin yüklenme hızını yavaşlattığını ve sitelerin SEO puanlamasını düşürdüğünü belirtelim.

Dolayısı ile CSS ve JavaScript kodlarının belirli aralıklarla optimize edilmesi ve varsa kullanılmayan CSS ve JavaScript kodlarının tespit edilemesi hem sitelerin yüklenme hızı açısından hem de SEO puanı açısından oldukça önemlidir. Peki, kulanılmayan CSS, JS ve HTML kodlarını bulma ve tespit etme yöntemleri nelerdir? Makalemizin devamında bu soruya cevap arayacağız.

Kullanılmayan CSS, JS ve HTML Kodlarını Bulma Yöntemleri Nelerdir?

Konu hakkında öncelikle şunı belirtelim kullanılmayan CSS, JavaScript ve HTML gibi diğer kodların tespit edilmesi düşünüldüğü kadar kolay değildir. Yani hemen kurarak hiç uğraşmadan bütün bu kodları tespit eden bir uygulama henüz yoktur. Zaten bu şekilde reklam yapan uygulamalarında doğru söylemediğinden emin olabiliriniz. Hiç bir uygulama tam analamı ile fazlalık kodları analiz ederek kendi başına bunları sisteminizden atamaz.

Özellikle CSS dosyalarının zaman içerisinde  gereksiz ağırlaştığını belirtmeliyiz. Bu hantallaşmanın sebebi tarihsel biçimlendirme olabileceği gibi Bootstrap gibi kapsamlı CSS dosyası kullanıyor olmanızda olabilir. Genellikle Bootstrap bizim ihtiyacımız olandan çok daha fazlasını sunmaktadır. Özellikle kullanımında dikkat edilmelidir. Kullanılmayan CSS ve JS kodları sayfa hızını düşürdüğü gibi web sayfasının bakımınıda zor hale getirmektedir. Şimdi sıra ile fazlalık kodlardan kurtulmak için kullanabileceğiniz uygulamalardan bahsedelim.

1.  PurgeCss Uygulaması :

Bu uygulama özellikle kullanılmayan CSS stillerini temizlemekte oldukça etkilidir. Bu uygulamanın güzel tarafı iş akış şemanıza (workflow) eklenebilmesidir. PurgeCSS yazılımı, CLI uygulaması gibi terminalden kullanılabilir. Yüklemek için kullanacağınız kod şu şekildedir;

npm i purgecss –g

aşağıdaki komutu terminalde çalıştırınız.

purgecss --css index.css --content index.html

Yukarıdaki kod index.css ve index.html’i toplayacak ve kullanılmayan bütün CSS Sellectors kodlaını ortadan kaldıracaktır. Bu uygulama aşağıdaki kod ilede çalıştırılabilir.

npm i purgecss –D

Yeni bir JavaScript kodu oluşturduk ve aşağıdaki kodun içerisine yerleştirdik

// purgecss.jsvar Purgecss = require('purgecss') // ES5
import Purgecss from 'purgecss' // ES6var purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})
var purgecssResult = purgecss.purge()

Böylece temizleme metodu çağrıldı ve temizlenen css kodlarını purgecssResult’a aktardı.

Daha fazla bilgi için : https://purgecss.com/

Kullanılmayan CSS, JS ve HTML kodlarını bulma ile uğraşmak istemiyorsanız WEB tasarım, SEO ve Dijital Pazarlama alanında uzman ekibi ile sizlere her zaman destek olmaya hazır On Yazılım ekibi ile irtibata geçebilirsiniz.

2.  PurifyCSS Uygulaması :

Purgecss’de olduğu gibi bu uygulamada oldukça etkilidir. PurifyCSS uygulaması bütün HTML kodlarının ve CSS kodlarının elde edilmesi ve birbiri ile karşılaştırılması prensibine dayanmaktadır. Bu uygulama, elde edilen her iki kodu bütünü ile tarayarak fazlalık olan CSS stil yazılarını ortadan kaldırır. Temizlenen CSS kodları başka bir dosyaya yüklenir ve HTML dosyalarının bu dosya ile bağlantı kurması sağlanır.

Uygulama, HTML, JS, PHP vb. içerik ile CSS içeriğini alarak sadece kullanılan CSS kodlarını geri döndürür. PurifyCSS orjinal CSS kodlarını değiştirmez. Bu sebeple orjinal koda küçültme (minification) maksatlı kodlar yazılabilir.

Bu uygulamanın kullanımı oldukça basittir. Aşağıdaki kodu çalıştırdıktan sonra,

npm i purify-css –D

bir dosya yaratın (Örnekte purify.js) ve müteakip kodu ekleyin.

// purify.jsconst purify = require("purify-css")const htmlFiles = ['*.html'];
const cssFiles = ['*.css'];const opts = {
    output: 'purified.css'
};purify(htmlFiles, cssFiles, opts, function (res) {
    log(res);
});

“purify-css” paketinden temizlenen kodu çıkarıyoruz.

Daha fazla bilgi için: https://purifycss.online/

Kullanılmayan CSS, JS ve HTML Kodlarını Bulma Yöntemleri

3.  Uncss Uygulaması :

Fazlalık  olan CSS kodlarının temizlenmesinde işimizi kolaylaştıran bir diğer uygulama “uncss”dir. Bu uygulamada, kullanılmayan CSS stil kodlarını yok etmek için JS API özelliği mevcuttur. uncss sylesheets’den kullanılmayan CSS kodlarını kaldıran bir uygulamadır. Farklı dosyalarda çalışmaktadır ve JavaScript içine enjekte edilen CSS kodlarında da çalışmaktadır.

Yüklemek için terminale şu kodu yazmanız yeterli olacaktır.

npm i uncss –g

Daha fazla bilgi için : https://uncss-online.com/

4.  Chrome DevTools Uygulaması :

Chrome Devtools’da bulunan Coverage özelliği kullanılmayan JS ve CSS kodlarının bulunmasında oldukça yardımcıdır. Chrome tarayıcınızı açın, “developer tools” bölümüne tıklayınız daha sonra sırası ile önce “more tools” sonra “Coverage”a tıklayınız. Coverage açıldığında “start capturing coverage”, “to reload”, “start capturing” ve “stop capturing coverage” gibi özellikler göreceksiniz. Eğer analiz etmek stediğiniz bir web siteniz var ise sayfayı yükleyiniz ve Coverage’da bulunan “0” tuşuna basınız.

Bir süre sonra tablo halinde analiz edilen kaynakları ve sonuçları ve ne kadar kodun kullanımda olup olmadığını göreceksinz. Sayfanızla ilişkili oan bütün JS ve CSS kodları Coverage’ın ilgili bölümünde gözükecektir.

Yani bu analiz sayesinde ne kadar CSS kodunun kullanılmadığını öğrenebiliriz. Yalnız bu kodların sistemden uzaklaştırılması ancak manuel olarak yapılabilir.

Daha fazla bilgi için : https://developer.chrome.com/docs/devtools/coverage/

Böylece web sitenizde kullanılmayan CSS, JS ve HTML kodlarını bulma yöntemlerini ve nasıl ortadan kaldırılabileceğini öğrenmiş olduk. Unutmayın ki kullanılmayan kodları web sitenizden uzaklaştırmanız sitenin hızlı çalışmasını sağlayacak ve özellikle mobil kullanıcıların fazladan internet verisi kullanmasının önüne geçecektir.

WEB sitelerinizin CSS, JS ve HTML optimizasyonları için profesyonel destek arıyorsanız https://www.onyazilim.com/on-yazilim-iletisim linkini takip ederek bize ulaşabilirsiniz.

Kaynaklar :

https://blog.bitsrc.io/4-ways-to-remove-unused-css-647828ca629b

https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/