Resim optimizasyonu! Ciddi performans artışı

Selamun aleykum, optimizasyona ve performansa çok önem veriyorum. Sitelerde performansı kötü etkileyen en önemli şeylerden biri resimler. Onun için resim sıkıştırma, lazy load ve webp seçeneklerini kullanıyorum.

Bunun dışında wordpresste ek olarak farklı resim formatları oluşturduğunu biliyoruz. Bimber temasında 41 tane resim boyutu tanımlanmış! İnanılmaz. Dosyalara bakınca 1 resimden 22 farklı kırpılmış resim oluşturduğunu gördüm. Eğer benim gibi webp kullanıyorsanız bu sayıları 2 ile çarpın!

Önceleri bu kırpılmış resimlerin sadece sunucuda ek yer kapladığını düşünüyordum. Optimizasyon için kodları inceleyince bir şey farkettim. Html boyutu artmış, veritabanı boyutu artmış, dosya sayısından ötürü resimlerin işlenme süresi artmış, veritabanı sorguları artmış, html işlenme süresi artmış... Yani bu ek dosyalar sadece sunucuda yer kaplamıyor bütün betikleri etkiliyor.

Yapılması gereken, oluşturulan resim boyutlarını en aza indirmek. Bunun için de 3 format idealdir diye düşünüyorum. Sormak istediğim ise hangi resim boyutlarını kullanmalıyız? Wordpress için tablet, pc ve mobilde (responsive) en ideal resim boyutları nelerdir? Veya sitede en çok kullanılan resim boyutlarını gösteren bir eklenti var mı?

Resim sayısını azaltmak veritabanı sorgu ve yükünü, html boyutunu ve işlenme süresini azaltacak, sunucuda gereksiz yer kaplamadigi icin rahatlatacak. Sırf resim boyutlarını ayarlamak bile performansa ciddi anlamda etki ediyor. Fakat en ideal boyutlar nelerdir?

http://screensiz.es/

Çözünürlükler çok çeşitli, her ekrana göre ayarlanması için çözünürlük değeri yerine değeri %100 vermelisiniz.

İdeal boyut diye bir şey yok maalesef. Tema hangi boyutları kullanıyorsa o. Bana göre farklıdır, ahmete göre farklıdır.
Mesela benim temam öne çıkan görseli 680x450 olarak kullanıyor, Bimber farklı kullanıyordur.

Öncelikle bunları teker teker analiz etmen lazım.

3 formatın ideal olmayacağına da temin ederim. Çünkü o gereksiz gördüğün boyutlandırmaları sitenin tamamına yaymalısın.

Makale içinde öne çıkan görsel, sidebarda listelediğin konular, makale altındaki benzer konuların resimleri,

Kategori listeleri gibi sitede gördüğün tüm resimleri, manşet ve yazar sayfasındaki yazıların resimlerini yeni sekmede açıp boyutlarını not almalısın.

Hepsini not aldık. Bir de bunun responsive tarafı var, tablet girişleri var, onlar da ilgili CSS kodu ile küçültülüyor biliyorsun ki. Çoğu tema bunu kendi yapıyor.

Her şey tamamsa şu eklentiyi kuruyorsun; https://wordpress.org/plugins/simple-image-sizes/

Eski olduğuna bakma, ben kullanıyorum çalışıyor.

Sana kullanmak istediğin boyutları soruyor, o boyutlarda yeni resim alanları oluşturup kaydediyorsun.

Daha sonra sana kod veriyor bunu Functions.php'ye ilave ederek temanınkileri geçersiz, kendi boyutlarını birincil yapıyorsun.

Sonra da eskiden kalan, kullanmadığın boyutlar kalıyor, onları da alttaki eklenti ile temizliyorsun:

https://wordpress.org/plugins/regenerate-thumbnails/

yalnız bu işlem veritabanı ve ftp yükünü hafifletiyor. kullanıcının siteye girdiğinde görmediği resimler html olarak yük oluşturmaz. yani tema orada 1000x1000 bir görsel oluştusa bile, kişi makaleye girdiğinde bu boyutu görmüyorsa HTML anlamda bir yük yok demektir. Eğer Bimber teması bütün resim boyutlarını arkaplanda işliyorsa bilemem ama sanmıyorum.

öne çıkan görseli eklediğin için HTML olarak bu resmin 41 varyasyonu var, bir de bu adam webp kullanıyor etti sana 82 HTML tag gibi bir mantık yok. öyle olacak olsa webp'nin bir anlamı olmaz, siteyi yavaşlatan bir etken olurdu.

farukkarahan hocam söylediğiniz seyin soruyla bağlantısını anlamadım. Zaten %lik dilimde resimler responsive mantığı bu. Eğer yeniden boyutlandirmayi devre dışı bırakırsak resimleri sıkıştırmamış olarak algılar. Bu pek akıllıca olmaz.

Mertcan hocam ideal resim boyutlari mutlaka vardır, olmalıdır. Hemen hemen her site benzer boyutları kullanır. Yani yapmak istediğim şey birebir kırpmak yerine yakın oranlarda kırpıp geri kalanı CSS ile halletmek. Zaten bilgi sahibi biri sitenin her yerinde aşırı derecede farklı resim boyutları kullanmaz kolay kolay.

Her temaya göre farklılık gösteriyor evet onun için tema ismini yazmıştım. Bilgi sahibi olan birileri vardır inşallah. Yada kullanılan ölçeği bulacak bir eklenti var mı acaba?

Neden 3 format dedim.
Wordpress varsayilan resim boyutları seçeneği 3 adet. Ve Geçenlerde jannah teması büyük bir performans güncellemesi yaptı. Orada resim boyutlarını 3 e düşürdüğünü yazmışlardı.

Bu temanın resize eklentisi var hocam teşekkürler. Localhostta çalıştırıp sunucuya yüklemeyi düşünüyorum.

Devtool üzerinden resim boyutlarına bakayım dedim fakat kafam karıştı hocam. Daha önce resimler üzerinde hiç testler yapmadım çünkü. Verilen resim boyutları tanımlı değil büyük ihtimal CSS ile yeniden şekillendirilmiş. Hangi boyutların kullanıldığını nasıl tesbit edebilirim?

Html yükü oluşturma mevzusu litespeed cachenin resim optimizasyonu sistemiyle ilgili hocam. Webp ve optimize resimleri html üzerinde tutuyor. Kullanılan cihaza göre teslim ettiği için html üzerinde sabit kalıyor bunlar. Aynı şekilde veritabanından çekiyor bu oranları. Veritabanındaki en büyük tablo şuanda litespeed resim verileri. Yani tema değil litespeed arkaplanda çalıştığı için html içine işleniyor inceledim kodları.

Yani webp mantığı jpg ve Webp dosyalarını tutup tarayıcıya göre teslim ediyor hocam bu yüzden kodlara işlenmiş. İnceleyebilirsiniz, gözden kaçırdığım bir yer olabilir ama litespeed çok fazla resim verisi giriyor html içine.

Bu arada 41 dosya Webp ile 82 lere çıkıyor. Burada veritabanı sorgusu ve sunucudan indirmek için iş yükü artıyor bunu söylemek istiyorum. Biliyoruz ki dosya sayısı arttıkça sorgu da yavaşlamaya başlar. Veritabanında resim optimizasyon tablosu ciddi anlamda şişmiş durumda az resim olsa bile. Aynı şekilde klasörlerde bu şekilde. Sorgu zorlaşıyor dosya sayısı arttıkça

Mesela ben Newsmag kullanıyorum hocam. Newsmag panelinde bir alan var, oradan kullanmadığım tüm resim boyutlarını kapattım ki bu harika bir özellik. Ek bir eklenti ihtiyacım kalmadı. Şuan toplam 8 farklı resim boyutu kullanıyorum, yetiyor artıyor. Hatta yetersiz geldiği yerde zaten resim bulunamadı hatası veriyor anlıyorsunuz.

Bimber temasında da bu özellik zaten varmış anladığım kadarıyla. Kullanmadığınız resim boyutlarını kapatarak sunucu yükünüzü hafifletin diyor.

http://docs.bimber.bringthepixel.com/articles/mediaace-plugin/image-sizes-manager/index.html

Muhtemelen bu eklenti sitenin kullandığı tüm resim boyutlarını gösteriyor.

WordPress zaten çekirdek olarak 3 farklı boyut kullanıyor. İlave olarak boyut falan üretmiyor. Boyutu üreten tema olduğu için gerekli yerlere boyut üretiyor, yani siz bunu devredışı bırakırsanız eksik kalacak demektir. Bunun için kullandığınız alanlarınki açık kalmalı, kullanmadıklarınız iptal edilmeli. Kalkıp öne çıkan görsel boyutu 800x800'ken siz bunu ben 600x600 kullanacağım derseniz orada resim küçük görünecektir.

Litespeed konusunda haklısınız, Litespeed bunu yapıyor temayla alakası yok çünkü kendi sitemde de yapıyor meret.:)

Ama ben anlıyorum ki siz kafanızda 3 farklı boyut belirleyip temanın oluşturduğu tüm boyutları yok saymak istiyorsunuz.

Umarım birbirimizi doğru anlıyoruzdur.:)

Mertcan evet hocam. Genel mantık şu, oluşturulan resim sayılarını azaltarak her yerden tasarruf edip performansı artırmak. Resimler sandığımızdan daha çok yere yük bindiriyor.

Bimber dokümanlarına bakmıştım hocam Mediaace diye bir eklentisi var bunun için. Ben çok eklenti kullanmaya karşıyım sadece tesbit demek için kurdum. Ama 41 den fazla boyut tanımlanmış durumda. Ve ne nerede kullanılıyor anlamak zor. Tek tek iptal etmeyi denemek pek mümkün değil. Her devre dışı bırakmada resimleri tekrar boyutlandirip devre dışı bırakılan resim boyutlarını silmem gerekecek test yapmak istersem.

Bana hangi boyuttaki resimlerin lazım olduğunu nasıl tesbit edebilirim? Merak ettiğim nokta bu. En az hata payıyla kullanılmayan veya ihtiyaç olmayan resim boyutlarını tesbit edip kaldırabileceğim bir yöntem, eklenti, fikir lazım. (Kaldırmak için değil hangilerinin lüzumsuz olduğunu tesbit etmek için)

Bu konu herkes için önemli. Yani sadece sunucuya yük oluyor saniyorduk hepimiz ama ekstra performans kayıplarına da neden oluyormuş anlaşılan

Mfa

Benim anlamadığım görsellerdeki aksiyonları azaltmak veritabanını sorgularını niye düşürsün? Bahsettiklerinizin hiç birini görsellerde yaptığınız manipülasyonlar düzeltmeyecek

Gereksiz hiçbir öğenin çağırılmadığı yapılarda bahsettiğiniz mantıklı

Şuan yapabileceğiniz en iyi şey kullanılan görselleri tutmak geri kalanını uçurmak bu konuda https://wordpress.org/plugins/media-cleaner/ eklenti var kullanılmayanları direk uçurur.

Mertcan litespeed cache kullanıyorsanız ve resim optimizasyonunu actıysanız lütfen veritabanınıza bir bakın hocam. Aynı şekilde html verilerinizi bir kontrol edin. Her şey işleniyor büyük bir şişme var detaylı bakarsanız görebilirsiniz.

İstediğim tam olarak kullanılmayan görsel boyutlarını tesbit etmek. Önerdiğiniz eklenti bunu otomatik mi yapıyor hocam? Deneyeceğim