En iyi web performansı için görüntüleri nasıl optimize edebilirim
Yavaş web siteleri arama motoru sıralamanızda zarar verebilir ve ziyaretçileri uzaklaştırabilir. Ayrıca, büyük bir görüntü dosyasına sahip olmak, yavaş yükleme süresinin ana nedenlerinden biridir. Neyse ki, web performansı için görüntüleri optimize etmenin birkaç yolu vardır. Bu yazıda, görüntülerin sitenizin performansı üzerindeki etkisini tartışacağız. Daha sonra görüntülerinizi etkili bir şekilde optimize etmenin birkaç farklı yolunu paylaşacağız. Başlayalım! Kaç resim web performansını etkiler? Görüntüler sitenizin genel performansını önemli ölçüde etkileyebilir. En iyi kullanıcı deneyimini (UX) sağlamak için, içeriğinizin Google’ın temel web verileri için optimize edildiğinden emin olmalısınız.
Temel web verileri, web sitenizin performansını değerlendirmek için Google tarafından kullanılan bir metriktir. Sayfa hız testi yaptığınızda, Google aşağıdakiler dahil olmak üzere çeşitli faktörlere göre raporlar yapacaktır:
İlk İçerik Boya (FCP): Tarayıcı sayfanızdaki ilk belge nesne modeli (DOM) öğesini oluştururken.
En Büyük İçerik Boya (LCP): Web sitenizin sayfanızdaki en büyük öğeyi (genellikle resimler veya videolar) oluşturması için gereken süre.
İlk Giriş Gecikmesi (FID): Kullanıcının sayfanızla ilk etkileşime girdiği zaman (düğmeyi tıklamak gibi) tarayıcının eyleme yanıt verene kadar süresi.
Kümülatif Düzen Değiştirme (CLS): Yüklendiğinde web sitenizin sayfa etrafında ne kadar içerik değiştirildiği. Örneğin, görüntüler ve düğmeler gibi öğeler ekranın etrafında hareket edebilir, kullanıcıların sitenizle etkileşimini önleyebilir.
PagePeed Insights veya GTMetrix gibi çevrimiçi araçları kullanarak bu alanda site oranlarınızın bu alanda nasıl olduğunu kontrol edebilirsiniz. Tek yapmanız gereken URL’nizi girmek ve puanınızla ilgili bir rapor alacaksınız: Bu rapor ayrıca performansınızı nasıl iyileştireceğinize dair bir öneri sunuyor. Bu öneri, daha hızlı yükleme süresi için optimize edilmesi gereken görüntüleri içerebilir. Örneğin, raporlar sayfanızdaki en büyük içerik öğelerini kahraman görüntüsü olarak tanımlayabilir. Öyleyse, LCP puanınızı artırmak için boyutu değiştirebilir ve görüntü dosyalarını sıkıştırabilirsiniz. Görüntüler CLS puanınızı da etkileyebilir. Yüksek CLS puanı, sitenizin belirtilen yüksek ve genişlik nitelikleri olmadan görüntüler içerdiğini gösterir. Bu nedenle, tarayıcı görüntünün boyutunu doğru bir şekilde değiştirmeye çalışırken zaman harcar. Bu işlem, sayfanız yüklendiğinde, kullanıcı deneyimini rahatsız eden öğelerde bir kaymaya neden olur. Sitenize yüklediğiniz her fotoğraf için boyutları ayarlayarak kolayca düzeltebilirsiniz.
Kayıp: Bu yöntem, görüntünüzden büyük miktarda veri siler, dosya boyutunu önemli ölçüde azaltır.
Kayıpsız: Bu sıkıştırma tekniği, görüntüden herhangi bir veri silmeden dosya boyutunuzu azaltır.
Büyük görüntü dosyaları yükleme sürenizi yükleyebilir, bu da web sitesinin yavaş olmasına neden olur. Ayrıca sunucunuzda çok fazla alan alabilirler. Bu nedenle, sitenize yüklediğiniz görüntüleri sıkıştırmanızı öneririz:
Kayıplı sıkıştırma, kayıpsızdan daha etkili olma eğilimindedir. Bunun nedeni, size boyutta bir azalma ile daha fazla esneklik sağlamasıdır. Tek dezavantajı, kayıplı sıkıştırmanın görüntü kalitenizi etkileyebileceğidir. 2. Görüntü boyutunuzu değiştirin ve doğru boyutları kullanın Web performansı için görüntüleri optimize etmenin bir başka etkili yolu boyutunu değiştirmektir. Genellikle, boyutlar ne kadar büyük olursa, dosya boyutu o kadar büyük olur. Bu nedenle, web sitenize yüklemeden önce resimlerinizi kesmeyi düşünebilirsiniz. Bunu görüntü düzenleme yazılımı seçiminizle yapabilirsiniz.
Ardından, sitenize resim yüklediğinizde, WordPress otomatik olarak bunun için farklı bir boyut üretecektir. Bu genellikle büyük, orta ve küçük versiyonlar ve küçük resimler içerir: Bu şekilde WordPress, okuyucunuz için en uygun görüntünün boyutunu sunmanıza olanak tanır. Ayrıca, tarayıcının ziyaretçilerinizin cihazlarına göre doğru görüntü boyutlarını görüntülemesine yardımcı olur. Böylece, bu ayar web sitenizi daha duyarlı hale getirir. Gönderinize resim eklerken, boyutu tam boyuttan büyük olacak şekilde ayarlamak isteyebilirsiniz. Aynı şekilde, bir blog yemi tasarlarsanız, üstün görüntünüz için daha büyük bir görüntü boyutundan daha fazla bir mini görüntü seçebilirsiniz.
İhtiyaç duyulandan daha büyük bir boyut kullanırsanız, sitenizin hızına gereksiz baskı koyacaksınız. Sunucunuzda daha fazla alan da kullanacaksınız. Görüntüleri doğru şekilde nasıl optimize edersiniz, neyse ki, web performansı için görüntüleri optimize etmek için kullanabileceğiniz bazı araçlar vardır. Bu bölüm, başlamanıza yardımcı olacak en iyi uygulamalardan bazılarını görecektir. 1. Daha önce belirtildiği gibi bir görüntü sıkıştırma veya eklenti kullanın, sıkıştırma görüntü dosyanızın boyutunu azaltmaya yardımcı olur. Adobe Photoshop veya Microsoft fotoğrafları gibi resim düzenleme yazılımı da dahil olmak üzere fotoğraflarınızı sıkıştırmak için birçok aracı kullanabilirsiniz. Tinypng gibi çevrimiçi araçları da kullanabilirsiniz: Bu araç, WebP, JPEG ve PNG dosya boyutunuzu azaltmak için kayıplı sıkıştırma kullanır. Tek yapmanız gereken resminizi yüklemek ve Tinypng bunu sizin için sıkıştıracaktır. Veya Imagify gibi güçlü bir görüntü optimizasyonu eklentisi kullanabilirsiniz:
Eklentiyi sitenizdeki yükledikten ve etkinleştirdikten sonra, Sıkıştırma Tercihlerinizi ayarlamak için Ayarlar> Hayal Etme Açabilirsiniz:
Agresif için sıkıştırma seviyelerini ayarlamanızı öneririz. Bu ayar, görüntü kalitesinde gerçek farklılıklar olmadan önemli miktarda dosya boyutunu azaltacaktır.
Hazır olduğunuzda, Değiştir’i kaydet’i tıklayın. Imafy, sitenize yüklediğiniz görüntüleri otomatik olarak sıkıştıracaktır. 2. WordPress düzenleyicimizdeki görüntü boyutunu değiştirme, daha hızlı bir yükleme süresi için görüntü boyutunuzu değiştirmenin önemi hakkında da konuştu. WordPress sitenize yüklemeden önce bilgisayarınızdaki fotoğrafın boyutunu değiştirebilirsiniz. Ancak, WordPress’teki görüntünüzün boyutunu da değiştirebilirsiniz. Gönderinizdeki veya sayfanızdaki resmi seçin ve sağınızdaki Ayarlar panelinin genişliğini ve yüksekliğini ayarlayın: Veya Medya Kütüphanesinde resimler bulabilir ve bir resim düzenleme seçebilirsiniz. Bu eylem sizi görüntüyü kesebileceğiniz ve yeni bir boyut ayarlayabileceğiniz pencereye götürecektir: Gördüğünüz gibi, WordPress Editor da otomatik olarak oluşturulan görüntülerden birini seçmenize izin verir. Bir blog girişinde bir grafik kullanıyorsanız, tam boyut yerine büyük bir boyut seçmelisiniz. Bu ayar, kaliteyi düşürmeden görüntü boyutunu daha küçük hale getirecektir. 3. Maksimum yükleme sınırınızı değiştir WordPress, maksimum yükleme dosya boyutuyla birlikte gelir. Bu miktar, barındırma sağlayıcınız tarafından sağlanan kaynaklara bağlı olarak değişebilir. Mevcut maksimum dosya boyutunuzu kontrol etmek için, WordPress kontrol panelinizde Medya> Yeni Ekle’ye gidin. Bu sayfada, yükleme sınırınızı göreceksiniz: Genellikle, daha büyük dosyalar yüklemediğiniz sürece bu değeri değiştirmenize gerek yoktur. Ancak, diğer kullanıcıların gerekenden daha büyük görüntüleri yüklemesini önlemek için dosya boyutu sınırını azaltmak isteyebilirsiniz. Bu ayar, çoklu yazar bir blog çalıştırırsanız yararlı olabilir. Bunu yapmak için, barındırma sağlayıcınızla iletişime geçebilir ve maksimum yükleme dosyasının boyutunu değiştirmelerini isteyebilirsiniz. Veya php.ini dosyanızı düzenleyerek WordPress yüklemesinin sınırını değiştirebilirsiniz. 4. Komut dosyası boyutunu erteleyin Web performansı için görüntüleri optimize etmenin başka bir yolu, komut dosyanızın HTML kodunuza yerleştirilmesini ayarlamaktır. JavaScript çok fazla kaynaktır ve HTML’ye gömülü tüm etkileşim türleri yüklemenin ertelenmesine neden olabilir. Bu, kodunuzun altındaki harici JavaScript sayfasına bağlantı vermek için standart bir uygulamadır. Bu, belge nesne modelinin (DOM) herhangi bir etkileşimli öğe etkinleştirilmeden önce tamamen yüklenmesini sağlar. Ancak, bazı JavaScript görüntüleri genellikle DOM genelinde kullanılır. Bir örnek, kullanıcı tıkladığında hangi düğmenin yapılacağını söyleyen “OnClick” etkinliğidir. Bu nedenle, resminizi optimize etmek için bir komut dosyası kullanıyorsanız, zaman sayfanızı açma süresini etkileyebilir. Uçan komut dosyaları gibi eklentileri kullanarak bu sorunun üstesinden gelebilirsiniz: