Sayfa Hızı Optimizasyonu: WordPress ve Next.js Performans İpuçları
Sayfa yükleme hızını artırmanın teknik yolları: görsel sıkıştırma, CDN, lazy loading, kod optimizasyonu ve önbellekleme.
Sayfa Hızı Optimizasyonu: WordPress ve Next.js Performans İpuçları
Sayfa hızı hem SEO sıralamasını hem de kullanıcı deneyimini doğrudan etkiler. Google'ın araştırmasına göre, mobil sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında hemen çıkma oranı %32 artıyor.
Performansı Ölçme
# Lighthouse CLI
npm install -g lighthouse
lighthouse https://siteniz.com --output json | jq '.categories.performance.score'
# WebPageTest
# webpagetest.org → Farklı lokasyon/cihazlardan test
# GTmetrix
# gtmetrix.com → LCP, TBT, CLS + waterfall şelale grafik
Görsel Optimizasyonu
Sıkıştırma ve Format
# ImageMagick ile toplu yeniden boyutlandırma
sudo apt install imagemagick
mogrify -resize 1200x -quality 85 *.jpg
# cwebp ile WebP dönüşümü
for img in images/*.jpg; do
cwebp -q 80 "$img" -o "${img%.jpg}.webp"
done
# AVIF (modern format, WebP'den %50 daha küçük)
sudo apt install libavif-bin
avifenc --min 0 --max 63 input.jpg output.avif
HTML'de Optimal Görsel Kullanımı
<!-- Modern format desteği -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero"
width="1200" height="630"
loading="lazy"
decoding="async">
</picture>
<!-- LCP görseli: fetchpriority="high", loading="eager" -->
<img src="/hero-above-fold.webp" alt="Ana görsel"
width="1200" height="630"
fetchpriority="high"
loading="eager">
WordPress Optimizasyonu
Temel Eklentiler
Önbellekleme:
- WP Rocket (ücretli, en iyi)
- W3 Total Cache (ücretsiz)
- LiteSpeed Cache (LiteSpeed sunucu için mükemmel)
Görsel:
- Imagify veya ShortPixel → Otomatik WebP
- Smush → Ücretsiz sıkıştırma
Küçültme (Minify):
- WP Rocket içinde
- Autoptimize (ücretsiz)
Veritabanı temizleme:
- WP-Optimize
.htaccess Optimizasyonu
# Browser Cache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>
# Gzip Sıkıştırma
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
AddOutputFilterByType DEFLATE image/svg+xml application/json
</IfModule>
# Brotli (daha iyi sıkıştırma, mod_brotli gerekli)
<IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript
</IfModule>
WordPress Veritabanı Optimizasyonu
-- wp-config.php içinde sorgu cache
define('WP_CACHE', true);
-- MySQL'de sorgu cache (eski MySQL)
-- query_cache_type = 1
-- query_cache_size = 64M
-- Post revizyonlarını sınırla
-- wp-config.php:
define('WP_POST_REVISIONS', 5);
-- Otomatik taslakları devre dışı
define('AUTOSAVE_INTERVAL', 300);
Next.js Optimizasyonu
next/image ile Otomatik Optimizasyon
import Image from 'next/image';
// Otomatik WebP/AVIF, lazy loading, boyut optimizasyonu
export function HeroImage() {
return (
<Image
src="/hero.jpg"
alt="Hero görseli"
width={1200}
height={630}
priority // LCP görseli için (above-the-fold)
quality={85}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
/>
);
}
// Uzak görsel (next.config.js'de domain izni gerekli)
<Image
src="https://cdn.sitem.com/urun.jpg"
alt="Ürün"
fill
sizes="(max-width: 768px) 100vw, 50vw"
/>
next/font ile Font Optimizasyonu
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap', // CLS'yi azaltır
variable: '--font-inter',
preload: true,
});
export default function Layout({ children }) {
return (
<html className={inter.variable}>
<body>{children}</body>
</html>
);
}
JavaScript Kod Bölme (Code Splitting)
import dynamic from 'next/dynamic';
// Lazy load (sayfa yüklenince değil, görününce)
const AgirBileseni = dynamic(() => import('./AgirBileseni'), {
loading: () => <div className="skeleton" />,
ssr: false, // Client-only bileşen
});
// Intersection Observer ile lazy load
const HaritaBileseni = dynamic(() => import('./HaritaBileseni'), {
ssr: false,
});
next.config.js Optimizasyonları
/** @type {import('next').NextConfig} */
const nextConfig = {
// Görsel optimizasyonu
images: {
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 31536000, // 1 yıl
deviceSizes: [640, 750, 828, 1080, 1200, 1920],
imageSizes: [16, 32, 48, 64, 96, 128, 256],
},
// Sıkıştırma
compress: true,
// Output standalone (Docker için)
output: 'standalone',
// Deneysel özellikler
experimental: {
optimizeCss: true, // CSS küçültme
optimizePackageImports: ['lucide-react', '@radix-ui/react-icons'],
},
// HTTP headers
async headers() {
return [
{
source: '/(.*)',
headers: [
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'X-Frame-Options', value: 'DENY' },
],
},
{
source: '/fonts/(.*)',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
],
},
];
},
};
module.exports = nextConfig;
CDN Kullanımı
Cloudflare (ücretsiz tier):
1. cloudflare.com → DNS nameserver değiştir
2. Speed → Optimization → Minify HTML/CSS/JS
3. Caching → Cache Rules → statik dosyalar
4. Polish → WebP dönüşümü (Pro plan)
Cloudflare Pages (Next.js için):
- Edge fonksiyonlar
- Küresel CDN
- Otomatik SSL
Kritik CSS İnlining
# critters ile Next.js'de kritik CSS
npm install critters
# next.config.js
experimental: {
optimizeCss: true,
}
Performans İzleme
// next.js web vitals reporting
// app/layout.tsx veya pages/_app.tsx
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric); // { name: 'LCP', value: 2340, ... }
// Analytics'e gönder
fetch('/api/analytics', {
method: 'POST',
body: JSON.stringify(metric),
});
}
}
Sayfa hızı optimizasyonu sürekli bir süreçtir. Her büyük özellik eklemesinin ardından Core Web Vitals değerlerinizi ölçün ve hedeflerin altında tutmaya çalışın.
Buyukweb'in hızlı hosting altyapısı, SEO performansınızı doğrudan iyileştirir. Hosting planlarımızı keşfedin.
Ilgili Buyukweb Hizmetleri:
- Hizli hosting ile SEO performansinizi arttirin
- WordPress hosting paketlerimiz
- Tum hosting ve sunucu paketlerimiz
Teknik SEO Kontrol Listesi
Sayfa Hizi
Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1. TTFB 200ms alti. LiteSpeed hosting avantaj saglar. WebP/AVIF resimler, lazy loading, CSS/JS minify.
Mobil Uyumluluk
Google mobile-first indexing kullaniyor. Responsive tasarim, dokunma hedefleri ve mobil hiz kritik.
Yapisal Veri
JSON-LD ile Product, FAQ, HowTo, Article schemalari. CTR %20-30 artis. Rich Results Test ile dogrulayin.
Icerik Stratejisi
Long-tail anahtar kelimelere odaklanin. Derinlemesine icerik olusturun. Duzenli guncelleyin. E-A-T ilkelerine uyun.
Backlink
Misafir yazilar ve teknik iceriklerle dogal profil. Spam linklerden kacinin. Rakip analizi yapin.
Lokal SEO
Google Business Profile olusturun. Yerel anahtar kelimeleri hedefleyin. Musteri yorumlari toplayin. NAP tutarliligi saglayin.
Sik Sorulan Sorular
Hosting SEO etkiler mi?
Evet. Hiz, uptime, SSL ve lokasyon dogrudan etkiler. LiteSpeed + NVMe ideal.
Core Web Vitals nasil iyilestirilir?
LCP: resim optimize, lazy load. INP: JS azalt. CLS: boyut belirt, font-display swap.
Sonuc
SEO teknik altyapi ve icerik kalitesinin birlesimdir. Hosting ile SEO stratejisini entegre ederek ust siralara yukselin.
SEO Arac Kutusu
Ucretsiz SEO Araclari
- Google Search Console: Indeksleme, arama performansi, teknik sorunlar
- Google Analytics 4: Trafik, kullanici davranisi, donusum
- PageSpeed Insights: Core Web Vitals ve performans
- Rich Results Test: Yapisal veri dogrulama
- Screaming Frog (500 URL): Teknik SEO analizi
Ucretli SEO Araclari
- Ahrefs: Backlink ve anahtar kelime analizi
- SEMrush: Kapsamli SEO ve PPC
- Surfer SEO: Icerik optimizasyonu
Icerik Pazarlama Stratejisi
Blog Yazisi Yapisi
- Dikkat cekici baslik (H1) - anahtar kelime icermeli
- Giris paragrafi - sorunu tanimla
- Alt basliklar ile mantiksal bolumler
- Gorseller ve infografikler
- Dahili linkler
- CTA (Call to Action)
- SSS bolumu (FAQ schema)
Icerik Takvimi
Haftada 2-3 yazi yayinlayin. Mevsimsel trendleri takip edin. Evergreen ve trending icerik dengesi kurun.
Profesyonel Hosting icin Onemli Kriterler
Veri Merkezi Kalitesi
Veri merkezinin tier seviyesi, sunucu barindirma kalitesini dogrudan etkiler. Tier 3 veri merkezleri yedekli guc, soğutma ve ag altyapisi ile %99.982 uptime garantisi sunar. Buyukweb'in Bursa Pendc Tier 3 veri merkezi bu standartlari karsilamaktadir.
Teknik Destek Kalitesi
7/24 ulasılabilir, Turkce ve teknik bilgi sahibi destek ekibi hosting hizmetinin vazgecilmez parcasidir. E-posta, canli destek ve telefon kanallarindan hizli yanit almak ozellikle is surekliligi acisından kritiktir.
Olceklenebilirlik
Isletmeniz buyudukce hosting ihtiyaclariniz da degisir. Paylasimli hostingten VDS'e, VDS'den dedicated sunucuya sorunsuz gecis yapabilmek uzun vadeli planlamaniz icin onemlidir. Buyukweb tum bu gecis sureclerini ucretsiz olarak yonetir.
Yedekleme ve Felaket Kurtarma
Gunluk otomatik yedekleme, tek tikla geri yukleme ve uzak yedekleme secenekleri veri guvenliginiz icin sart. JetBackup ile profesyonel yedekleme cozumu tum Buyukweb hosting paketlerinde standarttir.
Guvenlik Katmanlari
SSL sertifikasi, WAF korumasi, malware tarama, DDoS korumasi ve guvenlik duvari - tum bu katmanlar birlikte calisiarak web sitenizi korur. Buyukweb bu guvenliklerin hepsini standart olarak sunar.
Etiketler:
