Merhaba arkadaşlar, bugün sizlere Next.js projelerinde en çok gözden kaçan ama performansı ciddi anlamda etkileyen bir konudan bahsedeceğim: third-party script'ler. Google Analytics, Facebook Pixel, reklam script'leri, chatbot'lar derken, bir bakmışsınız sayfanızın başında onlarca dışarıdan gelen script sıraya girmiş. Bu script'ler First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) gibi kritik metrikleri mahvedebiliyor. Ben de bu sorunu `next/script` component'i ile nasıl ele aldım, gelin anlatayım.
Sorun: Script'lerin Kontrolsüz Yüklenmesi
Bir e-ticaret projesinde, ürün sayfasının LCP süresi kabul edilemez seviyelerdeydi. Lighthouse raporu, "Reduce unused JavaScript" ve "Eliminate render-blocking resources" uyarılarını sürekli gösteriyordu. İncelemelerim sonucunda, sayfanın `<head>` bölümünde `async` veya `defer` bile kullanmadan doğrudan eklenmiş bir sürü marketing ve analiz script'i olduğunu gördüm. Bu script'ler, sayfanın kritik iş parçacığını (main thread) blokluyor, kullanıcıya içeriğin görünmesini geciktiriyordu. Next.js'in bize sunduğu `next/script` component'ini sadece import etmek için değil, stratejik olarak kullanmanın zamanı gelmişti.
Çözüm: `next/script` ve Üç Farklı Yükleme Stratejisi
`next/script` component'i, `strategy` prop'u üzerinden bize harika bir kontrol imkanı sunuyor. Temelde üç strateji var: `beforeInteractive`, `afterInteractive` ve `lazyOnload`. Her birinin kullanım amacı farklı.
1. beforeInteractive: Sayfa etkileşime geçmeden ÖNCE, hatta Next.js'in kendi runtime'ından bile önce yüklenmesi gereken kritik script'ler içindir. Çok dikkatli kullanılmalı. Genelde bot doğrulama script'leri gibi şeyler için.
2. afterInteractive: Varsayılan (default) strateji. Sayfa etkileşime geçtikten (hydration tamamlandıktan) sonra yüklenir. Analiz (Google Analytics), pazarlama pixel'leri için en ideal yöntem. Sayfanın kullanıcıya gösterilmesini engellemez.
3. lazyOnload: Sayfa ve tüm diğer kaynaklar yüklendikten, hatta bir süre boşta kaldıktan sonra yüklenir. Chatbot, sosyal medya widget'ı, düşük öncelikli feedback araçları için birebir.
Uygulama: Kodu Nasıl Yapılandırdım?
Artık stratejileri biliyoruz. Peki bunu `_app.js` veya `_app.tsx` dosyasında nasıl uyguladım? İşte benim kullandığım en temiz çözüm:
Bu yapıyı kurduktan sonra, Google PageSpeed Insights skorlarında gözle görülür bir iyileşme oldu. Özellikle "Eliminate render-blocking resources" uyarısı, bu third-party script'ler için neredeyse tamamen ortadan kalktı. Script'leri doğru strateji ile konumlandırmak, tarayıcının daha verimli çalışmasını sağladı.
Peki Ya Sayfa Bazlı Script'ler?
Bazen bir script sadece belirli bir sayfada gerekli olur (örneğin, bir harita kütüphanesi sadece iletişim sayfasında). Bu durumda, o script'i ilgili sayfa komponentinizin içine ekleyebilirsiniz. `next/script` otomatik olarak sayfa değişimlerinde (route change) bile script'in tekrar yüklenmesini engelleyecek şekilde yönetir.
Sonuç olarak, `next/script` sadece bir script ekleme component'i değil, bir performans optimizasyon aracı. Her bir third-party script için "Bu ne zaman çalışmalı?" sorusunu sormak ve buna uygun stratejiyi seçmek, kullanıcı deneyimini ve SEO'yu doğrudan etkiliyor.
Siz Next.js projelerinizde third-party script'leri yönetmek için hangi yöntemleri kullanıyorsunuz? `lazyOnload` için favori kullanım senaryolarınız var mı? Ya da `beforeInteractive` ile ilgili dikkat ettiğiniz başka noktalar? Yorumlarda tartışalım!
Sorun: Script'lerin Kontrolsüz YüklenmesiBir e-ticaret projesinde, ürün sayfasının LCP süresi kabul edilemez seviyelerdeydi. Lighthouse raporu, "Reduce unused JavaScript" ve "Eliminate render-blocking resources" uyarılarını sürekli gösteriyordu. İncelemelerim sonucunda, sayfanın `<head>` bölümünde `async` veya `defer` bile kullanmadan doğrudan eklenmiş bir sürü marketing ve analiz script'i olduğunu gördüm. Bu script'ler, sayfanın kritik iş parçacığını (main thread) blokluyor, kullanıcıya içeriğin görünmesini geciktiriyordu. Next.js'in bize sunduğu `next/script` component'ini sadece import etmek için değil, stratejik olarak kullanmanın zamanı gelmişti.
Çözüm: `next/script` ve Üç Farklı Yükleme Stratejisi`next/script` component'i, `strategy` prop'u üzerinden bize harika bir kontrol imkanı sunuyor. Temelde üç strateji var: `beforeInteractive`, `afterInteractive` ve `lazyOnload`. Her birinin kullanım amacı farklı.
1. beforeInteractive: Sayfa etkileşime geçmeden ÖNCE, hatta Next.js'in kendi runtime'ından bile önce yüklenmesi gereken kritik script'ler içindir. Çok dikkatli kullanılmalı. Genelde bot doğrulama script'leri gibi şeyler için.
2. afterInteractive: Varsayılan (default) strateji. Sayfa etkileşime geçtikten (hydration tamamlandıktan) sonra yüklenir. Analiz (Google Analytics), pazarlama pixel'leri için en ideal yöntem. Sayfanın kullanıcıya gösterilmesini engellemez.
3. lazyOnload: Sayfa ve tüm diğer kaynaklar yüklendikten, hatta bir süre boşta kaldıktan sonra yüklenir. Chatbot, sosyal medya widget'ı, düşük öncelikli feedback araçları için birebir.
Uygulama: Kodu Nasıl Yapılandırdım?Artık stratejileri biliyoruz. Peki bunu `_app.js` veya `_app.tsx` dosyasında nasıl uyguladım? İşte benim kullandığım en temiz çözüm:
JavaScript:
// pages/_app.js
import Script from 'next/script';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<>
{/ Strateji 1: ÇOK KRİTİK & Sayfa Öncesi /}
<Script
src="https://cdn.example.com/critical-security.js"
strategy="beforeInteractive"
onLoad={() => {
console.log('Güvenlik scripti yüklendi.');
}}
/>
{/ Strateji 2: ANALİZ & Etkileşim Sonrası (Varsayılan) /}
<Script
src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
`}
</Script>
{/ Strateji 3: DÜŞÜK ÖNCELİKLİ & Geç Yükleme /}
<Script
src="https://widget.chatbot.com/sdk.js"
strategy="lazyOnload"
onLoad={() => {
// Chatbot widget'ını başlat
console.log('Chatbot SDK yüklendi ve hazır.');
}}
/>
<Component {...pageProps} />
</>
);
}
export default MyApp;Bu yapıyı kurduktan sonra, Google PageSpeed Insights skorlarında gözle görülür bir iyileşme oldu. Özellikle "Eliminate render-blocking resources" uyarısı, bu third-party script'ler için neredeyse tamamen ortadan kalktı. Script'leri doğru strateji ile konumlandırmak, tarayıcının daha verimli çalışmasını sağladı.
Peki Ya Sayfa Bazlı Script'ler?Bazen bir script sadece belirli bir sayfada gerekli olur (örneğin, bir harita kütüphanesi sadece iletişim sayfasında). Bu durumda, o script'i ilgili sayfa komponentinizin içine ekleyebilirsiniz. `next/script` otomatik olarak sayfa değişimlerinde (route change) bile script'in tekrar yüklenmesini engelleyecek şekilde yönetir.
JavaScript:
// pages/contact.js
import Script from 'next/script';
export default function ContactPage() {
return (
<div>
<h1>İletişim</h1>
{/ Bu script sadece bu sayfa yüklendiğinde, etkileşim sonrası yüklenecek /}
<Script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"
strategy="afterInteractive"
onLoad={() => initMap()}
/>
<div id="map"></div>
</div>
);
}Sonuç olarak, `next/script` sadece bir script ekleme component'i değil, bir performans optimizasyon aracı. Her bir third-party script için "Bu ne zaman çalışmalı?" sorusunu sormak ve buna uygun stratejiyi seçmek, kullanıcı deneyimini ve SEO'yu doğrudan etkiliyor.
Siz Next.js projelerinizde third-party script'leri yönetmek için hangi yöntemleri kullanıyorsunuz? `lazyOnload` için favori kullanım senaryolarınız var mı? Ya da `beforeInteractive` ile ilgili dikkat ettiğiniz başka noktalar? Yorumlarda tartışalım!