fatih toprak Full stack developer & WordPress Master

CSS Yayını Optimizasyonu nasıl olmalı? (CSS Delivery)

Bilindiği üzere, bir önceki WordPress Google Optimizasyonu temalı içerikte, Google için pagespeed optimizasyonu ile alakalı konu başlıklarından bahsetmiştim. Bu içerikte de optimizasyon ile alakalı başlıklardan bir tanesi olan, CSS yayınının servisi ve gerekli standartların nasıl kurgulanması gerektiği konusunu değerlendirmiş olacağız. Bu sayede, daha faydalı ve SEO uyumlu ve daha hızlı açılan WordPress sitelerini birlikte yeniden oluşturmuş olacağız.

Oluşturmayı engelleyici CSS yayını nedir ?

Belki de bu en çok karşılaşılan sıkıntılardan bir tanesi. Peki nedir tam olarak , nedir Türkçe meali ?

  1. CSS yayınınız, ya da CSS kaynaklarınız, sayfanın görünen içeriğinin oluşturulması zamanını geciktiriyor olabilir.
  2. Sayfanızın hazırlanmasında, tarayıcınız web içeriğinizi yorumlarken, birden çok kullanılan CSS kaynaklarınız, render kısmında (oluşturulma) sayfanızın hazırlanması zamanını fazlası ile geciktirebilir.
  3. Büyük boyutlu CSS dosyası / dosyalarınızın maksimum 75kb. lık değer içermesi gerekmektedir. Şayet daha büyük boyutlu CSS dosyalarının kullanılması yine sayfa oluşturma zamanını geciktirecektir.
  4. Tüm CSS kaynaklarınız, sayfanızdan bağımsız içerikler olarak tarayıcınız tarafından indirildiğinden, teknik olarak sayfanızın görünen içeriklerinden daha fazla boyutta olması durumunda, sayfanızın açılışını ve kullanımını ciddi manada zorlaştıracaktır.

Öyleki Google resmi dökümanlarında da bu durum şu şekilde özetlenmiştir.

CSS, olusturmayi engelleyen bir kaynaktir, ilk olusturma süresini optimize etmek için istemciye mümkün oldugunca çabuk ve hizli bir sekilde ulastirin! (*)

Bu durumu kendiniz de bir uygulama ile değerlendirebilirsiniz. Örneğin, fatihtoprak.com web sayfasını, tarayıcınızın geliştirici seçeneklerinden css dosyaları olmadan yüklemeyi işaretleyerek, sayfayı yenileyin, aldığınız çıktı CSS yapısı olmadan yüklenen bir web sayfası olacak.

Sonuç olarak yine aynı Google Resmi dökümantasyonunda yer alan açıklamayı baz alırsak;

CSS kullanilabilir hale gelinceye kadar olusturmanin neden engellendigi gösterilmektedir. CSS olmadan, sayfa kullanilamaz durumdadir. Aslinda, sagdaki deneyime genellikle Biçimlendirilmemis Içerigin Yanip Sönmesi (FOUC) adi verilir. Sonuç olarak, tarayici hem DOM hem de CSSOM’ye sahip oluncaya kadar olusturmayi engeller.

Peki bu durumda, bu uyarıyı almamak için neler yapılmalıdır ? Gelin bunları değerlendirelim.

CSS dosyalarınızı standartlara göre sayfanıza çağırın !

@import url("styledosyaniz.css")

Bazı eski teknikler ile CSS dosyalarınızı sayfalarınıza dahil ediyor olabilirsiniz. Bunu kesinlikle modern yapıda yeniden düzenlemeniz gerekmekte. CSS dosyalarınızı sayfanıza dahile derken kesinlikle @import kullanımından kaçının. Tipik bir css dosyasını sayfanıza dahil ederken şu yapıdan faydalanmalısınız.

Etkili CSS yapılarınız bu şekilde kullanılması halinde sorunsuz olarak sayfanızın yüklenmesine öncelik vermiş olursunuz.

CSS yayınınızın boyutunu optimize edin, CSS yayınlarınızı birleştirin

Sorun : Birden fazla CSS kaynağının kullanılması sayfa yüklenme süresini arttırır.

Bir önceki yazıda da bahsettiğimiz gibi CSS kaynaklarınızın toplam boyutu 75Kb. dan az olmalı. Şayet bu durum daha fazla optimizesi zor bir hal almış ise, dosyanızı belli tool ‘ları kullanarak optimize etmeye bakıyor.

Öncelikle tüm CSS dosyalarınızı tek bir dosya altında toplamayı deneyin.

CSS dosyalarınızı tek bir dosya içinde topladıktan sonra, alttaki kaynakları deneyerek dosyanızın minimize edilmesini sağlayın. İşte o tool’lar…

  • http://www.cleancss.com/
  • http://www.cssportal.com/css-optimize/
  • http://csscompressor.com/
  • http://csstidy.sourceforge.net/
  • https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ tarayıcı eklentisi.
  • https://github.com/mrclay/minify php kütphanesi
  • http://httpd.apache.org/docs/2.2/mod/mod_deflate.html apache modülü
  • https://developers.google.com/speed/pagespeed/?csw=1 firebug modülü
  • http://yslow.org/ tarayıcı eklentisi
  • https://developer.yahoo.com/yui/compressor/ java eklentisi

Sizler için en verimli olan araç (tool’u) deneyip yayınınızı optimize edebilirsiniz.

Özetle ;

Belli bir front-end framework’ü kullanmışsanız, alakalı CSS yapılarını CDN üzerinden isteyin. Örneğin Bootstrap için CDN desteği ve bir çok popüler Framework’ler için CDN desteği mevcut. Hatta JSDevlivr servisi sizin için birden çok kaynağı kombine edebiliyor.

https://www.jsdelivr.com/

Diğer taraftan özelleştirilmiş CSS yapılarınız için ise, mümkün olduğunca az yazın. Az CSS ne kadar derlenmesi ve düşünülerek yazılması açısından tamamen uğraş istese de sonuç olarak en sağlıklı çözüm olacaktır.

Diğer WordPress Optimizasyonu yazılarında buluşmak üzere. Mutlu WordPress’ler.

 


, , ,

“CSS Yayını Optimizasyonu nasıl olmalı? (CSS Delivery)” için 11 yorum

Umurcan Görür dedi ki:

PWA hakkında da yazılar bekleriz senden

Fatih Toprak dedi ki:

hmm, PWA için aslında olabilir neden olmasın ki, zaten yakın gelecekte şirketin bazı projeleri için kısmen App’ler geliştireceğim, o vakit tecrübeleri buradan da paylaşabilirim. Bunu tabi bir planlamak lazım, ama aldım not, kesinlikle değerlendireceğim. Birlikte öğrenelim değil mi 🙂

Berat dedi ki:

@Fatih tasarımda @import kullanılmamış. link rel=’stylesheet’ şeklinde CSS yapısı kullanılmış. Fakat 4 tane CSS dosyası var. Toplam boyutları 75 KB’ı geçmiyor. 1 tanesi sitenin ana CSS dosyası 46 KB boyutu. Diğer 3 tanesi de Eklentilere ait CSS dosyaları. Bunları GTmetrix’in verdiği optimize edilmiş versiyonlar ile değiştirdim. GTmetrix “Minify CSS” başlığı altında sadece “fonts.googleapis” ait dış link kaldı. Bunun içinde yapacak birşeyim yok sanırım.

Fatih Toprak dedi ki:

Aslında, iki yol var bir tanesi, alakalı fontları sunucuna çekip oradan okutmak, bir diğer yol ise, google web fontlarını WebLoad.Api ile yükletmek ;

kaynak : https://www.lockedowndesign.com/load-google-fonts-asynchronously-for-page-speed/

Berat dedi ki:

“fonts.googleapis” linkini, sunucumda Fonts.css adında bir dosya oluşturup onun içine yapıştırdım. En iyisi kendi sunucundan okutmak sanırım.

“Inline small CSS” hatası için kullanmış olduğum bir plugins dosyası veriyor. Dosyaya baktığımda içi boş ne yapmam gerek. Silsem sıkıntı olur mu dosyayı acaba?

Fatih Toprak dedi ki:

@berat eklenti ve site nedir acaba ikisinin linkinide paylaşabilir misin ?

Berat dedi ki:

@Fatih eklenti: Register Plus Redux
Site Adresi: yesilaski.com

Bahsetmiş olduğum eklentinin CSS dosyası;
yesilaski.com/wp-content/plugins/register-plus-redux/extension/readygraph/assets/css/default-popup.css

Baran Somaklı dedi ki:

Özlemişim valla yazılarını abi 🙂 Bence o eski yazıları kenara köşeye yükle ya 🙂 Eline emeğine sağlık, harika yazı

Fatih Toprak dedi ki:

işallah onlar içinde bir kısım ayırmayı düşünüyorum ama eskilerini aratmayacak yazıları toplamış / üretmiş olacağım @baran. belkide o yazılardan bir seri yapıp tek bir yere derler toplarız 😉

Barış Turan dedi ki:

Fatih abi gerçekten yeniden yazmaya başlamana çok sevindim. Gerçekten sevindim çünkü severek takip ediyordum seni. Yazmaya devam edeceğini ümit eder takipte olduğumu bildirmek isterim.

Fatih Toprak dedi ki:

@barış çok teşekkür ederim bende bunları duyduğum zaman mükemmel keyifli oluyorum umarım daha uzun zaman daha fazla yazacak kadar öğrendiklerimiz olur takibe devam.

* Yorumunuza, kod eklemek için; [code lang="php"] kodunuz [/code] şeklinde tanımlama kullanabilirsiniz. , lang kısmına, php js css html gibi farklı syntax'ler kullanabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir