دراسة حالة SpeedBoost لأداء المواقع
موقع تجريبي لوكالة خيالية مبني باستخدام Next.js 16 لدراسة مقيسة عبر Lighthouse. أُضيفت أربع مشكلات أداء عمداً ثم أُزيلت، فارتفعت درجة الصفحة الرئيسية على الهاتف من 56 إلى 91.

نظرة عامة
SpeedBoost موقع من ست صفحات لوكالة أداء خيالية، أُنشئ كمشروع شخصي ضمن معرض الأعمال. وهو ليس عملاً لعميل، والوكالة غير موجودة في الواقع.
لعرض مسار تحسين كامل، أُضيفت إلى الموقع عمداً أربع مشكلات شائعة وسُجّل أثرها عبر Lighthouse، ثم أُزيلت كل مشكلة وأُعيد الاختبار بالشروط نفسها.
في اختبار الصفحة الرئيسية على الهاتف، وباعتماد الوسيط لخمس جولات على نسخة إنتاج محلية، ارتفعت درجة الأداء من 56 إلى 91، وانخفض LCP من 4.0 ثانية إلى 926 ملي ثانية، وTBT من 2.5 ثانية إلى 367 ملي ثانية، وCLS من 0.09 إلى 0، وحجم النقل من 4.5 ميغابايت إلى 234 كيلوبايت.
بما أن النسخة البطيئة أُنشئت عمداً، فإن هذه النتائج توضّح طريقة التشخيص فقط، ولا تتنبأ بمقدار التحسن في موقع آخر.
التحدي
قد يحقق موقع Next.js المبني بعناية درجات جيدة منذ البداية، فلا يبقى الكثير لعرضه. وكان التحدي إظهار تشخيص وإصلاح حقيقيين مع الحفاظ على عدالة المقارنة والتصريح بوضوح بأن المشكلات أُضيفت عمداً.
المنهجية
بناء الموقع باستخدام مكونات الخادم مع القليل من JavaScript في المتصفح، ثم إضافة أربع مشكلات موثقة في عمليات Git منفصلة وقياس الوضع الأولي. بعد ذلك إزالة مشكلة واحدة في كل مرة وإعادة الاختبار بعد كل إصلاح، ونشر النتائج مع تفاوتها بين الجولات وحدودها.
الميزات الرئيسية
- تقرير أداء قبل وبعد مع توضيح شروط الاختبار
- نتائج كل إصلاح على حدة للمشكلات الأربع المضافة عمداً
- تشخيص وإزالة صورة كبيرة الحجم وخطوط تعيق العرض ومكتبات ثقيلة وعمل زائد أثناء التهيئة
- رسوم بيانية تُعرض من الخادم دون مكتبة رسوم
- تحسين تقني لمحركات البحث: البيانات الوصفية والروابط الأساسية وخريطة الموقع والبيانات المنظمة
- نموذج تواصل تجريبي سهل الوصول مع التحقق من المدخلات وحالات واضحة
أبرز النقاط
قياس كل إصلاح
أُزيلت كل مشكلة في عملية Git خاصة بها ثم أُعيد الاختبار، ليظهر أثر كل تغيير.
كشف درجة 100 مضللة
كانت درجة 100 في إحدى المراحل على الأرجح نتيجة خلل في القياس، إذ أخّرت الخطوط البطيئة أول عرض للمحتوى، ويشرح التقرير السبب.
فكرة اختُبرت ورُفضت
وفّر إيقاف الجلب المسبق للروابط نحو 15 كيلوبايت دون فائدة تُذكر، فاستُبعد للحفاظ على سرعة التنقل.
وضوح بشأن الحدود
وُضع INP على أنه غير مقيس، وما زال TBT البالغ 367 ملي ثانية أعلى من حد 200 ملي ثانية الجيد.
مشاريع أخرى
مشروع شخصيالأتمتةوكيل ذكي للتواصل مع العملاء
أداة خاصة بنيتها لعملي الحر. تقيّم إعلانات الوظائف وتكتب مسودات العروض والردود اعتماداً على معلومات وافقت عليها، وأنا من يراجع كل رسالة ويرسلها بنفسي.
- Next.js
- TypeScript
- Tailwind CSS
مشروع شخصيالأتمتةFlowPixel ClientPilot
نظام خاص لإدارة العملاء المحتملين بنيته لعملي. يساعدني في العثور على الشركات التي قد تحتاج إلى موقع، والبحث عنها مع توثيق المصادر، وكتابة مسودات رسائل أوافق عليها وأؤكد إرسالها بنفسي.
- Next.js
- TypeScript
- Tailwind CSS