GTMetrix Uyarılarını Düzeltme

[YEŞİL AŞKI]

Remove query strings from static resources


Uyarıyı kaldırmak sadece bir dakika gibi çok az bir zamanınızı alacak. Tek yapmanız gereken temanınfunctions.php dosyasına girip ?> takından önce aşağıdaki kodları eklemeniz. Böylece tekrar test ettiğinizde hatanın kalktığını ve puanınızın artığını göreceksiniz.

function _remove_script_version( $src ){$parts = explode( '?', $src );return $parts[0];}add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

 

[YEŞİL AŞKI]

Combine images using CSS sprites


Css Sprite, bir çok resmi tek resim haline getirmektir. Örneğin 3 adet farklı resmi tek resim yaparak resimleri oradan çağırıyoruz. Böylece birden fazla resim yüklemek yerine resimleri tek bir dosyadan çağırıyoruz. Bu sayede resim çağırması hızlanıyor ve dolayısıyla site hızlanıyor.

Kullanımı bir örnek üzerinden açıklayacağım. Öncelikle tasarımımızda kullanacak olacağımız 3 farklı resim olsun.


Şimdi bu resimlerin hepsini PNG formatın da tek bir resim olacak birleştireceğiz. Bunun için önce resimlerin hepsini seçip .zip formatına getiriyoruz.
Daha sonra http://tr.spritegen.website-performance.org/ adresine girip Dosya Seç diyerek sayfanın en altındaki Tümleşik Resim Dosyasını & CSS Kodlarını Üret butonuna basıyoruz.
Ardından karşımıza aşağıdaki CSS Sprite özelliği olan kodlar ve birleştirilmiş resimler gelecektir.


.sprite-yesilaski{background-position: 0 0; width:64px;height:63px;}
.sprite-cevreci{background-position: 0 -113px; width:64px;height:63px;}
.sprite-temizenerji{background-position: 0 -226px; width:63px;height:64px;}


Tümleşik resim dosyanızı kullanan background etiketli CSS kodunuzu eklemeyi unutmayınız. Örneğin şöyle birşey:


#yesilaski li{background:url(css-sprite.png) no-repeat top left;}


“Tümleşik Resim Dosyanızı İndirin” tıklayarak birleştirilmiş resmimizi indirip FTP’den sitemize yüklüyoruz.
Resmin adını istediğiniz şekilde değiştirebilirsiniz. Aşağıdaki kodda da resmin adını değiştirip resim yolunu doğru olarak girin ve yukarıda önerdiğim sitenin size verdiği kodlarda background-position: değerini alın.


Bunları HTML olarak tasarıma ekleyeceğim diyenler aşağıdaki kodu kullanabilir.

<div id="yesilaski"></div>

Kodda id kısmına yazdığınız kısım çağrılır.

 

[YEŞİL AŞKI]

Enable gzip compression

Özellikle site hızlandırmasına yardımcı olan ve dolaylı olarak Seo ya katkısı olan gzip sıkıştırması kodu aşağıdaki gibi olup sitenizin .htaccess dosyanına eklemeniz gerekmektedir.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>