Otel web sitesi neden yavaş açılır? Mobil hız için 6 pratik düzeltme
Bir misafir Instagram'da otelinizin reklamını gördü, profilinizdeki linke dokundu. Ekran beyaz. Üç saniye. Dört saniye. Slider'ın ilk fotoğrafı yarım yarım yükleniyor.
Çoğu misafir bu noktada geri tuşuna basıp bir sonraki seçeneğe geçiyor. Üstelik bu kayıp hiçbir istatistikte "kaçan rezervasyon" olarak görünmüyor.
Otel siteleri, internetteki en ağır siteler arasında. Sebebi anlaşılır: Otel satmak güzel fotoğraf göstermek demek. Ama fotoğrafın güzel görünmesiyle ağır olması aynı şey değil.
Önce ölçün: Hangi sayılara bakmalı?
Google, sitelerin hızını PageSpeed Insights aracıyla ölçüyor ve mobil hızı sıralamada dikkate alıyor. Ücretsiz analizimiz de bu ölçümü kullanıyor. Raporda karşınıza çıkacak dört sayı:
| Ölçüm | Ne demek | Hedef |
|---|---|---|
| Mobil hız skoru | Google'ın 100 üzerinden genel hız notu | 90 ve üzeri iyi, 50 altı kötü |
| LCP (ana içeriğin görünme süresi) | Sayfadaki en büyük öğenin (genelde ana fotoğrafın) ekrana gelme süresi | 2,5 saniyenin altı |
| CLS (sayfa kayması) | Yüklenirken içeriğin ne kadar zıpladığı | 0,1'in altı |
| Sayfa boyutu | Ana sayfayı açmak için indirilen toplam veri | 3 MB'ın altı |
Bu sayılar mobil ölçümdür ve orta seviye bir telefonla, ortalama bir mobil bağlantıyı taklit eder. Ofisteki bilgisayarınızda site hızlı açılıyor olabilir; misafirin telefonunda durum çok farklı.
1. Fotoğrafları doğru boyuta getirin
Otel sitelerinin en yaygın sorunu: Fotoğrafçıdan gelen 6000 piksel genişliğindeki, 8–10 MB'lık dosyaların olduğu gibi siteye yüklenmesi. Telefon ekranı en fazla 1000–1300 piksel genişliğinde bir görsel gösterebiliyor; geri kalanı boşa indiriliyor.
Pratik kural:
- Tam ekran (hero) fotoğraflar: en fazla 1920 piksel genişlik
- İçerik içi fotoğraflar, oda galerileri: 1200–1600 piksel
- Küçük kartlar ve önizlemeler: 600–800 piksel
Fotoğrafı küçültmek kaliteyi düşürmez; ekranın zaten gösteremeyeceği pikselleri atar.
2. WebP veya AVIF formatına geçin
JPG ve PNG 1990'lardan kalma formatlar. WebP aynı görüntü kalitesinde genellikle yaklaşık %25–35 daha küçük dosya demek; AVIF çoğu zaman daha da küçük. Bugün kullanılan tarayıcıların neredeyse tamamı ikisini de destekliyor.
- WordPress: WordPress 5.8'den beri WebP yüklemeyi destekliyor. Mevcut fotoğrafları toplu dönüştürmek için Imagify, ShortPixel, EWWW gibi eklentiler var.
- Elle: Squoosh gibi ücretsiz araçlarla fotoğrafları tek tek dönüştürüp boyutlandırabilirsiniz.
PNG'yi yalnızca logo gibi şeffaf arka plan gereken küçük görseller için kullanın. Otel fotoğrafı asla PNG olmamalı; aynı fotoğraf PNG'de JPG'nin birkaç katı yer kaplar.
3. Slider'ı sadeleştirin
Ana sayfadaki 8–10 fotoğraflık otomatik slider otel sitelerinin klasiği. Sorun şu: Misafir ilk fotoğrafı görmeden tarayıcı çoğu zaman hepsini indirmeye başlıyor. Üstelik ikinci ve sonraki kareleri çoğu ziyaretçi hiç görmeden sayfadan ayrılıyor.
Daha iyi seçenek: Tek, güçlü bir ana fotoğraf ve altında galeriye giden bir bağlantı. Slider'dan vazgeçemiyorsanız ilk kare dışındaki fotoğrafların "lazy load" ile (yalnızca gerektiğinde) yüklendiğinden emin olun.
4. Ana fotoğrafı geciktirmeyin
"Lazy load" sayfanın aşağısındaki fotoğraflar için harika; ama ilk ekranda görünen ana fotoğrafa uygulanırsa LCP süresini uzatır. Tarayıcı fotoğrafı ancak sayfanın geri kalanını işledikten sonra indirmeye başlar.
Kural basit:
- İlk ekranda görünen ana fotoğraf:
loading="lazy"olmamalı; mümkünsefetchpriority="high"olmalı. - Ekranın altında kalan her şey:
loading="lazy".
Ana fotoğrafı CSS arka planı olarak (background-image) veren temalarda tarayıcı fotoğrafı daha geç keşfeder. Bu da LCP'yi uzatan sık bir nedendir.
5. Sayfa kaymasını önleyin
Misafir "Rezervasyon" butonuna dokunmak üzereyken üstte bir banner yüklenir, sayfa aşağı kayar ve parmak başka bir yere denk gelir. CLS bu kaymayı ölçer.
En sık nedenleri:
- Boyutu belirtilmemiş fotoğraflar. Fotoğraf etiketlerinde
widthveheightdeğerleri olursa tarayıcı yerini önceden ayırır. - Sonradan yüklenen çerez uyarıları, kampanya şeritleri ve sohbet pencereleri. Bunlar sayfanın üstüne itmek yerine üzerine binen (sabit konumlu) öğeler olmalı.
- Web fontları. Yazı tipi geç gelince metin bir anda boyut değiştirebilir.
6. Gereksiz eklentileri ve kodları temizleyin
Yıllar içinde siteye eklenen ve unutulan şeyler birikir: kullanılmayan bir sayfa oluşturucunun dosyaları, üç farklı istatistik kodu, iptal edilmiş bir kampanyanın pop-up'ı, sadece bir sayfada kullanılan ama her sayfada yüklenen bir galeri eklentisi.
Her biri birkaç yüz kilobayt ve birkaç istek ekler. Yılda bir kez "bu gerçekten kullanılıyor mu?" diye gözden geçirmek siteyi şaşırtıcı ölçüde hızlandırabilir.
Eski kütüphaneler de burada önemli. 10 yılı aşkın süredir güncellenmeyen jQuery 1.x veya Bootstrap 2–3 gibi kütüphaneler hem güvenlik açığı taşır hem de modern telefonlarda gereksiz yük oluşturur.
Ya barındırma?
Ucuz paylaşımlı hosting de siteyi yavaşlatabilir; sunucunun ilk cevabı bir saniyeyi geçiyorsa bunu sağlayıcınızla konuşmanız gerekir. Ama çoğu otel sitesinde asıl sorun sunucu değil, sayfanın kendisi. 12 MB'lık bir ana sayfayı en hızlı sunucu bile telefonda hızlı açamaz.
Bu yüzden sıralama şöyle olmalı: önce fotoğraflar, sonra slider ve eklentiler, en son barındırma.
Sitenizin hızını öğrenin
Ücretsiz analizimiz Google'ın mobil hız testini sizin için çalıştırıyor ve sonucu Türkçe açıklıyor: mobil skorunuz, ana fotoğrafınızın kaç saniyede geldiği, sayfanızın kaç MB olduğu ve fotoğraflar optimize edilse ne kadar hafifleyeceği. Hız, raporda 7 kategoriden biri; aynı analizde yapay zeka görünürlüğünüzü ve iletişim butonlarınızı da görebilirsiniz.
