Alsancak SEO

Bir web sitesinin açılış hızı, internetin en kritik başarı faktörlerinden biridir. Günümüzün dijital dünyasında, kullanıcılar sabırsızdır ve bir sitenin yüklenmesi birkaç saniyeden fazla sürerse, rakibe geçmek için tereddüt etmezler. Yapılan araştırmalar, mobil cihazlarda site yükleme süresinin bir saniyeden üç saniyeye çıkmasının, hemen çıkma oranını (bounce rate) %32 artırdığını gösteriyor. Yavaş bir site sadece kullanıcıları kaybetmenize neden olmakla kalmaz, aynı zamanda Google’ın arama sonuçlarında da gerilere düşmenize yol açar.

Bu kapsamlı rehberde, web sitenizin hızını saniyelere, hatta milisaniyelere indirmek için uygulamanız gereken en temelden en ileri düzeye kadar tüm optimizasyon tekniklerini derinlemesine inceleyeceğiz.

Temel Performans Metriklerini Anlamak: Core Web Vitals

Optimizasyon sürecine başlamadan önce, neyi optimize ettiğimizi bilmeliyiz. Google, web sitesi deneyiminin kalitesini ölçmek için bir dizi standart metrik tanımlamıştır: Core Web Vitals (Temel Web Yaşamsalları). Başarılı bir hız optimizasyonu, bu üç ana metriği hedeflemelidir.

Largest Contentful Paint (LCP) – En Büyük İçerikli Boyama

LCP, sayfanın ana içeriğinin (genellikle büyük bir görsel, başlık veya ana metin bloğu) ne kadar sürede görüntülendiğini ölçer. Bu, kullanıcının sayfanın yüklendiğini algıladığı andır.

• İdeal Hedef: 2.5 saniyenin altı.
• Optimizasyon Alanları: Sunucu yanıt süresi (TTFB), oluşturmayı engelleyen kaynaklar (CSS/JS), yavaş görseller ve yavaş istemci tarafı oluşturma.

Interaction to Next Paint (INP) – Bir Sonraki Boyamaya Etkileşim

Eskiden First Input Delay (FID) metriği ile ölçülen bu alan, artık INP ile daha kapsamlı bir şekilde değerlendirilmektedir. INP, kullanıcının bir butona tıklaması, bir menüyü açması gibi herhangi bir etkileşimden sonra tarayıcının ekranda bir sonraki görsel güncellemeyi (yani yanıtı) göstermesinin ne kadar sürdüğünü ölçer. Bu, sitenin tepki verme hızının bir ölçüsüdür.

• İdeal Hedef: 200 milisaniyenin altı.
• Optimizasyon Alanları: Uzun süren görevler (long tasks) oluşturan yoğun JavaScript yürütülmesi, ana iş parçacığının (main thread) tıkanması.

Cumulative Layout Shift (CLS) – Kümülatif Düzen Kayması

CLS, sayfa yüklenirken beklenmedik şekilde gerçekleşen düzen kaymalarının miktarını ölçer. Örneğin, sayfa yüklendikten sonra aniden bir reklam veya görselin belirerek, kullanıcının tıklamak üzere olduğu butonun yerini değiştirmesi. Bu, kötü bir kullanıcı deneyimine yol açar.

• İdeal Hedef: 0.1’in altı.
• Optimizasyon Alanları: Boyutları belirtilmemiş görseller, boyutları belirtilmemiş reklamlar/gömülü içerikler, kullanıcı etkileşimi olmadan içeriği dinamik olarak yerleştiren CSS/JS.

Sunucu ve Barındırma Optimizasyonu: Altyapının Gücü

Web sitesi hızı, %50 oranında doğru altyapı seçimine ve optimizasyonuna bağlıdır.

Hızlı ve Kaliteli Barındırma (Hosting) Seçimi

Paylaşımlı hosting (Shared hosting) ucuz olabilir, ancak kaynakları diğer sitelerle paylaştığınız için performansınız istikrarsız ve yavaş olacaktır. Hız odaklı siteler için Sanal Özel Sunucu (VPS), Bulut Barındırma (Cloud Hosting) veya Yönetilen WordPress Barındırma (eğer bir CMS kullanıyorsanız) tercih edilmelidir. Sunucunuzun yeterli CPU, RAM ve en önemlisi hızlı SSD/NVMe diskler kullandığından emin olun.

Sunucu Yanıt Süresi (TTFB) Optimizasyonu

Time to First Byte (TTFB), tarayıcının sunucuya bir istek gönderdikten sonra yanıtın ilk baytını alana kadar geçen süredir. TTFB, LCP’nin önemli bir parçasıdır.

• İyileştirme Yolları:
  • Veritabanı Sorgu Optimizasyonu: Yavaş sorguları tespit edin ve optimize edin.
  • Sunucu Tarafı Önbellekleme (Server-Side Caching): Sayfanın statik bir kopyasını oluşturarak her istekte dinamik olarak yeniden oluşturulmasını önleyin (Varnish, Memcached, Redis).
  • Modern Sunucu Yazılımları: Apache yerine daha hafif ve hızlı olan Nginx veya LiteSpeed gibi sunucuları kullanın.

İçerik Dağıtım Ağı (CDN) Kullanımı

CDN, web sitesi içeriğinizin (görseller, CSS, JS dosyaları) coğrafi olarak dağıtılmış sunucu ağlarında depolanmasını sağlar. Bir kullanıcı siteye eriştiğinde, içerik ona en yakın sunucudan teslim edilir. Bu, mesafeden kaynaklanan gecikmeyi (latency) büyük ölçüde azaltır.

• Avantajları: Daha hızlı yükleme, artırılmış güvenilirlik ve DDoS saldırılarına karşı koruma.
• Önerilen Sağlayıcılar: Cloudflare, Akamai, AWS CloudFront.

HTTP/2 veya HTTP/3 Protokollerine Geçiş

Geleneksel HTTP/1.1, her dosya için ayrı bir bağlantı gerektiriyordu. HTTP/2 ve HTTP/3 (QUIC protokolünü kullanan) ile bu durum değişti:

• Çoklama (Multiplexing): Aynı bağlantı üzerinden birden fazla dosyanın aynı anda indirilmesine olanak tanır.
• Başlık Sıkıştırma (Header Compression): Daha küçük başlıklar kullanarak veri transferini hızlandırır.

Sunucunuzun bu modern protokolleri desteklediğinden emin olun.

Ön Uç Optimizasyonu: Tarayıcıdaki Sihir

Kullanıcıların gördüğü ve etkileşimde bulunduğu her şey ön uçta gerçekleşir. Ön uç optimizasyonu, hız artışının en büyük olduğu alandır.

Görsel Optimizasyonu: Hızın Düşmanı Olan Yüksek Boyutlu Dosyalar

Görseller, genellikle bir web sayfasının toplam dosya boyutunun %50’sinden fazlasını oluşturur. Görsel optimizasyonu, LCP’yi iyileştirmenin en etkili yoludur.

Sıkıştırma ve Boyutlandırma

• Kayıplı (Lossy) Sıkıştırma: Görsel kalitesini fark edilmeyecek kadar düşürerek dosya boyutunu %70’e kadar azaltın (TinyPNG, Compressor.io).
• Doğru Boyutlandırma: Görselleri tarayıcıya göndermeden önce, ekranda görünecekleri maksimum boyuta küçültün. Tarayıcıya 2000 piksel genişliğinde bir görseli indirip 500 pikselde göstermesini söylemeyin.

Yeni Nesil Biçimler

WebP ve AVIF gibi yeni nesil görsel formatları, JPEG ve PNG’ye göre çok daha iyi sıkıştırma oranları sunar. Sunucunuzu veya CDN’nizi bu formatları destekleyecek şekilde yapılandırın ve tarayıcıya <picture> etiketiyle veya sunucu tarafında WebP/AVIF’i destekleyen tarayıcılara sunarak uyumluluğu sağlayın.

Tembel Yükleme (Lazy Loading)

Tembel yükleme, ekranda görünmeyen (fold altındaki) görsellerin ve iframe’lerin yalnızca kullanıcı o noktaya kaydırdığında yüklenmesini sağlar. Bu, ilk sayfa yükleme süresini dramatik şekilde kısaltır.

• Basit Uygulama: Görsel etiketlerine loading=”lazy” özelliğini eklemek yeterlidir.

<img src=”resim.jpg” alt=”Açıklama” loading=”lazy”>

Responsive Görseller

Farklı cihazlar için farklı görsel boyutları sunun. srcset ve sizes özelliklerini kullanarak, mobil cihazlara küçük, masaüstüne büyük görseller gönderin.

CSS ve JavaScript Optimizasyonu

Bu iki kaynak, sayfa oluşturma (rendering) işlemini engellediği için performansta kritik rol oynar.

Küçültme ve Birleştirme (Minification and Concatenation)

• Minification: CSS ve JavaScript dosyalarından gereksiz boşlukları, yorumları ve yeni satırları kaldırarak dosya boyutlarını küçültün.
• Concatenation: Küçük CSS veya JS dosyalarını tek bir dosyada birleştirerek tarayıcının daha az HTTP isteği yapmasını sağlayın. (Ancak, HTTP/2 kullanıyorsanız, birleştirmenin faydası azalabilir ve bazen dezavantajlı olabilir).

Oluşturmayı Engelleyen Kaynaklardan Kurtulmak

Tarayıcı bir HTML sayfasını işlerken, kritik bir CSS veya JavaScript dosyasına rastlarsa, o dosyayı indirip işlemeden sayfayı oluşturmaya (boyamaya) başlayamaz. Bu, LCP’yi geciktirir.

• JavaScript:
  • async: Komut dosyasını arka planda indirir ve indirme biter bitmez çalıştırır, bu da sayfa oluşturmayı durdurabilir. (Bağımsız komut dosyaları için ideal).
  • defer: Komut dosyasını arka planda indirir ve sayfa oluşturma bittikten sonra, DOM hazır olduğunda, sırayla çalıştırır. (Sayfa yapısına bağımlı komut dosyaları için ideal).
• CSS: Tüm CSS’i kritik olmayan bir kaynak olarak görmekten kaçının.

Kritik CSS (Critical CSS)

Kritik CSS, bir sayfanın ilk görünümünü (above the fold) stilize etmek için kesinlikle gerekli olan minimal CSS kodudur. Bu teknik, FOUC (Flash of Unstyled Content – Stilsiz İçerik Parıltısı) sorununu çözerek hızı artırır:

1. Kritik CSS’i Ayıklayın: Sayfanın ilk görünümü için gerekli olan stil kurallarını belirleyin.
2. HTML İçine Satır İçi (Inline) Olarak Ekleyin: Bu küçük CSS bloğunu <style> etiketiyle <head> içine yerleştirin. Bu, tarayıcının ek bir HTTP isteği yapmadan sayfayı anında stilize etmesini sağlar.
3. Geri Kalan CSS’i Erteleyin: Geri kalan büyük CSS dosyasını, sayfa yüklendikten sonra eşzamansız olarak yükleyin.

Font Optimizasyonu

Web fontları (Google Fonts, özel fontlar) LCP üzerinde önemli bir etkiye sahip olabilir.

• Yerel Font Kullanımı: Mümkünse, kullanıcının sisteminde bulunan fontları tercih edin.
• font-display: swap: Tarayıcıya, web fontu yüklenirken geçici olarak sistem fontunu kullanmasını söyleyin. Bu, metnin hemen görünmesini (FOIT/FOUT sorunlarını önler) ve daha sonra font yüklendiğinde değiştirilmesini sağlar.
• Ön Yükleme (Preload): En kritik font dosyalarını <link rel=”preload”> ile önceden yüklemeye başlayın.

Tarayıcı Önbellekleme ve Servis Çalışanları

Sunucudan sonraki en önemli önbellekleme katmanı, kullanıcının kendi tarayıcısıdır.

HTTP Önbellek Başlıkları

Statik dosyalarınız (görseller, fontlar, CSS, JS) için sunucunuzda uygun HTTP başlıklarını (Header) ayarlayın. Bu, geri gelen ziyaretçilerin bu dosyaları yeniden indirmek yerine tarayıcılarının yerel önbelleğinden kullanmasını sağlar.

• Cache-Control: Bu başlık, tarayıcıya içeriğin ne kadar süreyle geçerli olduğunu söyler. Örneğin, Cache-Control: public, max-age=31536000 (bir yıl) statik dosyalar için yaygın bir pratiktir.
• Expires ve ETag: Bu başlıklar, tarayıcıya, içeriğin değişip değişmediğini hızlıca kontrol etme (yeniden doğrulama) imkanı sunar.

Servis Çalışanları (Service Workers) ile Gelişmiş Önbellekleme

Service Worker’lar, tarayıcı ile ağ arasında bir proxy görevi gören JavaScript dosyalarıdır. Bunlar, Progressive Web App’lerin (PWA) temelini oluşturur ve sitenizi çevrimdışı çalışır hale getirebilir veya önbellekleme stratejilerini (örn. Önce Önbellek, Ağı Düşüşle Kullan) uygulayarak ikinci ziyaretleri anlık hale getirebilir.

Veritabanı Optimizasyonu ve Sunucu Tarafı İşlemleri

Özellikle WordPress, Joomla gibi CMS (İçerik Yönetim Sistemi) kullanan dinamik siteler için veritabanı performansı kritik öneme sahiptir.

Veritabanı Sorgularını Optimize Etme

Sayfa yükleme süresinin büyük bir kısmı veritabanı sorgularında harcanabilir.

• İndeksleme: Sık kullanılan sütunlara (özellikle WHERE veya JOIN koşullarında kullanılanlara) indeks ekleyin. İndeksler, veritabanı tablolarında arama yapmayı çok daha hızlı hale getirir.
• Gereksiz Sorgulardan Kaçınma: Bir CMS kullanıyorsanız, tek bir sorguyla yapabileceğiniz işi birden fazla sorguyla yapmaktan kaçının (N+1 Sorgu Sorunu).
• Veritabanı Temizliği: Düzenli olarak gereksiz verileri (eski taslaklar, spam yorumlar, oturum kayıtları) temizleyin.

PHP Sürüm Güncellemeleri

PHP, birçok sunucu tarafı kodunun çalıştığı dildir. PHP’nin yeni sürümleri (şu anki en son kararlı sürüm PHP 8.x), eskilere göre ciddi performans artışları sunar. Sunucunuzun her zaman en son stabil PHP sürümünü kullandığından emin olun.

OPcache Kullanımı

OPcache, PHP kodunu derlenmiş bayt kodları olarak bellekte önbelleğe alarak, her istekte yeniden derleme ihtiyacını ortadan kaldırır. Bu, dinamik sayfalarda performansı önemli ölçüde artırır.

Üçüncü Taraf Kodlarının Yönetimi: Kontrol Dışındaki Hız Katilleri

Google Analytics, Facebook Pixel, reklam ağları, harici yorum sistemleri ve sosyal medya widget’ları gibi üçüncü taraf kodlar, sitenizin hızını kontrolünüz dışında yavaşlatabilir.

• Tembel Yükleme: Üçüncü taraf komut dosyalarını, yalnızca kullanıcı onlara ihtiyaç duyduğunda yüklenmeleri için tembel yükleyin. Örneğin, yorumlar sayfanın en altında görünüyorsa, kullanıcı o alana kaydırana kadar yüklemeyi erteleyin.
• Kritik Olmayanları Erteleme: Reklam ve analiz betiklerini, sayfa yükleme bittikten sonra defer veya async kullanarak yükleyin. Unutmayın, bu betikler LCP’yi veya INP’yi olumsuz etkilememelidir.
• Barındırma: Mümkünse, fontlar veya küçük komut dosyaları gibi bazı üçüncü taraf kaynakları yerel olarak (sunucunuzda) barındırın.

Mobil Öncelikli Hız Optimizasyonu

Artık internet trafiğinin büyük çoğunluğu mobil cihazlardan gelmektedir. Mobil cihazlar, daha yavaş bağlantı hızlarına ve daha az güçlü işlemcilere sahiptir, bu da optimizasyonun mobil öncelikli olması gerektiği anlamına gelir.

• AMP (Accelerated Mobile Pages): Özellikle haber siteleri için, AMP kullanmak, Google arama sonuçlarında anlık yüklenen sayfalar oluşturarak hızı garantileyebilir.
• Responsive Tasarım: CSS medya sorgularını doğru kullanarak, mobil cihazlarda gereksiz büyük görsellerin veya düzenlerin yüklenmesini engelleyin.
• Dokunma Yanıtı (Touch Response): Mobil kullanıcı etkileşimlerini (INP) optimize etmek için, parmak hareketlerine ve tıklamalara verilen yanıt süresinin düşük olduğundan emin olun.

İleri Düzey Optimizasyon Teknikleri

Saniyeler içinde yüklenen siteler, genellikle bu ileri düzey teknikleri kullanır.

Kod Bölme (Code Splitting)

Özellikle modern JavaScript çerçeveleri (React, Vue, Angular) için geçerlidir. Tüm uygulamanın kodunu tek bir büyük dosyada göndermek yerine, kodu mantıksal olarak bölümlere ayırın (örn. ana sayfa, iletişim sayfası). Kullanıcı bir sayfayı ziyaret ettiğinde, yalnızca o sayfa için gerekli olan kodu indirmesini sağlayın.

Ağ Bilgisi (Network Information) API

Bu API’yi kullanarak, kullanıcının ağ bağlantı hızını tespit edebilir ve buna göre içerik teslim edebilirsiniz. Örneğin, yavaş 3G bağlantısı olan bir kullanıcıya düşük çözünürlüklü görseller gönderebilirsiniz.

Ön Getirme (Prefetching) ve Ön Bağlantı (Preconnect)

Tarayıcıya, kullanıcıların büyük olasılıkla bir sonraki tıklayacağı sayfaları veya sunucuları önceden hazırlamasını söyleyin.

• <link rel=”prefetch” href=”bir_sonraki_sayfa.html”>: Tarayıcıya bu kaynağı boşta kaldığında indirmesini söyler.
• <link rel=”preconnect” href=”https://externalsource.com”>: Tarayıcıya, belirtilen üçüncü taraf sunucuyla DNS çözümleme, TCP el sıkışması ve TLS anlaşması gibi pahalı bağlantı süreçlerini önceden başlatmasını söyler. Bu, harici kaynakların yüklenmesini hızlandırır.

Sürekli İzleme ve Test: Hız Bir Yolculuktur

Optimizasyon tek seferlik bir iş değildir. Sitenize yeni içerikler, eklentiler veya güncellemeler eklediğinizde hız düşebilir.

Kullanılacak Araçlar

• Google PageSpeed Insights: Hem laboratuvar (Lighthouse) hem de saha (Chrome User Experience Report – CrUX) verilerini gösterir, Core Web Vitals skorlarınız için en önemli kaynaktır.
• GTmetrix: Yükleme süresi, tam sayfa boyutu ve performans ipuçları sunar. Waterfall (şelale) diyagramı ile hangi kaynağın ne kadar sürdüğünü detaylıca görebilirsiniz.
• WebPageTest: Farklı coğrafi konumlar, tarayıcılar ve bağlantı hızları üzerinden test yapmanızı sağlar.
• Chrome Geliştirici Araçları (DevTools): Kendi bilgisayarınızda ağ gecikmelerini ve uzun görevleri tespit etmek için en güçlü araçtır.

Saha Verileri (Field Data)

En değerli veri, gerçek kullanıcıların (saha verileri) deneyimleridir. Google Search Console’daki Core Web Vitals raporunu ve Google Analytics’teki Site Hızı raporunu düzenli olarak kontrol edin. Bu veriler, optimizasyon çabalarınızın gerçek dünyada ne kadar etkili olduğunu gösterir.

Hedefe Ulaşmak İçin

Saniyeler içinde açılan bir web sitesi bir lüks değil, bir zorunluluktur. Bu hedefe ulaşmak, doğru altyapı seçimiyle başlar (CDN, hızlı sunucu) ve görsel, CSS/JS optimizasyonları ile devam eder.

Unutmayın:

1. Ölçün: Her zaman Core Web Vitals (LCP, INP, CLS) skorlarınızı takip edin.
2. Kritik Olanı Önceliklendirin: Sayfanın ilk görünümü için mutlaka gerekli olan içeriği (Kritik CSS, LCP öğesi) en hızlı şekilde teslim edin.
3. Erteleyin: Kritik olmayan her şeyi (Tembel yükleme, defer ile JS) erteleyin.
4. Basit Tutun: Gereksiz eklentilerden, temalardan ve üçüncü taraf kodlardan kaçının.

Bu adımları sistematik olarak uygulayarak, sitenizin hızını rakiplerinizi geride bırakacak düzeye taşıyabilir ve kullanıcılarınızın sitenizde daha uzun süre kalmasını sağlayarak dönüşüm oranlarınızı artırabilirsiniz. Hızınız, başarınızın anahtarıdır.