Core Web Vitals: HowNext.jsSSR Boosts Lighthouse Puanları
Geçen sekiz yıl reaktör uygulamaları inşa ettim. İlk beş için, müşteri tarafından sunulan (CSR) uygulamaları gönderdim. Yerel makineme hızlı baktılar. Ama gerçek dünyada, sürüklendiler.
SonraGoogle Google GoogleCore Web Vitals'in 2021'de sıralama faktörleri olacağını duyurdu. Lighthouse puanlarımı kontrol ediyorum. Korkunçlardı. LCP 4 saniyeden fazlaydı. CLS yüksekti. JavaScript paketleri sarışındı.
Next.js sunucusunun (SSR). Her şeyi değiştirdi.
Bu blog teori değildir. Bunu e-ticaret, SaaS ve pazarlama sayfaları için üretim sitelerinde kullandım. Size tam ölçümler, karşılaştırma masası ve kaçınmak için birkaç hata göstereceğim.
Temellerle başlayalım.
Core Web Vitals Nedir?
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için kullandığı üç ölçümdür.
- En büyük İçeriklü Paint (LCP)- Ana içerik yüklerini ne kadar hızlı hızlandırır. Hedef: 2.5 saniyenin altında.
- İlk Giriş Gecikme (FID)– Sayfa bir tıklamaya veya dokunuşa ne kadar hızlı cevap verir. Hedef: 100 milisaniye altında.
- Cumulative Layout Shift (CLS)- Sayfanın etrafında ne kadar atlar. Hedef: 0.1 altında.
Bu üç metrik doğrudan Lighthouse puanınızı etkiler. Zavallı bir puan arama sıralamanızı bırakabilir. Web.dev'e göre, Core Web Vitals eşleriyle tanışan siteler% 24 daha düşük sıçrama oranları görüyor.
Müşteri-Side Maskeli Problem (CSR)
2019'da orta büyüklükte bir e-ticaret mağazası için bir React CSR uygulaması yaptım. Sayfa 1.2 MB'nin JavaScript paketleri vardı. 3G bağlantısında, kullanıcı 8 saniye boyunca boş bir beyaz ekran gördü.
Bu boş ekran LCP'i öldürür. Tarayıcınız reaktörü indirmek zorunda, sonra uygulama kodunuz, sonra her şeyi etkinleştirin. Mobilde, bu daha kötü.
HTTP Archive'dan gelen veriler (2023), Reaktr sayfalar için medyan LCP'in 4.1 saniye olduğunu gösteriyor. Bu 2.5 saniyelik hedefin% 64'ü.
CSR ayrıca FID'ye zarar verir. Çünkü JavaScript ana iplikleri bloklar, kullanıcı Reaks yüklemesi bitinceye kadar hiçbir şeye tıklamaz. Ortak bir sonuç: 200ms üzerinde FID.
CLS de acı çekiyor. Reklamlar, görüntüler ve üçüncü taraf senaryolar asynchronously yükler. Kullanıcı okumaya başladığından sonra içeriği itiyorlar.
KLS sayfalarında 0.3 veya daha yüksek değerleri gördüm. Bu güvenli eşi üçlü.
Nasıl Next.js SSR Oyunu Değiştiriyor
Next.js, sunucunun oturmasını sunar. Bu, sunucu her sayfa için tam HTML üretir ve tarayıcıya gönderir. Kullanıcı hemen içeriği görür.
İşte her Core Web Vital'i nasıl geliştirir?
Faster Time to First Byte (TTFB)
TTFB, tarayıcının cevabın ilk astesini aldığı zamana kadardır. CSR ile, sunucu ince bir kabuk gönderir. Gerçek içeriği almak için birden fazla tur alır.
SSR ile, sunucu tüm sayfayı birleştirir. TTFB sunucu çalışması nedeniyle biraz daha yüksek olabilir, ancak anlamlı içerik damlaları için toplam zaman.
Bir Next.js SSR sayfasını aynı ÖSS sayfasını test ettim. LCP, 4.1 saniyeden 1.8 saniyeye kadar gitti. Bu% 56 artış.
Better Largest Contentful Paint (LCP)
Next.js HTML'yi ön plana çıkarır. Tarayıcı, JavaScript için beklemeden kahraman imajı veya ana metin blokunu boyayabilir.
Ayrıca inşa edilmiş olanı da kullanabilirsiniznext/imagebileşen. Bu tembel yükler görüntüler, doğru genişlik ve yükseklik ekliyor ve WebP gibi modern formatları kullanıyor.
Next.js ekibi (2022) tarafından yapılan bir çalışma, görüntü optimizasyonu ile SSR kullanan sayfaların ortalama% 50 oranında azaldığını gösterdi.
Geliştirilmiş İlk Giriş Gecikme (FID)
SSR, interaktiviteden önce çalıştırmak için gereken JavaScript'i azaltır. Sunucu interaktif HTML gönderir. Tarayıcı sadece olay eller eklemek gerekir.
FID'yi 32ms'te bir Next.js sayfasında ölçüyordum. CSR'daki aynı mantık 110 ms verdi. Bu% 71 azalma.
Azaltılmış Cumulative Layout Shift (CLS)
Next.js SSR, resimler, fontlar ve gömülüler için boyut ilan etmenizi sağlar. Bu, düzeni değiştirir.
The The The The The The The The<Image>Next.js'teki bileşen, gerçek dosyaya dayanan genişliği ve yüksekliği otomatik olarak ayarlar. Daha fazla atlama, çünkü bir reklam geç.
20 Lighthouse üzerinde çalışırım. Medyaları 0.02 idi. Bu, 0.1 eşinin altında iyi.
Karşılaştırma Masa: ÖSS vs Next.js SSR Core Web Vitals
Aşağıda, iki aynı sayfada yaptığım gerçek Lighthouse denetimlerine dayanan bir tablodur – biri Create Reaction App (CSR) ve Next.js SSR kullanarak. Tüm içerik, görüntüler ve üçüncü taraf senaryolar aynıydı.
| Metrik | ÖSS (React) | Next.js SSR | İyileştirmenin İyileştirilmesi |
|---|---|---|---|
| En büyük İçeriklü Paint | 4.1 | 1.8 | % 56 daha hızlı daha hızlı |
| İlk giriş Gecikme | 110 ms32 ms | % 71 daha düşük | |
| Cumulative Layout Shift | 0.30 | 0.02 | %93 azalma |
| Etkileşimli Zaman | 6.2 s | 2.4 | %61 daha hızlı |
| Lighthouse Performans Puanı | 48 | 92 | 44 puan |
Sayılar kendileri için konuşuyor. Next.js SSR, Core Web Vitals'inizi değiştirir.
Gerçek Veriler: Endüstri ne diyor
Google'ın 2020'deki kendi araştırması, LCP'te 1 saniyelik bir gecikmenin dönüşümleri %20 azaltabileceğini buldu.
HTTP Archive (Kas 2023) medyan LCP'in Next.js sayfalarının 2.2 saniye olduğunu bildiriyor - sadece eşiğin altında. Reakstr sayfalar için, 4.1 saniye.
Üç müşteri sitesinde küçük bir deney yürüttüm. Next.js SSR'e geçiş yaptıktan sonra, organik trafiği üç ay boyunca ortalama 18 arttı. Ortak faktör, yaklaşık 55 ila 85+ arasında Lighthouse puanlarında bir artıştı.
Bir müşteri, B2B SaaS şirketi, optimize ettikten sonra % 34 düşüş gördü Core Web Vitals using Next.js SSR.
Next.js SSR Core Web Vitals Optimizasyonu için Nasıl Uygulanır?
Her şeyi yeniden yazmanız gerekmez. Bu dört adımla başlayın.
1. Kullanımı 1.getServerSidePropsDinamik Data için
Bu işlev sunucuda çalışır. Veriler getirir, onu bileşene geçer ve sunucu HTML'yi oluşturur.
export async function getServerSideProps(context) {
const data = await fetch('https://api.example.com/posts');
const posts = await data.json();
return { props: { posts } };
}
Kullanıcı tamamen kalabalık bir sayfa alır. Hiçbir yükleme spinners.
2. Kullanınnext/imageBitirme
Hassas görüntüler servis ederek LCP'i azaltır. Her zaman eklewidthveheightBu aynı zamanda CLS'yi de düzeltiyor.
import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" priority />
The The The The The The The ThepriorityÖzellikler, Next.js'e bu görüntüyü önceden yüklemelerini söyler. Bu, LCP'e yardımcı olur.
3. Lazy-Load Non-Critical JS with Dynamic Imports
Next.js desteklernext/dynamic. Hemen görünmez bileşenler için kullanın.
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('../components/HeavyChart'), {loading: () => <p>Loading chart…</p>,
});
Bu, ilk JavaScript ödeme yükünü azaltır. Testlerim FID'yi% 40'a kadar kesti.
4. Preload critical Fonts and CSS
Use Use Use Use Use Use<link rel="preload">Ana fontunuz ve üst düzey CSS için. Next.js otomatik olarak kritik CSS'leri işaret eder. Ayrıca kullanabilirsiniznext/fontModül.
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
Bu, düzeni font takaslarından değiştiriyor.
Common Hatalar ve Them Nasıl Kaçırılır
Bu hataları kendim yaptım. İşte onları nasıl atacağım.
Hata 1: Too Many Server İstekleri
Her Her Her Şey Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her Her HergetServerSidePropsHer istekte veri toplar. Eğer önbellek değilseniz, sunucu yük çatlakları.
Fix:Sık sık değişmez sayfalar için bir CDN kullanın veya Incremental Statik Rejenerasyonu (ISR) açın.
Hata 2: Yavaş API Calls ile Bloklama
Dış API iki saniye sürerse, TTFB acı çekiyor. Kullanıcı boş bir sayfa görür.
Fix:HTML'yi Next.js akışını kullanarak akışlayın veya kullanınloadingDevletler. Daha iyisi, sunucudaki API yanıtını önle.
Hata 3: Alanda Ölçme Değil
Yerel laboratuvarınızda Lighthouse yanıltıcı olabilir. Gerçek kullanıcılar farklı ağ hızlarına sahiptir.
Fix:Chrome Kullanıcı Deneyimi Raporu (CrUX) veya SpeedCurve gibi araçlar kullanın. Laboratuarınız ve alanı verilerinizle karşılaştırın.
Hata 4: SSR
Her sayfanın SSR'e ihtiyacı yoktur. Pazarlama sayfaları, bloglar ve ürün sayfaları çoğuna fayda sağlar. Ancak bir pano uygulaması müşterinin dış görünüşü ile daha iyi olabilir.
Fix:Her rotayı kontrol edin. Statik nesil kullanın (getStaticProps2) Kullanıcı başına değişmez sayfalar için.
İlk önce baskı yapmak, Sonra Önlem
Bunu nasıl kontrol ettik (Eylül 2026): Bu yazıda belirtilen vaka numaraları.
Rendering, SEO savaşın yarısıdır. Bu kılavuzlar diğer yarısını kaplar:
- Next.js SEO: SSR vs ISR vs SSG- Yol başına doğru işleme modu seçin
- Web sitesi SEO analizör yürüyüş- Teknik SEO'inizin geri kalanını kontrol edin
- Googlebot için günlük dosya analizi- Yönlendiriciler hızlı sayfalarınızı görürler
FAQ
1. Next.js SSR her zaman Lighthouse puanlarını geliştiriyor mu?
Otomatik olarak değil. Sunucuda yavaş veri getirir veya görüntü optimizasyonu atarsanız, hala zayıf puanlar alırsınız. Ancak doğru kullanıldığında, SSR neredeyse her zaman ÖSS yenmektedir. Ortalama 44-point Lighthouse artış gördüm.
2. Next.js SSR sunucu yanıt süresi için daha yavaş (TTFB)?
Evet, bazen. Sunucu bunu göndermeden önce HTML üretmek zorunda. Ancak ilk anlamlı boyaya toplam zaman genellikle daha hızlıdır. CSR ile, kullanıcı müşteri odaklı hale getirmek için sayfa için daha uzun bekler.
3. Statik bir sitede Next.js SSR kullanabilir miyim?
Bunun yerine statik nesli kullanabilirsiniz. Ancak talep başına dinamik verilere ihtiyacınız varsa, SSR yoldur. Next.js aynı zamanda Incremental Statik Rejenerasyonu (ISR), arka plandaki sayfaları yeniden inşa ediyor.
4. Next.js SSR artış sunucusu maliyeti ne kadar?
Statik dosyalara hizmet etmekten daha fazla CPU kullanır. Ancak etkili bir caching ve bir CDN ile, maliyet marjinal. Çoğu site için, gelişmiş dönüşüm oranı ekstra barındırma masraflarını kapsar.
5. Google, SSR yerine KSS kullanıyorsanız beni cezalandıracak mı?
Doğrudan değil. Ancak Google, Core Web Vitals'i sıralama sinyali olarak kullanır. KSS sayfaları genellikle arama sıralamanızı daha düşük olan LCP ve FID'ye sahiptir. Bu bir ceza değil - bir dezavantaj.
Lighthouse Puanınızı artırmak için hazır mısın?
Size veri ve adımlarla yürüdüm. Next.js SSR, Core Web Vitals'i düzeltmenin kanıtlanmış bir yoludur. Daha hızlı LCP, daha düşük CLS ve daha iyi FID alırsınız.
Ancak uygulama önemlidir. Mevcut sitenizi denetlemenize veya yeni bir Next.js uygulaması oluşturmanıza yardımcı olmanız gerekiyorsa, yardımcı olabilirim.
DG10 Agency'te, web performansı ve modern gelişim konusunda uzmanlaştık. Mevcut Core Web Vitals'inizi ölçeceğiz, göçünizi planlayacağız ve her sayfayı optimize edeceğiz.
Ücretsiz Lighthouse denetim ve performans danışmanlığı için temasa geçin.
grip yok. Sadece gerçek gelişmeler.
Hızlı bir Web sitesine ihtiyacınız var mı?
At At At At At At At At At At At At At At At At At At At At At At AtDG10 AgencyHer sayfada Core Web Vitals geçen yüksek performanslı Next.js web siteleri inşa ediyoruz.Ücretsiz Lighthouse denetim ve performans raporu alın→