إطلاق Core Web Vitals: قائمة تحقق عملية لـ Next.js

توقّفت Core Web Vitals عن كونها "ميزة إضافية" منذ اللحظة التي أدرجتها فيها Google ضمن عوامل الترتيب — لكن السبب الحقيقي للاهتمام بها أبسط من ذلك: المواقع السريعة تُحقّق إيرادات أكثر. كل 100 ميلي ثانية نوفّرها من زمن التحميل تدفع التحويل للأعلى قليلاً. إليك العملية الدقيقة التي نتّبعها في كل مشروع Next.js، من أول تدقيق إلى لوحة نتائج خضراء في الإنتاج.

لماذا تهمّ Core Web Vitals فعلاً

بيانات الميدان أفضل من بيانات المختبر. يمنحك Lighthouse لقطة مضبوطة، لكن Google تُرتّب المواقع بناءً على مؤشّرات المستخدمين الحقيقيين المجمّعة من تقرير Chrome UX. هذا يعني أن الشريحة p75 — أي تجربة أبطأ 25% من مستخدميك — هي ما يُحتسب، لا الرقم الذي تراه على حاسوب سريع عبر واي‑فاي المكتب.

في إعادة بناء متجر إلكتروني مؤخراً، أدى خفض LCP من 4.1 ثانية إلى 1.3 ثانية إلى رفع الجلسات العضوية 22% وتحويل الدفع 18% خلال ربع سنة واحد فقط. نفس الكتالوج، نفس الزيارات — أسرع فقط.

قائمة تحقق الإطلاق

نتعامل مع الأداء كجزء من تعريف "الاكتمال"، لا كمرحلة تنظيف لاحقة. هذه هي البنود التي تظهر في كل لوحة مهام.

1. رَوِّض صورك

الصور هي السبب الأول لمشاكل LCP. استخدم next/image لتحصل على تحجيم تلقائي وتحميل كسول وصيغ حديثة مجاناً — ثم علّم صورة البطل بـ priority كي لا تنتظر أبداً في طابور التحميل الكسول:

import Image from "next/image";

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Product dashboard"
      width={1280}
      height={720}
      priority               // preload the LCP image
      sizes="(max-width: 768px) 100vw, 1280px"
    />
  );
}

2. حمّل الخطوط دون إزاحة في التخطيط

تسبّب خطوط الويب مشكلة CLS عندما يعاد ترتيب النص عند التبديل. تستضيف next/font الخطوط ذاتياً وتضبط أحجام البدائل لتطابقها، فيختفي القفز:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });

اقرن ذلك بـ font-display: swap وبديل متوافق في القياسات، ليصبح نصّك مقروءاً فوراً دون أي إزاحة.

3. أرسل جافاسكريبت أقلّ

يعيش مؤشّر INP ويموت بحسب العمل على الخيط الرئيسي. دقّق حزمتك وكن حازماً:

• فضّل مكوّنات الخادم (Server Components) — لا ترسل أي جافاسكريبت لما لا يحتاج تفاعلاً.
• حمّل الودجات الثقيلة أسفل الشاشة ديناميكياً عبر next/dynamic.
• استبدل مكتبة تواريخ بحجم 40 كيلوبايت بمساعد صغير بحجم 2 كيلوبايت تتحكّم فيه أنت.
• أجّل السكربتات الخارجية (تحليلات، دردشة) باستخدام استراتيجية afterInteractive أو lazyOnload.

القياس بالطريقة الصحيحة

أطلق مُبلّغاً صغيراً كي تراقب مؤشّرات الميدان بدلاً من التخمين. يوفّرها Next.js عبر useReportWebVitals:

"use client";
import { useReportWebVitals } from "next/web-vitals";

export function Vitals() {
  useReportWebVitals((metric) => {
    // send to your analytics endpoint
    navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
  });
  return null;
}

حسّن ما يشعر به مستخدموك فعلاً. درجة مختبر خضراء مع درجة ميدان حمراء تعني أنك ضبطت الآلة الخطأ.

أخطاء شائعة

1. ملاحقة رقم Lighthouse. إنه مجرّد مؤشّر تقريبي. حسّن بيانات الميدان أولاً.
2. ترطيب كل شيء (Hydration). الجزر التفاعلية أفضل من صفحة مُرطَّبة بالكامل.
3. أطراف ثالثة دون قيود. تضمين ثقيل واحد قد يدمّر INP مهما كان كودك الخاص محكماً.
4. غياب ميزانية أداء في CI. بدون بوّابة تحقّق، تتآكل المكاسب بهدوء مع كل إصدار.

الخلاصة

السرعة ميزة، لا رفاهية. أدرج هذه الفحوصات ضمن تعريف "الاكتمال"، راقب بيانات الميدان بدلاً من الدرجات الجوفاء، وضع ميزانية في CI لتثبيت المكاسب. افعل ذلك، وستتوقّف Core Web Vitals الخضراء عن كونها هرولة قبل الإطلاق — لتصبح هي الافتراضي.