Web Performansı ve Sonuçları Nasıl Optimize Edilir

Sabır, web sitesi ziyaretçileri ve çevrimiçi alışveriş yapanlar için bir erdem değildir. Web sitenizde bir ziyaretçiyi tutmak veya kaybetmek söz konusu olduğunda, saniyenin her kesri önemlidir.

Kissmetrics'e göre, yükleme süresi sayfanın terk edilmesine katkıda bulunan önemli bir faktördür. Ortalama bir web ziyaretçisinin yüklenmesi çok uzun süren bir sayfa için sabrı olmadığı için, yükleme süresinin her saniyesinde terk etme yüzdesi olarak artar. Blog, kullanıcıların yaklaşık %40'ının bir sayfayı 10 saniye sonra terk edeceğini belirtti. Mobil İnternet kullanıcıları muhtemelen bu sorunla ilgili en büyük hayal kırıklığını yaşıyor – %73'ü yüklenemeyecek kadar yavaş bir web sitesiyle karşılaştıklarını belirtti.

Sayfa yükleme sorunu, web sitesi ziyaretçilerinin alışveriş davranışlarını doğrudan etkiler. Kissmetrics ayrıca, web sitesi performansından memnun olmayan alışveriş yapanların %79'unun aynı siteden tekrar satın alma olasılığının daha düşük olduğunu belirtti. Tüketicilerin neredeyse yarısı sayfaların 2 saniye veya daha kısa sürede yüklenmesini bekliyor ve 1 saniyelik gecikme müşteri memnuniyetini %16 oranında azaltacak.

Bu gecikmelerin sonuçları gerçek paraya dönüşür. E-ticaret devi Amazon, yalnızca 1 saniyelik bir sayfa yükleme yavaşlamasının 1,6 milyar dolarlık satış gelirine mal olacağını açıkladı. Benzer şekilde Google, arama sonuçlarında saniyenin yalnızca onda dördü kadar bir yavaşlamanın günde 8 milyon arama kaybına yol açacağını ve bunun da çevrimiçi reklamcılıkta milyonlarca daha az arama anlamına geldiğini kaydetti.

Sorunun Kalbine Gitmek

Yükleme süresini etkileyen en büyük etkenler resimler, videolar ve grafiklerdir. Günümüzün web siteleri, ziyaretçileri çekmek için daha fazla görsel ve daha az metin içeriyor. HTTP Arşivi'ne göre, bir web sitesinin ortalama ağırlığının yaklaşık %64'ü resimlerden oluşurken, video diğer bir %8'ini oluşturur.

Bu tür medya, web sitesi boyutunun yaklaşık dörtte üçünü oluşturduğundan, performansı ve dönüşüm oranlarını artırmak için sitenizdeki resimleri ve videoları daha verimli bir şekilde yönetmeniz önemlidir. Görüntülerin ve videoların web sitenizin performansı üzerindeki etkisini azaltmak için atabileceğiniz bazı adımlara bakalım.

Daha Verimli, Modern Görüntü Formatları Kullanın

Google, WebP görüntü formatı için Chrome tarayıcılarına destek ekledi ve Microsoft, Internet Explorer ve Edge tarayıcılarının çoğunda aynı şeyi JPEG-XR için yaptı. Ancak birçok geliştirici, modern biçimlerin sitelerini nasıl optimize edebileceğinden yararlanmak yerine aynı JPG ve PNG biçimlerine bağlı kalarak bu değişiklikleri hala benimsemedi.

İdeal olarak, uygun olduğunda görüntüleri WebP ve JPEG-XR'ye dönüştürmeli ve formatlar arasında denge sağlayacak şekilde sıkıştırma kalitesini ayarlamalısınız. Her bir resme erişen belirli tarayıcıyı tespit etmek ve resmin ilgili tarayıcıya optimize edilmiş bir sürümünü sunmak da önemlidir. Bunu yapmak, kullanıcıların sitenizi yavaşlatmadan görsel kalite ve dosya boyutu optimizasyonu açısından mümkün olan en iyi görselleri almalarını sağlamanızı sağlayacaktır.

Gereksiz Tarayıcı Tarafında Yeniden Boyutlandırmayı Ortadan Kaldırın

Geliştiriciler, sunucu tarafında görüntüleri yeniden boyutlandırmak yerine, genellikle bir kısayol olarak tarayıcı tarafında görüntüyü yeniden boyutlandırmayı kullanır. Sonuç modern tarayıcılarda tamamen aynı görünse de, bant genişliği üzerindeki etkisi oldukça farklıdır. Tarayıcı tarafında yeniden boyutlandırma ile, web sitesi ziyaretçileri gereksiz derecede büyük bir görseli indirerek değerli zamanlarını boşa harcar ve siz de bunu onlara teslim etmek için bant genişliğini boşa harcarsınız.

Eski tarayıcılar için, yeniden boyutlandırma algoritmaları genellikle ortalamanın altında olduğu için sorun daha da belirgindir. Resimlerinizin gerekli web sitesi boyutlarına tam olarak uyduğundan emin olmanız gerekir. Büyük bir resim sunmak ve onu yeniden boyutlandırmak için tarayıcıya güvenmek yerine aynı resmin farklı küçük resimlerini oluşturmaya değer. ImageMagick gibi açık kaynaklı bir görüntü yeniden boyutlandırıcı veya Cloudinary gibi bulut tabanlı bir çözüm gibi bu konuda yardımcı olabilecek bazı araçlar mevcuttur.

Doğru Görüntü Dosyası Türlerini Kullanın

JPEG, PNG ve GIF, günümüzde web sitelerinde kullanılan en yaygın dosya biçimleridir, ancak her birinin çok farklı rolleri vardır. Yanlış formatı kullanın ve ziyaretçilerinizin zamanını ve kendi paranızı boşa harcamış olursunuz. Sık yapılan bir hata, fotoğrafları teslim etmek için PNG'leri kullanmaktır. PNG'lerin kayıpsız formatlar olarak fotoğraflar için mümkün olan en yüksek reprodüksiyonu sağlayacağına dair yaygın bir yanılgı vardır.

Bu genellikle doğru olsa da, bu aynı zamanda oldukça gereksiz bir optimizasyondur. Gösterilen içerik için hangi resim formatının kullanılması gerektiğini akılda tutmak önemlidir. PNG, bilgisayar tarafından oluşturulan görüntüler (tablolar, logolar, vb.) için veya görüntünüzde şeffaflığa ihtiyacınız olduğunda (görüntü bindirmeleri) kullanılmalıdır; Yakalanan bir fotoğrafı gösterirken JPEG; ve animasyon gerektiğinde GIF (Ajax yükleme animasyonu vb.).

Tüm Dağıtım Ortamlarında Tek Bir Görüntü Boyutu Kullanmayın

Özellikle akıllı telefonlar, tabletler ve akıllı saatler tüketiciler tarafından tercih edilir hale geldiğinden web siteniz birçok farklı cihazda görüntüleniyor. Genellikle geliştiriciler, görüntüler için istemci tarafı yeniden boyutlandırmayı kullanarak tüm cihaz çözünürlüklerinde aynı görüntüleri sunar. Görüntüler harika görünebilir, ancak ziyaretçiler cihazlarına gereksiz derecede büyük görüntüler yüklemek için zaman kaybeder ve fazladan bant genişliği kullanımı için ödeme yaparsınız.

Bu, özellikle gereksiz ekstra yüksek çözünürlüklü görüntüleri indirmek için fazladan para ödeyen 3G kullanıcıları ve dolaşımdaki kullanıcılar için adil değildir. Bu sorunlardan kaçınmak için, kullanıcı aracılarını kullanarak ziyaretçilerin mobil cihazlarını ve çözümlerini belirlemelisiniz. Elinizde doğru çözünürlükle, sunucularınızdan en uygun görüntüyü alın. Bu, orijinal resimlerinizin her biri için bir dizi küçük resim oluşturmanızı gerektirir. Bu işlemi otomatikleştirecek mükemmel Javascript paketleri mevcuttur.

Duyarlı Tasarımdan Yararlanın

Bir ziyaretçinin sitenize erişmek için kullandığı her cihazın çözünürlüğü farklıdır. Bir web sitesinin işaretlemesi, tüm farklı cihazlarda ve çeşitli çözünürlüklerde, piksel yoğunluklarında ve mobil cihaz yönelimlerinde mükemmel görünecek şekilde kendini uyarlamalıdır. Görüntüleri yönetmek, manipüle etmek ve sunmak, web geliştiricilerinin karşılaştığı duyarlı tasarımın ana zorluklarından biridir.

Bu zorluklar nedeniyle, birçok web sitesi, ihtiyaç duyulabilecek en yüksek çözünürlüklü görüntülerle oluşturulur ve kesme noktasına bağlı olarak istemci tarafında basitçe küçültülür. Bu süreç verimsizdir ve performansa zarar verir. Ancak, ihtiyaç duyacağınız tüm görüntü boyutlarını ve uygun HTML kodunu oluşturmanıza yardımcı olabilecek açık kaynak aracı Duyarlı Kesme Noktaları gibi seçenekler vardır.

İçerik Dağıtım Ağlarını (CDN'ler) Kullanın

CDNS tipik olarak, içerik gidiş-dönüş sürelerini kısaltmak için dünya çapında stratejik olarak dağıtılmış sunuculara sahiptir. CDN'ler, görüntülerin kullanıcılara daha hızlı sunulmasını sağlar ve çökme olasılığını azaltır, SEO performansını artırır ve kullanıcı deneyimini geliştirir. Bir CDN seçerken, global kapsama düzeyini, önbelleğe alma oranını, uçta mantıksal işlemleri çalıştırma yeteneğini, ortalama yanıt sürelerini ve ortalama geçersiz kılma süreleri gibi diğer metrikleri göz önünde bulundurmanız gerekir.

Değişimin Etkisi

Bu en iyi uygulamaları kullanarak, kullanıcı deneyiminde gerçekten bir fark yaratabilir, ziyaretçileri daha uzun süre kalmaya, daha fazla gezinmeye, etkileşimde bulunmaya ve alışveriş yapmaya teşvik edebilirsiniz. Bu şirketlerin sonuçlarını düşünün:

Bireylerin kiralık konut aramasına yardımcı olan çevrimiçi bir kaynak olan Apartman Listesi, sitesinde yer alan çeşitli apartman topluluklarından görüntülerin veri akışlarını alırken kendisini çeşitli farklı görüntü formatları ve çözünürlüklerle uğraşırken buldu. Tüm bu görselleri masaüstü bilgisayarların yanı sıra çeşitli boyutlardaki mobil cihazlarda sunum için en uygun görsellere dönüştüren ve duyarlı tasarım tekniklerinden yararlanan şirket, dönüşüm oranlarında yaklaşık %20'lik bir artış elde etti.

KOBİ'lerin hızlı ve kolay bir şekilde çevrimiçi mağazalar oluşturmasına yardımcı olan şeffaf ve eksiksiz bir e-ticaret ekosistemi sunan SaaS tabanlı bir e-ticaret platformu olan KartRocket, yükleme süresini veya site performansını etkilemeden görüntü kalitesini sağlamanın bir yolunu bulması gerekiyordu. müşteriler. Küçük küçük resimler, büyük afiş resimleri ve ana ürün resimleri için optimize edilmeleri için resimleri dinamik olarak kontrol etmek için araçlardan yararlandı. Bu yaklaşım, KartRocket'in görüntü yükleme için yanıt süresinde 100 kat artış elde etmesini sağladı.

Alt çizgi

Vakit nakit olduğunda, web sitesi sahipleri, ziyaretçilerinin deneyimlerini iyileştirmek için gerekli tüm adımları atmamayı göze alamazlar. Bir sayfanın yüklenmesindeki saniyelik bir gecikme bile, tüketici açısından gelir ve güven kaybına neden olabilir.

Görüntülerin ve videoların çoğu web sitesindeki en büyük bant genişliği domuzları olduğunu göz önünde bulundurarak, web tasarımınıza ve görüntü formatlarına ciddi bir şekilde bakmanız ve ardından medyanın siteniz için optimize edildiğinden emin olmak için gerekli adımları atmanız gerekir - gelirlerinizden ve gelirlerinizden bahsetmiyorum bile. müşteri algıları – sonuç olarak acı çekmeyin.