Kategoriler
CloudFlare

Mobil performans neden önemlidir?

Web mobil hale geliyor. Statista’ya göre, küresel web sayfası görüntülemelerinin yüzde 51’i mobil cihazlarda. Asya ve Afrika gibi bazı bölgelerde, yüzde çok daha yüksektir. Her durumda, bu yüzde yıldan yıla istikrarlı bir şekilde artmaktadır.

Mobil ve Masaüstü Kullanım İstatistikleri

Büyük arama motorları bu eğilimin farkındadır, bu yüzden hızlı mobil yükleme sürelerine sahip sitelere öncelik veriyorlar. Mobil kullanıcılar sınırlı bant genişliğine sahip olabilir, ancak yine de bilgileri hızlı bir şekilde bulmak isterler. Bu kullanıcılar daha az sabırlı olma eğilimindedir, bu da yavaş yüklenen siteler için yüksek hemen çıkma oranları anlamına gelir. (‘Hemen Çıkma oranı’, yalnızca tek bir sayfayı görüntüledikten sonra siteden ayrılan web sitesi ziyaretçilerinin yüzdesidir).

Google ve diğer site hızı yetkilileri, bir mobil site için maksimum yükleme süresinin yaklaşık üç saniye olması gerektiğini belirledi. Üç saniye sonra kullanıcıyı elde tutma oranı önemli ölçüde düşer. Arama motorları, özellikle mobil kullanıcılar için, yavaş yüklenen siteleri arama sonuçlarında daha aşağıya yerleştirerek ‘cezalandırır’.

Bir mobil bağlantı üzerinden üç saniyelik bir yükleme süresi sınırı pek hoş karşılanmaz, ancak mobil yükleme sürelerini kısaltmak için denenmiş ve doğru stratejiler vardır.

Mobil performans nasıl iyileştirilir

Mobil performansı etkileyen birkaç faktör vardır, bu nedenle bir dizi strateji ve en iyi uygulama, yükleme sürelerini iyileştirebilir.

Dosya boyutlarını ve dosya sayısını en aza indirin

Daha hızlı bir yükleme süresi sağlamak için, tüm web sitesi dosyaları olabildiğince küçük yapılmalıdır. Görüntüler genellikle istenen en büyük dosyalardır ve bunlar, görüntü iyileştiriciler kullanılarak veya bunları SVG gibi hafif bir görüntü biçimine dönüştürülerek küçültülebilir .

HTML, JavaScript ve CSS dosyaları da küçültme yoluyla küçültülebilir. Kod küçültme , tüm beyaz alanı ve yorumları koddan çıkarmak ve onu mümkün olan en kompakt şekilde yeniden yapılandırmak anlamına gelir. Bu, dosya boyutunu minimum düzeye indirecektir. Bu, kodu bir insan için pratik olarak okunamaz hale getirse de, bir web tarayıcısı yine de kodu gayet iyi bir şekilde çalıştırabilecektir.

Daha küçük dosya boyutları oluşturmanın yanı sıra, genel dosya sayısı minimumda tutulmalıdır. Bir web sitesini yüklemek için gereken her ek dosya, ek bir istek ve yanıt anlamına gelir ve bu gidiş gelişler yükleme süresine katkıda bulunur. Birden çok JavaScript ve CSS dosyası içeren siteler, tüm JavaScript kodunu tek bir dosyada birleştirmeli ve aynısını CSS ile yapmalıdır. Çok az JavaScript veya CSS gerektiren sayfalar için satır içi stilleri * kullanmak, yükleme sürelerini önemli ölçüde iyileştirebilir.

* Tipik olarak web geliştiricileri HTML, JavaScript ve CSS kodunu farklı dosyalara yazar. Bir geliştirici, ‘satır içi stiller’ adı verilen bir teknik kullanarak JavaScript ve / veya CSS kodunu HTML ile aynı dosyaya yazabilir.

Kaynakları uçta önbelleğe alın

Tipik olarak bir kullanıcı bir web sitesini ziyaret ettiğinde, kullanıcının cihazının web sitesi dosyalarını almak için web sunucusuyla iletişim kurması gerekir. Web sunucusu San Francisco’daysa ve kullanıcı Berkeley’deyse (10 mil uzakta), bu oldukça hızlı olmalıdır. Peki ya kullanıcı Tokyo’daysa (5000 mil uzakta)? Bu, her istek ve yanıtın binlerce mil yol kat etmesi gerektiği anlamına gelir ve bu da web sitesinin yüklenmesinde önemli bir gecikme olur.

Bu sorunu hafifletmenin yaygın bir yolu, bir İçerik Dağıtım Ağı (CDN) kullanmaktır . Bir küresel CDN içeriği önbelleğe ağ kenar . Bu, CDN’nin tüm dünyadaki veri merkezlerinde yaşayan önbelleğe alma sunucularına sahip olduğu anlamına gelir . İnternet erişimi olan hiç kimse bir veri merkezinden asla çok uzakta değildir. Bu veri merkezi sunucuları, web sitesi verilerini önbelleğe almak için orijinal web sunucuları ile iletişim kurabilir, böylece CDN’yi kullanan bir web sitesini ziyaret eden kullanıcılar web sitesi dosyalarını yerel veri merkezlerinden alabilirler. Bu, konumlarından bağımsız olarak kullanıcılar için hızlı bir istek-yanıt süresi sağlar.

Önbellek API Çağrıları

API çağrıları, harici kaynaklardan veri almaya yönelik HTTP istekleridir. Örneğin, Rotten Tomatoes gibi bir film inceleme sitesi, Rotten Tomatoes’a göz atan kullanıcıların yerel film gösterim saatlerini görebilmesi için Fandango gibi bir bilet hizmetine API çağrıları yapabilir. API çağrıları, güçlü bir deneyim oluşturmaya ve gereksiz işi azaltmaya yardımcı olabilirken, aynı zamanda yükleme sürelerini yavaşlatabilen yeni HTTP istekleri de oluşturur.

Bu fazladan HTTP isteklerini en aza indirmek için API çağrıları önbelleğe alınabilir. Yukarıdaki film gösterim zamanı örneğimizde, Rotten Tomatoes’un Los Angeles film seanslarını günde bir kez getirmesi yeterlidir. Sitelerini bu API çağrısını günde bir kez önbelleğe alacak şekilde yapılandırabilirler. Bu şekilde, her gün 10.000 Los Angeles kullanıcısı Rotten Tomatoes’u ziyaret ederse, bu kullanıcılardan yalnızca ilkinin Fandango’ya API çağrısını beklemesi gerekecek.

Görünür İçeriğe Öncelik Verin

Bir kullanıcının bir web sayfasını yüklerken hemen gördüğü şey genellikle buzdağının görünen kısmıdır; sayfanın geri kalanını görmek için aşağı kaydırmaları gerekir. Herhangi bir kaydırma gerçekleşmeden önce bir kullanıcının ekranında görünen içeriğe “ekranın üst kısmı” içeriği denir. Web geliştiricileri, ekranın üst kısmındaki içerik her zaman önce yüklenecek şekilde kod yazmalıdır. Bunu başarmak için kullanılan tekniklerden biri, kullanıcı sayfayı aşağı kaydırdıkça ekranın alt kısmındaki içeriği dinamik olarak yükleyerek çalışan geç yükleme olarak adlandırılır.

Yönlendirmelerden Kaçının

Çeşitli nedenlerle, bazı web siteleri sayfa yüklemelerinde yeniden yönlendirmeler oluşturur. Örneğin, 301 yönlendirmeleri, yeniden adlandırılan veya yeniden markalanan web sitelerinde yaygın olarak kullanılır. Yönlendirmeler değerli yükleme süresini tükettiğinden, bu uygulamadan mümkün olduğunca kaçınılmalıdır.

Özet

Mobil tarama web’i ele geçirdikçe, yüksek performanslı bir mobil siteye sahip olmak giderek daha önemli hale geliyor. Hızlı mobil siteler, daha yüksek etkileşim ve iyileştirilmiş dönüşüm oranlarının yanı sıra bir SEO desteği ile ödüllendirilir. Web sitesi sahipleri, bu avantajlardan yararlanmak için yukarıda belirtilen stratejilerin bir kısmını veya tamamını uygulamalıdır.

Kaynak:https://www.cloudflare.com/learning/performance/how-to-make-a-site-mobile-friendly/

Spreading Love by Sharing