اقتصاد المللي ثانية: أداء الويب الهندسي

وجدت أمازون أن كل 100 ملي ثانية من وقت الاستجابة يكلفها 1% من المبيعات. وجدت Walmart أن تحويل الزائر يستغرق ثانيتين أقل من وقت التحميل مقارنة بغير المشتري. الأداء ليس “من الجميل أن يكون لديك”. فهو أساس الإيرادات.

المقاييس المهمة (مؤشرات الويب الحيوية الأساسية)

يقوم Google بقياس موقعك باستخدام ثلاثة مقاييس رئيسية. إذا فشلت في ذلك، فستفقد تصنيف SEO.

متري	الاسم	هدف جيد	ما يقيسه
LCP	أكبر دهان محتوى	<2.5 ثانية	سرعة التحميل
INP	التفاعل مع الطلاء التالي	<200 مللي ثانية	الاستجابة
** سي إل إس **	التحول التخطيطي التراكمي	< 0.1	الاستقرار البصري

الحل: حوسبة الحافة

سرعة الضوء هي قيد صعب. إذا كان الخادم الخاص بك في فيرجينيا (Shopify US) وكان عميلك في باريس، فيجب أن تعبر الإشارة المحيط الأطلسي. وهذا يستغرق وقتا. نقوم بنقل الحساب ** إلى المستخدم **.

الأكسجين وCloudflare

يعمل Shopify Oxygen على شبكة Cloudflare. عندما يطلب مستخدم صفحة ما، فإن “الخادم” الأقرب إليه (على سبيل المثال، عقدة مطار CDG) يعالج الطلب.

الرسم البياني TD
    المستخدم[مستخدم في باريس] -->|5ms| الحافة [عقدة الحافة (CDG)]
    
    الرسم الفرعي "السحر"
    الحافة -->|هل تم تخزين HTML مؤقتًا؟| ذاكرة التخزين المؤقت {لا معنى لها أثناء إعادة التحقق}
    ذاكرة التخزين المؤقت -->|نعم| الحافة
    ذاكرة التخزين المؤقت -->|لا| الأصل[Shopify فرجينيا]
    نهاية
    
    الأصل -->|300 مللي ثانية| الحافة
    الحافة -->|البث| المستخدم

قائمة التحقق من التحسين

1. تحسين الصورة (AVIF)

توقف عن استخدام ملفات PNG. نقوم بتنفيذ مسار صور تلقائي يحول كل شيء إلى AVIF (أصغر بنسبة 50% من JPEG).

<صورة 
  البيانات={product.image} 
  العرض={[300, 600, 900]} 
  التنسيقات={['avif', 'webp']} 
/>

---

2. قم بتأجيل البرامج النصية للجهات الخارجية

يؤدي كل من Klaviyo وGorgias وMeta Pixel إلى تدمير أداء الخيط الرئيسي (INP). ننقلهم إلى Partytown (يعمل على Web Worker) أو نؤجلهم إلى ما بعد التفاعل. لا يمكن للمستخدمين الشراء إذا تم حظر الموضوع الرئيسي عن طريق تحميل أداة الدردشة.

3. الجلب التنبؤي

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

دراسة الحالة: السرعة مقابل الإيرادات

لقد قمنا بتحسين موقع العميل، مما أدى إلى تقليل LCP من 4.2 ثانية إلى 1.8 ثانية.

• معدل الارتداد: انخفض بنسبة 15%.
• معدل التحويل: ارتفع بنسبة 8%.
• الإيرادات: +40 ألف دولار شهريًا.

---

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

قم بإجراء فحص Lighthouse. إذا رأيت اللون الأحمر فإنك تحرق المال. قم بتوظيف مهندسينا.