Çoğu pazarlama organizasyonunda, markanın web sitesinin mobil hızı her zaman öncelik listesinin en üstünde yer almaz. Bu konunun pazarlamanın değil de site geliştiricinizin ilgi alanına girdiğini düşünüyor olabilirsiniz. Ancak gerçek böyle olmayabilir. Bazen, bir markanın sitesine hayat veren etkileyici kreatifler dikkatli bir şekilde yönetilmediğinde mobil site hızını düşürebilir. Bu durum, hemen çıkma oranının artması ve dönüşümlerin azalması riskini arttırarak gelir fırsatlarının kaçırılmasına neden olur.
Mobil sayfa hızı kazanımları arıyorsanız ilk iş olarak sitenizdeki resimleri yeniden değerlendirin. Aşağıda, Google ile Alphabet'ten görsel örnekler de dahil olmak üzere geliştiricinizle birlikte uygulayabileceğiniz daha teknik ipuçlarını sunuyoruz. Bu ipuçları, şirketinizin resim optimizasyonunun meyvelerini toplamasını sağlarken nihai olarak da kullanıcılarınız için daha hızlı bir mobil deneyim oluşturacaktır.
1. Sitenizdeki resimleri önem sırasına koyun
Sitenizdeki resimleri optimize etmeden önce hepsinin gerekli olup olmadığını düşünün. Yüksek çözünürlüklü bir fotoğraf şüphesiz harika görünüyor olabilir. Peki ama kitlenizin almasını istediğiniz mesajın iletilmesine gerçekten yardımcı oluyor mu? Bir animasyonlu GIF dosyası sadeleştirilerek sadece koddan oluşan daha verimli bir animasyona dönüştürülebilir mi? Daha da iyisi, tamamen kaldırılabilir mi?
Gereksiz öğelerin kaldırılması bakım yükünü ve karmaşayı azaltır. Bir resmin yerine metin veya CSS (birkaç satırlık kodla stilleri, şekilleri ve efektleri tanımlamak için kullanılan geçişli stil sayfaları) getirilebilirse, geliştiricileriniz kreatif süreçte zorlanmayacak ve kullanıcılarınız indirme boyutundan tasarruf edecektir.
Alphabet bünyesindeki sitelerden biri olan Verily bu yöntemi kullandı. Ekibin resimlerin boyutlarını küçültmek için kullandığı teknikler sayesinde site sadeleşti ve hafifledi. Ana bölümde sadece bir piksel genişliğinde, zekice animasyonlu hale getirilmiş bir gradyan resimden yararlanıldı. Gradyan kodla da oluşturulabilirdi, ancak bunu yapmak, daha maliyetli ve görsel açıdan uyumsuz performans sorunlarına yol açabilirdi. Tasarımcı ile geliştirici, estetik ve mobil site performansı arasında kusursuz denge sağlamak için birlikte çalıştı.
Sitenin mobil versiyonunda, bu animasyon daha da sadeleştirilerek kodlanmış bir dizide kademeli olarak değişen düz bir arka plan rengine dönüştürülmüş durumda. Bu animasyonların sadeliği, ağır JavaScript çerçeveleri veya aşırı dosya boyutları içermeyen hafif bir sayfa tasarımına olanak tanıyor. 3G ağ simülasyonunda dahi, ana sayfa neredeyse anında yükleniyor ve Lighthouse Performans Skoru 92 çıkıyor. Bu sonuç, en yüksek performans gösteren sitelerin yer aldığı üst yüzdelik dilime girmek için gereken sonucun sadece birkaç milisaniye uzağında.
2. Verimli bir görsel biçimi seçin
Kullanılabilecek biçim sayısı bu kadar çok olunca, bu biçimlerden hangisinin en verimli olduğunu bilmek zor olabilir. Her şey kullanım örneğine bağlı olsa da, doğru biçimi seçmek sayfa boyutunuzda birkaç baytlık tasarruf sağlayabilir. Resim kalitesinde kayıp olmaksızın JPEG'e kıyasla %30 daha yüksek sıkıştırma oranıyla fotografik ve yarı saydam resimlerde kullanılabilen WebP ile başlamayı amaçlayın. Ardından tarayıcı desteği için şunları kullanın:
- JPEG: Saydamlığın olmadığı fotoğraflar
- PNG: Saydam arka planlar
- SVG: Ölçeklenebilir simgeler ve şekiller
Google olarak Fighting Piracy (Korsanlıkla Mücadele) sitemizde bu yaklaşımı benimsedik. Ekibimiz, basit şekillerden türetilmiş akıcı ve hafif animasyonlar oluşturmak için SVG biçimini kullandı. Bu sayfanın önceki tasarım konseptlerinde her biri 300 kilobayttan büyük, yani önerilen boyutun iki katını aşan GIF'ler ve videolar yer alıyordu.
Ancak, gelişen performans kültürü kapsamında uyulması gereken "sayfa ağırlığı bütçeleri" belirleyen ekip, görsel ağırlıklarını on kat azaltmayı başardı. Bunun için geliştirici ile tasarımcı arasında yakın teknik iş birliği gerekiyordu ama mobil sayfa hızındaki iyileşmeler için bu çabaya değerdi.
3. Görüntüleri sıkıştırın ve yeniden boyutlandırın
Resimleri optimize etmek, size en büyük bayt tasarruflarını ve mobil site performansı iyileşmelerini sağlayabilir. Resimleri sıkıştırmak, meta verileri kaldırmak (tarih ve saat gibi) ve farklı kalite ayarlarıyla denemeler yapmak gibi en temel optimizasyonların bile yardımı dokunabilir. Artık geliştiriciler bir resmin birden fazla boyutunu tanımlayabildiğinden ve tarayıcı kullanıcının ekran boyutu için en uygun boyutu seçebildiğinden, duyarlı resimler sunmak her zaman olduğundan daha kolay.
Her şeyden önemlisi, zamandan tasarruf etmek ve resimlerin her zaman optimize edilmesini sağlamak için bu işlemlerin büyük bölümü otomatikleştirilebilir. Örneğin, sayıları yüzleri veya binleri bulan resimler bir komut dosyası yardımıyla yeniden boyutlandırılabilir veya sıkıştırılabilir. Bu sayede, tasarımcıların manuel iş yükü azalır ve heyecan verici çalışmalar için daha çok zamanları kalır.
Bir Accelerated Mobile Page (AMP) oluşturulurken, özel resim etiketleri bu optimizasyonları otomatikleştirir. Ayrıca, Google AMP Önbelleği, tarayıcı bellek sorunlarını önlemek için maksimum resim ölçülerine sınırlama getirir ve gelecekte daha hızlı yüklenmeleri için resimleri önbelleğe kaydeder.
BMW örneğinde, lüks araba markası, bir yandan etkileyici resim ve videolarını korurken aynı zamanda performansı yüksek ve mobil öncelikli bir yaklaşım oluşturmak için yola çıktı. AMP'nin verimli resim etiketleri ve diğer hızlı özellikleri sayesinde, yeni AMP sitesi, 4 kat daha yüksek bir yüklenme süresine ulaştı ve mobil kullanıcı sayısının %50 artmasını sağladı. Web sitesi ayrıca yüksek kaliteli ve uygulama benzeri bir deneyim sunmak için AMP'nin hızın Progresif Web Uygulaması (PWA) teknolojilerinin zengin özellikleriyle bir araya getiriyor.
4. Yükleme tekniklerini kullanın
Resimleri sıkıştırmak ve yeniden boyutlandırmak her tasarımcı ve geliştiricinin uygulaması gereken en temel yaklaşımdır. Bir adım ileri gitmek için, geliştiriciler kullanıcının cihazına, ekran boyutuna ve hatta ağ şartlarının kalitesine göre resmin farklı versiyonlarını koşullu olarak yayınlayabilir. Bu, kullanıcıların özgün tarama koşullarından bağımsız olarak, geliştiricilerin herkes için hızlı yüklenen bir site oluşturmasını sağlar.
Resimleriniz etkili bir şekilde optimize edildikten sonra, doğru anda gösterildiklerinden emin olun. Kullanıcılar sayfanıza ilk geldiklerinde, genellikle "ekranın üst kısmındaki" içerik olarak adlandırılan, görüntü alanlarındaki tüm içeriği anında görmek isterler. Geç yükleme adı verilen teknikle, web sayfanızın bu sınırlı görünümde ilk sunulan resimleri yüklemeye öncelik vermesini ve ekran dışı resimleri ihtiyaç anında yüklemesini sağlayabilirsiniz.
Alman e-ticaret şirketi bücher.de, resimleri yalnızca kullanıcının görüş alanına girdiklerinde yüklüyor. Sayfanın görünen kısmındaki içeriğe öncelik verildiği için sayfa anında yükleniyor. Bu ve başka sayfa optimizasyonları sayesinde, sitelerini %33 oranında hızlandırmayı ve yüklenme süresini 3,5 saniyeye indirmeyi başardılar.
Büyük resimlerin yüklenmesi uzun sürdüğünde, yer tutucular, ilerleme durumu göstergeleri gibi progresif yükleme teknikleri veya progresif JPEG gibi verimli biçimler kullanmak faydalı. Bu, kullanıcılara ilerleme kaydedildiği hissini verir ve siteyle etkileşimde bulunma sürelerini uzatır. Tasarım Danışmanı Mustafa Kurtuldu'nun da belirttiği gibi: "Amaç, boşluğu doldurmak ve sizi meşgul etmek."
Sonraki adımlar: Mobil hızı bir Temel Performans Göstergesi (TPG) haline getirin
Resimleri optimize etmek, markanızın sitesindeki dönüşüm oranlarını artırmanın basit ve uygun maliyetli bir yolu. Ancak hız optimizasyonunu uzun vadede sürdürülebilir kılmak istiyorsanız, site hızı organizasyonunuz için bir TPG haline gelmeli.
