Web Tasarım

Web Siteniz Yavaş Mı? Hızlandırmak İçin 5 Adım

Resimler her web sitesinin temel bileşenidir. Resimler web sayfalarına yüklenen verilerin %60’ından fazlasını oluşturur. Görüntüsü çok olan web sitenizi hızlandırmak istiyorsanız, e-ticaret, haberler, moda siteleri, bloglar veya seyahat portalları, resim optimizasyonu önemlidir ve belki de en düşük asılı meyve olsun, hemen hemen tüm web sitelerinin bu kadar kritik bir bileşeni olmak zordur.

Web sitenizdeki görüntüleri optimize etmek genel olarak 3 kategoriye ayrılabilir – daha düşük boyutta yükleyin, daha az yükleyin ve daha hızlı yükleyin. Bu makalede tartıştığımız 5 teknik veya karşılaştığınız diğer teknikler muhtemelen bu 3 kategoriden birine girecektir.

Öyleyse, haydi başlayalım ve bugün resim ağırlıklı web sitenizi optimize etmede önemli ilerleme sağlamak için uygulayabileceğiniz bazı basit tekniklere bakalım.

1. Resimlerinizi yeniden boyutlandırın

Bu bir zorunluluktur. Resimlerinizi web sitenizde tam olarak gerekeni yerine getirin. Aslında, CSS veya HTML’de yeniden boyutlandırma hakkında konuşmuyoruz. Sunucudaki görüntünün yeniden boyutlandırılması ve ardından tarayıcıya gönderilmesinden bahsediyorum.

Örneğin, e-ticaret web sitenizde listelemek istediğiniz bir ürünün 4000x3000px resmi var . Bununla birlikte, web sitenizde, bu ürünün çok daha küçük bir görüntüsünü göstermeniz gerekir. 200x300px Ürün listeleme sayfasında ve 800x1000px ürün detay sayfasında bir resim olabilir . Tarayıcıya göndermeden ÖNCE orijinal resmi bu boyutlara küçültdüğünüzden emin olun. Yeniden boyutlandırılan görüntüler orijinal görüntüden çok daha küçüktür ve orijinal görüntüden çok daha hızlı yüklenir.

<h2>XYZ Product Detail</h2>
<!– DO NOT USE this as it will load the full size image and the browser does the resize –>
<img src=”image.jpg” alt=”full size image” width=”800″ height=”1000″ />
<!– USE a resized image where the resizing is done from the server and there is no need of browser-side resizing–>
<img src=”resized_800x1000_image.jpg” alt=”resized image” />

Bence, resimlerin yanlış boyutlandırılması, çoğu web sitesinde en büyük optimizasyon sorunudur. Ve sık sık, biz geliştiriciler olarak, onu gözden kaçırmak eğilimindeyiz. Şu senaryoyu inceleyin: Yeni web siteniz için mükemmel boyutta resimlerle başlayın. Önümüzdeki birkaç ay boyunca, web sitenizin düzeni değişir ve resim boyutu gereksinimleriniz de artar. Bununla birlikte, başlı başına bir görev olan bu yeni boyut gereksinimlerini karşılamak için yeni görüntüler üretmek yerine, yakın bir alternatifi kullanıyorsunuz. Örneğin, 300x200pxbir 200x200pxgörüntünün işe yarayacağı bir görüntü kullanırsınız. Sanırım bu herkesin başına gelirdi.

Yukarıdaki örnekte, tek bir görüntü için Kilobayt cinsinden fark küçük görünebilir. Ancak yine de boyut oranı % 21’dir. Birçok görüntüye eklenen bu küçük fark, web sitenizi hızlandırma ve bant genişliği tüketiminizi % 21 oranında azaltma potansiyeline sahiptir.

En iyi senaryo, yalnızca görüntü URL’sini değiştirerek, herhangi bir boyuta bir görüntüyü gerçek zamanlı olarak yeniden boyutlandırabilecek bir görüntü sunucusuna sahip olmaktır. Bu, resim boyut gereksiniminiz değiştiğinde, yeni resimlerinizi almak için gereken tek şey URL’de bu boyutu belirtmektir.

Kendi başınıza uygulayabileceğiniz birçok açık kaynaklı ve sunucu tarafında uygulama vardır. ImageKit, diğer tüm özelliklerin yanı sıra, gerçek zamanlı URL tabanlı yeniden boyutlandırma ve kırpma sağlayan üçüncü parti hizmetlerinden biridir. Birkaç dakika kurulumda, mevcut tüm görüntülerinizde de kullanabilirsiniz.

2. Resimlerinizi optimize edin

Görüntü ağırlıklı web sitenizi hızlandırmanın bir sonraki adımı, web sitenizdeki her görüntü için doğru formatı ve kaliteyi seçmektir.

JPG, PNG ve GIF, şu anda web’de kullanılan en yaygın görüntü formatlarıdır ve her biri farklı kullanım durumları için uygundur. WebP adı verilen ve bu görüntü biçimlerinin en iyisini birleştiren, boyutlarının %30 daha küçük olduğu ve modern tarayıcıların neredeyse % 75’inde desteklendiği nispeten yeni bir görüntü biçimi var.

Yukarıdaki boyut karşılaştırması, görüntüleriniz için doğru görüntü formatını seçmenin önemini göstermektedir. Görüntüler aynı görünse de, boyut olarak büyük ölçüde değişir.

Olağanüstü performans avantajları göz önüne alındığında, resimlerinizi mümkün olduğunca WebP formatında sunmalısınız. Diğer tarayıcılarda, orijinal resim formatını sunmaya devam edebilirsiniz.

Basitçe ifade edilen görüntü kalitesi, görüntünün görsel olarak nasıl göründüğünün bir ölçüsüdür. Görüntü kalitesi ile görüntü boyutu arasında doğrudan bir ilişki vardır. Daha yüksek kalite, daha yüksek görüntü boyutu ve bunun sonucunda da yavaş bir web sitesiyle sonuçlanır.

Farklı görüntü sıkıştırma yöntemleri, görüntüleri sıkıştırmak için renk bilgisindeki küçük değişiklikleri ayırt etmek için insan gözünün sınırlamalarından yararlanır. Standart olarak, 80 ile 90 arasında bir kalite seviyesi (100 ölçeğinde) genellikle görüntü boyutu ile kalite arasında iyi bir dengedir.

Farklı kalite seviyelerinde kodlanmış aynı görüntü arasındaki karşılaştırma. Görüntüler görsel olarak neredeyse benzer ancak farklı boyutlarda.

Biçim ve kalite optimizasyonunu gerçekleştirmenin basit bir yolu, resimlerinizi sunmak için ImageKit kullanmaktır. Bir görüntüyü otomatik olarak WebP’ye dönüştürür ve görüntü kalitesini gerçek zamanlı olarak optimize eder.

3. Mobil cihazlar için geliştirin

Bugünün dünyasında, bir web sitesi sürekliliğine önem veriyorsanız, mobil kullanıcıları görmezden gelmek büyük bir kayıptır. Veriler, küresel trafiğin neredeyse % 60’ının mobil cihazlardan geldiğini gösteriyor. Ve evet, cep telefonları güçlenirken ve mobil ağlar daha iyi hale gelse de, veriler mobil veri hızlarının hala geniş bant hızlarından daha yavaş olduğunu gösteriyor. Mobil veri bağlantısının çok düşük olduğu ülkeler veya ülkeler içinde alanlar var . Bu nedenle, mobil cihazlar için web deneyimleri tasarlarken çok dikkatli olmak önemlidir.

Masaüstü ve mobil cihazlar için duyarlı bir web siteniz varsa, duyarlı görüntüleri kullanmaya geçebilirsiniz. Responsive image etiketleriyle, img etiketinin `srcset` ve` size `niteliklerini kullanarak, tarayıcıya tek bir görüntü için değişkenlerin bir listesini ve farklı ekranlardaki göreceli görüntü boyutunun bir tanımını sağlayabilirsiniz. Tarayıcı daha sonra, belirli bir cihaza yüklenecek en iyi resim boyutuna, cihaz boyutlarına ve belirttiğiniz düzene göre mevcut listeden karar verir. Tarayıcı daha sonra, belirli bir cihaza yüklenecek en iyi resim boyutuna, cihaz boyutlarına ve belirttiğiniz düzene göre mevcut listeden karar verir.

“Sizes” özelliği resim düzeni hakkında bilgi verir,”srcset” özelliği resim listesini her URL’ye göre belirtilen genişlikte görüntüler.

Mobil cihazlarla fotoğrafa gelen bir diğer faktör, Cihaz Piksel Oranı veya DPR değeridir. Modern cep telefonları aynı inç kareye daha fazla piksel sığdıran yüksek yoğunluklu ekranlara sahiptir.

Normal cihazlarda iyi görünen bir görüntü, yüksek yoğunluklu bir ekranda biraz bulanık görünür. Bunun bir çözümü DPR 2’li ekranlara 2x boyutunda bir görüntüyü, DPR 3’lü ekranlara 3x görüntüsünü ve diğer cihazlarda normal görüntü 1x boyutunda görüntüyü yüklemektir.

Müşteri İpuçları adlı modern bir özellik, duyarlı görüntülerle çalışmaya başlamanızı kolaylaştırır ve kodun, “srcset” ve “boyutları” özellik yöntemine kıyasla daha temiz görünmesini sağlar.

ImageKit, size yeniden boyutlandırma ve kırpma parametreleriyle birlikte URL tabanlı bir DPR parametresi sağlar ve ayrıca yanıt veren görüntüleri kullanmayı ve cihazlar arasında mükemmel görüntüler iletmeyi çok kolaylaştıran istemci ipuçlarını da destekler.

4. Daha az kaynak yükleyin

Tüm resimlerinizi optimize ettikten sonra bile, web sitenizi yavaşlatmak ve kullanıcı deneyimini olumsuz yönde etkilemek için çoğunu yüklemek zorunludur. Daha az resim kullanmamız gerektiğini savunmuyorum. Ancak, görüntüleri kullanmaktan kaçınabileceğimiz veya önden yüklemekten kaçınabileceğimiz durumlar vardır.

Örneğin, yüklemek yerine görüntülerin, düğmeleri, renk geçişlerini ve CSS kullanarak diğer gelişmiş unsurları oluşturabilir.

Kullanabileceğiniz diğer bir önemli teknik de resimleriniz için tembel yükleme yapmak. Tembel yükleme, temel olarak, hemen gerekmeyen görüntülerin yüklenmesini ertelediğimiz anlamına gelir. Tipik olarak, kullanıcının ekranında veya görünüm alanında görünmeyen herhangi bir görüntü, daha sonra, yani görüntü görünüm alanına girdiğinde veya bu ekrana girmek üzereyken yüklenebilir.

Görüntüler başlangıçta yüklenmedi. Sadece görüntü yer tutucular var. Görüntüler daha sonra asenkron olarak yüklenir. Resimlerin yükleneceği bir dizin olmadığını unutmayın.

Web sayfanızda 100 ürünün bulunduğu bir durumu düşünün. Tüm 100 ürün görselini aynı anda ve en başında talep ederseniz, yükleme süresini yavaşlatır. Görüntüler ağ bant genişliği ve CPU kaynakları için sayfadaki CSS ve JS gibi diğer kritik öğelerle rekabet eder.

Tembel yükleme ile, başlangıçta kullanıcı tarafından görülebilen 30 resmi yükleyelim, diyelim. Ardından, kullanıcı sayfayı aşağı kaydırmaya başladığında daha fazla resim yüklemeye devam edeceğiz. Bu, ilk yükleme süresini ve kullanıcı deneyimini iyileştirmeye yardımcı olur. Kullanıcının tüm sayfayı aşağı kaydırmaması ve bazı resimlerin hiç yüklenmemesi durumları olacaktır. Böylece görüntü teslimatı için bant genişliği maliyetlerinden de tasarruf edersiniz.

JQuery Lazy gibi JS kütüphaneleri ile tembel yüklemeye başlamak çok basittir . Ayrıca tembel yükleme için mevcut olan JS kütüphanelerinden çok daha performanslı olan en yeni IntersectionObserver API’sini kullanabilirsiniz .

5. Resim gönderimi için iyi bir CDN kullanın

Görüntülerin boyutunu ve belirli bir sayfaya yüklenen görüntü sayısını çözdükten sonra, bir sonraki adım web sitenize yüklenecek görüntülerin hızlı bir şekilde yüklenmesini sağlamaktır. Görüntünün yüklenme süresinin kısaltılması yalnızca daha hızlı bir genel sayfa yükleme süresi elde etmenize yardımcı olmaz ve böylece web sitenizdeki kullanıcı deneyimini daha iyi hale getirir, aynı zamanda arama motorlarında daha üst sıralarda yer almanıza yardımcı olur.

İçerik Teslim Ağları veya CDN’ler, dünya çapında dağıtılan önbellek / proxy sunucuları kümesidir.

Diyelim ki web sitenizin sunucusu ABD’de. Bir içerik dağıtım ağı, resimlerinizi küresel olarak dağıtılmış sunucular ağında önbelleğe alır (bundan daha karmaşıktır, ancak basit olması için bunu varsayalım). Ardından, Brezilya’daki bir kullanıcı web sitenizden bir resim isterse, ABD’deki sunucunuzdan bu resmi almak yerine, CDN Brezilya’daki kullanıcıya en yakın bir düğümden gönderir. Bu, bir görüntüyü yüklemek için gereken gidiş dönüş süresini azaltır

Bir CDN seçerken, CDN’nin HTTP / 2’yi desteklediğinden emin olun. HTTP / 2, yükleme süresini önemli ölçüde hızlandırabilen web üzerinde içerik sunmak için yeni bir protokoldür. Sayfa yükleme süresini azaltmak için çoklama, başlık sıkıştırma ve sunucu basma gibi teknikleri kullanır.

ImageKit, kutudan çıkarılmış HTTP / 2 olan bir CDN sağlar. Ekstra çaba harcamadan, ImageKit’i kullanarak resimleriniz (ve hatta diğer statik dosyalar) için sınıfının en iyisi teslimatı alabilirsiniz.

Web sitemi görselle ilgili sorunlar için nasıl test edebilirim?

Özellikle bir web sitesini test etmek için kullanabileceğiniz, özellikle de görüntü ile ilgili konularda kullanabileceğiniz birkaç araç var. Bir yolu bu web sitesi analizörü ImageKit tarafından kullanmaktır. Sadece bir sayfa URL’si girin ve birkaç saniye içinde size yeniden boyutlandırma, en iyi format, tembel yükleme ve HTTP / 2 ile ilgili önerilerde bulunacak. Google ayrıca Lighthouse adlı açık kaynaklı bir araç üzerinde çalıştı . Bu araç, Chrome’un en son sürümlerine entegre olarak gelir ve yalnızca web sitenizdeki resimlerin değil, performansı etkileyebilecek diğer konuların da kapsamlı bir analizini yapabilir. Google PageSpeed ​​Sayfası, web sitenize en iyi hale getirilmiş görüntüleri başka önerilerin dışında yükleyip yüklemediğinizi de belirtir.

Sonuç Görüntü optimizasyonu ve performans geliştirme konusundaki tüm ana teknikleri ele aldık. Bu bilgiyi elde ederek, resimle ilgili sorunlarınızın %90’ını çözebilirsiniz, daha fazlası ve destek almak isterseniz biz hep cmrsoft.com/iletisim/ buradayız.
Daha Fazla Göster

Cmr Soft

Uzun yıllar süresince çeşitli firmalarda çalışmalarımızda geliştirdiğimiz çözümler ve yazılımlarda kazandığımız tecrübelerimizi siz değerli firmalarımıza aktarmak için yola çıkan, kaliteden ödün vermeden uygun ve yaratıcı tasarımlarımızla hizmet veren kaliteli bir ekibiz. Gelin Kaliteden yerinizi ayırtın.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı