Resim Sıkıştırma Web Sitenizin Yükleme Süresini Nasıl Etkiler?
Görüntüler genellikle web sitenizin kalitesini artırabilir ve bu görsel pazarlama stratejisi uygulamanın anahtarıdır. Ancak, sitenizin medyası ne kadar ağır olursa, yükleme sırasında etki o kadar büyük olur. Web sitenizin yüklenmesi çok uzun sürerse, ne kadar şaşırtıcı görünüyorsa görünsün – ziyaretçileri korkutacaktır. Cevap, görüntünüzü sıkıştırmak veya optimize etmektir, böylece herhangi bir kalite kaybetmeden küçülür. Bu makalede, görüntü sıkıştırması, size nasıl yardımcı olabileceği ve yükleme süresi açısından tam olarak ne kadar fark yaratılabileceğini göstermek için verileri kullanacağız. Haydi Yapalım şunu!
Görüntünün sıkıştırılması nedir (ve size nasıl yardımcı olabileceği)
Kısacası, sıkıştırma görüntüleri dosya boyutunda bir azalmayı içerir, böylece daha az yer alır ve iki yöntem vardır: ‘kayıp’ ve ‘kayıpsız’. Görsel kaliteyi potansiyel olarak düşürürken görüntünüzü büyük ölçüde optimize eden ilk kişi ve sonuncusu yalnızca görünüşünü etkilemeden dosyalarınızı mümkün olduğunca sıkıştırmaktır. Genellikle, kayıpsız optimizasyon kullanmak istersiniz. Bununla birlikte, kayıplı teknikle fark her zaman çıplak gözle görülmez. Soldaki orijinal görüntü ve sağdaki optimize edilmiş sürümle örneğe bakalım: Oldukça yakınlaşırsanız bazı farklılıkları görebilmelisiniz. Ancak, her iki görüntüyü tam çözünürlükte görüntülediğimiz için farkı görmek zordur. Birçok web sitesinin sahip olduğu sınırlı alan göz önüne alındığında, sıkıştırılmış 500KB sürümü uygun olduğunda yüksek kaliteli 5MB görüntü yüklemek için hiçbir neden yoktur. Ancak, görüntü optimizasyonunun ana faydalarını anlamak kolaydır. Grafiğiniz tarafından kullanılan daha az depolama alanı, sayfanız daha hafif. Bu, kullanıcıların web sitenizi daha hızlı yükleyebileceği anlamına gelir, bu da kullanım ve ‘yapışkan’ üzerinde doğrudan etkisi olmalıdır. Bunu hatırlayarak, görüntü sıkıştırmasının web sitesinin ortalama performansı üzerindeki etkisinin ne kadar olduğunu öğrenelim. Sıkıştırma, web sitenizin yükleme süresini nasıl etkileyebilir (sayılar halinde) Her şey aynı yükleme süresine sahip iki web sitesi yoktur, çünkü her şey benzersiz. Kısacası, bu testin amacı (ortalama olarak) yükleme süresinde görüntü optimizasyonunun ne kadar etkisini sağlamaktır. Bu nedenle, Divi kullanılarak yapılan üç ayrı sayfaya sahip bir web sitesi oluşturuyoruz. İlk sayfada, on resim eklemeye hazırladığımız ev portföyü düzenini görüntüler:
Bu görüntülerin hiçbiri optimize edilmez ve toplamda sayfa 1.7MB ağırlığındadır. Ayrıca, sonuçlarımızı etkileyebilecek herhangi bir unsurdan kaçınmak için bu test sitesinde aktif bir eklentimiz yok. Her şeyi ayarladıktan sonra, bu sayfanın San Jose Server, California Pingdom Araçları kullanılarak ne kadar yüklendiğini test ettik: Daha sonra, testlerimizin sonuçlarını sayılar şeklinde göstereceğiz. Şimdilik, bir ek Divi test sayfası hazırlayacağız, böylece sonuçlarımızı ayıracak daha fazla verimiz var. İkinci girişimiz için, Masonry Blog düzenini seçtik, çünkü bize üstün görüntülerin bazılarını güzel bir şekilde görüntüleme fırsatı sunuyor (bu durumda yedi): Bu sayfa 1.3 MB ağırlığındadır ve optimize edilmeyen bir görüntü koleksiyonu görüntüler. Daha önce olduğumuz örnekle aynı – sadece farklı bir düzen kullandı: Şimdi, her iki sayfanın bir karbon kopyasını yapacağız ve görüntüyü optimize edilmiş bir sürümle değiştireceğiz. Bu nedenle, iki farklı görüntü optimizasyon eklentisi ayrı ayrı kullanacağız – JPEG ve PNG ve WP Smush görüntü sıkıştırmaları. Her iki eklenti de önceki görüntülerimizin eklenti optimizasyonunun karşılaştırılmasında daha aykırıdır, bu nedenle bize beklenenlerin net bir resmini vermelidirler. Her iki sayfanın her bir eklentiyi ayrı ayrı kullanan sonuçları aşağıdadır: Yükleme süresinin optimize edilmiş sayfa boyutunun ilk sayfa boyutu JPEG görüntüsü ve PNG WP SMUSH sonuçlarının sonuçlarını sıkıştırır
bloglar
1.7MB
1.3 MB (-23,%52)
1.69 saniye
1.49 saniye (-11.83%)
1.52 saniye (-10.05)
Çok fazla var Burada sökülmesi gereken bilgiler, bu yüzden sayıların ne anlama geldiğinden bahsedelim. Sonuçlar bize sonuçlarımıza göre, görüntü optimizasyonunun web sitesini yüklerken önemli bir etkisi vardır. Daha spesifik olmak gerekirse, testimiz ortalama olarak, sitenizdeki her bir görüntüyü optimize ederseniz, yükleme sırasında en az% 10'luk bir artış görmeyi bekleyebilirsiniz. Bazılarınız% 10'un yeterli olmadığını düşünebilir. Web sitenizdeki her görüntüyü sıkıştırmanın karmaşıklığını haklı çıkarın. Ancak, WordPress'teki süreci otomatikleştirmenin birçok yolu vardır. Bunu yapamazsanız, temel olarak daha iyi performans için "hayır" diyorsunuz. Daha da önemlisi, görüntü optimizasyonu, yükleme sürenizi artırmak için sitenizde uygulamanız gereken birçok ayardan sadece biridir. Örneğin, iyi optimize edilmiş temalar kullanılarak önbellekleme, GZIP sıkıştırma ve diğer birçok yön düşünülebilir. Her şeyi uygularsanız, web siteniz çok hızlı olacaktır!
Son olarak,% 10'unun puanımızın alt ucunda olduğu belirtilmelidir. Avantajınız, sayfanıza kaç ortalama görüntünün dahil edildiğine ve hangi sıkıştırma araçlarını kullandığınıza bağlı olacaktır. Büyük olasılıkla, yükleme süreniz daha da artabilir. Ancak, kendiniz deneyene kadar öğrenmeyeceksiniz. Sonuç Görüntünüzü optimize etmek, web sitenizin yükleme süresini azaltmanın birçok yolundan biridir. Bununla birlikte, genel performans üzerinde ne kadar etkinin ne kadar etkisi olduğunu hayal etmek genellikle zordur. Ancak WordPress, resminizi optimize etmek için kullanabileceğiniz birçok araç sunar. İsterseniz işlemi bile otomatikleştirebilirsiniz, bu nedenle bundan kaçınmak için bir neden yoktur. Testlerimiz sırasında, görüntü sıkıştırmasının birçok durumda yükleme süresini yaklaşık% 10 artırdığını bulduk. Bu ölçeğin alt ucunda. Test sırasında,%24,29 performans artışı için daha iyi sonuçlar gördük. Kendi sonuçlarınız, kullandığınız sayfanızı ve optimizasyon araçlarını kaç ortalama görüntünün dahil ettiği konusunda çok bağlı olacaktır. WordPress için hangi resim optimizasyon eklentilerini kullanmanız gerektiği hakkında sorularınız var mı? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım! Vectorknight / shutterstock.com tarafından makalelerin mini resmi.