السرعة ليست “من الجميل أن يكون لديك”. السرعة هي الميزة الوحيدة التي يختبرها كل مستخدم. وجدت أمازون أن كل 100 مللي ثانية من زمن الوصول يكلفها 1٪ من المبيعات. وجدت Walmart أن تحسين وقت التحميل بمقدار ثانية واحدة يؤدي إلى زيادة التحويلات بنسبة 2%. وفي عام 2025، سيكون المعيار أعلى. حولت مؤشرات الويب الأساسية من Google التركيز من LCP (التحميل) إلى INP (التفاعل مع الرسم التالي). لم يعد يكفي التحميل بسرعة. يجب عليك الرد بسرعة.

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

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

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

لماذا يستحوذ Maison Code على أكثر من 100 مللي ثانية

السرعة هي علامتنا التجارية. نحن لا نقوم فقط “بتحسين الصور”. نحن نعيد تصميم خط أنابيب التسليم بأكمله.

البنية التحتية: نقوم بالنشر على Edge (Vercel/Cloudflare) ليكون على بعد 50 مللي ثانية من المستخدم.
الترطيب: نستخدم الترطيب الانتقائي لجعل “زر الشراء” تفاعليًا قبل تحميل التذييل.
النتيجة: يجتاز عملاؤنا مؤشرات أداء الويب الأساسية باستمرار، مما يؤدي إلى زيادة مُقاسة في تحسين محركات البحث بنسبة 15-20%. نحن نتعامل مع ميزانيات الأداء مثل الموازنات المالية. الإفراط في الإنفاق ليس خيارا.

واجهة برمجة تطبيقات قواعد المضاربة

أسرع طلب للشبكة هو الطلب الذي لا تقوم به. في عام 2025، نستخدم Speculation Rules API لعرض الصفحات مسبقًا قبل أن ينقر المستخدم عليها. هذا ليس “جلبًا مسبقًا” قياسيًا. يقوم Chrome بإنشاء DOM فعليًا في علامة تبويب الخلفية. عندما ينقر المستخدم، يكون الانتقال 0 مللي ثانية. فوري.

<!-- إدخال قواعد المضاربة -->
<نوع البرنامج النصي = "قواعد المضاربة">
{
  "العرض المسبق": [
    {
      "المصدر": "وثيقة"،
      "أين": {
        "و": [
          { "href_matches": "/المنتجات/*" },
          { "selector_matches": "a:hover" }
        ]
      }
    }
  ]
}
</script>

السلامة واستخدام البيانات

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

المستخدم متصل بشبكة Wi-Fi (وليس وضع توفير البيانات).
يحتوي الجهاز على ذاكرة كافية. ومع ذلك، بالنسبة لموقع التجارة الإلكترونية، فإن “الإجراء التالي” يمكن التنبؤ به للغاية. في PDP (صفحة تفاصيل المنتج)، الإجراء التالي هو إما “إضافة إلى سلة التسوق” أو “العودة إلى المجموعة”. تؤدي المضاربة على هذين المسارين إلى تحقيق معدل إصابة يصل إلى 90%.

INP: قاتل التفاعلات؟

يقيس INP الوقت من “النقر” إلى “الرسام”. ترطيب React هو عدو INP. إذا نقر المستخدم على “أضف إلى سلة التسوق” أثناء قيام React بترطيب التذييل، فسيتم حظر الموضوع الرئيسي. يتجاهل الزر النقرة. تصل نتيجة INP إلى 400 مللي ثانية (ضعيف). جوجل يعاقب SEO الخاص بك.

تحسين INP في مقطوعة الرأس

الترطيب الانتقائي: يرطب المكونات المرئية فقط. (راجع التصميم الذري لعزل المكونات).
عمال الويب: انقل المنطق الثقيل (Analytics، GTM) إلى عامل الويب عبر Partytown.
Transition API: استخدم useTransition لوضع علامة على التحديثات غير العاجلة.

// رد الفعل 19 تنفيذ useTransition
استيراد { useTransition } من 'react'؛

وظيفة AddToCart({ معرف }) {
  const [isPending, startTransition] = useTransition();

  مقبض ثابت انقر = () => {
    // عاجل: قم بتحديث واجهة المستخدم على الفور
    setOptimisticCartCount(c => c + 1);
    
    // غير عاجل: طلب الشبكة / تحديث الحالة
    startTransition(() => {
      addToCart(id);
    });
  };

  العودة (
    <button onClick={handleClick} معطل={isPending}>
      {معلق؟ 'جارٍ الإضافة...' : 'أضف إلى الحقيبة'}
    </زر>
  );
}

الحافة: مسائل الجغرافيا

إذا كان خادمك في فيرجينيا (us-east-1) وكان عميلك في باريس، فإن سرعة الضوء تفرض عقوبة قدرها 100 مللي ثانية. لا يمكنك التغلب على الفيزياء. يجب عليك نقل الحساب. يعمل Edge Rendering (Oxygen/Vercel) على تشغيل منطق SSR في مركز البيانات الأقرب إلى المستخدم.

قديمة أثناء إعادة التحقق (SWR)

لا نريد ضرب الأصل لكل طلب. نحن نستخدم إستراتيجية التخزين المؤقت SWR، وهي فائدة أساسية لـ البنية بدون رأس.

زيارات المستخدم “/المنتجات/الأحذية”.
يقدم Edge الإصدار القديم (الفوري).
تقوم Edge بجلب نسخة جديدة في الخلفية.
يحصل المستخدم “ب” على الإصدار الجديد.

في رؤوس الريمكس/الهيدروجين:

رؤوس وظيفة التصدير () {
  العودة {
    'التحكم في ذاكرة التخزين المؤقت': 'عام، الحد الأقصى للعمر=60، s-maxage=3600، لا معنى له أثناء إعادة التحقق=86400',
  };
}

تحسين الصورة: AVIF هو الملك

ننسى ويب بي. AVIF هو المعيار. إنه أصغر بنسبة 30% من WebP ويدعم نطاقات ألوان HDR (ضرورية للموضة). يدعم CDN الخاص بـ Shopify التنسيق التلقائي لـ AVIF. قم دائمًا بفرض format=auto في أداة تحميل الصور الخاصة بك.

استراتيجية “LQIP”.

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

نصوص الطرف الثالث: القاتل الصامت

تحب الوكالات تثبيت البرامج النصية. Hotjar، Klaviyo، Yotpo، Facebook Pixel، TikTok Pixel، Snap Pixel. كل واحد يأكل 50 مللي ثانية من وقت الخيط الرئيسي. الإجمالي = انسداد 300 مللي ثانية.

مشكلة “غير المتزامن”

يعتقد المطورون أن كلمة “Async” تعني “غير محظور”. وهذا يعني “جلب غير محظور”. لكن التنفيذ محظور. عند تنفيذ Facebook Pixel، فإنه يجمد الخيط الرئيسي لكشط DOM.

الحل: GTM من جانب الخادم

انقل البيكسلات إلى الخادم.

يرسل المتصفح حدثًا واحدًا إلى خادمك (على سبيل المثال، POST /api/events).
يستلمها خادمك (حاوية خادم GTM).
يقوم خادمك بنشره على Facebook وTikTok وGoogle Ads. صفر تأثير من جانب العميل. المكافأة: يتجاوز AdBlockers لأن الطلب يذهب إلى المجال الخاص بك.

الحل: بارتيتاون

إذا كان يجب عليك تشغيل البرامج النصية من جانب العميل (مثل Hotjar، الذي يحتاج إلى DOM)، فقم بتشغيلها في Web Worker. Partytown هي مكتبة تعمل على نقل طفرات DOM من العامل إلى الخيط الرئيسي. يقوم بإنشاء صندوق حماية حيث يمكن تشغيل البرامج النصية الثقيلة التابعة لجهات خارجية دون تجميد واجهة المستخدم.

<script type="text/partytown" src="https://connect.facebook.net/en_US/fbevents.js"></script>

استراتيجيات تحميل الخطوط

الطباعة ثقيلة بشكل مدهش. ملف الخط المخصص (WOFF2) يبلغ حوالي 50 كيلو بايت. إذا قمت بحظر العرض حتى يتم تحميل الخط (FOIT - Flash of Invisible Text)، يحدق المستخدم في شاشة فارغة. إذا قمت بإظهار الخط الاحتياطي (FOUT - وميض النص غير المنمط)، فسيتغير التخطيط.

حزمة تحميل الخطوط المثالية

المجموعة الفرعية: قم بتضمين الأحرف التي تحتاجها فقط (Latin-1).
التحميل المسبق: استخدم <link rel="preload"> للخط المهم (العنوان).
Swap: استخدم font-display: Swap. قم بإظهار النص على الفور في Helvetica، ثم قم بالتبديل إلى الخط الخاص بك.
ضبط الحجم: استخدم CSS size-adjust لجعل الخط الاحتياطي يشغل نفس المساحة تمامًا مثل الخط المخصص. هذا يلغي تحول التخطيط.

@الخط الوجه {
  عائلة الخط: 'Bodoni Fallback'؛
  src: local('تايمز نيو رومان');
  تجاوز الصعود: 90%؛
  تجاوز النسب: 20%؛
  ضبط الحجم: 140%؛
}

RUM مقابل بيانات المختبر

المنارة (بيانات المختبر) عبارة عن محاكاة. يفترض وجود Motorola G4 على شبكة 3G. ** RUM (مراقبة المستخدم الحقيقي) ** حقيقة واقعة. فهو يقيس ما يواجهه المستخدمون الفعليون. قد يكون لديك 100 نقطة منارة، ولكن إذا كان المستخدمون الحقيقيون لديك يستخدمون أجهزة iPhone القديمة في مترو الأنفاق، فسوف تعرض بيانات RUM الخاصة بك 3s LCP. نحن ندمج Vercel Analytics أو Datadog RUM لتتبع p75 (المئوي الخامس والسبعين) للتجارب الحقيقية. إذا كان p75 الخاص بك أخضر، فأنت جيد. إذا كانت منارتك 100 ولكن p75 باللون الأحمر، فأنت فاشل.

الخلاصة

الأداء هو ثقافة هندسية. يجب أن يكون لديك ميزانية الأداء. “إذا أضاف هذا العلاقات العامة 10 كيلو بايت إلى الحزمة، فيجب حذف شيء آخر.” التزم بقاعدة 100 مللي ثانية. إذا استغرق الأمر وقتًا أطول من 100 مللي ثانية، فستشعر بالكسر. أسرع مواقع التجارة الإلكترونية لا “تشعر” بالسرعة فحسب. يشعرون بأنهم غير مرئيين. تختفي الواجهة، ولم يتبق سوى الرغبة والمنتج.

قم بتوظيف مهندسينا.