Yükleniyor

Web Siteniz 3 Saniyeden Yavaş mı? Hızlandırma Rehberi

Bilgi Merkezi / Web Performansı

Web Siteniz 3 Saniyeden Yavaş mı? Hızlandırma Rehberi

Q: Nuxt 3 ile PageSpeed 100 alınır mı?

Evet. SSG + WebP + CDN ile 95-100 arası skorlar standarttır.

Q: Hızlı site SEO’yu etkiler mi?

Evet. Core Web Vitals, Google’ın sıralama faktörlerinden biridir. Hızlı site = daha yüksek sıralama.

Giriş

Google’a göre: 3 saniyeden uzun yüklenen sitelerin %53’ü terk edilir. Mobil kullanıcıların %70’i, PageSpeed skoru 90’ın altındaki sitelere güvenmez.

Bu rehberde, Nuxt 3 + Netlify ile PageSpeed 90+, Core Web Vitals 100/100 alan bir site nasıl yapılır, 15 pratik adımda gösteriyoruz.

Uyarı: Yavaş site = Kaybedilen müşteri. Hızlı site = Daha fazla dönüşüm.

Önce Durumunuzu Test Edin

PageSpeed Insights → URL girin → Mobil skorunuzu görün.

Hedef: Mobil ≥ 90 | Masaüstü ≥ 98

Hızlı yüklenen bir web sitesi, yeşil PageSpeed skoru ve Core Web Vitals 100/100 gösteren ekran görüntüsü

PageSpeed 96 | LCP 1.8s | CLS 0.02

Core Web Vitals Nedir? (Kısaca)

Metrik	İyi Skor	Açıklama
LCP	≤ 2.5s	Ana içerik yüklenme süresi
CLS	≤ 0.1	Görsel kayma (layout shift)
INP	≤ 200ms	Etkileşim gecikmesi (FID yerine)
TTFB	≤ 600ms	Sunucu yanıt süresi

15 Pratik Hızlandırma Yolu (Nuxt 3 + Netlify)

1. Nuxt Generate → SSG (Statik Üretim)

$ npm run generate
# Netlify: Build command → npm run generate

2. Netlify CDN → Global Dağıtım

dist/ klasörünü deploy edin → 200+ edge node ile TTFB < 100ms

3. NuxtImg → Otomatik WebP + Boyutlandırma

<NuxtImg src="/hero.jpg" format="webp" quality="80" width="1200" />

4. Lazy Load + Placeholder

:loading="index > 2 ? 'lazy' : 'eager'" :placeholder="[50,25,75]"

5. Font Optimizasyonu (Self-hosted)

// nuxt.config.ts
head: { link: [{ rel: 'stylesheet', href: '/css/fonts.css' }] }

6. Critical CSS Inline Etme

<style> ile ilk ekran CSS’i inline → FCP düşer

7. JavaScript Minify + Tree Shaking

Nuxt 3 otomatik yapar → 0 unused JS

8. Resim Sıkıştırma (WebP + AVIF)

format="webp" → %70 boyut azalır

9. CDN ile Statik Dosyalar

CSS, JS, font → /public/ klasöründe → Netlify CDN

10. Preconnect & DNS Prefetch

link: [{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }]

11. Cache Kontrolü (Netlify Headers)

# _headers
/css/*
  Cache-Control: public, max-age=31536000

12. HTTP/2 & HTTP/3 Desteği

Netlify otomatik → Daha hızlı paralel yükleme

13. Lighthouse CI ile Otomatik Test

GitHub Actions → Her deploy’de skor kontrolü

14. Netlify Analytics → Gerçek Kullanıcı Verisi

CrUX verisi → Gerçek LCP, CLS, INP

15. ISR (Incremental Static Regeneration)

Dinamik içerik → revalidate: 60 ile güncel kalsın

Gerçek Örnek: Site Tasarım TR Hız Skoru

Metrik	Önce	Sonra
PageSpeed Mobil	68	96
LCP	4.2s	1.8s
CLS	0.32	0.02

Hız Test Araçları

PageSpeed Insights → Lab verisi
GTmetrix → Detaylı rapor
Netlify Analytics → Gerçek kullanıcı performansı

Sıkça Sorulan Sorular (FAQ)

3 saniye kuralı gerçek mi?

Evet. Google ve Akamai araştırmalarına göre, 3 saniyeden uzun yüklenen sitelerde hemen çıkma oranı %53 artar.

Nuxt 3 ile PageSpeed 100 alınır mı?

Evet. SSG + WebP + CDN ile 95‑100 arası skorlar standarttır.

Hızlı site SEO’yu etkiler mi?

Evet. Core Web Vitals, Google’ın sıralama faktörlerinden biridir. Hızlı site = daha yüksek sıralama.

Sonuç

Hızlı site = daha çok ziyaretçi + daha çok dönüşüm.

Site Tasarım TR olarak, Nuxt 3 + Netlify ile PageSpeed 90+ garantili web siteleri tasarlıyoruz. Hızlı site istiyorum!

Diğer İçerikler

Web Araçları

Markdown Editor

Markdown metinlerinizi yazın ve anında canlı HTML önizlemesini görün. Başlıklar, listeler, kod blokları ve daha fazlası. Tarayıcıda, hızlı ve ücretsiz!

Web AraçlarıYeni

QR Kod Oluşturucu

URL, Wi-Fi, vCard, metin gibi verilerinizi saniyeler içinde özelleştirilebilir QR koda çevirin. Logo, renk ve SVG/PNG indirme desteği.

QR & PaylaşımPopüler

Emoji Seçici

1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.

Emoji & İçerikÜcretsiz

Resim Format Dönüştürücü

PNG → JPG, JPG → PNG, WEBP → JPG/PNG, HEIC → JPG gibi en popüler formatlar arasında saniyeler içinde dönüşüm yapın. Kalite ayarı, toplu işlem desteği ve tamamen tarayıcıda – indirme olmadan!

MultimedyaPopüler

CSS Oluşturucu

CSS kodlarınızı otomatik oluşturun: gölgeler, gradyanlar ve daha fazlası.

Web TasarımÜcretsiz

Ücretsiz Fotoğraf Düzenleyici

Tarayıcıda profesyonel fotoğraf düzenleme. Parlaklık, kontrast, doygunluk, sıcaklık, netlik, vignette ve 10+ hazır filtre ile Lightroom benzeri deneyim. Hiç indirme gerekmez, tamamen ücretsiz!

MultimedyaYeni

PDF Ayırıcı (Sayfa Bölme)

Tek PDF dosyasını istediğiniz sayfalara ayırın. Belirli sayfaları seçin veya aralık belirleyin, saniyeler içinde yeni PDF’ler oluşturun – tamamen tarayıcıda!

PDF & DokümanYeni

Alarm Saati & Hatırlatıcı

Tarayıcınızda saniyeler içinde alarm kurun. Sabah uyanma, toplantı hatırlatması, mola zamanı veya "yatma vakti" için ideal. Birden fazla alarm, özelleştirilebilir sesler, bildirim desteği ve kolay erteleme.

Günlük VerimlilikHer Gün Kullan

Web Editor

HTML ve CSS kodlarınızı yazın, düzenleyin ve canlı önizlemeyi görün. Hızlı prototipleme ve öğrenme için ideal.

Kod & GeliştirmeCanlı Düzenleyici

Renk Seçici

Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.

Web TasarımAraç