Elementor, WordPress'i kod yazmadan tasarlanabilir hale getirdiği için Türkiye'de en yaygın page builder'lardan biri. Ama aynı kolaylık çoğu zaman bir bedelle gelir: sürükle-bırakla kurulan sayfalar şaşırtıcı derecede ağır olabilir. Aynı görsel sonucu temada native olarak yarı boyutta üretirken, page builder katmanları sayfaya onlarca ekstra div, birden fazla CSS dosyası ve çoğu hiç kullanılmayan JavaScript ekler. Bu yazıda elementor page builder hız sorununun teknik kökenini ve şişkin bir sayfayı yeniden inşa etmeden nasıl hızlandıracağınızı adım adım ele alıyoruz.
Page Builder Sayfası Neden Yavaşlar?
Sorun "Elementor kötü" değil; sorun, builder'ların görsel esnekliği nasıl sağladığında. Üç temel mekanizma siteyi yavaşlatır:
1. DOM şişmesi (aşırı iç içe yapı). Builder'da bir bölüm (section) eklediğinizde aslında section + container + column + widget-wrapper + widget gibi katmanlar oluşur. Elle yazılmış bir HTML'de tek <section> ile çözeceğiniz bir blok, builder'da 6-8 iç içe div haline gelir. Tarayıcının her elementi parse edip render etmesi, layout hesabı yapması gerekir. Google'ın PageSpeed Insights aracı 1.500'ün üzerinde DOM elementini açıkça "aşırı" olarak işaretler ve birçok page builder sayfası bunu rahatlıkla aşar.
2. Render'ı engelleyen CSS ve JS. Elementor ve eklentileri, kullandığınız widget'lardan bağımsız olarak global stil ve script dosyalarını yükler. Bir akordeon (accordion) widget'ı eklemeseniz bile ilgili JS sayfada bulunabilir. Bunlar render-blocking kaynaklardır; tarayıcı bunları indirip işlemeden sayfayı göstermeye başlamaz.
3. Font ve ikon yükü. Google Fonts'tan çekilen birden fazla font ailesi ve Font Awesome ikon kütüphanesinin tamamı, çoğu zaman sadece birkaç ikon için yüklenir. Her biri ayrı bir HTTP isteği ve gecikme demektir.
Bu üç etken birleşince, ilk içerik boyanması (LCP) gecikir, etkileşim hazırlığı (TBT) uzar ve mobilde puan hızla düşer.
İlk Adım: Ölçün, Tahmin Etmeyin
Hızlandırmaya başlamadan önce nereden başlayacağınızı bilmeniz gerekir. Sayfayı Hostmana ücretsiz araçlardan site hız testiyle veya Google PageSpeed Insights ile ölçün ve şu metriklere bakın:
| Metrik | Ne anlama gelir | Hedef |
|---|---|---|
| LCP | En büyük içerik öğesinin boyanma süresi | 2,5 sn altı |
| CLS | Görsel kayma (layout shift) | 0,1 altı |
| TBT | Ana iş parçacığının bloke kaldığı süre | 200 ms altı |
| DOM elementi | Toplam HTML düğüm sayısı | 1.500 altı |
Tarayıcının geliştirici araçlarında Coverage sekmesini açarsanız, yüklenen CSS/JS'in yüzde kaçının gerçekten kullanıldığını görürsünüz. Page builder sayfalarında bu oranın %20'lerde çıkması olağandır; yani indirilen kodun beşte dördü boşa gider. Bu ölçüm, hangi eklentinin yük getirdiğini somut olarak gösterir.
Şişkin Sayfayı Yeniden Yapmadan Hızlandırma
1. Kullanılmayan widget'ları ve özellikleri kapatın
Elementor'un ayarlarında devre dışı bırakabileceğiniz birçok yük vardır. Experiments / Features bölümünden modern yapıları (Flexbox/Grid container) etkinleştirmek, eski "section/column" yapısına göre çok daha az DOM üretir. Yeni sayfaları mutlaka container tabanlı kurun.
Ayrıca tema ayarlarında Google Fonts'u devre dışı bırakıp sistem fontlarını veya tek bir yerel fontu kullanmak, sayfadan birden fazla harici font isteğini kaldırır. Font Awesome'ı kullanmıyorsanız yükleme seçeneğini kapatın; kullanıyorsanız sadece gereken seti (örneğin yalnızca "solid") aktif tutun.
2. Önbellekleme ile builder yükünü ezin
Page builder'ın asıl maliyeti, PHP'nin her istekte sayfayı yeniden oluşturmasıdır. Bir önbellekleme (cache) eklentisiyle sayfanın statik HTML'ini üretip sunarsanız, ziyaretçi builder'ın işlem yükünü hiç hissetmez. Eklenti ayarlarında şunları açın:
- Sayfa önbelleği (page cache): ziyaretçiye hazır HTML sunulur.
- CSS/JS küçültme (minify) ve birleştirme: dosya boyutu ve istek sayısı düşer.
- Kullanılmayan CSS'i kaldırma (remove unused CSS): builder'ın yüklediği gereksiz stiller temizlenir. Bu özellik page builder sayfalarında en büyük kazancı sağlayan ayardır.
- Tembel yükleme (lazy load): ekranın altındaki görseller ancak kaydırınca yüklenir.
Bu ayarları açtıktan sonra siteyi her sayfada gezerek test edin; agresif CSS temizleme bazen bir widget'ın görünümünü bozabilir, o durumda ilgili stili istisna listesine eklersiniz.
3. Görselleri ehlileştirin
Page builder sayfalarında en sık ihmal edilen şey görsel ağırlığıdır. Yüklediğiniz 3000 piksel genişliğindeki bir hero görseli, ekranda 1200 pikselde görünüyor olabilir. Yapılması gerekenler:
- Görselleri yüklemeden önce gerçekte gösterilecek boyuta küçültün.
- WebP formatına geçin; aynı kalitede JPEG'e göre belirgin küçük dosya verir.
- Sayfanın ilk ekranındaki (above the fold) ana görseli lazy load dışında bırakın, alttakilere lazy load uygulayın.
- Görsellere
widthveheightdeğeri verin ki tarayıcı yer ayırsın; bu, CLS (görsel kayma) sorununu da çözer.
4. Eklenti enflasyonunu durdurun
Her "Elementor için ekstra widget paketi" eklentisi sayfaya kendi CSS ve JS'ini ekler. Üç farklı eklentiden tek tük widget kullanıyorsanız, üçünün de tam yükünü taşırsınız. En çok kullandığınız tek bir eklenti seti seçip diğerlerini kaldırmak, hem hızı hem de bakım yükünü azaltır. Kullanmadığınız her eklenti potansiyel bir güvenlik ve performans yüküdür.
5. Sunucu tarafını güçlendirin
İstemci tarafı optimizasyonu bir yere kadar gider; PHP'nin sayfayı üretme hızı sunucuya bağlıdır. Burada üç şey kritik:
- Güncel PHP sürümü: PHP 8.x, eski sürümlere göre belirgin daha hızlıdır. Hosting kontrol panelinizden (DirectAdmin veya Plesk) PHP sürümünü güncel bir 8.x sürümüne çekin.
- OPcache ve nesne önbelleği: PHP'nin derlenmiş kodu bellekte tutması, builder gibi PHP-yoğun sistemlerde TTFB'yi (sunucunun ilk byte'ı gönderme süresi) düşürür.
- Yeterli kaynak: Aşırı satılmış (oversold) bir paylaşımlı hostingte, başkalarının yükü sizin Elementor sayfanızı yavaşlatır. Trafiğiniz arttıkça veya birden çok ağır site yönetiyorsanız, kaynakları net ayrılmış bir sanal sunucuya geçmek mantıklı olur.
Builder Alışkanlıklarını Düzeltin
Hızlı kalmanın en sürdürülebilir yolu, sayfaları en baştan hafif kurmaktır:
- Section yığını yerine container kullanın. Aynı tasarımı daha az iç içe katmanla elde edersiniz.
- Her bölüme animasyon ve parallax eklemeyin. Her efekt, kaydırma sırasında çalışan JavaScript demektir.
- Tek bir global font sistemi belirleyin ve tüm sayfalarda ona sadık kalın; her sayfada farklı font ailesi yüklemeyin.
- Tasarım sistemini (global renkler/tipografi) kullanın ki tarayıcı tekrarlayan stilleri tek seferde yüklesin.
- İçeriği şablona dönüştürün. Tekrar eden blokları kaydedilmiş şablon olarak kullanmak, hem tutarlılık hem de daha temiz çıktı sağlar.
Hız mı, Esneklik mi? Doğru Beklenti
Şunu net söyleyelim: Elementor ile kurulmuş bir sayfa, elle kodlanmış aynı tasarımdan her zaman bir miktar daha ağır olacaktır. Bu, builder kullanmanın doğal maliyetidir ve tasarım özgürlüğü karşılığında çoğu işletme için kabul edilebilir. Hedef, "sıfır yük" değil; DOM'u makul tutmak, kullanılmayan kaynakları kesmek ve sunucuyu hızlı tutmak. Bu üçünü düzgün yaparsanız, page builder ile kurulmuş bir site rahatlıkla mobilde iyi puanlar alabilir ve LCP'yi 2,5 saniyenin altına çekebilirsiniz.
Optimizasyon bir defalık iş değildir. Her yeni sayfa eklediğinizde veya yeni bir widget paketi yüklediğinizde hız tekrar düşebilir. Bu yüzden ölç-düzelt-tekrar ölç döngüsünü alışkanlık haline getirin; özellikle büyük bir kampanya veya yoğun sezon öncesi mutlaka yeniden test edin.
Hostmana ile Hızlı Bir Temel
Page builder optimizasyonunun yarısı sizin ayarlarınızda, diğer yarısı sunucunun gücünde biter. Güncel PHP sürümleri, OPcache desteği ve aşırı satılmamış kaynaklar sunan WordPress uyumlu hosting paketlerimizle Elementor sitenizin sağlam bir temele oturmasını sağlayabilirsiniz. Sayfanızın gerçek hız puanını ücretsiz web araçlarımızdan ölçebilir, takıldığınız noktada bilgi bankamıza göz atabilir veya kurulum/optimizasyon sürecinde uzaktan canlı destek ile ekranınızı paylaşarak adım adım yardım alabilirsiniz. Hangi paketin sitenize uygun olduğundan emin değilseniz bize ulaşın; ihtiyacınıza göre yönlendirelim.
<!--silo-start-->📚 İlgili Rehberler
Ana rehber: WordPress Sitesi Nasıl Hızlandırılır? Önbellek, CDN ve Görsel Optimizasyonu
İlgili yazılar:
<!--silo-end-->