Geliştirme

Yükleme hızı: neden paradır

Yavaş bir site ziyaretçileri teklifi görmeden kaybeder. Genellikle neyin yavaşlattığını, neyin hızla düzeltildiğini ve neyin mimariye gömülü olduğunu ele alıyoruz.

Site hızı nadiren ticari bir parametre olarak algılanır. Raporlarda talep başı maliyetin yanında görünmez ve biri şikâyet ettiğinde konuşulmaya başlanır. Oysa yavaş yükleme sonuçtan iki kez düşer: ziyaretçilerin bir kısmı sayfayı beklemeden gider, geri kalanlar ise sayfayı aramada daha seyrek görür, çünkü hız sayfa kalitesi değerlendirmesine dahildir.

Hız nasıl kayba dönüşür

Mekanik basittir. Kişi bağlantıya tıkladı ve boş bir ekrana bakıyor. Ekran boşken teklifiniz hakkında hiçbir şey bilmez — ne fiyat, ne koşullar, ne argümanlar. Onu yalnızca bekleme alışkanlığı tutar ve bunun bir sonu vardır.

Ardından üç tipik sonuç vardır ve üçü de sizin için kârsızdır:

  • Ziyaretçi sekmeyi kapatır ve bir sonraki sonucu — rakibi — açtığı aramaya döner.
  • Ziyaretçi yüklemeyi bekler ama yavaş bir sitede daha tutumlu davranır: daha az sayfa görüntüler, ürün sayfalarını daha az açar, forma daha az ulaşır.
  • Ziyaretçi düğmeye basar, hiçbir şey olmaz, bir kez daha basar. En iyi ihtimalle bu kopya bir talep, en kötü ihtimalle terk edilmiş bir sepettir.

Reklam ayrıca işler. Her ziyaret için yükleme anında değil, tıklama anında ödeme yaparsınız. Sayfa uzun sürede açılıyorsa fiilen gerçekleşmemiş bir ziyaret için ödeme yapmışsınızdır.

Ve üçüncü katman — arama. Arama motorları gerçek kullanıcı yükleme deneyimini ölçer; bu metrikler Core Web Vitals olarak bilinir: ana içerik ne kadar hızlı görünüyor, sayfa bir eyleme ne kadar hızlı yanıt veriyor, yükleme sırasında düzen zıplıyor mu. Hız alakayı geçmez ama içerik kalitesi karşılaştırılabilir olduğunda yavaş siteye karşı çalışır.

Hız teknik mükemmeliyetçilikle ilgili değildir. Gösterimi için ödeme yaptığınız şeyi kaç kişinin gerçekten gördüğüyle ilgilidir.

Genellikle ne yavaşlatır

Görseller

İlk ve en yaygın neden. Doğrudan fotoğraf makinesinden alınmış veya stok kütüphanesinden indirilmiş bir fotoğraf, sayfanın ihtiyacından katlarca ağırdır. Ana sayfada böyle on görsel — ve diğer her şeyden bağımsız olarak yükleme ağırlaşır.

Buradaki tipik hatalar: tasarıma göre hazırlanmış boyut yerine orijinal boyut; modern formatlar yerine eskimiş format; farklı ekranlar için varyant olmaması, bu yüzden telefonun büyük monitör için hazırlanmış görseli indirmesi; sayfanın çok aşağısındakiler dahil tüm görsellerin aynı anda yüklenmesi.

İyi haber: bu neredeyse her zaman siteyi yeniden yapmadan düzeltilir.

Gereksiz betikler

Tarayıcıda çalışan kodun önce indirilmesi, sonra ayrıştırılması, sonra çalıştırılması gerekir. Zayıf bir telefonda son iki aşama, geliştiricinin iş dizüstü bilgisayarındakinden belirgin şekilde daha uzun sürer.

Betikler fark edilmeden birikir. Tek bir efekt için bir kütüphane eklendi, sonra kaydırıcı için bir tane daha, sonra altı simge için bütün bir simge seti, sonra tüm ağırlıklarıyla ağır bir yazı tipi paketi. Tek tek önemsiz; birlikte — ilk ekran çizilmeden önce bir gecikme.

Üçüncü taraf widget'lar

Sohbetler, haritalar, dış servislerin formları, yorum widget'ları, sayaçlar, reklam sistemlerinin pikselleri, abonelik açılır pencereleri. Her widget, hızını kontrol etmediğiniz başkasının sunucusundan gelen koddur.

En kötü durum, widget'ın sayfa çizimini engelleyecek şekilde bağlanmasıdır. O zaman başkasının yavaş sunucusu içeriğinizin gösterimini doğrudan geciktirir. Widget'ları basitçe saymak da faydalıdır: bir kısmı genellikle çoktan kapanmış bir görev için eklenmiştir ve onları kaldırmak hızlanmanın en ucuz yoludur.

Sunucu ve veritabanı sorguları

Bazen tarayıcının çizecek bir şeyi yoktur, çünkü sunucu uzun süre düşünür. Nedenler farklıdır: verimsiz veritabanı sorguları, önbellek yokluğu, zayıf barındırma paketi, her sayfa görüntülemesinde ağır hesaplamalar. Dışarıdan belirli bir görsele bağlı olmadan "site genel olarak yavaş" gibi görünür.

Yazı tipleri ve zıplayan düzen

Ayrı bir konu — gecikme değil, hoş olmayan davranış: metin önce görünmez veya bir yazı tipiyle gösterilir, sonra değiştirilir, bloklar kayar, reklam ortaya eklenip içeriği iter. Resmi olarak sayfa hızlı yüklendi; fiilen ilk saniyelerde kullanılamaz. Bu da sayfa kalitesi değerlendirmesinde hesaba katılır.

Mobil internet istisna değil, normdur

Geliştirme ve teslim alma neredeyse her zaman hızlı bir bağlantıda ve iyi bir cihazda yapılır. Gerçek ziyaretçi ise siteyi çoğu zaman telefondan, metroda, yolda, zayıf sinyalle, birkaç yıl önce alınmış bir cihazla açar.

Bu iki durum arasındaki fark çok büyüktür ve yalnızca bağlantı hızına indirgenemez. Zayıf bir işlemcide en pahalıya kodun çalıştırılması gelir: ne kadar çok betik, fark o kadar büyük. Bu yüzden hız ofis Wi-Fi'ında değil, gerçeğe yakın koşullarda kontrol edilmelidir.

Ne düzeltilir, ne mimariye gömülüdür

Sorunların bir kısmı hedefli ve görece hızlı çözülür:

  1. Görselleri sıkıştırmak ve doğru hazırlamak, farklı ekranlara farklı boyutlar sunmak.
  2. İlk ekranda görünmeyenlerin yüklenmesini ertelemek.
  3. "Ne olur ne olmaz" diye eklenmiş kullanılmayan betikleri ve kütüphaneleri kaldırmak.
  4. Üçüncü taraf widget'ları çizimi engellemeyecek şekilde, ağır olanları kullanıcı eylemiyle bağlamak.
  5. Sunucuda önbelleği ve sıkıştırmayı ayarlamak.
  6. Yazı tiplerinin ve ağırlıklarının setini sınırlamak.

Diğer kısım hedefli olarak düzeltilemez. Sayfa baştan tarayıcının önce büyük bir uygulama indirip ancak sonra içeriği çizmeye başladığı şekilde kuruluysa, hiçbir görsel optimizasyonu bunu telafi edemez. Her sayfada tüm özellik setinin kodunun yüklendiği aşırı yüklü site oluşturucular ve temalar; veri hacmi hesaba katılmadan tasarlanmış bir veritabanı; sayfayı her seferinde sıfırdan oluşturan bir sunucu için de aynısı geçerlidir.

Birini diğerinden ayırt etmenin işareti: görsellerin ve betiklerin temizlenmesinden sonra belirgin bir iyileşme yoksa sorun içerikte değil, yapıdadır. O zaman dürüst konuşma optimizasyonla değil, temelde neyin değişeceğiyle ilgilidir. Bu tür durumları siteler ve web uygulamaları üzerindeki çalışmalarımızda ele alıyoruz.

Bu hafta ne yapmalı

  1. Sitenizi telefondan mobil internetle açın — ana sayfa, katalog ve bir iç sayfa.
  2. Ana sayfaları herhangi bir herkese açık ölçüm aracından geçirin ve masaüstü değil mobil moda bakın.
  3. Ana sayfadaki en ağır görselin ne kadar olduğuna ve bu boyuta ihtiyacı olup olmadığına bakın.
  4. Tüm üçüncü taraf widget'ların listesini çıkarın ve hangilerine hâlâ ihtiyaç olduğunu dürüstçe yanıtlayın.
  5. Yüklemenin ilk saniyelerinde düzenin zıplayıp zıplamadığını kontrol edin.
  6. Bir kez değil düzenli ölçmeye başlayın: hız, yeni içerik ve yeni bağlantılarla birlikte kademeli olarak bozulur.

Hız tek seferlik bir iş değil, korunması gereken bir parametredir. En kolayı, sitenin diğer göstergeleriyle birlikte — trafik kaynaklarına ve taleplere bakılan yerde, yani analitikte — izlendiğinde yapılır.