Wordpress Site Hızlandırma: Resim Optimizasyonu

Admin

yilmaz70
Yönetici
13 Mar 2017
203
44
İstanbul
Wordpress site hızlandırma konusunu elimizden geldiğince detaylı olarak izah etmeye çalışacağız.

Birinci aşamada Resim Optimizasyonu işlemlerini ele almak istedik. Sonraki yazılarımızda diğer hususları detaylandıracağız.


İlk olarak herhangi bir cache eklentisi ile sitemizi 1 saatte hızlandıracağız gibi bir algıdan kurtulmamız gerekiyor.
Çünkü her temanın DOM yapısı farklıdır, her temanın karakteri farklıdır. Farklı yapıları olan temalara aynı işlemleri yaparak iyi sonuçlar alamayız.
Yani öncelikle sitemizi manuel olarak hafif bir hale getirmeliyiz. Ve görselleri manuel olarak düzenlemek en sağlıklısıdır çünkü resim optimizasyon eklentileri yüzeysel olarak işlem yaparlar. Ayrıca premium olan resim optimizasyon eklentileri hem kısıtlı hem masraflı hem de sunucuyu yormaları açısından çokta faydalı değildir ve çözümleri geçicidir.

Esasında en önemli husus, bir web sitesi ne kadar hafif olursa o kadar hızlı açılmaktadır.

En çok ağırlığı ise görseller oluşturmaktadır.

Örnek olarak ana sayfa toplam ağırlığı 4 MB olan bir site ile ana sayfası 1 MB ağırlığı olan 2 siteyi kıyaslayacak olursak %90 ihtimal ile 1 MB ağırlığı olan site hızı artar. Ve bir web sitesinin hafif olması için öncelikle manuel işlemler yapılması gerekmektedir.

Site Ağırlığını Ölçme​


Site ağırlığına pratik olarak bakmak için Pingdom yeterlidir ilk etapta.

https://tools.pingdom.com/ bu adres üzerinde site adresinizi yazdığınızda size lokasyon tercihinize göre genel bir analiz verir.

Wordpress Site Hızlandırma

Sadece site ağırlığına bakmak istiyorsanız lokasyonun bir önemi yoktur, herhangi bir lokasyon üzerinde analiz edebilirsiniz.
Ancak sitenin genel bir yüklenme süresine de bakmak istiyorsanız o zaman lokasyonun önemi vardır.

Misal web siteniz TR lokasyonda barınıyor ise ve Türkiye hedefleyerek yayına aldıysanız o zaman en mantıklı lokasyon seçimi Europe - Germany - Frankfurt olacaktır. Aynı şekilde Europe - United Kingdom - London seçerek İngiltere lokasyon üzerinde analiz edebilirsiniz. Ama genelde TR lokasyon açısından en sağlıklı analizi Germany üzerinde yapmanızı öneririm. America, Australia, hatta Asia lokasyonlar yüklenme süresi açısından yanlış seçim olacaktır.

Analiz için örnek olarak hemen her sitede mevcut olan Jannah tema demosuna bakalım:
https://jannah.tielabs.com/demo/ analiz edilen site adresidir.

Wordpress Site Hızlandırma Resim Optimizasyonu

Sadece ağırlığı oluşturan unsurları görelim:

Pagespeed Hız Testi

Image 712.3 KB
Script 81.0 KB
Font 66.9 KB
CSS 51.8 KB
HTML 48.5 KB

Analiz sonucunda dikkat edilirse en fazla ağırlık ''Image'' alanından geliyor.
Tema yapımcıları tasarımların iyi görünmesi adına görselleri doğru ebatlandırmadan ve optimize etmeden yüklerler. Haliyle görseller ağır olur.

Bir web sitesine tema yüklendiğinde ilk yapılması gereken kendinize ait görselleri yüklemeden önce doğru ebatlandırmak ve manuel olarak optimize ederek yüklemektir. Sonrasında ise temaya ait olan demo görsellerini silmek disk kullanımı açısından faydalı olacaktır.

İzah etmek adına demo görselini ele alacak olursak:

https://jannah.tielabs.com/demo/wp-content/uploads/sites/8/2016/10/demo-image-1.jpg misal bu görsel 1200 x 801 olarak ebatlandırılmış ve tarayıcıda bakacak olursanız ne kadar gereksiz büyük olduğunu göreceksinizdir.

Resim ebatlandırma kısmına değinmeden önce şunu da izah etmek isterim; yukarıda yer alan demo görselini aynen https://tinypng.com/ üzerinde optimize ettiğimizde 136.5 KB iken optimize edilmiş hali 99.2 KB düşüyor ve sadece bu görselde optimize işlemi ile 37 KB kazanmış oluyoruz. Bu sadece 1 resim üzerinde edilen kazanç :)

Şimdi gelelim görselin doğru ebatlandırma işlemine ve ardından sonuca bakalım:

https://jannah.tielabs.com/demo/wp-content/uploads/sites/8/2016/10/demo-image-1.jpg bu görseli bilgisayarıma indirdim ve IrfanView ile gerçekte olması gereken ebadı görmek için açtığımda bana 944 x 630 olarak gösterdi.

Yani görsel genişliği 1200 yerine 944 olmalı esasında. Ama her ne kadar tema özelliklerinde görseller her tarayıcıya göre yeniden ebatlandırılsa dahi ben daima en düşük genişliği kullanmayı tercih ediyor ve bu şekilde yüklenmesini tavsiye ediyorum. Neden diyeceksiniz, özellikle mobil versiyonda son derece olumlu yönde faydasını göreceğiniz için.

Öne çıkan görseller de genel olarak en fazla 600 piksel genişlik kullanılmasından yanayım. Ama bu çok az diyorsanız en fazla 780 piksel kullanın derim.
Öncesinde 600 piksel olarak bir deneyin ama :)

Sizin 780 piksel üzerinde inat edeceğinizi düşünerek bende görseli 1200 den 780 genişliğe getirdim.
Sadece genişliği düzenlediğimde otomatik olarak 780 x 521 ebadında bir görsel çıktı ortaya.
Ve bu görseli https://tinypng.com/ üzerinde optimize ettiğimizde ise 123.8 KB olan ağırlık ( 1200 yerine 780 genişlikte olduğu için haliyle ağırlık azaldı ) ve optimize neticesinde 78.4 KB düştü gerçek ağırlık.

Yani doğru ebatlandırma işlemi ile hem mobil versiyonda daha hızlı açılmasını sağlamış oluyoruz hem de resim ağırlığı 136.5 KB yerine 78.4 KB düşüyor.
Dikkat edilirse bu sadece tek görsel üzerinde izah edilen bir işlem sonrasında çıkan sonuç.

Resim analizine baktığımda tüm düzenlemeler yapılırsa resim ağırlığının ortalama 200 KB olacağı iletiliyor. ( Resim analizine de daha sonra değineceğim. )

Pingdom analizinde çıkan 712.3 KB resim ağırlığı yerine 200 KB olursa fazlasıyla rahatlama olacağını şimdiden anlamışızdır diye düşünüyorum.

Gelelim can alıcı noktaya:

Jannah demo üzerinde yer alan logo https://jannah.tielabs.com/demo/wp-content/uploads/sites/8/2020/08/logo@2x.png 599 x 98 olarak ebatlandırılmış.

Maalesef son derece yanlış bir işlemdir. Genelde logo genişlikleri 200 piksel olmalıdır. Header alanında menu az sayıda ise 300 piksel olarak ayarlanabilir.
Bu sayede hem logo ağırlığı düşük olur açılış hızına olumlu etki eder hem de mobil versiyonda faydasını görürüz.
Ve bir çok temada meydana gelen menu taşmalarına da sebebiyet vermemiş oluruz.

Logo genişliklerine daima dikkat etmeliyiz ve optimize ederek ağırlığının mümkün mertebe düşük olmasına özen göstermeliyiz.

Resim analizinden bahsedeceğimizi söylemiştik, onu da belirtelim sırası gelmişken.

https://webspeedtest.cloudinary.com/ bu resim analizi Webpagetest ile Cloudinary ortak çalışması sonucu ortaya çıkmıştır ve bizlere oldukça güzel tavsiyelerde bulunur.

Misal Jannah demo sitesine ait resim analizi https://webspeedtest.cloudinary.com/results/220325_AiDcAZ_E5X bu şekilde çıkıyor şu an.

Site Hızını Ölçme

Resim analizini özetleyecek olursak;

Demo ana sayfa üzerinde 30 adet görsel olduğunu, 559.4 KB olan resim ağırlığı düzenlemeler yapılır ise 205.3 KB düşeceği belirtiliyor.

resim-analizi-2.png

Ve bu resim analiz sitesinin en güzel yanlarından biri ise kullanılması gereken resim ebatlarını belirtiyor olmasıdır.

Wordpress site hızlandırma nasıl yapılır

Yukarıda bize anlatılmak istenilen husus:

780 x 470 olan görsel, 664 x 400 olarak düzenlenir ve optimize edilerek siteye yüklenirse 72.6 KB yerine 43.0 KB olacaktır deniliyor ve bununla da kalmıyor, Download The Image tıkladığınızda size tavsiye edilen ölçülerde olmak üzere görseli optimize edilmiş haliyle indirmenize izin veriyor. Size sadece indirdiğiniz görsel ismini sitedeki isim ile değiştirerek sitenize yüklemek kalıyor. Bence harika bir özellik :)

Bunca açıklama sonrasında şunları diyebilirsiniz:

Neden bu kadar uğraşmak yerine herhangi bir resim optimizasyon eklentisi ile çözüm bulmayayım?

Evet, zamanımız değerli ancak web sitemizde öne çıkan görsellerin tüm tarayıcılara göre ve Pc, Tablet, Cep telefonu olmak üzere ayrı ayrı otomatik olarak oluşturulduğunu düşündüğümüzde görsel sayısı bakımından bahsi geçen eklentiler hem yüzeysel bir optimize işlemi yapacak hem de kısıtlı sayıda işlem yapmanıza izin vererek ekstra ücret ödemenizi isteyeceklerdir. Bu arada tüm görselleri baz aldığımızda yeterli optimize işlemi yapılmazsa sunucuda bulunan disk alanımızda azalacaktır.

Neden direkt webp formatına çevirerek resim ağırlıklarını azaltmayayım?

Evet, Google webp formatını öneriyor bizlere. Ancak optimize edilmeyen görseller webp formatına çevrildiğinde maalesef ağırlık bakımından pek faydası olmuyor. Yani webp formatında kullanmak isteseniz bile önceden optimize etmek zorundasınız. Ayrıca bir hususu daha dile getirmek gerekirse, pagespeed analizinde doğru ebatlandırılmış ve optimize edilmiş olan görseller için webp formatına çevirin uyarısı ile karşılaşmayız.

CDN kullanırım?


Burası da can alıcı bir konu esasında. Özellikle TR lokasyonda yer alan web siteler için CDN kullanımı maalesef bir faydası yoktur. Diyelim ki çok az bir fark olacağı söyleniyor, ikna olup kullanmak istediniz. Maalesef optimize edilmeyen görseller CDN ile çok daha uzun sürede yüklenecektir. CDN kullanmak isteseniz bile öncesinde optimize işlemi yapmanız gerekiyor maalesef.

Bilgisayarımda mevcut bir resim programında optimize ederim?

Bu çok daha iyi bir seçenek elbette sizler için. Ama unutmayalım ki görseller optimize edilmeden önce mutlaka doğru ölçülerde ebatlandırılmalıdır. Aksi takdirde Web Vitals verilerinde mobil versiyon için Google Search Console 'da sürekli iyileştirilmesi istenilen sayfalara dair hata uyarıları alırsınız ve Mobil Uyumluluk Testi ara ara size can sıkıcı uyarılar verir.

Haber / viral sitesi için ne yapacağım, sürekli otomatik olarak içerik ekleniyor?

İşte bu durumlarda maalesef eklenti kullanmak durumundayız.
Ya sunucu üzerinde çalışacak bir resim optimizasyonu uygulayacaksınız ya da Imagify.io gibi ücretli bir resim optimizasyon eklentisi kullanacaksınız.

Tavsiye edilmeyen eklentiler:​


Jetpack - Aşırı CPU yükselmesine neden olan bir eklenti olmakla birlikte optimize işlemi için CDN uygulaması kullanır, Amerika üzerinden yayınlar görselleri.
Maalesef yararından çok zararı vardır.

ShortPixel - Yüzeysel optimize işlemi yaptığı gibi sunucuyu biraz yormasıyla bilinen bir eklentidir.

Smush - Aynı şekilde yüzeysel optimize eder ve maalesef veri tabanında çok fazla kalıntı kalmasına neden olur. Hiç kurulmasını tavsiye etmediğimiz eklentilerin başında gelmektedir.

Tavsiye edilen eklentiler:​


Regenerate Thumbnails - Regenerate Thumbnails Eklentisi küçük resim boyutlarını yeniden oluşturmaya yarayan bir eklentidir.

Bazı temalarda genellikle ana sayfa da yer alan slide / banner grid görünümünde mevcut olan içerik görselleri değişik ebatlarda yer alır. İşte bu görsellerin küçük boyutlandırmaları konusunda regenarate işlemi işlemi gerekebilmektedir. Bu açıdan en ideal eklentidir.

Evet, biraz uzun bir yazı oluyor ancak aşama aşama gitmek zorundayız :)
 
Son düzenleme:
  • Like
Tepkiler: oxopage