Gelişmiş CSS Optimizasyonu ( Render Blocking CSS )

Kasım 01, 2016 | Seo, Web Tasarım

css seo uyumlu

SEO için CSS Optimizasyonu

Çoğu kişi css optimizasyonu‘ nu sadece css dosyasını sıkıştırmaktan ibaret sanıyor ancak css optimizasyonu malesef bu kadar basit bir işlem değil.

Bir site yüklenirken işlenen dosyaların sırası tam olarak şöyledir;  html > css > js >  tabi istisna olarak css ile js arasında resimler bulunabilir. Sitemizin hızlı açılması için bir an önce gerekli olan bileşenlerin yüklenmesi daha sonrasında diğer bileşenlerin yüklenmesi gerekir.

Örneğin; sitenin sadece tek bir sayfasında kullandığımız dinamik bir özellik için bir veya daha fazla javascript kullanmamız gerekiyor,  bu durumda bu  .js dosyalarının sadece o sayfa açıldığında yüklenmesi mantıklı olmaz mı? Ne var ki çoğu sitede bütün js dosyaları header yada footer a gömülmüş,, kullanılsada kullanılmasada her defasında yükleniyor ve gereksiz yere site açılış hızını düşürüyor. Daha sonra bu konuyu detaylı olarak yazacağım ancak şimdi konumuza dönecek olursak Css Optimizasyonu için neler yapabiliriz başlık başlık inceleyelim.

Aslında bütün yazının kısa bir özetini yazmak gerekirse;

Css uzantılı dosyaların ideal olarak yüklenmesi şunun gibi olmalıdır;

  • Birden fazla harici Css dosyası olmamalı ( tabi Css dosyası 75 kb max. boyut limitini de aşmamalı )
  • Sitenizin ilk açılış sayfasında scroll yapmadan görüntülenen yani ekranı kaplayan yukarıdaki içeriğin style seçicilerini inline css olarak kullananın.
  • Css dosyası içerinde başka bir Css dosyasını @import ile çekmeyin.
  • Html içerisinde ki  div, span, h2 gibi elementlerde Css kullanmayın.

Tüm bu yukarıdaki adımları uygularsanız hız performans sonuçlarında render blocking CSS optimizasyonu uyarısının kaybolduğunu fark edebilirsiniz.

Harici CSS dosyaları

Harici stil dosyalarını html dosyasına aşağıdaki gibi link ile çekeriz.

<link rel="stylesheet" type="text/css" href="http://yoursite.com/main.css" media="screen" title="style (screen)" />

Eğer ikiden fazla Css dosyanız varsa tek Css dosyasında birleştirmelisiniz.

Harici css dosyalarını birleştirerek sorgu sayılarını azaltabilirsiniz. Ne kadar az sorgu o kadar hızlı yüklenen sayfalar.

css optimizasyonu

Not: Unutmayın eğer birleştirdiğiniz Css dosyası 75kb boyutunu aşıyorsa ikinci bir dosyadan devam edin.

İnline CSS Kullanımı

İnline-css; Html dosyasının header kısmına yazdığımız az miktardaki style kodlarıdır. Peki bu kodları neden harici olarak çağırdığımız style dosyasına eklemiyoruzda bu şekilde kullanıyoruz?

inline css nasıl yapılır

Evet; yukarıda bahsettiğim gibi, sitenize giren kullanıcının, tüm sitenin stil kodlarının barındığı harici style dosyasının yüklenmesini beklemesi gereksiz değil mi? Footer kısmına belkide hiç inmeyecek olan kullanıcı neden footer kısmının stil kodlarının da yüklenmesini beklesin? İşte inline-css bu noktada kullanılabilir.

ekran üstü içerikler

Sitenin ilk açılışında, ziyaretçinin ekranında ilk göreceği alan içerinde ki içeriklerin yüklenmesini beklememesi için, ekranın üst kısmında ki içeriğin stil kodlarını, inline css olarak kullanırsanız harici stil kodlarının yüklenmesi için geçen zamanın çok daha az süresinde öncelikli olarak gerekli olan stil dosyalarının yüklenmesini sağlayabilirsiniz.

Örnek olarak resimde yer alan sitenin üst kısımda ki slider ve hemen altında ki 2 blok, siteye ilk girişte ziyaretçinin göreceği içeriklerdir. Sitenin geri kalanındaki içeriklerin yüklenmesini beklemek yerine sadece bu üst kısımda ki içeriklerin css seçicilerini inline-css olarak yazabiliriz.Ziyaretçi bu kısımda ki içeriklere göz atarken harici style dosyasıda yüklenmiş olacaktır.

Landin page ve uzun sayfa yapısının trend olduğu şu günlerde bu ipucunu kullanarak hemen çıkma oranlarınızı düşürebilir, ziyaretçilerinize hızlı bir kullanıcı deneyimi sunabilirsiniz.

Css dosyalarını @import ile çağırmayı bırakın.

@import url("style.css")

Bu tarz style içinde style dosyası çağırmak yerine o stil kodlalarını import etmek istediğiniz stil dosyasına taşıyabilirsiniz.

Son olarak birleştirdiğiniz yada inline-css kullandığınız stil kodlarını online css optimize araçları ile optimize ederek kullanabiliriz. Gördüğünüz gibi css optimizasyonu o kadar da karmaşık değil, hemen bu ipuçlarını sitenizde uygulayıp sonuçlarını görebilirsiniz. Buradan hemen sitenizin Css optimizasyonunu kontrol edebilirsiniz.