PageSpeed Filtreleri

Apache ve Nginx web servislerinde başarılı bir file optimizasyon işlemi gerçekleştiren PageSpeed’in başarılı da filtreleri bulunuyor. Bu filtrelerin çoğu varsayılan olarak aktif durumda gelirken işimize yarayacak bir çok pasif filtre de PageSpeed’de kullanımınızı bekliyor. Filtrelerin ne işe yaradığını paylaşmadan önce nasıl kullanılacağı hakkında bilgi verelim. Filtreleri iki şekilde kullanabiliyorsunuz:
1. Filtreleri pagespeed.conf’a yazarak sunucunuzda yer alan tüm web sitelerinde aktif hale getirebilirsiniz.
2. Filtreleri sunucunuzda yer alan bir domainin .htaccess dosyasına yazarak yalnızca o domainde kullanabilirsiniz.

1. yolu seçiyorsanız PageSpeed’in konfigurasyon dosyasına (nerede olduğunu bilmiyorsanız şu yazımıza göz atın) aşağıdaki şekilde filtreleri tanımlayabilirsiniz:

ModPagespeedEnableFilters lazyload_images,combine_javascript

Yukarıda dikkat edilecek 2 husus var. ModPagespeedEnableFilters önünde # işareti olmayacak ve yanındaki filtreleri boşluk bırakmadan virgül ile ayıracaksınız. Bu şekilde filtrelerin tanımlamasını yaptıktan sonra apache veya nginx’e restart atmayı unutmayın.

2. yolu seçiyorsanız web sitenizin ana dizininde yer alan .htaccess dosyasına (yoksa oluşturun) yukarıdaki şekilde filtrelerinizi ekleyebiliyorsunuz.

NOT: PageSpeed’in konfigurasyon dosyasına tanımladığınız bir filtreyi bazı domainlerde kullanmak istemiyorsanız .htaccess dosyanıza aşağıdaki şekilde tanımlama yaparak filtreleri pasif edebiliyorsunuz:

ModPagespeedDisableFilters lazyload_images,combine_javascript

Filtreler ve özellikleri
Aşağıda size PageSpeed tarafından inaktif olarak gelen filtrelerin ne işe yaradığı ile ilgili bilgiler vereceğim:

lazyload_images: scroll aşağı inmedikçe imajları yüklemez.
combine_heads: Site içerisinde birden fazla “head” etiketi tanımlanmışsa (include dosyalardan dolayı) bunları teke indirir.
outline_css: Site içerisine “style” etiketi ile stil yazdıysanız bunu css dosyasına çevirir.
outline_javascript: javascript kodlarınız için outline_css özelliği ile aynı mantıkta çalışır.
move_css_above_scripts: css dosyalarınız javascriptten sonra geliyorsa css dosyalarını javascriptlerden önceye alır.
move_css_to_head: head dışında css dosyanız varsa bunu head içine taşır.
rewrite_style_attributes: css dosyanız içindeki elemanları/imajları önbelleğe alır ve sıkıştırır
prioritize_critical_css: yalnızca görüntülenen sayfada kullanılan cssleri yükler. kullanılmayan cssleri yüklemez.
combine_javascript: birden fazla javascript dosyanız varsa bunları birleştirerek tek javascript dosyasına indirir.
convert_png_to_jpeg: png dosyalarını jpeg dosyasına dönüştürür.
convert_jpeg_to_webp: jpeg dosyalarını webp dosyasına dönüştürür.
remove_comments: sitenin html kodları arasındaki yorum kodlarını kaldırır.
collapse_whitespace: sitedeki fazla boşlukları temizler.
elide_attributes: fazlaca yazılmış form kodlarını kırpar. örneğin disabled=”disabled” yerine disabled yazar.
sprite_images: css dosyasındaki imajları birleştirerek tek resme dönüştürüp optimizasyon sağlar.
trim_urls: url yollarını kısaltır. örn. example.com/abc yerine abc yazar.
predantic: eksik style ve script taglarının tip değerlerini yazar. örn. type=”text/css”
remove_quotes: html kodları içindeki tek tırnakları temizler
add_instrumentation: sayfaya iki küçük javascript bloğu yerleştirerek sunucuya sayfa yüklenmesi ile ilgili rapor gönderir.