Kısa yanıt ve ilk kontroller
Önce ölçümde geç yüklenen görseli ve sayfadaki gösterim boyutunu belirleyin. Wix’in sunduğu görsel sürümlerini inceleyin; gereksiz büyük kaynak yüklemeyin. Açılış için gerekli görselle aşağıdaki görsellerin yükleme önceliğini aynı tutmayın.
- Yavaş görseli ölçümden belirleyin
- Kaynak ve gösterim boyutunu karşılaştırın
- İlk ekran ile alt içerik yüklemesini ayırın
Bu rehber bir özellik listesi yerine gerçek bir sorunu çözmek için hazırlandı. Adımları kendi Wix editörünüzde ve yayınlanmış sitenizde test edin; arayüz seçenekleri zamanla değişebilir.
Görsel boyutu ile dosya boyutu aynı şey değil
1600 × 1000 piksel bir fotoğrafın dosyası kalite ayarına göre çok farklı boyutlarda olabilir. Görselin piksel çözünürlüğü, sıkıştırma biçimi ve ekranda kapladığı alanı ayrı değerlendirin. Bir kartta birkaç yüz piksel genişliğinde görünen görüntüyü her cihazda dev boyutla taşımaya gerek yoktur.
WebP ve AVIF ne zaman mantıklı?
WebP ve AVIF modern tarayıcılarda çoğu fotoğraf için iyi sıkıştırma sağlayabilir; ancak tüm durumlarda tek formatı körlemesine seçmeyin. Marka logosu, şeffaf grafik ve fotoğrafın kullanımına göre karşılaştırma yapın. Kaynak dosyayı güvenli saklayın ve yayın çıktılarını test edin.
LCP: ilk ekrandaki ana görsel
Largest Contentful Paint için en önemli görsel genellikle hero veya büyük başlık bloğuyla ilişkili medya öğesidir. Sayfanın ilk ekranındaki ana görseli loading=lazy ile geciktirmeyin. Gerektiğinde tek kritik görsele fetchpriority=high verin; tüm resimlere high atamak aynı öncelik sinyalini anlamsızlaştırır.
Alt bölüme lazy loading
Ekranın altında kalan galeri, kart ve blog görselleri için lazy loading ağ kullanımını azaltabilir. Ancak çok erken veya çok geç yükleme algılanan hızı etkiler. Görsel yüklenmeden önce alanını ayırmak için width/height veya CSS aspect-ratio kullanın.
Duyarlı görsellerde srcset/sizes
Kartlar telefonda 340 piksel, masaüstünde 400 piksel genişliğinde görünüyorsa tarayıcıya farklı çıktı boyutları sunabilirsiniz. srcset listesi ve sizes değeri kullanıldığında tarayıcı ekran yoğunluğuna uygun görseli seçer. srcset bozuksa veya gerçek kullanım genişliğini yansıtmıyorsa beklenen fayda azalır.
Alt metin ve bağlam
Alt metin görselin ne olduğunu kullanıcıya yardımcı olacak biçimde anlatmalıdır; anahtar kelime doldurmak için kullanılmamalıdır. “Çorum SEO web tasarım” gibi ilgisiz sözcükleri her fotoğrafa kopyalamak yerine fotoğrafı tanımlayın. Dekoratif görsellerde boş alt metin tercih edilebilir.
Değişiklik sonrası nasıl ölçülür?
Lighthouse ve PageSpeed Insights üzerinde mobil laboratuvar sonuçlarını, mümkünse gerçek kullanıcı ölçümlerini karşılaştırın. Tek seferlik puanla karar vermeyin; LCP, CLS ve INP değişimlerini izlemenin yanında görsellerde kalite kaybı olup olmadığını da kontrol edin.
Mevcut görsellerinizin gerçek boyutlarını ve yükleme sırasını ölçün; ardından bir değişikliği tek seferde yapıp sonucu kıyaslayın.
Teknik SEO hizmetimizi inceleyin →İlgili rehberler
Bu ayarların ürün kapsamı ve sınırları için Filigrunner sayfasını inceleyin.
Kaynaklar ve doğrulama
Google kaynakları teknik SEO ve içerik ilkeleri için verilmiştir. Teklif karşılaştırması ve örnek proje akışları bu rehberin önerileridir; kaynaklar Vebixo Studio için ölçülmüş ticari sonuç kanıtı değildir.
Bu konuyu birlikte tamamlayın.
Wix Uygulama Geliştirme Nedir? Panel ve Site Bileşeni
Wix uygulamasında yönetim paneli, ziyaretçi bileşeni, izinler ve entegrasyonların görevini öğrenin. Tek site çözümüyle App Market ürününü ayırın.
SEO Uyumlu Web Sitesi Nasıl Yapılır? Kontrol Listesi
SEO uyumlu site için tarama, canonical, başlık, içerik, iç bağlantı, mobil deneyim ve performans kontrollerini uygulanabilir sırayla inceleyin.
Web Geliştirme Nedir? Arayüz, Sunucu ve Veri
Web geliştirmenin arayüz, sunucu, veri ve API katmanlarını öğrenin. Bir tanıtım sitesiyle işlem yapan web uygulamasının kapsamını karşılaştırın.
