كيف خفضنا وقت تحميل site’s إلى أقل من ثانية واحدة

معظم مواقع الويب البطيئة ليست بطيئة لأسباب غامضة. إنها بطيئة بسبب مجموعة من المشكلات المتوقعة المتراكمة فوق بعضها البعض — ويتم إصلاحها بترتيب متوقع. عندما يأتي إلينا عميل يعاني من وقت تحميل يصل إلى ثلاث ثوانٍ، نادرًا ما نحتاج إلى حيل غريبة. نحن بحاجة إلى الانضباط.

هذه هي نفس قائمة التحقق التي نقوم بتشغيلها في كل مشروع تحسين أداء، تقريبًا حسب ترتيب الأولية. كل خطوة غير مكلفة مقارنة بتأثيرها، وتبدو معظم المواقع أسرع بكثير بعد الخطوات الثلاث الأولى.

القياس قبل لمس أي شيء

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

• Lab — Lighthouse و WebPageTest للحصول على لقطة محكومة وقابلة للتكرار.
• Field — مقاييس المستخدم الحقيقي (CrUX / RUM) لما يواجهه الأشخاص بالفعل.
• Budget — حد أقصى صارم لكل route، بحيث يتم اكتشاف التراجعات في CI، وليس في production.

القضاء على الموارد التي تعيق العرض (render-blocking resources)

إن أكبر مكسب منفرد في معظم المواقع هو إخراج CSS و JavaScript من critical path. لا يمكن للمتصفح القيام بـ paint حتى ينتهي من تحليل render-blocking resources — لذا كلما قل عددها، ظهر شيء ما بشكل أسرع.

// defer everything that isn't critical
const load = () => import('./analytics.js');
if ('requestIdleCallback' in window)
  requestIdleCallback(load);
else setTimeout(load, 2000);

قم بكتابة inline لكمية CSS الصغيرة المطلوبة لأول viewport، ثم قم بتحميل الباقي بشكل غير متزامن. قم بعمل defer للسكربتات غير الحرجة. الهدف هو first paint لا ينتظر أي شيء لا يحتاجه تمامًا.

معاملة الصور كـ budget

عادةً ما تكون الصور هي أثقل شيء في الصفحة، وأسهل شيء يمكن الوقوع in خطأ فيه. ثلاث قواعد تغطي تسعين بالمائة من الحالات:

1. تقديم تنسيقات حديثة — AVIF أو WebP — مع fallback.
2. تغيير حجم الصور إلى أبعادها المعروضة؛ لا تقم أبدًا بشحن صورة hero بحجم 3000px إلى مساحة 600px.
3. قم بعمل lazy-load لأي شيء أسفل الجزء المرئي من الصفحة (below the fold)، واحجز مساحة لتجنب حدوث layout shift.

عمل cache عند edge

بمجرد أن تصبح الصفحة خفيفة، فإن السؤال التالي هو مدى سرعة وصول البايتات إلى المستخدم. يحول استخدام CDN مع cache headers معقولة رحلة origin التي تستغرق 600ms إلى hit عند edge تستغرق 30ms. بالنسبة للمحتوى الديناميكي، يمنحك stale-while-revalidate استجابات فورية أثناء التحديث في الخلفية.

الأداء هو ميزة. نحن نضع ميزانية (budget) له بنفس الطريقة التي نضع بها ميزانية لأي جزء آخر من البناء.

النتيجة

في المشروع الذي كان سببًا في كتابة هذا المقال، انتقلت الصفحة الرئيسية من 3.1 ثانية إلى 0.9 ثانية في largest contentful paint، وارتفعت التحويلات المجانية (organic conversions) بشكل ملحوظ خلال الشهر. لم يكن أي من هذا سحرًا — فقط قائمة التحقق أعلاه، مطبقة بالترتيب.

إذا كان site الخاص بك يبدو بطيئًا وغير نشط ولم تكن متأكدًا من أين تبدأ، فتواصل معنا — عادةً ما يكشف التدقيق القصير عن التغييرين أو الثلاثة الأكثر أهمية.