Google mod-pagespeed Modülü Nedir? Ne İşe Yarar? Faydaları Nedir?
Mod_Pagespeed Nedir?
Google Mod_pagespeed açık kaynak kodlu bir Apache modülüdür. Bu modül web sayfalarınızı ve web sayfalarınızda kullanılan kaynakları otomatik olarak optimize eder. Özellikle kullanılan bu kaynakları yeniden yazarak onların en iyi performansı sağlayacakları şekilde değiştirilir. mod_pagespeed , google tarafından daha hızlı açılan sayfalar ve bu sayede de daha kaliteli dönüşümler elde eden websiteleri oluşturulması amacı ile, apache kullanan websunucularında kullanılmak üzere hazırlanmış bir eklentidir.
Faydaları nelerdir?
- Sayfalarınızın HTML çıktılarını gzip yöntemi ile sıkıştırır.
- Bütün JavaScript ve CSS dosyalarınızı gzip yöntemi ile sıkıştırır.
- Mümkün olursa eğer bütün javascript dosyalarınızı tek bir dosyada, bütün CSS dosyalarınızı tek bir dosya da toplamaya çalışır.
- JavaScript ve CSS dosyalarınızdaki ekstra yorum satırlarını veya boşlukları siler.
- Jpeg, png formatlı resimlerinizi optimize eder. Bu optimizasyon sayesinde resimleriniz kaliteleri korunarak sıkıştırılır. Daha küçük resimler elde edersiniz.
- Bu işlemleri yapar ve ilgili işlemler sonucu oluşan yeni dosyaları önbellekte saklar ve daha sonra önbellekten çeker. Her seferin aynı işlemleri tekrarlayarak sunucuya yük bindirmez.
Normalde minify edilmiş css, js dosyalarını değiştirerek minify edip, fotoğrafları tekrar kayıpsız sıkıştırıp, küçük boyutlu görselleri base64'le browserda render edecek hale getirerek adeta sitemi yarı yarıya kayıpsız biçimde küçültebilir öncesi ve sonrası olarak duruma bakıldığında yaklaşık %49'luk bir sıkıştırma oranı göze çarpabilir. Bu, hız açısından çok ciddi bir miktar, yaklaşık 2.39 sn'de load olan bir web sitesinin 1.10 seviyelerine çekilmesi mod_pagespeed modülünün ne kadar faydalı işler yapabileceğinin kanıtı niteliğindedir. Eklenti sayesinde sitenizin en az 2-3 kat daha hızlı açılmasını sağlamakla kalmayacağı gibi, sitenizin mod_pagespeed kullanmayan rakiplerinizden en az %50 daha üst seo sıralamasına sahip olmasını sağlayacaktır. Görsel olarak etkisini görebilmek amacıyla aşağıdaki videoyu izleyebilirsiniz
Mod_pagespeed bir çok filtreye sahiptir. Bu filtreler sayesinde JavaScript, HTML ve CSS dosyalarınızı en iyi şekilde optimize edere son kullanıcıya gönderir. Ayrıca JPEG ve PNG resim dosyalarını optimize etme yeteneğine sahiptir. 15 adet optimizasyon olduğu bilinmekte, bunları özet olarak açıklamaları ile birlikte şöyle sıralayabiliriz;
add_instrumentation: Eğer gözlerimiz ve ingilizcemiz yeterliyse Google ‘ın bu işe bakış açısını değiştirdiğini anlıyoruz. Çok güzel bir özellik olan Add Instrumentation, aktif edildiğinde sunucudan çağrılan her HTML dosyasına ekstra javascriptler ekliyor istemcinin (müşteri/kullanıcı) sayfanın yüklenmesinde ne kadar zaman harcadığını sunucuya gönderiyor. (Kesinlik bu tool ‘u inceleyip örnek yapılandırma ve detaylarını başlıca bir yazıda paylaşmak istiyoruz)
cache_extend: Bu özellik dosya cacheleme özelliğini yine sitenizde hiç bir değişiklik yapmadan sizin yerinize sağlıyor. HTTP header’ı ve dosya yollarını değiştiriyor.
cache_extend: Bu özellik dosya cacheleme özelliğini yine sitenizde hiç bir değişiklik yapmadan sizin yerinize sağlıyor. HTTP header’ı ve dosya yollarını değiştiriyor.
collapse_whitespace: Bu özellikte HTML çıktısındaki taglar arasındaki tüm boşlukları ve boş satırları siliyor ve sunucudan daha az veri tranferi yapılmasını sağlıyor.
combine_css: Bu özellik sayfanızda ayrı ayrı dahil ettiğiniz css dosyalarınızı birleştirip tek bir dosya haline getiriyor. (Tarayıcı çıktısında sadece bir css dosyası dahil edilmiş görünüyor)
combine_heads: Bu özellik site içinde (HTML de) brden çok <head> tagı kullanırsanız bunları tek bir yere birleştiriyor.
move_css_to_head: Bu özellik <body> tagından sonra dahil ettiğiniz css leri <head> tagı arasına alır.
elide_attributes: Sadece doctype ‘I XHTML olarak tanımlanmış sayfalarda kullanılabilen bu özellik tagların varsayılan özelliklerini kaldırarak trafik (bant genişliği) optimizasyonu sağlar.
inline_css: Bu özellik aktif edildiğinde harici olarak (<link> tagı ile)dahil ettiğiniz stilleri sayfanızda gösterir ve <link> tagını kaldırır.
inline_javascript: bu özelliği aktif ettiğinizde inline_css gibi harici js dosyalarınızı <head> tagı içerisinde <script> tagına yazar. outline_css, inline_css ‘in tam tersini yapar.
outline_javascript: İnline_javascript ‘in tam tersini yapar. remove_quotes, tagların attribute lerinde kullanımına ihtiyaç duyulmayan tırnak (‘ ve “) işaretlerini kaldırır.
remove_comments: HTML içerisindeki yorumları (
rewrite_css: CSS kodlarını (<style> tagı içerisindeki ve <link> ile dahil edilenleri) optimize ederek yeniden yazar (boşlukları ve satır başlarını kaldırır).
rewrite_images: Belirlediğiniz kriterlerdeki (boyut, çözünürlük vb) imajları (<img> taglarını) base64 olarak sayfaya dahil eder ve ekstra HTTP connection açmaktan kurtulursunuz.
rewrite_javascript: rewrite_css ‘e benzer biçimde çalışır. Gereksiz boşluk ve satır başlarını kaldırır.
CloudBunny.Net
combine_css: Bu özellik sayfanızda ayrı ayrı dahil ettiğiniz css dosyalarınızı birleştirip tek bir dosya haline getiriyor. (Tarayıcı çıktısında sadece bir css dosyası dahil edilmiş görünüyor)
combine_heads: Bu özellik site içinde (HTML de) brden çok <head> tagı kullanırsanız bunları tek bir yere birleştiriyor.
move_css_to_head: Bu özellik <body> tagından sonra dahil ettiğiniz css leri <head> tagı arasına alır.
elide_attributes: Sadece doctype ‘I XHTML olarak tanımlanmış sayfalarda kullanılabilen bu özellik tagların varsayılan özelliklerini kaldırarak trafik (bant genişliği) optimizasyonu sağlar.
inline_css: Bu özellik aktif edildiğinde harici olarak (<link> tagı ile)dahil ettiğiniz stilleri sayfanızda gösterir ve <link> tagını kaldırır.
inline_javascript: bu özelliği aktif ettiğinizde inline_css gibi harici js dosyalarınızı <head> tagı içerisinde <script> tagına yazar. outline_css, inline_css ‘in tam tersini yapar.
outline_javascript: İnline_javascript ‘in tam tersini yapar. remove_quotes, tagların attribute lerinde kullanımına ihtiyaç duyulmayan tırnak (‘ ve “) işaretlerini kaldırır.
remove_comments: HTML içerisindeki yorumları (
<!-- --> tagları arasındaki yazılar ve bu taglar) kaldırır. rewrite_css: CSS kodlarını (<style> tagı içerisindeki ve <link> ile dahil edilenleri) optimize ederek yeniden yazar (boşlukları ve satır başlarını kaldırır).
rewrite_images: Belirlediğiniz kriterlerdeki (boyut, çözünürlük vb) imajları (<img> taglarını) base64 olarak sayfaya dahil eder ve ekstra HTTP connection açmaktan kurtulursunuz.
rewrite_javascript: rewrite_css ‘e benzer biçimde çalışır. Gereksiz boşluk ve satır başlarını kaldırır.
CloudBunny.Net
