Core Web Vitals Nedir ve Nasıl 100 Skora Ulaşılır? (LCP, INP, CLS Optimizasyonu)
Google PageSpeed testlerinde 100 tam puan almak için INP, LCP ve CLS metriklerini optimize etme, görsel ve font yönetimi stratejileri.
Core Web Vitals: Performansın SEO ve Kullanıcı Deneyimine Etkisi#
Google, 2021 yılından bu yana sayfa açılış hızını ve kullanıcı deneyimini doğrudan bir sıralama faktörü (ranking signal) olarak değerlendirmektedir. 2024 itibarıyla FID metriğinin yerini alan INP (Interaction to Next Paint) ile birlikte üç temel metrik sitenizin geleceğini belirler:
- 1.LCP (Largest Contentful Paint): Sayfanın ana görsel veya metin bloğunun ekrana çizilme süresi. Hedef: ≤ 2.5 saniye.
- 2.INP (Interaction to Next Paint): Kullanıcının sayfadaki bir butona tıklaması veya form doldurması sonrasındaki yanıt gecikmesi. Hedef: ≤ 200 ms.
- 3.CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin beklenmedik şekilde kayması ve yer değiştirmesi. Hedef: ≤ 0.1.
1. LCP (Largest Contentful Paint) Optimizasyonu#
LCP puanını düşüren en yaygın hata, hero (kahraman) bölümündeki büyük afiş görsellerinin tembel yüklenmesi (lazy loading) veya optimize edilmemiş PNG/JPEG formatında servis edilmesidir.
Çözüm Adımları:
- Priority Özelliği: Next.js Image bileşeninde en üstteki ana görsel için priority ve fetchPriority="high" tanımlayın.
- Modern Formatlar: WebP ve AVIF formatlarını kullanın.
- CDN ve Önbellekleme: Vercel Edge Network veya Cloudflare üzerinden görselleri sıkıştırın.
| 1 | import Image from "next/image"; |
| 2 | |
| 3 | export function HeroBanner() { |
| 4 | return ( |
| 5 | <div className="relative h-[480px] w-full"> |
| 6 | <Image |
| 7 | src="/images/hero-banner.webp" |
| 8 | alt="Yazılım Geliştirme Hizmetleri" |
| 9 | fill |
| 10 | priority |
| 11 | sizes="(max-width: 768px) 100vw, 1200px" |
| 12 | className="object-cover" |
| 13 | /> |
| 14 | </div> |
| 15 | ); |
| 16 | } |
2. INP (Interaction to Next Paint) İyileştirme#
Sayfadaki JavaScript main thread (ana iş parçacığı) bloke olduğunda, kullanıcı bir butona tıkladığında tarayıcı ekrana yeni kareyi çizemez.
requestIdleCallback veya Web Worker'a taşıyın. React 19'un useTransition hook'u ile UI kilitlenmelerini engelleyin.| 1 | import { useTransition, useState } from "react"; |
| 2 | |
| 3 | export function FilterList({ items }: { items: string[] }) { |
| 4 | const [isPending, startTransition] = useTransition(); |
| 5 | const [query, setQuery] = useState(""); |
| 6 | |
| 7 | const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => { |
| 8 | // Input anında güncellenir (INP skorunu korur) |
| 9 | const val = e.target.value; |
| 10 | |
| 11 | // Ağır filtreleme işlemi arka plana ötelenir |
| 12 | startTransition(() => { |
| 13 | setQuery(val); |
| 14 | }); |
| 15 | }; |
| 16 | |
| 17 | return ( |
| 18 | <div> |
| 19 | <input onChange={handleSearch} placeholder="Ara..." /> |
| 20 | {isPending && <span className="text-xs text-cyan-500">Hesaplanıyor...</span>} |
| 21 | </div> |
| 22 | ); |
| 23 | } |
3. CLS (Cumulative Layout Shift) Sıfırlama#
Kullanıcı bir makaleyi okurken tepeden aniden bir banner reklamın veya geç yüklenen fontun inip metni aşağı kaydırması en can sıkıcı deneyimlerden biridir.
CLS'yi 0 Yapmanın Yolları:
- Görsellere ve iframelere her zaman sabit oran (aspect-ratio) veya width / height atayın.
- next/font kullanarak fontları build anında indirin ve display: swap ile layout shift yaratmadan render edin.
- Dinamik yüklenen bileşenler için Skeleton Loader (iskelet yükleme ekranı) yer tutucuları tanımlayın.
| 1 | /* Tailwind ile Aspect Ratio sabitleme */ |
| 2 | .card-image-wrapper { |
| 3 | @apply relative aspect-video w-full overflow-hidden rounded-2xl bg-slate-100 dark:bg-slate-800; |
| 4 | } |
Bu üç temel sütunu uygulayarak Google Lighthouse ve PageSpeed Insights analizlerinde 100/100 Performans Skoru elde edebilirsiniz.
Next.js Web Yazılım, SaaS, Admin Paneli & SEO
Next.js App Router, TypeScript, Tailwind CSS ile %100 Lighthouse performanslı kurumsal web siteleri, SaaS panelleri ve Core Web Vitals SEO optimizasyonu.
İlgili Çözüm Paketleri
Admin Panelli Mobil Uygulama Geliştirme | Nuh Mehmet Demirkol
İşletmenizin tüm dinamiklerini (kullanıcılar, siparişler, stoklar, bildirimler ve finansal raporlar) tek tıkla yönetebileceğiniz web tabanlı Next.js admin paneli ve Flutter mobil uygulama ekosistemi.
Özel Web Yazılım & SaaS Geliştirme (Next.js) | Demirkol
Hazır şablonlardan uzak, tamamen işletmenizin ihtiyaçlarına göre sıfırdan kodlanan, Google PageSpeed 99+ puan alan, ultra hızlı ve SEO lideri Next.js web platformları.
Teknik Kılavuzlar & Blog
Next.js 16 ile Kapsamlı SEO Rehberi: Metadata, Core Web Vitals ve Server Components
Next.js 16 App Router mimarisinde dinamik metadata, robots, sitemap, Open Graph ve Server Component optimizasyonlarını adım adım uygulayın.
Schema.org ve Rich Snippets: Google Arama Sonuçlarında Öne Çıkın
JSON-LD ile zengin arama sonuçları elde etme; BlogPosting, FAQPage, BreadcrumbList ve Organization şemalarının React & Next.js üzerinde doğru kullanımı.
İlgili Canlı Projeler
Profesyonel Öğretmen Bul Platformu
Öğrenci ve velilerin branş bazında özel ders öğretmenlerini bulup randevu alabildiği, modern web ve mobil entegrasyonlu SaaS sistemi.
Dijital Düğün & Nişan Davetiyesi Web Platformu
Çiftlerin kişiselleştirilmiş dijital davetiyeler oluşturup LCV (katılım bildirimi) ve yol tarifi alabildiği modern interaktif platform.
Hibrit Kart Web & Dijital Kartvizit Platformu
Hibrit Medya bünyesinde frontend mimarisi Next.js TSX ile sıfırdan geliştirilen dijital kartvizit ve kurumsal profil sistemi.
Bu Konuda Projeniz mi Var?
Makalede bahsedilen mimari çözümleri, mobil veya modern web projenizde sıfır hata ve maksimum performansla hayata geçirmek için doğrudan iletişime geçebilirsiniz.