أهم النقاط
- تقيس Google مؤشرات Core Web Vitals عند المئين 75 من الزيارات الحقيقية: LCP أقل من 2.5 ثانية، وINP أقل من 200 ملّي ثانية، وCLS أقل من 0.1.
- اعرض الشاشة الأولى من الخادم باستخدام React Server Components وأرسل كمية أقل من JavaScript إلى المتصفح.
- امنح صورة LCP الأولوية، واحجز مساحة لكل الوسائط، واستضف الخطوط ذاتياً باستخدام
next/font. - خزّن مؤقتاً عن قصد: ثابت افتراضياً، مع إعادة تحقق زمنية أو عند الطلب للمحتوى المتغير.
- راقب بيانات الاستخدام الفعلي لا Lighthouse وحده، لتكتشف التراجع قبل انخفاض الترتيب أو التحويلات.
لماذا يهم أداء Next.js لمحركات البحث والإيرادات؟
الأداء ميزة من ميزات المنتج. فمؤشرات Core Web Vitals جزء من إشارات تجربة الصفحة لدى Google، والصفحات البطيئة تخسر زوارها قبل أن يقرأوا كلمة واحدة. وحين يتأخر Largest Contentful Paint أو تقفز عناصر الصفحة تحت إصبع المستخدم، تتراجع التحويلات والثقة حتى لو كان منطق العمل مثالياً.
يوفّر Next.js إعدادات افتراضية ممتازة، لكنها لا تصمد دائماً أمام المحتوى الحقيقي والسكربتات الخارجية وطلبات التسويق. هذه هي الممارسات التسع التي يطبقها فريق تطوير الويب لدينا في كل مشروع للحفاظ على سرعة المواقع بعد الإطلاق.
ما هي حدود مؤشرات Core Web Vitals؟
تقيّم Google ثلاثة مقاييس باستخدام بيانات فعلية من مستخدمي Chrome الحقيقيين عند المئين 75 من مرات تحميل الصفحة:
- Largest Contentful Paint (LCP): سرعة ظهور المحتوى الرئيسي. القيمة الجيدة 2.5 ثانية أو أقل.
- Interaction to Next Paint (INP): سرعة استجابة الصفحة للّمس والنقر والكتابة. القيمة الجيدة 200 ملّي ثانية أو أقل. وقد حلّ INP محل First Input Delay في مارس 2024.
- Cumulative Layout Shift (CLS): مقدار تحرك المحتوى المرئي بشكل غير متوقع. القيمة الجيدة 0.1 أو أقل.
1. اعرض الشاشة الأولى من الخادم
في App Router تكون المكونات React Server Components افتراضياً، فتُعرض كـ HTML على الخادم ولا ترسل أي JavaScript لكودها الخاص. نُبقي الأجزاء التفاعلية، مثل زر القائمة أو النموذج، مكونات عميل صغيرة، ونجلب البيانات من الخادم حتى لا تنتظر الشاشة الأولى سلسلة طلبات من جهة المتصفح.
وللبيانات الأبطأ نستخدم البث التدريجي: يصل هيكل الصفحة والمحتوى الظاهر أولاً، ثم تكمل حدود Suspense الباقي، فيرى المستخدم محتوى مفيداً بسرعة بدلاً من شاشة فارغة.
2. تعامل مع الصور كميزانية أداء
عنصر LCP غالباً صورة رئيسية أو عنوان. نستخدم next/image لتحصل كل صورة على قيم sizes صحيحة وصيغ حديثة مثل AVIF أو WebP وتحميل مؤجل لما هو أسفل الشاشة.
- امنح الأولوية لصورة LCP وحدها، فإعطاء الأولوية لكل شيء يعني عدم إعطائها لأي شيء.
- حدّد دائماً العرض والارتفاع (أو نسبة أبعاد ثابتة) ليحجز المتصفح المساحة ويبقى CLS قريباً من الصفر.
- أبقِ التدرجات الزخرفية في CSS أو SVG مضمّن حتى لا تعيق العرض أبداً.
3. استضف الخطوط ذاتياً باستخدام next/font
الخطوط المحمّلة من ملف أنماط خارجي تضيف طلبات DNS وتسبب غالباً وميض النص أو إزاحته. يقوم next/font بتنزيل الخطوط أثناء البناء وتقديمها من نطاقك الخاص، ويولّد مقاييس بديلة تقلل إزاحة التخطيط. وفي المواقع متعددة اللغات، اقتصر على الحروف المستخدمة فعلاً، مثل اللاتينية والعربية.
4. أرسل JavaScript أقل لحماية INP
يتراجع INP عندما يكون الخيط الرئيسي مشغولاً. وأكبر المكاسب تأتي من إرسال كود أقل: نقل المنطق إلى Server Components، واستيراد المكونات الثقيلة ديناميكياً، وتدقيق الاعتماديات بأداة تحليل الحزم. كثيراً ما نجد مكتبات تواريخ أو أيقونات أو رسوم بيانية تضيف كوداً يفوق حاجة الصفحة بكثير.
وللتفاعلات التي تُطلق تحديثات مكلفة نستخدم useTransition لتبقى الواجهة مستجيبة، ونقسّم المهام الطويلة إلى أجزاء أصغر.
5. تحكّم في السكربتات الخارجية
أدوات التحليلات ونوافذ الدردشة ومديرو الوسوم من الأسباب الشائعة لضعف INP. حمّلها عبر next/script باستراتيجية afterInteractive أو lazyOnload، واحذف الوسوم غير المستخدمة، وناقش كل سكربت جديد في مراجعة الكود. تعتمد إعدادات تحسين محركات البحث والتحليلات لدينا تتبعاً خفيفاً يحترم الموافقة دون إبطاء الصفحة.
6. خزّن مؤقتاً عن قصد
يمكن لمعظم صفحات التسويق والمحتوى أن تكون ثابتة. أما المحتوى المتغير فنختار له حدود تخزين مؤقت واضحة:
- إعادة تحقق زمنية للبيانات التي لا يضر أن تكون أقدم ببضع دقائق، مثل قوائم المقالات أو الكتالوجات.
- إعادة تحقق عند الطلب باستخدام
revalidateTagأوrevalidatePathحين ينشر المحرر، لتظهر التحديثات فوراً دون إعادة بناء الموقع. - عرض ديناميكي للصفحات المخصصة فعلاً فقط، مثل لوحات التحكم أو سلال الشراء.
واجمع ذلك مع شبكة CDN وترويسات تخزين مؤقت صحيحة. يضبط فريق السحابة وDevOps لدينا الاستضافة بحيث تخدم شبكة الحافة معظم الزيارات.
7. صمّم من أجل ثبات التخطيط
كثيراً ما يكون CLS مشكلة تصميم لا مشكلة كود. فلافتات ملفات تعريف الارتباط التي تدفع المحتوى، والإعلانات بلا مساحات محجوزة، والخطوط المتأخرة هي المتهمون المعتادون. يحدد مصممو UI/UX لدينا هياكل تحميل وأبعاداً ثابتة لكل منطقة ديناميكية لتكون الصفحة مستقرة منذ أول عرض.
8. راقب المستخدمين الحقيقيين لا المختبر فقط
تكشف الاختبارات الاصطناعية عمليات النشر المعطوبة، بينما تُظهر مراقبة المستخدمين الحقيقيين ما يشعر به العملاء على الهواتف المتوسطة وشبكات الجوال. نرسل مؤشرات Web Vitals من المتصفح باستخدام useReportWebVitals ونطلق تنبيهاً حين يتجاوز المئين 75 الحد المسموح.
9. اجعل الأداء جزءاً من عملية الإصدار
يتآكل الأداء ميزةً بعد ميزة. لذلك نضيف فحوص حجم الحزم وLighthouse إلى CI، ونراجع مؤشرات Web Vitals في عروض نهاية الدورة، وندرج مراجعة الأداء في باقات الصيانة والدعم. وتنطبق عقلية المراقبة نفسها على ميزات الذكاء الاصطناعي كما نشرح في نقل الذكاء الاصطناعي من التجربة إلى الإنتاج.
هل تخطط لإطلاق بزيارات كثيفة أو لترحيل موقعك؟ يمكننا تدقيق المسارات والحزم وإعدادات CDN ثم تسليم قائمة أعمال مرتبة حسب الأولوية. تواصل معنا لتحديد موعد المراجعة.
الأسئلة الشائعة
ما هي درجة LCP الجيدة في Next.js؟
قيمة Largest Contentful Paint الجيدة هي 2.5 ثانية أو أقل عند المئين 75 من الزيارات الحقيقية. وعادةً ما يضع العرض من الخادم وأولوية الصورة الرئيسية والخطوط المستضافة ذاتياً مواقع Next.js دون هذا الحد بفارق مريح.
هل يجعل Next.js الموقع سريعاً تلقائياً؟
يوفر إعدادات افتراضية قوية مثل Server Components وتحسين الصور والخطوط، لكن السكربتات الخارجية والصور الضخمة ومكونات العميل الثقيلة قد تجعل موقع Next.js بطيئاً رغم ذلك.
كيف أحسّن INP في تطبيق React؟
قلّل JavaScript في المتصفح، وانقل المنطق إلى الخادم، وحمّل المكونات الثقيلة عند الحاجة، وأجّل السكربتات الخارجية، واستخدم الانتقالات للتحديثات المكلفة ليبقى الخيط الرئيسي متاحاً للاستجابة.
هل Core Web Vitals عامل ترتيب؟
نعم، فهي جزء من إشارات تجربة الصفحة لدى Google. نادراً ما تتفوق على الصلة بالموضوع، لكنها ترجّح الكفة بين الصفحات المتشابهة، والصفحات الأسرع تحقق تحويلات أفضل بغض النظر عن الترتيب.
فريق الهندسة في OSTORDEV
مهندسون خبراء في OSTORDEV، وكالة تطوير الويب والجوال والذكاء الاصطناعي في الدار البيضاء بالمغرب. نكتب عن المشكلات التي نحلها في مشاريع عملائنا.
