Yavaş web sitesi nasıl hızlandırılır? Önce ölçün, sonra düzeltin

Siteniz yavaş açılıyorsa işe bir hız eklentisi kurarak başlamayın. Web sitesi hızlandırma yolları arasından doğru olanı, sorunun hangi sayfada ve nasıl yaşandığını ölçünce seçebilirsiniz. Şu sırayla ilerleyin:

1. Önemli sayfalarda sorunu ölçün.
2. Sayfanın görünme, tepki ve kayma ölçütlerine (LCP, INP, CLS) bakıp sorunun kaynağını bulun.
3. En etkili ve geri alınabilir değişikliği yapın.
4. Aynı koşullarda yeniden test edin.

Aşağıda bu adımları WordPress ve Elementor notlarıyla anlatıyorum.

Önce neyin yavaş olduğunu bulun

Sorun her sayfada ve her cihazda aynı olmayabilir. Şu sayfaları mobilde ve masaüstünde ayrı ayrı test edin:

• ana sayfa
• en çok kullanılan hizmet ya da ürün sayfanız
• bir blog yazısı
• varsa iletişim formu, sepet ya da ödeme adımı

Aynı tasarımı paylaşan sayfaların ortak kalıbına şablon denir. Her şablondan birkaç sayfa ölçmeniz yeter. Diyelim ki mobilya mağazanızda ölçtüğünüz iki ürün sayfası da yavaş, blog yazısı hızlı. O zaman sorunu önce ürün şablonunda arayın.

Yönetici olarak giriş yapmışken sayfa farklı görünebilir. Kendiniz bakarken çıkış yapın ya da tarayıcının gizli penceresini kullanın. Form ve sepeti ayrıca test edin.

PageSpeed Insights raporunu okuyun

PageSpeed Insights sayfasına test etmek istediğiniz adresi yazıp testi başlatın. Mobil ve masaüstü sonuçları ayrı gelir, her birinde iki tür bilgi vardır:

• Gerçek kullanıcı verisi: Sitenize Chrome ile giren ziyaretçilerin bir kısmından gelen geçmiş ölçümler. Yeterli veri varsa görünür ve ziyaretçinin gerçekte ne yaşadığını anlatır.
• Laboratuvar testi: Lighthouse adlı aracın kontrollü koşullarda o an yaptığı test. Sorunun olası nedenini bulmaya yarar.

Bir değişiklikten sonra laboratuvar puanı hemen oynayabilir. Gerçek kullanıcı verisi ise önceki 28 günü yansıtır ve zamanla değişir.

Az ziyaret alan bir sayfada rapor, sitenin geneline ait veriyi (köken verisi) gösterebilir ya da hiç veri göstermeyebilir. “Veri yok” yazısı yalnızca yeterli ölçüm olmadığını anlatır. O zaman laboratuvar bölümüne ve varsa sitenize kurulu bir gerçek kullanıcı ölçüm aracına bakın.

LCP, INP ve CLS neyi ölçer?

Raporun gerçek kullanıcı bölümünde, veri varsa, Core Web Vitals denen üç temel ölçüt görürsünüz. web.dev’deki tanıma göre “iyi” sayılan değerler şöyle:

Ölçüt	Ne ölçer?	İyi sayılan
LCP	Ekranda görünen en büyük görselin ya da metin bloğunun görünme süresi	En fazla 2,5 saniye
INP	Tıklama ve dokunma gibi etkileşimlere tepki süresi	En fazla 200 milisaniye
CLS	Sayfadaki beklenmedik kayma	En fazla 0,1

Raporda tam adları da geçer: Largest Contentful Paint, Interaction to Next Paint ve Cumulative Layout Shift.

Sınırlar mobil ve masaüstü için ayrı ayrı, 75. yüzdeliğe göre değerlendirilir. Yani sayfa açılışlarının en az yüzde 75’inde bu değerlerin tutturulması gerekir. CLS süre yerine bir puanla ölçülür.

INP, gerçek ziyaretçiler tıklama ya da dokunma gibi etkileşimler yaptıkça ölçülür. Bu yüzden butonların ne kadar hızlı tepki verdiğini asıl gerçek kullanıcı verisi gösterir.

Belirtiye göre web sitesi hızlandırma yolları

Raporda kötü çıkan ölçütün adını taşıyan başlıkla başlayın. Birçok sayfa geç açılıyorsa sunucu bölümüne geçin. Her seferinde tek bir değişiklik yapın. Onlarca öneriyi aynı anda uygularsanız neyin işe yaradığını anlayamaz, bazen de çalışan bir özelliği bozarsınız.

Canlı sitede önbellek, kod ya da tema ayarını değiştirmeden önce yedek alın. Mümkünse önce sitenin bir kopyasında (test ortamı) deneyin.

Bu kontrollerin bir kısmı teknik. Kendiniz yapamıyorsanız PageSpeed raporunu ve gördüğünüz belirtiyi geliştiricinize ya da hosting firmanıza iletin. Aşağıdaki başlıklar, onlardan ne isteyeceğinizi bilmenize yardımcı olur.

Büyük görsel geç geliyorsa (LCP)

İlk bakılacak yer görselin kendisidir. Ekranda küçük görünen bir görsel için tarayıcıya dev boyutlu orijinal dosya gidiyor olabilir. Görseli sitede gösterileceği boyuta küçültün, görüntüyü bozmadan sıkıştırıp öyle yükleyin.

Fotoğraflarda WebP ya da AVIF deneyin, ama kazanç görselden görsele değişir. Aynı kalitede görünen dosyaların gerçek boyutunu karşılaştırın.

Görsel zaten küçükse sunucu sayfanın kodunu (HTML) geç göndermiş ya da tarayıcı görseli geç bulmuş olabilir. Tarayıcının geliştirici araçlarındaki Ağ paneli, görselin ne zaman istendiğini gösterir.

WordPress görselin farklı boyutlarını üretir. Temanız ya da Elementor gibi sayfa oluşturucunuz doğru görseli yerleştirirse bunlar srcset ile sunulur, tarayıcı da ekrana uygun olanı seçer. Elementor’da görsel bileşeninin çözünürlüğünü ve mobil görünümünü kontrol edin. Arka plan görsellerinde bu otomatik davranışı beklemeyin.

Sayfanın aşağısındaki görselleri ziyaretçi oraya yaklaşınca yüklemek (lazy loading) ilk açılışa yardımcı olabilir. Ama LCP’yi belirleyen ana görseli geç yüklemek ters etki yapabilir. Bu görselde geç yüklemeyi kapatın, gerekirse geliştiricinizden ona yükleme önceliği vermesini isteyin.

İlk ekranda ağır bir video varsa, video gelene kadar bir kapak görseli (poster) gösterin ve ne zaman yükleneceğine baştan karar verin.

Menü ya da buton geç tepki veriyorsa (INP)

Önce uzun süren JavaScript işlerine ve dışarıdan eklenen kodlara (üçüncü taraf kod) bakın. Tarayıcı bir animasyonla, izleme koduyla, sohbet aracıyla ya da gereksiz bir bileşenle meşgul olabilir. Geliştirici araçlarının Performans ve Ağ panelleri bunları gösterir.

Kullanılmayan bir öğeyi tamamen kaldırmak, onu erteleme ayarıyla (kodu sayfa açıldıktan sonra çalıştırma) sonraya bırakmaktan daha kalıcı bir çözüm olabilir. Elementor’da her animasyon ve bileşen (widget) sayfaya yük ekler.

Süs için konan kaydırıcıları (slider), tekrar eden animasyonları ve işlevsiz gömülü araçları gözden geçirin. Bir bileşeni topluca kapatmadan önce hangi sayfalarda kullanıldığını bulun. JavaScript’i erteleyen ya da birleştiren bir ayar menüyü, açılır pencereyi, formu veya tema düğmesini bozuyorsa o ayarı geri alın.

İçerik yerinden kayıyorsa (CLS)

İlk bakılacak yerler boyutu belirtilmemiş görseller, video ya da harita gibi gömülü içerikler ve geç gelen fontlardır. Görsellere ve gömülü videolara en-boy oranı ya da sabit bir alan vererek yer ayırın. Sonradan beliren kampanya çubuğu ya da geç yüklenen form da sayfayı kaydırabilir. Kaymayı, tarayıcının bu alanları önceden bilmesi önler.

Her yazı tipi ve kalınlık (normal, kalın gibi) ayrı bir dosya olarak yüklenebilir. Kullanmadığınız kalınlıkları kaldırın. Başlıkta da metinde de ğ, ş, ı gibi harflerin aynı yazı tipiyle göründüğüne bakın.

Metnin ne zaman görüneceğini font-display ayarı etkiler. Ama sonradan gelen font farklı genişlikteyse satırlar ve düğmeler kayabilir. Değişiklikten sonra okunurluğa ve CLS’ye telefonda da bakın, çünkü küçük ekranda satırlar farklı yerden kırılır.

Birçok sayfa geç açılıyorsa sunucuya ve önbelleğe bakın

Sunucu sayfayı geç hazırlıyorsa görsel ve kod düzeltmelerinin faydası sınırlı kalır.

WordPress’in resmî performans kılavuzu da hızı hosting, ayarlar, yazılım sürümleri, eklentiler ve görsellerin birlikte etkilediğini söylüyor. Hangi adımların size uyduğu, kullandığınız hosting türüne göre değişir.

Hosting değiştirmeden önce sunucu yanıtını ölçün

Tarayıcının sayfayı istemesinden sunucudan ilk veri parçasının (ilk bayt) gelmesine kadar geçen süreye TTFB denir. Bu süre uzunsa sayfayı günün farklı saatlerinde test edin. Gecikmenin bütün sayfalarda mı, yalnız karmaşık bir şablonda mı olduğuna bakın.

Nedeni sunucu kaynaklarının yetmemesi, WordPress’in sayfayı hazırlarken fazla iş yapması (PHP ve veritabanı) ya da dışarıdaki bir hizmetin geç yanıtı olabilir. Hosting firmanızdan sunucu kayıtlarına (log) bakmasını ve sayfanın önbellekli ve önbelleksiz açılış süresini karşılaştırmasını isteyin.

Kaynakların yetmediği kesinleşirse daha güçlü bir pakete geçmek mantıklıdır. Sorun büyük bir görsel, ağır JavaScript ya da yanlış bir önbellek kuralıysa, paketi büyütmek yerine o nedeni düzeltin.

Her önbellek başka bir işe yarar

Önbellek (cache), hazırlanan içeriğin saklanıp yeniden kullanılmasıdır. Başlıca türleri şunlar:

• Tarayıcı önbelleği, değişmeyen görsel, CSS ve font dosyalarının yeniden indirilmesini azaltır.
• Sayfa önbelleği, uygun sayfalarda giriş yapmamış ziyaretçilere sayfanın hazır bir kopyasını sunabilir.
• CDN (içerik dağıtım ağı), bazı dosyaları ziyaretçiye daha yakın sunucularda saklayıp oradan dağıtır. Sunucunun sayfayı geç hazırlamasını ya da tarayıcıyı meşgul eden ağır kodu tek başına düzeltmez.
• Nesne önbelleği veritabanı sonuçlarını saklar. Üyelik ya da sepet gibi kişiye göre değişen sayfaları olan sitelerde işe yarayabilir.

Aynı işi yapan sistemleri körlemesine üst üste kurmayın. Önce hosting firmanızın ya da CDN’nin zaten sayfa önbelleği verip vermediğini öğrenin. Sırf hızlandırma için yeni bir eklenti kurmak zorunlu değildir.

Sepet, ödeme, üye girişi gibi kişiye özel alanlarda yanlış kurulmuş önbellek, yavaşlıktan daha ciddi sorun çıkarır. Örneğin ziyaretçi güncel olmayan bir sepet görebilir ya da form gönderilmeyebilir.

Kurulumdan sonra bir içeriği güncelleyip yeni halinin ne zaman göründüğüne bakın. Formu ve çerez tercihlerini de önbellek açıkken deneyin.

Düzelttiğinizi doğrulayın, hızı koruyun

Değişiklikten önce PageSpeed raporunun ekran görüntüsünü alın. Yanına sayfa adresini, tarihi, mobilde mi masaüstünde mi test ettiğinizi ve bulduğunuz nedeni not edin.

Sonra tek bir ana değişiklik yapıp aynı sayfayı benzer koşullarda birkaç kez test edin, çünkü tek bir test yanıltabilir. Sayfanın görünüşünü ve işlevlerini de kontrol edin.

Ardından gerçek kullanıcı verisini birkaç hafta izleyin. Bu veri, Chrome kullanıcılarının bir kısmından toplanan Chrome UX Report (CrUX) ölçümlerinden gelir. Laboratuvar sonucundan farklı çıkması normaldir, çünkü cihazlar, bağlantılar, kullanıcı davranışları ve kapsanan dönem farklıdır.

Siteye yeni görsel ya da izleme kodu ekledikçe sayfalar yeniden ağırlaşabilir. Önemli sayfaları belli aralıklarla yeniden ölçün.

Ağır eklentilere ve eski sürümlere de bakın, ama “veritabanını temizle” her siteye uyan bir reçete değildir. Bir eklentiyi kaldırmadan önce sitede başka bir işe yarayıp yaramadığını kontrol edin. Güncellemeden önce de yedek alın ve test ortamında formu, menüyü, mobil görünümü ve girişi deneyin.

Hızlı bir sayfa ziyaretçiniz için değerlidir. Yine de Core Web Vitals sınırlarını geçmek Google’da üst sıraya çıkmayı garanti etmez. Daha çok satış ya da talep getireceği de kesin değildir.

Bu kontrolleri benim yapmamı isterseniz WordPress hız optimizasyonu sayfasına bakabilirsiniz. Ölçümleri düzenli bakımın parçası yapmak için WordPress bakım hizmeti sayfasına da göz atabilirsiniz.

Sık sorulan sorular

PageSpeed puanının 100 olması gerekir mi?

Hayır. Bu puan tek bir laboratuvar testinin özetidir. Önce gerçek kullanıcı verisindeki üç ölçüte ve sayfanın işini görüp görmediğine bakın. Son birkaç puan için formu ya da okunurluğu bozmaya değmez.

Cache eklentisi kurmadan WordPress hızlanır mı?

Evet. Bazı kurulumlarda hosting ya da CDN uygun önbelleği zaten verir. Görsel, font, şablon ve gereksiz kod düzeltmeleri de eklentisiz yapılabilir. Yeni bir eklentiyi ancak gerçek bir ihtiyaç varsa düşünün.

CDN her sitede gerekli mi?

Hayır. Bu, ziyaretçilerinizin ve sunucunuzun nerede olduğuna, sabit dosyalarınızın ağırlığına ve şu anki yanıt sürelerine bağlıdır. CDN’yi açtıktan sonra aynı sayfaları yeniden ölçün. Yanlış kurulmuş önbellek, içerik güncellenince eski kopyanın silinmemesi gibi sorunlarla kazançtan çok karışıklık yaratabilir.