Elementor Hız Optimizasyonu: Adım Adım Rehber

Elementor hız optimizasyonunun kısa özeti: önce sayfayı ölçün, sonra Elementor’un kendi Performance ve Features ayarlarını açın, eski section yapısını container’a taşıyın, görselleri küçültüp ilk ekran dışını tembel yükleyin ve gereksiz öğe ile yazı tipi yükünü azaltın. Her adımın etkisi siteye göre değişir; bu yüzden her değişiklikten sonra yeniden ölçün.

Bu rehber yalnızca Elementor’a özgü ayarları kapsar. Sunucu, PHP, veritabanı ve CDN düzeyindeki adımlar için ayrı bir yazı var: WordPress hızlandırma rehberi. Bilgiler Elementor’un resmî yardım merkezi ve sürüm notlarına dayanır.

Elementor hız optimizasyonu için önce ölçün

Ayar açmadan önce temel değerleri kaydedin.

1. PageSpeed Insights’ta sayfayı mobil için çalıştırın.
2. LCP, CLS ve INP değerlerini ve “Fırsatlar” listesini not alın.
3. Tarayıcı geliştirici araçlarında (Elements sekmesi) sayfadaki toplam öğe sayısına kabaca bakın; çok iç içe sarmalayıcı varsa Container adımı önceliklidir.

Aynı sayfayı her değişiklikten sonra yeniden ölçün. Böylece hangi ayarın işe yaradığını net görürsünüz. Ölçüm sonuçları laboratuvar verisidir; gerçek kullanıcı verisi için aynı raporun “Alan verisi” bölümüne de bakın.

Elementor’u ve eklentileri güncelleyin

Elementor, performans iyileştirmelerinin birçoğunu sürüm güncellemeleriyle getiriyor. Sürüm notlarından örnekler:

Core ve Pro’yu aynı anda güncelleyin ve önce staging ortamında deneyin. Güncelleme sonrası Elementor > Araçlar > Dosya ve Verileri Yeniden Oluştur (Regenerate Files & Data) ile CSS’i yenileyin.

Elementor hız optimizasyonu ayarları: Performance ve Features

Elementor’un yardım merkezi, hız ayarlarını iki yerde topluyor: Performance sekmesi ve Features sekmesi. Sürüme göre yerleri değişebileceğinden menüde adlarını arayın.

Performance sekmesi

Bu sekmedeki özellikleri açılır listeden Enable seçerek açarsınız:

• Optimized Image Loading: LCP görseline fetchpriority="high", ilk ekran altındaki görsellere loading="lazy" ekler.
• Optimized Gutenberg Loading: Kullanmadığınız Gutenberg blok betiklerini ve stillerini sayfadan çıkarır. Sitede blok editör içeriği kullanıyorsanız açmadan önce o sayfaları kontrol edin.
• Lazy Load Background Images: İlkinin dışındaki tüm arka plan görsellerini tembel yükler.

Features sekmesi

• Inline Font Icons: Simgeleri satır içi SVG olarak çizer; Font Awesome ve eicons kütüphanelerinin, CSS ve yazı tiplerinin yüklenmesi gerekmez.
• Optimized Control Loading: Yalnızca editörde gereken kontrolleri ön yüzde yüklemez (TTFB’ye yardım eder). Elementor bu özelliği duyurularında iki farklı adla anıyor; menüde adını arayın.

Her ayarı tek tek açıp ölçün. Hepsini birden açarsanız bozulan bir şeyin nedenini bulmak zorlaşır.

Element Caching nasıl kullanılır?

Element Caching, sunucuda her sayfa isteğinde yeniden üretilmesi gerekmeyen statik öğelerin çıktısını saklar. Yardım merkezine göre özellik bir süre deneysel olarak sunuldu; sürüm notları 3.30.0’da kararlı hale geldiğini söylüyor.

Kullanım:

1. Elementor > Ayarlar > Performance sekmesinden Element Caching’i etkinleştirin (sürümünüzde yer Features sekmesindeyse oradan).
2. Aynı sekmedeki Element Cache Expiration ile önbelleğin ne sıklıkla temizleneceğini seçin.
3. Sorun çıkaran bir öğe varsa öğenin Advanced sekmesindeki Cache Settings bölümünden o öğeyi Inactive yapın.

Dikkat: Dinamik etiket kullanan öğelerde önbellek, içeriğin güncellenmemesine yol açabilir. Kişiye özel veya sık değişen içerik (stok, fiyat, giriş yapmış kullanıcı bilgisi) gösteren alanlarda önbelleği kapalı tutun.

Element Caching sayfa önbelleğinin yerini tutmaz; ikisi birlikte çalışır. Sayfa ve sunucu önbelleği kurulumu için yukarıda bağlantısı verilen WordPress genel rehberine bakın.

Container yapısını ve DOM boyutunu küçültün

Eski Section / Column yapısı, her blok için birden çok sarmalayıcı öğe üretir. Flexbox Container ve Grid Container daha sade HTML üretir. Elementor, kendi iç testlerinde Flexbox Container çıktısının en fazla %39, Grid Container çıktısının ise en fazla %85 azaldığını bildirmiştir; bunlar Elementor’un kendi ölçümleridir ve sitenizde aynı sonucu vermeyebilir.

Pratik adımlar:

• Eski sayfalarda Section ve Column yerine Container kullanın. Önce en çok ziyaret edilen sayfadan başlayın.
• Gereksiz iç içe container’ları birleştirin; bir öğeyi hizalamak için üç katman gerekmez.
• Sayfadaki tekrar eden bölümleri tek bir kapsayıcıda toplayın.
• V4 atomic öğelerine geçiş düşünüyorsanız Elementor V4 rehberine bakın. Elementor, atomic öğelerin ek sarmalayıcı olmadan sade HTML ürettiğini belirtiyor.

Not: Sürüm 4.2.0 notu, karmaşık sayfalarda Grid container’ların editörü yavaşlatabileceğini söylüyor. Bu editör deneyimiyle ilgili; ön yüz hızıyla karıştırmayın.

Görselleri doğru hazırlayın

LCP elemanı çoğunlukla bir görseldir ve en büyük kazanç buradadır.

1. Boyutu küçültün. Görseli göründüğü genişliğin en fazla iki katına yeniden boyutlandırın.
2. Modern format kullanın. WebP veya AVIF tercih edin.
3. Hero görseli tembel yüklemeyin. İlk ekrandaki görsel hemen yüklenmeli. Optimized Image Loading bunu LCP görseline fetchpriority="high" vererek yapar.
4. Arka plan görsellerini dikkatli seçin. Hero’yu CSS arka planı yerine görsel öğesi olarak koymak tarayıcının görseli erken bulmasını kolaylaştırır; yine de tasarımınıza uyan seçeneği ölçerek karşılaştırın.
5. Genişlik ve yükseklik belirleyin. Boyutsuz görsel yerleşim kaymasına (CLS) yol açar.

Yazı tipi ve simgeleri sadeleştirin

• Elementor’un yardım merkezinde Google Fonts için yükleme yöntemi seçeneği bulunuyor; sürüm 3.27.0 ile yazı tiplerinin yerel yüklenmesi geldi. Yerel yükleme, harici istek ve gizlilik açısından da avantajlıdır.
• Kullandığınız yazı tipi ağırlığı sayısını sınırlayın. Üç aile ve altı ağırlık yerine bir aile ve iki ağırlık çoğu site için yeter.
• Inline Font Icons’ı açıp Font Awesome yüklemesini azaltın.

Kullanılmayan widget, yazı tipi ve simge dosyalarını kapatmak için uğraşmayın: Elementor yardım merkezi, kullanılmayan widget’ların performansı düşürmediğini ve kullanılmayan yazı tipi ile simge varlıklarının yüklenmediğini belirtiyor.

Mobil ölçüm ve kırılım noktaları

Mobil ölçüm çoğu sitede masaüstünden düşük çıkar. Bu yüzden her ayarın etkisini önce mobil raporda izleyin; masaüstünde hızlı görünen bir sayfa, mobilde büyük görsel ve ağır betik yüzünden yavaş kalabilir.

Elementor ek özel kırılım noktalarına izin veriyor, ama her kırılım için ayrı stil CSS’in büyümesi demektir. Gerçekten gerekmedikçe varsayılan kırılımlarla kalın.

Üçüncü taraf widget ve betikleri gözden geçirin

Elementor sayfasının yavaşlığı çoğu zaman Elementor’dan değil, üstüne eklenen eklenti widget’larından, animasyon kütüphanelerinden ve harici betiklerden (sohbet, harita, takip kodu) gelir.

• Her widget eklentisinin kendi CSS ve JS dosyası yükleyip yüklemediğine geliştirici araçlarının Network sekmesinde bakın.
• Haritayı ve videoyu kullanıcı etkileşimine kadar yüklemeyin (önizleme görseli koyup tıklanınca yükleyin).
• Sayfada kullanmadığınız eklentiyi devre dışı bırakın.

Yapılacaklar listesi

Bir sayfayı gözden geçirirken sırayla şunlara bakın:

• Section/Column yerine Container kullanılıyor.
• Hero görseli doğru boyutta ve WebP/AVIF formatında.
• İlk ekran dışındaki görseller tembel yükleniyor.
• Performance sekmesindeki üç özellik açık ve sayfa test edildi.
• Inline Font Icons açık.
• Yazı tipi aile ve ağırlık sayısı sınırlı.
• Element Caching açık; dinamik öğelerde kapalı.
• Üçüncü taraf widget’lar tek tek Network sekmesinde kontrol edildi.

Hangi sayfadan başlamalı?

Her sayfayı aynı özenle optimize etmek zaman kaybıdır. Etkisi en geniş olandan başlayın ve her aşamada yeniden ölçün. Şu sırayı izleyin:

1. Ana sayfa: En çok arama ve doğrudan trafik alır; ilk izlenimi verir.
2. Reklam ve açılış sayfaları: Reklam tıklaması maliyetlidir; bu sayfaların hızı dönüşümü etkileyebilir.
3. Şablonlar: Tek yazı, arşiv ve ürün şablonlarındaki bir düzeltme yüzlerce sayfaya yansır. Theme Builder şablonlarına öncelik verin.
4. Kalan sayfalar: Şablonlar düzelince çoğu kendiliğinden iyileşir.

Üst bilgi ve alt bilgi tüm sitede yüklenir; bunlar Theme Builder ile yönetildiği için tek düzeltme tüm siteye yayılır. Üst bilgide büyük logo, gereksiz animasyon ya da ağır görsel varsa her sayfanın ilk ekranı etkilenir; önce orayı sadeleştirin.

Sık yapılan hatalar

• Hero bölümüne büyük arka plan videosu koymak ve ilk ekranda yüklemek; poster görseli ve mobilde statik görsel daha güvenlidir.
• Aynı sayfada çok sayıda kayan (slider/carousel) bileşen kullanmak; ölçmeden eklemeyin.
• Her bölüme giriş animasyonu eklemek; animasyon az ve amaçlı olmalı.
• Ayarı açıp ölçmemek; bir ayar siteye göre fayda yerine sorun getirebilir.
• Sayfa önbelleğini temizlemeden sonucu yorumlamak; ölçümden önce hem Elementor dosyalarını hem sayfa önbelleğini yenileyin.

Doğrulama: işe yaradığını nasıl anlarsınız?

1. Aynı sayfayı PageSpeed Insights’ta mobil olarak yeniden ölçün; LCP, CLS ve toplam bayt boyutunu ilk ölçümdeki kayıtla karşılaştırın.
2. Geliştirici araçlarında Network sekmesini açıp sayfayı yenileyin; Font Awesome veya kullanmadığınız betiklerin hâlâ yüklenip yüklenmediğine bakın.
3. Sayfayı gizli pencerede ve giriş yapmadan açın; önbellekli öğelerin güncel içerik gösterdiğini doğrulayın.
4. Bir öğeyi düzenleyip yayınlayın ve ön yüzde değişikliğin göründüğünü kontrol edin. Görünmüyorsa önbellek süresini ve Dosya ve Verileri Yeniden Oluştur adımını gözden geçirin.

Her değişikliği tek tek ölçüp not alırsanız, bir şey bozulduğunda geri almak kolay olur.

Sitenizin hız sorununu birlikte çözelim

Elementor sitenizin ölçümünü yapmamı, hangi ayarın ne kadar kazandırdığını raporlamamı veya sayfaları container ve V4 yapısına taşımamı isterseniz hizmetler sayfama bakın ya da iletişim sayfasından yazın.

Kaynaklar

• Elementor: performans özelliklerini geliştirin
• Elementor: Element Caching ile sayfa yüklemeyi hızlandırın
• Elementor: kullanılmayan widget, yazı tipi ve simgeler performansı düşürür mü
• Elementor performans iyileştirmeleri blog yazısı
• Elementor Pro sürüm notları