PageSpeed Sayfa Yükleme hızı için imaj optimizasyonu

Thumbnails Optimizasyonu ve PageSpeed hızlandırma

Websayfaların genelde wordpress içerik yönetim sistemleri CMS kullanılıyor. Yazılan yazılar bir takım görseller ve bunları thumbnail leri ile desteklenerek açıklanıyor. Web sayfasında kullanılan bu görsellerin ve thumbnail rin Portable Network Graphics png formatında kayıpsız olarak kullanılması sayfanın yüklenmesi avantaj getiriyor. Bu durum Google Arama Motoru için oldukça önemli, ziyaretçilerin sayfalarının hızlı açılması bu site için artı bir avantaj olacaktır. Öncelikle;

• Google’ın web sayfa hızlarının kontrolu için webmaster ların hizmetine sunduğu https://developers.google.com/speed/pagespeed/insights adresine girelim.
• Bu adres kutusuna URL adını yazıp, sayfanın analiz edilmesini isteyelim.
• Kısa bir analiz ardından size bir takım öneriler gelecek. Bu öneriler Önemli, orta ve düşük seviye olarak bize kategorize ediliyor.
• Bizim burda ilgilendiğimiz görsellerin kayıpsız formatta minmum boyutlarda optimizasyonu olacak.
• Bu optimizasyon öneri kategoriler içersinde örneğin 150×150 piksel dosyası HTML’ de veya CCS’ de yeniden boyutlandırıldı ve boyutu 150×150 pikselden 72×72 piksele değiştirildi.Ölçeklenmiş Resim sunmak , 50 Kbyte tassaruf sağlayabilir.(%76 azalma) gibi bir öneriyi yorumlarsak aslında sayfanda 72×72 boyutlarında kullandığın halde ziyaretçi bunu 150×150 yükleyip, web tarayıcınızda yeniden ölçüklendirip gösteriyor anlamı taşıyor. Bu örnekte yapılması gereken küçük resim boyutlarını

Wordpress admin panelinden Ayarlar> Ortam sekmesi içersinden aşağıdaki gibi ayarlamak olacaktır.

Ancak bu ayardan sonra siteye gönderilen bu Thumbnail önizleme görsellerinin tekrar boyutlandırılması gerekiyor. Bu konuda imdadımızı Regenerate Thumbnails wordpress eklentisi yetişiyor.
http://wordpress.org/extend/plugins/regenerate-thumbnails/screenshots/ adresinden direk indirebileceğiniz gibi panelinizden bu ektentiyi yükleyip etkinleştirebilirsiniz.

• Panelden Araçlar > Regen.Thumbnails seçimi ve Regenerate ile tüm görselleriniz yeninden bu ayarlarınıza ve temanıza göre optimize edilecektir.
• Bazen piksel aynı kalsada ile kayıpsız sıkıştırma ile boyutların küçülebileceği şeklindde de uyarı alabilirsiniz.
• Benim önerim görsellerinizi yüklerken bu işlemi yapmanız yok eğer daha önce yüklü görselleriniz içinde manuel olarak bu işlemi yapmak isterseniz benim önerim irfan view image editör programı olacaktır. Bu ücretsiz ve yaralı programı google da aratıp bulabilirsiniz. http://www.irfanview.com/plugins.htm sayfasından indireceğiniz ektra eklentiler içersinde yer alan PNGOUT – allows optimized PNG saving bizim işimizi görecektir.

Pagespeed sayfasında tespit ettiğiniz dosyaları FTP den bulun ve bunu indirip editör programında açıp aşağıdaki gibi farklı kaydet seçeneği ile kaydedin ve FTP de geri yükleyin.Bu işlem sıkıştırma nedeniyle biraz zaman alabilir.

Kaynak ve Görseller:
PNGOUT optimized PNG saving Thumbnail - Önizleme Resimlerini Optimize Etmek

Çok faydalı bir anlatım olmuş uzun zamandır uğraşıyordum. sayfa hızım 98/100 oldu sonunda
https://developers.google.com/speed/pagespeed/insights#url=www.dusesmoda.com&mobile=false

Ayrı bir eklenti yerine, tema'nın functions.php'sine

if (function_exists('add_theme_support')) {
add_theme_support('menus');
set_post_thumbnail_size( 72, 72, true );
}

Genişletmek için tıkla ...

ve

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
add_theme_support( 'post-thumbnails' );
add_image_size('featured-small',72,72,true);

}

Genişletmek için tıkla ...

gibi bir kod eklenmesi daha uygun olmaz mı?

Dusesmoda yararlı olmasına sevindim. 2 puan da olsun artık
Bilgi, get the image eklentisi uploads dizininde yer alan image dosyalarınızı bir kereye mahsus wordpress de set lediğiniz değerlere göre oluşturup, bu dizine kopyalar. Dilerseniz bu eklentiyi işlemden hemen sonra kaldırabilirsiniz. Bunu bahsettiğin script, sadece yükleyeceğin dosyalar için yapacaktır. Kısaca bu eklenti tüm geçmişe dönük dosyaları tarayıp, önizleme imajlarını öngördüğümüz ölçülerde oluşturuyor ve bu işlemden sonra kaldırılabilir veya etksizileştirilebilir.

Düzeltme bahsettiğim Regenerate Thumbnails Eklentisi olacak.

Faydalı bir anlatım olmuş. Ellerinize sağlık.

resim optimizasyonu haricinde şu konular da site hızı etkiliyor;

1. img tag'ler width height ekleme <img src="resim.png" width="320" height="240" />
2. resimleri cookiless subdomainde host etme
3. cache kullanma

örnek
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"


sitespeed puanında bunlar da çok etkilidir.

paylaşım için teşekkürler.