Blogumuzun açılış hızı ,bu işlemden önce yaklaşık 15 saniye ve sayfa yükü 12MB civarındaydı.Yaptığım araştırmalar ve değerlendirmeler sonucu wordpress eklentilerinin işe yaramaz olduğunu ,yaklaşık 25 tane kadar Lazy Load eklentisinin de stabil çalışmadığını farkettim.Sadece slider'da 6-7 MB resim dosyası bulunuyor ve haliyle site bunları yüklerken beklemek insanın canını sıkıyordu.
Bu kadar ağır bir sayfayı ,kullanıcıyı sıkmadan nasıl optimize edebilirdik ? Yine en mantıklı şeyin ,resimlerin tek kalemde yüklenmemesini sağlamak olduğu sonucuna varınca ,lazy load entegresini manuel olarak yapayım dedim.
Öncelikle Jquery'yi sayfamıza dahil ediyoruz ; ben header.php'de yaptım ,eğer zaten kullanıyorsanız ikinci kere çağırmak hatalara sebep olacaktır.Ardından Lazy Load javascript dosyamızı jquery'nin altında include ediyoruz.
kütüphaneleri dahil ettikten sonra header.php'de Jquery syntaxımızı yazıp ,img tagına sahip bütün elementleri seçiyoruz ve lazyload ile yükletiyoruz.
Buraya kadar herşey tamamsa /wp-includes/media.php dosyamızı açıp function wp_get_attachment_image diye aratıyoruz.
Bu şekilde olan yeri bulup src özelliğini data-original ile değiştiriyoruz ki lazyload aktif olabilsin.
);
Sonra wp-content/themes/temanız/functions/theme-functions.php'yi açıp (Benim temamda tie_thumb fonksiyonu ,sizinkisinde siz tespit edeceksiniz)
wp_get_attachment_image diye başlayan array ile devam eden söz dizimini bulun ve 'alt' => get_the_title() gördüğünüz dizi'nin içine , 'src' => '/wp-content/themes/resistance/images/bekle.png' yazıp dosyayı kaydedin (bekle.png 1x1 boyutlarında ,lazy load aktif olmadan kullanıcıya gösterilecek resim dosyasıdır benimkini buradan indirebilirsiniz
$image_url = wp_get_attachment_image($image_id, array($width,$height), false, array( 'alt' => get_the_title() , 'src' => '/wp-content/themes/resistance/images/bekle.png' ,'title' => get_the_title() ));
gibi yaptıktan sonra artık lazyload'ı kullanıp sayfanızı uçurabilirsiniz.
İlk adımdaki jquery seçicisinde img ile tüm resimleri seçtik ,eğer bellli resimlere uygulamak istiyorsanız img.resminsinifi seklinde değiştirebilirsiniz fakat bu sefer resminiz görüntülenmeyecek ,yerine sadece bekle.png çıkacaktır.
bunu da şöyle aşıyoruz ,ya temanızda her resmi değil de mesela sliderdeki resimleri lazyload'layacaksınız ,o src'yi değiştirin ya da lazy load'ı tetikleyerek gecikmeli yükletin.
Ben kodumu böyle yazdım ,scroll harici -kendiliğinden yüklenmesini istediğim resimleri seçtirdim ve trigger ile tetikletip gösterdim.sorularınız için yorumları kullanabilirsiniz.
Yorgun olduğum için renklendirmeleri vs yapmadım ,sitemde daha rahat anlayabilirsiniz ve gerekirse yardımı da oradan yapacağım ,yorum kısmı sizleri bekliyor
Bu kadar ağır bir sayfayı ,kullanıcıyı sıkmadan nasıl optimize edebilirdik ? Yine en mantıklı şeyin ,resimlerin tek kalemde yüklenmemesini sağlamak olduğu sonucuna varınca ,lazy load entegresini manuel olarak yapayım dedim.
Öncelikle Jquery'yi sayfamıza dahil ediyoruz ; ben header.php'de yaptım ,eğer zaten kullanıyorsanız ikinci kere çağırmak hatalara sebep olacaktır.Ardından Lazy Load javascript dosyamızı jquery'nin altında include ediyoruz.
kütüphaneleri dahil ettikten sonra header.php'de Jquery syntaxımızı yazıp ,img tagına sahip bütün elementleri seçiyoruz ve lazyload ile yükletiyoruz.
Kod:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$("img").lazyload({
effect : "fadeIn"
});
});Buraya kadar herşey tamamsa /wp-includes/media.php dosyamızı açıp function wp_get_attachment_image diye aratıyoruz.
Kod:
$default_attr = array(
'src' => $src,
'class' => "attachment-$size",
'alt' => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field first
);Bu şekilde olan yeri bulup src özelliğini data-original ile değiştiriyoruz ki lazyload aktif olabilsin.
Kod:
$default_attr = array(
'data-original' => $src,
'class' => "attachment-$size",
'alt' => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field firstSonra wp-content/themes/temanız/functions/theme-functions.php'yi açıp (Benim temamda tie_thumb fonksiyonu ,sizinkisinde siz tespit edeceksiniz)
wp_get_attachment_image diye başlayan array ile devam eden söz dizimini bulun ve 'alt' => get_the_title() gördüğünüz dizi'nin içine , 'src' => '/wp-content/themes/resistance/images/bekle.png' yazıp dosyayı kaydedin (bekle.png 1x1 boyutlarında ,lazy load aktif olmadan kullanıcıya gösterilecek resim dosyasıdır benimkini buradan indirebilirsiniz
$image_url = wp_get_attachment_image($image_id, array($width,$height), false, array( 'alt' => get_the_title() , 'src' => '/wp-content/themes/resistance/images/bekle.png' ,'title' => get_the_title() ));
gibi yaptıktan sonra artık lazyload'ı kullanıp sayfanızı uçurabilirsiniz.
İlk adımdaki jquery seçicisinde img ile tüm resimleri seçtik ,eğer bellli resimlere uygulamak istiyorsanız img.resminsinifi seklinde değiştirebilirsiniz fakat bu sefer resminiz görüntülenmeyecek ,yerine sadece bekle.png çıkacaktır.
bunu da şöyle aşıyoruz ,ya temanızda her resmi değil de mesela sliderdeki resimleri lazyload'layacaksınız ,o src'yi değiştirin ya da lazy load'ı tetikleyerek gecikmeli yükletin.
Kod:
$("img.attachment-50x50,img.attachment-1250x420,img.attachment-660x330").lazyload({
event : "foobar",
effect: "fadeIn"
});
Kod:
$(window).bind("load", function() {
var timeout = setTimeout(function() { $("img.attachment-50x50,img.attachment-1250x420,img.attachment-660x330").trigger("foobar") }, 1000);
});Ben kodumu böyle yazdım ,scroll harici -kendiliğinden yüklenmesini istediğim resimleri seçtirdim ve trigger ile tetikletip gösterdim.sorularınız için yorumları kullanabilirsiniz.
Yorgun olduğum için renklendirmeleri vs yapmadım ,sitemde daha rahat anlayabilirsiniz ve gerekirse yardımı da oradan yapacağım ,yorum kısmı sizleri bekliyor