Web

Elementor ile Core Web Vitals nasıl geçilir? WordPress hız rehberi

Elementor hız optimizasyonunun özeti şudur: önce ölçün, sonra en büyük görseli ve yazı tiplerini sadeleştirin, Elementor’un performans ayarlarını açın, önbellek ekleyin ve gereksiz eklentileri kaldırın. Core Web Vitals’ın “iyi” eşikleri LCP için 2,5 saniye, INP için 200 milisaniye ve CLS için 0,1’dir. Bu eşikleri aşan sayfalarda sorunun büyük kısmı üç yerden gelir: ilk ekrandaki görsel, yazı tipleri ve gereksiz betikler.

Aşağıda adımları sırayla veriyoruz. Elementor ve eklenti ayar adları sürümle değişebilir; ekranınızdaki karşılığı bulun.

1. Ölçüm: Önce nerede olduğunuzu görün

İki tür veri vardır ve ikisine de bakmak gerekir:

  • Laboratuvar verisi: Tek bir test sonucudur. PageSpeed Insights ve benzer araçlar bunu verir. Hata ayıklamak için iyidir.
  • Saha verisi: Gerçek kullanıcıların deneyimi. PageSpeed Insights’ın üst bölümünde ya da Search Console’daki Core Web Vitals raporunda görünür. Google’ın değerlendirmesinde esas olan budur.

Ölçüm kuralları:

  1. Ana sayfa, bir hizmet sayfası, bir blog yazısı ve bir iletişim sayfası olmak üzere şablon türü başına ölçün.
  2. Mobil sonucunu esas alın. Masaüstü genellikle daha iyidir.
  3. Aynı sayfayı üç kez ölçün, ortalamayı alın. Tek bir sonuç yanıltıcı olabilir.
  4. Önce “fırsatlar” ve “tanılar” bölümünü okuyun. En büyük kalemi önce çözün.

Hedefi yazın: örneğin “mobilde LCP 2,5 saniyenin altı”. Hedefsiz optimizasyon bitmez.

2. Görsel ve font: En büyük kazanç burada

Çoğu Elementor sitesinin yavaşlığı görsellerden gelir.

Görsel:

  • Biçim olarak WebP kullanın. Logo ve ikonlarda SVG tercih edin.
  • Görüntülenen boyutun en fazla iki katı genişlikte dosya yükleyin. 4000 piksellik bir fotoğrafı 600 piksellik alanda kullanmak boşa yüktür.
  • Ana (hero) görsel, sayfanın en büyük öğesidir ve LCP’yi belirler. Bu görselde tembel yüklemeyi (lazy load) kapatın ve öncelikli yükletin. İlk ekran dışındaki görsellerde tembel yükleme açık olsun.
  • Görsellere width ve height değeri verin. Aksi halde sayfa yüklenirken kayar, CLS bozulur.
  • Arka plan görseli yerine mümkünse gerçek bir görsel öğesi kullanın; tarayıcı onu daha erken fark eder.
  • Kaydırıcı (slider) ve video arka planı ilk ekranda LCP’yi kötüleştirir. Tek görselli, sade bir ilk ekran genellikle daha hızlıdır.

Font:

  • Yazı tipi ailesini ve kalınlık sayısını azaltın. Kullanmadığınız ağırlıkları yüklemeyin.
  • Fontları kendi sunucunuzdan servis etmek, dış sunucuya bağlantı gecikmesini azaltır.
  • Yazı tipi yüklenirken metnin görünür kalması için font-display: swap benzeri bir ayar kullanın.
  • İkon kütüphanelerini yalnızca kullandığınız ikonlarla sınırlayın.

3. Elementor ayarları

Elementor’un kendi performans ayarları vardır. Yönetim panelinde Elementor > Ayarlar > Performans (ya da Özellikler) bölümüne bakın. Sürüme göre adlar değişir ama genel olarak şu işlevler önemlidir:

İşlev Ne yapar
Optimize edilmiş görsel yükleme Ana görsel ve diğer görselleri uygun şekilde yükler
Optimize edilmiş CSS yükleme Yalnızca gerekli stil dosyasını yükler
Arka plan görselinde tembel yükleme Ekran dışındaki arka plan görsellerini erteler
Esnek kapsayıcı (container) yapısı Eski bölüm/sütun yapısına göre daha az HTML üretir

Önbellek eklentinizin kendi tembel yükleme ya da CSS ayarı varsa, Elementor’un aynı işlevdeki ayarıyla çakışabilir; birini seçin ve değişiklikten sonra test edin.

Sayfa tasarımında şu alışkanlıklar yükü azaltır:

  • Eski bölüm/sütun yapısı yerine esnek kapsayıcı ve güncel widget’ları tercih edin; çıktı daha sade olur.
  • İç içe çok sayıda bölüm/kapsayıcı kullanmayın. Her katman fazladan HTML’dir.
  • Animasyonları ve hareket efektlerini azaltın. Her sayfada onlarca widget’ta animasyon olmasın.
  • Küresel (global) renk ve yazı tipi ayarlarını kullanın; her öğeye tek tek stil vermeyin.
  • Tekrar eden bölümleri şablon olarak kaydedin ve tek yerden yönetin.

4. Önbellek ve CDN

  • Sayfa önbelleği: WordPress sayfalarını hazır HTML olarak sunan bir önbellek eklentisi kullanın. Sunucunuzun kendi önbellek özelliği varsa onu tercih edin.
  • Tarayıcı önbelleği: Statik dosyalar (görsel, CSS, JS) tarayıcıda saklansın.
  • Sıkıştırma: Sunucu GZIP ya da Brotli sıkıştırması açık olmalı.
  • CDN: Ziyaretçileriniz farklı bölgelerdeyse statik dosyaları bir içerik dağıtım ağından sunun. Uluslararası trafikte fark belirgin olur.
  • Sunucu: Hosting yavaşsa tüm ayarlar sınırlı kalır. Sunucu yanıt süresi (TTFB) yüksekse paketi, PHP sürümünü ve veritabanını gözden geçirin.

Önbellek eklentisinin “CSS/JS birleştirme” ve “gecikmeli yükleme” gibi gelişmiş seçeneklerini tek tek açın ve her açışta siteyi test edin. Toplu açmak sayfayı bozabilir.

5. Eklenti temizliği

Her eklenti sayfaya CSS ve JavaScript ekleyebilir. Eklenti sayısı değil, her birinin yükü önemlidir.

  1. Kullanılmayan eklentileri silin (devre dışı bırakmak yetmez).
  2. Aynı işi yapan eklentileri teke indirin (iki önbellek, iki güvenlik gibi).
  3. Her eklenti için “bu sayfada çalışmalı mı?” diye sorun. Yalnızca iletişim sayfasında gereken form eklentisinin betiğini tüm sitede yüklemeyin.
  4. Üçüncü taraf betikleri (sohbet pencereleri, etiket yöneticisi içindeki izleme kodları, harita) gecikmeli yükleyin. INP’yi sıkça bu tür betikler bozar.
  5. Eklentiyi kaldırmadan önce yedek alın ve önce test ortamında deneyin.

6. Yayın öncesi test

Her değişiklikten sonra ve yayın öncesinde şunları kontrol edin:

  • [ ] Şablon türü başına mobil PageSpeed testi yapıldı
  • [ ] LCP öğesi belirlendi (genellikle hero görsel ya da başlık) ve hızlı yükleniyor
  • [ ] Sayfa yüklenirken öğeler kaymıyor (CLS)
  • [ ] Menü, form ve düğmeler tıklamaya hızlı yanıt veriyor (INP)
  • [ ] Önbellek temizlendikten sonra da sayfa doğru görünüyor
  • [ ] Formlar, ödeme ve diğer kritik işlevler çalışıyor
  • [ ] Yedek alındı, geri dönüş planı var

Yayından sonra Search Console’un Core Web Vitals raporunu izleyin. Saha verisi birkaç hafta içinde oluşur. Tek bir iyi laboratuvar sonucuna güvenmeyin.

Hangi sırayla çalışmalı?

Zamanınız sınırlıysa sırayı şöyle tutun: önce ilk ekran görselini küçültüp doğru yükletin, sonra önbelleği açın, ardından yazı tiplerini sadeleştirin, en son eklenti temizliğine geçin. Her adımdan sonra ölçüm yapın; hangi değişikliğin işe yaradığını bilmek bir sonraki sitede zaman kazandırır.

Sık sorulan sorular

Elementor yavaş bir sayfa oluşturucu mu?

Doğru ayarlanmamışsa fazladan kod üretir. Sade bir yapı ve açık performans ayarlarıyla iyi sonuç almak mümkündür. Asıl yavaşlığın büyük kısmı görseller, fontlar ve üçüncü taraf betiklerden gelir.

Core Web Vitals sıralamayı etkiler mi?

Google bunu sayfa deneyimi sinyallerinden biri olarak kullanır, ancak içeriğin alakası çok daha belirleyicidir. Hız asıl olarak ziyaretçi deneyimini ve dönüşümü iyileştirir. Sıralama sözü vermek doğru olmaz.

Önbellek eklentisi tek başına yeter mi?

Hayır. Büyük görsel ya da ağır betik varsa önbellek etkisi sınırlı kalır. Önce kaynağı küçültün.

Mobil mi masaüstü mü önemli?

Mobil. Çoğu sitede ziyaretin büyük kısmı mobil olur ve eşikleri aşmak orada daha zordur.

Kaç puan hedeflemeliyim?

Puan yerine Core Web Vitals eşiklerini hedefleyin. Laboratuvar puanı yalnızca bir araçtır.

Profaj olarak WordPress sitelerinde hız hedefini kurulumdan önce belirliyor, şablon türü başına ölçümle yayına çıkıyoruz.

İlgili sayfalar

Ne sunuyoruz

İşinize uygun hizmetlerimiz