قاعدة الثلاث ثوانٍ لأداء الويب

لديك ثلاث ثوانٍ فقط.

بعد ذلك، سيغادر المستخدمون.

تُظهر أبحاث Google أن 53% من مستخدمي الهاتف المحمول يغادرون الموقع إذا استغرق تحميله أكثر من 3 ثوانٍ.

المواقع البطيئة تكلفك المال. تحسين أوقات التحميل على الهاتف المحمول بمقدار 0.1 ثانية يزيد من معدلات التحويل في قطاع التجزئة بنسبة 8.4%.

الأداء ليس مجرد مقياس تقني، بل هو مقياس تجاري.

للفوز، يجب عليك فهم مقاييس Core Web Vitals:

• LCP (Largest Contentful Paint): مدى سرعة رؤية المستخدمين للمحتوى الرئيسي. استهدف أقل من 2.5 ثانية. • INP (Interaction to Next Paint): مدى سرعة استجابة الصفحة للنقرات. استهدف أقل من 200 مللي ثانية. • CLS (Cumulative Layout Shift): مدى استقرار الصفحة. استهدف أقل من 0.1.

توقف عن التخمين وابدأ في التحسين. إليك كيفية التغلب على الوقت:

تحسين JavaScript

• أرسل كوداً أقل. استخدم dynamic imports لتحميل الكود عند الحاجة فقط. • استخدم tree-shaking. انتقل من CommonJS إلى ES modules لإزالة الأجزاء غير المستخدمة. • انقل المهام الثقيلة إلى Web Workers. حافظ على خلو الخيط الرئيسي (main thread) لاستقبال مدخلات المستخدم. • استخدم defer أو async. توقف عن السماح للسكربتات بعرقلة عملية تحليل HTML.

CSS وعملية التصيير (Rendering)

• استخدم Inline critical CSS. قم بتحميل ما هو مرئي في الجزء العلوي من الصفحة (above the fold) أولاً. • تجنب layout thrashing. قم بتجميع عمليات القراءة والكتابة لمنع إعادة الحساب المستمرة. • استخدم transform و opacity للتحريك. هذه الخصائص تستخدم وحدة معالجة الرسومات (GPU) وتتجنب إزاحة التخطيط. • استخدم content-visibility: auto. تخطَّ عملية التصيير للمحتوى غير الظاهر على الشاشة.

استراتيجية الصور

• استخدم التنسيقات الحديثة. تنسيقات WebP و AVIF أصغر بكثير من JPEG. • حدد سمات العرض (width) والارتفاع (height). هذا يمنع إزاحة التخطيط (CLS). • استخدم التحميل الكسول (Lazy-load) للصور الموجودة أسفل الصفحة. لا تستخدم التحميل الكسول لصورة الـ LCP الرئيسية. • استخدم srcset. قدم صوراً أصغر لمستخدمي الهاتف المحمول.

الشبكة والتخزين المؤقت (Caching)

• استخدم CDN. انقل محتواك ليكون أقرب إلى مستخدميك لتقليل زمن الاستجابة (latency). • فعّل الضغط. استخدم Brotli أو Zstandard لتقليص أحجام الملفات. • استخدم التخزين المؤقت بكثافة. استخدم immutable cache headers للأصول التي تستخدم الـ hash. • حافظ على عمل bfcache. تجنب استخدام حدث unload لضمان التنقل الفوري بين الصفحات (للخلف وللأمام).

الهدف بسيط: تجنب العمل.

الكود الأسرع هو الكود الذي لا يقوم المستخدمون بتحميله أبداً. والطلب الأسرع هو الطلب الذي لا يضطر المتصفح لإجرائه أبداً.

المصدر: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1