Elementor gibi sayfa oluşturucular, WordPress'e görsel tasarım yetenekleri ekler, ancak aynı zamanda sayfa yükleme sürelerini yavaşlatabilecek ek CSS, JavaScript ve DOM öğeleri de getirir. Elementor Pro ile oluşturulan siteler için performans optimizasyonu isteğe bağlı değildir; bu, kullanıcı deneyimini, Core Web Vitals puanlarını ve arama motoru sıralamalarını doğrudan etkiler.
Bu kılavuzda, gerçek test ve ölçümlere dayanan Elementor sitenizi hızlı tutmak için pratik teknikleri ele alıyoruz. Her öneri, siteniz için en önemli optimizasyonları önceliklendirebilmeniz için beklenen performans etkisini içerir.
Elementor'un Performans Ayak İzi Anlamak
Optimizasyona geçmeden önce, Elementor'un sayfalarınıza neler eklediğini anlamak faydalıdır:
| Bileşen | Eklediği Şeyler | Tipik Boyut |
|---|---|---|
| Ön Uç CSS | Widget stilleri, duyarlı kurallar, özel stiller | 50-200 KB |
| Ön Uç JavaScript | Animasyonlar, kaydırıcılar, lightbox, etkileşimler | 80-150 KB |
| DOM Öğeleri | Bölümler, sütunlar, widget'lar için sarmalayıcı divler | 500-3000+ öğe |
| Google Fonts | Özel tipografi için harici yazı tipi dosyaları | Font başına 20-100 KB |
| Simgeler | Font Awesome veya özel simge kütüphaneleri | 30-80 KB |
Tipik bir Elementor sayfası, 200-400 KB ek ön uç varlıkları üretir. Varsayılan blok editörü (Gutenberg) ile oluşturulan bir sayfaya kıyasla, bu CSS/JS yükünde 3-5 kat artış anlamına gelir. Optimizasyonun amacı, Elementor'un sağladığı tasarım kalitesinden ödün vermeden bu yükü azaltmaktır.
Adım 1: Yerleşik Performans Özelliklerini Etkinleştirin
Elementor, birçok kullanıcının göz ardı ettiği birkaç performans ayarı içerir. Elementor → Ayarlar → Performans (veya daha yeni sürümlerde Elementor → Ayarlar → Özellikler) bölümüne gidin:
| Ayar | Ne Yapar | Etki |
|---|---|---|
| Geliştirilmiş Varlık Yükleme | CSS/JS'yi yalnızca Elementor kullanan sayfalarda yükler | Elementor kullanmayan sayfalarda 100-200 KB tasarruf sağlar |
| Geliştirilmiş CSS Yükleme | Satır içi stiller yerine ayrı CSS dosyaları oluşturur | CSS'nin tarayıcı önbelleklemesini sağlar |
| Arka Plan Resimlerini Tembel Yükle | Ekranın dışında olan arka plan resimlerinin yüklenmesini erteler | İlk sayfa ağırlığını %30-60 azaltır |
| Optimize Edilmiş DOM Çıkışı | Gereksiz sarmalayıcı öğeleri azaltır | %5-15 daha az DOM öğesi |
| Flexbox Konteyneri | Eski bölümleri/sütunları daha az kaynak kullanan Flexbox ile değiştirir | Her düzen için %30-50 daha az DOM öğesi |
Tüm bu ayarları etkinleştirmek, herhangi bir Elementor sitesi için en etkili optimizasyondur. Bu özellikleri etkinleştirmediyseniz, diğer teknikleri keşfetmeden önce buradan başlayın.
Adım 2: Bölümler Yerine Flexbox Konteynerleri Kullanın
Elementor'un eski düzen sistemi, birçok sarmalayıcı öğe üreten Bölüm → Sütun → Widget iç içe geçişini kullanır. Daha yeni Flexbox Konteyner sistemi, önemli ölçüde daha az kaynak kullanan HTML üretir:
| Düzen Yöntemi | DOM Öğeleri (3 sütunlu düzen) | CSS Sınıfları |
|---|---|---|
| Bölüm + 3 Sütun | ~12 öğe | ~18 sınıf |
| Flexbox Konteyneri | ~4 öğe | ~6 sınıf |
| Azalma | %67 daha az | %67 daha az |
Yeni sayfalar için her zaman Flexbox Konteynerleri kullanın. Mevcut sayfalar için, bir sonraki düzenleme sırasında düzenleri taşımayı düşünün. Görsel sonuç aynıdır; fark tamamen üretilen HTML çıktısındadır.
Adım 3: Resimleri Optimize Edin
Resimler genellikle herhangi bir web sayfasındaki en büyük varlıklardır ve resim ağırlıklı tasarımlara sahip Elementor sayfaları özellikle etkilenir. Anahtar resim optimizasyonu uygulamaları:
- Yüklemeden önce yeniden boyutlandırın: Resimleri görüntülenecek boyutta yükleyin. 1400 piksel genişliğinde görüntülenen bir hero resmi, 4000 piksel olarak yüklenmemelidir.
- WebP formatını kullanın: WebP resimleri, karşılaştırılabilir kalitede JPEG'den %25-35 daha küçüktür. WordPress 6.x, WebP'yi yerel olarak destekler.
- Tembel yüklemeyi etkinleştirin: Elementor, resimler için tembel yükleme içerir. WordPress Ayarları → Medya bölümünde etkinleştirildiğini doğrulayın.
- ia → Tembel Yükleme
- Responsive görseller kullanın: Elementor, srcset özniteliklerini otomatik olarak oluşturur. Yüklediğiniz görsellerin birden fazla boyut içerdiğinden emin olun (WordPress bunları varsayılan olarak oluşturur)
- Görselleri sıkıştırın: Görselleri görünür kalite kaybı olmadan sıkıştırmak için WP Smush Pro gibi bir görsel optimizasyon eklentisi kullanın
Görsel optimizasyonu için kapsamlı bir rehber için WordPress görsel optimizasyon rehberimize bakın.
Adım 4: Yazı Tipi Yüklemelerini Minimize Edin
Özel yazı tipleri HTTP istekleri ve dosya ağırlığı ekler. Her Google Font ailesi, yüklenen ağırlık sayısına bağlı olarak 20-100 KB ekler. Optimize etmek için:
- 2-3 yazı tipi ailesi ile sınırlayın: Başlıklar için bir, gövde metni için bir yeterlidir çoğu tasarım için
- Yazı tipi ağırlıklarını sınırlayın: Gerçekten kullandığınız ağırlıkları yükleyin (örneğin, 100-900 yerine 400 ve 700)
- Google Fonts'u kendi sunucunuzda barındırın: Yazı tiplerini indirin ve kendi sunucunuzdan sunarak fonts.googleapis.com'a DNS sorgusunu ortadan kaldırın. OMGF veya Perfmatters gibi eklentiler bunu otomatikleştirebilir
- font-display: swap kullanın: Yazı tipi yüklenirken görünmez metni önler. Elementor bunu varsayılan olarak uygular
- Sistem yazı tiplerini düşünün: Sistem yazı tipi yığınları (-apple-system, BlinkMacSystemFont, Segoe UI gibi) sıfır ağ isteği ile anında yüklenir
Adım 5: Widget Sayısını Azaltın
Her Elementor widget'ı HTML, CSS ve potansiyel olarak JavaScript oluşturur. Widget sayısını azaltmak, sayfa ağırlığını doğrudan azaltır:
- Metin içeriğini birleştirin: Ayrı Başlık + Metin Editörü widget'ları yerine HTML başlıkları ile bir Metin Editörü widget'ı kullanın
- Widget'lar yerine CSS kullanın: Spacer widget'ları DOM öğeleri ekler. Bunun yerine bitişik widget'larda padding/margin kullanın
- Tekrar eden widget'lardan kaçının: Mobil/masaüstü için farklı widget'ları gizlemek/göstermek yerine, tek bir widget'ı uyarlamak için responsive CSS kullanın
- Animasyonları sınırlayın: Giriş animasyonları JavaScript olay dinleyicileri ve CSS ekler. Bunları her widget'ta değil, ana öğelerde seçici olarak kullanın
Adım 6: Bir Önbellek Eklentisi Kullanın
Önbellekleme, dinamik WordPress sayfalarını statik HTML dosyalarına dönüştürerek tekrar ziyaretlerde PHP işleme ve veritabanı sorgularını ortadan kaldırır. Elementor siteleri için önerilen önbellek eklentileri:
| Eklenti | Elementor için Ana Özellikler | Fiyat |
|---|---|---|
| WP Rocket | CSS/JS optimizasyonu, tembel yükleme, veritabanı temizliği, CDN entegrasyonu | $59/yıl |
| LiteSpeed Cache | Sunucu düzeyinde önbellekleme (LiteSpeed sunucusu gerektirir), görsel optimizasyonu | Ücretsiz |
| FlyingPress | Google Fonts'u kendi sunucunuzda barındırma, kullanılmayan CSS'i kaldırma, JS yüklemesini geciktirme | $60/yıl |
WP Rocket'ın "Kullanılmayan CSS'i Kaldır" ve "JavaScript Çalıştırmasını Geciktir" özellikleri, Elementor siteleri için özellikle etkilidir çünkü Elementor'un ürettiği fazla CSS/JS'yi hedef alır. Testlerimizde, WP Rocket bir Elementor sayfasının etkili CSS yükünü %40-60 oranında azalttı.
Adım 7: Kullanılmayan CSS ve JavaScript'i Kaldırın
Elementor, varsayılan olarak tüm kayıtlı widget'lar için CSS yükler. Geliştirilmiş Varlık Yükleme etkinleştirildiğinde (Adım 1), CSS'i mevcut sayfadaki widget'larla sınırlar. Ancak, daha fazla optimizasyon mümkündür:
- WP Rocket'ın Kullanılmayan CSS'i Kaldır: Her sayfayı analiz eder ve yalnızca geçerli kurallarla sayfa özel bir CSS dosyası oluşturur
- JavaScript'i Geciktirin: Kritik olmayan JavaScript'i (animasyonlar, döngüler) kullanıcı etkileşimine (tıklama, kaydırma, tuş basımı) kadar erteleyin
- Varlık Temizleme eklentisi: Gereksiz olan belirli eklenti CSS/JS'lerini ihtiyaç duyulmayan sayfalarda manuel olarak devre dışı bırakın
Bu teknikler, CSS yükünü %50-70 oranında azaltabilir ve render engelleyici JavaScript'i tamamen ortadan kaldırarak En Büyük İçerik Boyama (LCP) ve İlk Girdi Gecikmesi (FID) üzerinde önemli iyileştirmeler sağlar.
Adım 8: Sunucu ve Hosting'i Optimize Edin
Ön uç optimizasyonu, sunucu yanıt süreniz yavaşsa ancak bu kadar ileri gidebilir. Elementor siteleri için:
- PHP 8.2+ kullanın: PHP 8.x, WordPress iş yükleri için PHP 7.4'ten %15-25 daha hızlıdır
- OPcache'i etkinleştirin: PHP opcode önbelleklemesi, her istekte PHP dosyalarının yeniden derlenmesini ortadan kaldırır
- CDN kullanın: Statik varlıkları (CSS, JS, görseller) sunun
- Ziyaretçilerinize coğrafi olarak daha yakın kenar sunuculardan içerik sunun:
- Yönetilen WordPress barındırma düşünün: Cloudways, SiteGround ve Kinsta gibi sağlayıcılar, altyapılarını özellikle WordPress için optimize eder.
Barındırma önerileri ve kurulum rehberi için WordPress barındırma rehberimize bakın.
Optimizasyon Sonuçlarınızı Ölçme
Her optimizasyonun etkisini ölçmek için bu araçları kullanın:
| Araç | Ne Ölçer | URL |
|---|---|---|
| Google PageSpeed Insights | Core Web Vitals, performans puanı, özel öneriler | pagespeed.web.dev |
| GTmetrix | Yükleme süresi, sayfa boyutu, istekler, şelale analizi | gtmetrix.com |
| Chrome Geliştirici Araçları (Ağ sekmesi) | Bireysel kaynak boyutları, yükleme sırası, darboğazlar | Chrome tarayıcısına entegre |
| WebPageTest | Çoklu konum testi, film şeridi görünümü, gelişmiş metrikler | webpagetest.org |
Her optimizasyondan önce ve sonra test yaparak iyileştirmeleri doğrulayın. Bu Core Web Vitals metriklerine odaklanın:
- LCP (En Büyük İçerik Boyaması): Hedef 2.5 saniyenin altında
- FID (İlk Girdi Gecikmesi): Hedef 100 milisaniyenin altında
- CLS (Kümülatif Düzen Kayması): Hedef 0.1'in altında
Sıkça Sorulan Sorular
Elementor, WordPress'i önemli ölçüde yavaşlatır mı?
Elementor, varsayılan editöre kıyasla 200-400 KB ön yüz varlığı ekler. Bu fark belirgindir ancak uygun optimizasyon ile yönetilebilir. Bu kılavuzdaki teknikler, Elementor'un performans etkisini %50-70 oranında azaltabilir ve sayfa hızlarını blok editörü ile elde edilebilecek seviyelere yaklaştırırken Elementor'un tasarım esnekliğini korur.
Mevcut sayfalarda Bölümlerden Flexbox Konteynerlerine geçmeli miyim?
Aktif olarak düzenlediğiniz sayfalar için Flexbox Konteynerlerine geçmek faydalıdır—DOM azalması önemli ölçüde gerçekleşir. Ancak her sayfayı bir anda yeniden inşa etmek gerekli değildir. Yüksek trafik alan sayfalara (anasayfa, açılış sayfaları, ürün sayfaları) öncelik verin ve diğerlerini kademeli olarak dönüştürün.
WP Rocket, Elementor ile uyumlu mu?
Evet. WP Rocket, Elementor ile tamamen uyumludur ve Elementor siteleri için en çok önerilen önbellek eklentilerinden biridir. Kullanılmayan CSS'yi kaldırma ve JavaScript'i geciktirme özellikleri, Elementor'un ön yüz yükünü azaltmada özellikle etkilidir.
Bir sayfada kaç tane Elementor widget'ı fazla olur?
Kesin bir sayı yoktur, ancak iyi performans için DOM boyutunu 1,500 öğenin altında tutmayı hedefleyin. Genel bir kılavuz olarak, bir sayfada 30-50 widget tipik olarak kabul edilir; 100+ widget genellikle birleştirme fırsatlarını gösterir (metin widget'larını birleştirme, boşlukları kaldırma, düzenleri basitleştirme).
Elementor animasyonları performansı etkiler mi?
Evet. Giriş animasyonları JavaScript olay dinleyicileri ve CSS geçişleri ekler. Mobil cihazlarda aşırı animasyonlar, kaydırma sırasında görünür titreme (jank) yaratabilir. Animasyonları seçici bir şekilde kullanın—hareketten fayda sağlayan ana öğelere (CTA'lar, özellik vurguları) sınırlayın ve sayfadaki her widget'ı animasyona sokmaktan kaçının.
Elementor kullanarak PageSpeed'de 90+ puan alabilir miyim?
Evet, uygun optimizasyon ile. Elementor'un performans özelliklerini etkinleştirerek, Flexbox Konteynerleri kullanarak, görselleri optimize ederek, fontları kendiniz barındırarak ve WP Rocket gibi bir önbellek eklentisi kullanarak, çoğu Elementor sayfasında 90+ PageSpeed puanlarına ulaşmak gerçekçidir. Görsel ağırlıklı sayfalar ek optimizasyon çabası gerektirebilir.
Elementor Pro ile Hızlı Siteler Oluşturun
Yerleşik performans özellikleri, Flexbox Konteynerleri ve optimize edilmiş varlık yüklemesi ile Elementor Pro'yu edinin. Optimal hız için WP Rocket ile birleştirin.
Elementor Pro'yu İnceleyin →
