اعتاد جوجل على تصنيف مواقع الويب بناءً على الكلمات الرئيسية والروابط الخلفية. وفي عام 2021، قدموا تحديث تجربة الصفحة. لقد قاموا بتحويل الخوارزمية لتصفية المواقع “المزعجة”.

مزعج = بطيء (LCP).
مزعج = ثاب (CLS).
مزعج = غير مستجيب (INP).

إذا فشلت في تنفيذ هذه Core Web Vitals (CWV)، فإنك لا تزعج المستخدمين فحسب؛ تفقد حركة المرور العضوية. في Maison Code Paris، نتعامل مع الأداء كميزة. الموقع الفاخر البطيء هو تناقض في المصطلحات.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

1. أكبر طلاء محتوى (LCP): الموعد النهائي 2.5 ثانية

يقيس LCP أداء التحميل. يقوم بإيقاف الساعة عند عرض أكبر عنصر مرئي (عادةً صورة البطل أو نص الحظر H1). الهدف: <2.5 ثانية.

فيزياء LCP

LCP هو سباق ضد أربعة أجزاء فرعية:

** TTFB (الوقت حتى البايت الأول) **: وقت استجابة الخادم.
تأخير تحميل المورد: الوقت حتى يكتشف المتصفح عنوان URL للصورة.
وقت تحميل المورد: وقت تنزيل الصورة.
تأخير عرض العنصر: حان الوقت لرسم وحدات البكسل.

كيفية إصلاحها (استراتيجية Next.js)

1. لا تقم بتحميل البطل المطورين يحبون التحميل = “lazy"". ولكن إذا قمت بوضعها على صورة البطل، فإن المتصفح ينتظر حتى يقوم بتحليل العلامة <img> لبدء التنزيل. يجب عليك تحميل حريص مرشح LCP.

// سيئ
<صورة src="/hero.jpg" جاري التحميل="lazy" />

// جيد (Next.js)
<Image src="/hero.jpg" الأولوية={true} />

2. التحميل المسبق للموارد المهمة أخبر المتصفح في <head>: “سوف تحتاج إلى هذا الخط وهذه الصورة على الفور.”

<link rel="preload" href="/hero.webp" as="image" />
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />

3. استخدم تنسيق AVIF WebP جيد. AVIF أفضل (أصغر بنسبة 20٪). تأكد من أن CDN الخاص بك يدعم التفاوض على المحتوى.

2. التحول التراكمي للتخطيط (CLS): مؤشر الاستقرار

يقيس CLS الاستقرار البصري. فهو يحسب مقدار المحتوى الذي يتغير بشكل غير متوقع. الهدف: <0.1.

السيناريو: يحاول المستخدم النقر فوق “الخروج”. يتم تحميل الإعلان أعلى الزر. المحتوى يدفع إلى الأسفل. يقوم المستخدم بالنقر فوق “إلغاء” بدلاً من ذلك. وهذا نمط مظلم، حتى لو كان عرضيا.

المشكلة: نسب العرض إلى الارتفاع

إذا قمت بتضمين صورة بدون أبعاد: <img src="photo.jpg" /> لا يعرف المتصفح الارتفاع حتى يتم تنزيل الصورة. يعرض ارتفاعًا بمقدار 0 بكسل، ثم ينتقل إلى 500 بكسل.

الإصلاح: احجز المساحة دائمًا. CSS “نسبة العرض إلى الارتفاع” هي صديقك.

.مجمع البطل {
  نسبة العرض إلى الارتفاع: 16 / 9؛
  الخلفية: #f0f0f0; /* لون العنصر النائب */
}

تحول الخط (FOIT/FOUT)

تستغرق الخطوط المخصصة وقتًا للتحميل. إذا قام المتصفح بإخفاء النص حتى يتم تحميل الخط (FOIT)، فستحصل على وميض. إذا أظهر المتصفح خطًا احتياطيًا (Arial) ثم قام بالتبديل (Inter)، فسيتغير العرض. تتغير فواصل الأسطر. تحولات التخطيط.

الإصلاح: استخدم عرض الخط: اختياري أو مطابقة المقاييس. نحن نستخدم @next/font الذي يقوم تلقائيًا بمحاذاة مقاييس الخط الاحتياطي لمنع تغيير التخطيط.

3. تكلفة الخطوط الثقيلة

المصممين يحبون الخطوط. المهندسون يخافون منهم. الوزن الواحد لـ Circular Std هو 30 كيلو بايت (WOFF2). إذا قمت بتحميل عادي، غامق، مائل، أسود -> 120 كيلو بايت. يؤدي هذا إلى حظر عرض النص (FOIT). الاستراتيجية:

المجموعة الفرعية: لا تحتاج إلى أحرف يونانية/سيريلية. مجموعة فرعية إلى اللاتينية-1. (يوفر 50%).
الخطوط المتغيرة: استخدم ملفًا واحدًا (Inter-Variable.woff2) يحتوي على جميع الأوزان. يتعامل مع الرسوم المتحركة بشكل أفضل.
المضيف الذاتي: قم بإزالة مصافحة TLS على fonts.googleapis.com.

4. تأجيل CSS غير الهامة

تعتبر Tailwind رائعة لأنها صغيرة (10 كيلو بايت). لكن مشاريع Sass القديمة غالبًا ما تحتوي على ملف “main.css” (500 كيلو بايت). المتصفح يتوقف عن العرض حتى يتم تنزيل main.css. الإصلاح: قم باستخراج “CSS الحرجة” (أنماط الرأس/البطل) وقم بتضمينها في <head>. قم بتحميل الباقي بشكل غير متزامن: <link rel="stylesheet" href="main.css" media="print" onload="this.media='all'"> تعمل هذه الخدعة على تعزيز LCP بحوالي ثانية واحدة على شبكات 3G.

5. التفاعل مع الطلاء التالي (INP): الاستجابة

ملاحظة: حل INP محل FID (تأخير الإدخال الأول) في مارس 2024.

يقيس INP زمن وصول الحدث. “عندما أنقر على زر القائمة، كم عدد المللي ثانية حتى تفتح القائمة فعليًا؟” الهدف: <200 مللي ثانية.

الجاني دائمًا تقريبًا هو الموضوع الرئيسي. جافا سكريبت هي خيط واحد. إذا كان المتصفح مشغولاً بتحليل حزمة ترطيب ضخمة بحجم 5 ميجابايت، وقمت بالنقر فوق “القائمة”، فسيقول المتصفح: “انتظر، أنا مشغول”. تتجمد واجهة المستخدم.

استراتيجيات لإصلاح INP

**1. العائد إلى الموضوع الرئيسي ** تقسيم المهام الطويلة. إذا كنت تقوم بتكرار أكثر من 10000 عنصر، فقم بذلك على أجزاء.

// الحظر
items.forEach(process);

// عدم الحظر (العائد)
دالة غير متزامنة ProcessAsync() {
  لـ (عنصر ثابت من العناصر) {
    في انتظار جدولة.postTask(() => عملية(item));
  }
}

2. رد فعل useTransition في React 18، استخدم useTransition لوضع علامة على التحديثات على أنها غير عاجلة. هذا يخبر React: “إذا نقر المستخدم، قم بمقاطعة عملية العرض هذه للتعامل مع النقرة.”

const [isPending, startTransition] = useTransition();

وظيفة تحديد علامة التبويب (nextTab) {
  startTransition(() => {
    setTab(nextTab);
  });
}

4. القياس: البيانات الميدانية مقابل بيانات المختبر

يعيش المطورون في Lab Data (المنارة على جهاز MacBook سريع). تعيش Google في البيانات الميدانية (CrUX - تقرير تجربة مستخدم Chrome). تجمع CrUX بيانات حقيقية من مستخدمين حقيقيين (غالبًا على هواتف Android البطيئة).

قد تكون نقاط المنارة الخاصة بك 100. ولكن إذا كان اتصال المستخدم P75 (المئوي 75) الخاص بك بطيئًا، فقد تكون نتيجة CrUX الخاصة بك “ضعيفة”. التحسين دائمًا لمستخدم P75 على شبكة 4G.

5. تأثير الطرف الثالث

من الذي يقتل مؤشرات الويب الخاصة بك؟ عادة:

أدوات الدردشة (الاتصال الداخلي/الانجراف): حزم ضخمة.
تتبع البكسلات: حظر الموضوع الرئيسي.
** أدوات اختبار A/B ** (على النحو الأمثل): إخفاء محتوى الجسم للحصول على تجربة “خالية من الوميض” (يقتل LCP).

الحل: انقلهم إلى Web Workers باستخدام Partytown. (راجع حجم الحزمة).

6. واجهة برمجة تطبيقات قواعد التخمين (العرض المسبق)

هذا هو الخيار النووي للسرعة. يمكنك إخبار Chrome بعرض الصفحة التالية في الخلفية قبل أن ينقر المستخدم. ليس فقط تنزيل HTML. تنفيذ JS ورسم البكسلات. عند النقر، يكون الانتقال 0ms. فوري.

{
  "العرض المسبق": [
    {
      "المصدر": "القائمة"،
      "عناوين URL": ["/الصفحة التالية"، "/عربة التسوق"]
    }
  ]
}

نحن نستخدم هذا لتدفق “أضف إلى سلة التسوق” -> “الخروج”. يبدو الأمر وكأنه تطبيق أصلي.

7. التنقل البسيط وCWV

في تطبيق صفحة واحدة (Next.js)، يعد التنقل من الصفحة الرئيسية إلى صفحة المنتج بمثابة تنقل بسيط. في السابق، كانت مؤشرات أداء الويب الأساسية تتجاهل هذه الأمور بشدة. في عام 2024، قامت Google بتحديث المقاييس لتتبع “INP on Soft Navigations”. إذا استغرق انتقال JS الخاص بك 500 مللي ثانية لجلب JSON وعرض الصفحة الجديدة، فأنت تفشل في LCP/INP. الإصلاح: استخدم واجهة المستخدم المتفائلة. أظهر الهيكل العظمي على الفور. لا تنتظر حتى يكتمل “انتظار الجلب ()” قبل تغيير عنوان URL.

9. مراقبة المستخدم الحقيقي (RUM)

المنارة هي “اختبار معملي”. يتم تشغيله في بيئة نظيفة. لدى المستخدمين الحقيقيين تشغيل Spotify في الخلفية وفتح 50 علامة تبويب. أنت بحاجة إلى ** روم **. نحن نستخدم Vercel Analytics (أو SpeedCurve). إنه يتتبع العناصر الحيوية للزوار * الفعليين *. إذا كان LCP الخاص بك هو 1.2 ثانية على iPhone 15 ولكن 4.5 ثانية على iPhone 11، فستخبرك RUM. بيانات المختبر تكذب. تكشف البيانات الميدانية عن تسرب الإيرادات.

10. لماذا ميزون كود؟

في Maison Code، نحن متطرفون في الأداء. نحن لا نقوم فقط “بتصغير CSS”. نحن نقوم بتصميم Zero-Layout-Shift والتفاعل الفوري. نحن نعلم أنه بالنسبة للعلامات التجارية الفاخرة، “بطيء” = “رخيص”. نقوم بتدقيق مجموعتك بأكملها، بدءًا من Edge CDN وحتى React Hydration. نحن نقدم مواقع تبدو أصلية، حتى على شبكات 4G من العالم الثالث. لأن 100 مللي ثانية من زمن الوصول = انخفاض الإيرادات بنسبة 1% (دراسة أمازون).

12. الفرق بين TBT وINP

إجمالي وقت الحظر (TBT) هو مقياس معملي. التفاعل مع الطلاء التالي (INP) هو مقياس ميداني. TBT تتوقع INP. إذا كان TBT الخاص بك مرتفعًا (> 200 مللي ثانية)، فمن المحتمل أن يكون INP الخاص بك ضعيفًا. ** حلقة التحسين **:

قم بتشغيل المنارة (قم بقياس TBT).
تحسين الترطيب.
النشر.
انتظر 28 يومًا للحصول على بيانات CrUX (قم بقياس INP).
كرر. لا تنتظر 28 يومًا لمعرفة ما إذا كنت قد أصلحته أم لا. استخدم TBT كوكيل لك.

13. الاستنتاج

إن مؤشرات أداء الويب الأساسية ليست مجرد مقاييس. إنهم وكلاء للاحترام. احترام وقت المستخدم الخاص بك. احترام بطارية أجهزتهم. جوجل ببساطة تفرض الأخلاق الحميدة. إذا عاملت المستخدم بشكل جيد، فإن Google يعاملك بشكل جيد.

هل موقعك بطيء؟

هل تعرض وحدة التحكم الخاصة بك “عناوين URL الضعيفة”؟ نقوم بإجراء عمليات تدقيق أداء Deep Dive لإصلاح جحيم الترطيب.

معالجة عناصري الحيوية. قم بتوظيف مهندسينا.