تحسين نصوص الطرف الثالث
تعتمد العديد من التطبيقات على نصوص جافا سكريبت من طرف ثالث لتضمين أنواع مختلفة من الوظائف، مثل التحليلات والإعلانات وودجات دعم العملاء. ومع ذلك، يمكن لتضمين التعليمات البرمجية من طرف ثالث أن يؤخر عرض محتوى الصفحة ويؤثر على أداء المستخدم إذا تم تحميله مبكرًا جدًا.
يوفر Next.js مكون Script مضمنًا يقوم بتحميل أي نص من طرف ثالث بشكل مثالي، مع منح المطورين خيار تحديد وقت جلب النص وتنفيذه.
استخدام مكون Script
باستخدام HTML العادي، يجب إضافة النصوص الخارجية يدويًا إلى next/head:
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<script src="https://www.googletagmanager.com/gtag/js?id=123" />
</Head>
</div>
);
}مع مكون Script في Next.js، يمكنك إضافته في أي مكان في المكون دون الحاجة إلى استخدام next/head:
import Script from 'next/script';
function IndexPage() {
return (
<div>
<Script
strategy="afterInteractive"
src="https://www.googletagmanager.com/gtag/js?id=123"
/>
</div>
);
}يقدم مكون Script خاصية strategy التي تتيح لك تحديد وقت جلب النص وتنفيذه لتحميل مثالي. لتجنب التأثير سلبًا على أكبر عنصر محتوى مرئي (LCP)، يجب تأجيل تحميل معظم نصوص الطرف الثالث حتى يتم تحميل جميع محتويات الصفحة، إما مباشرة بعد أن تصبح الصفحة تفاعلية (strategy="afterInteractive") أو بشكل كسول أثناء وقت الفراغ في المتصفح (strategy="lazyOnload").
قراءة إضافية
- Next.js: مكون Script
- Next.js: مرجع API لـ
next/script