قياس الأداء: Lighthouse وCore Web Vitals

يُعد Lighthouse الأداة القياسية لقياس أداء الويب. شغّله في Chrome DevTools، ضمن علامة تبويب Lighthouse، أو عبر CLI (npx lighthouse https://yoursite.com). عند تقييم Islands Architecture، شغّل Lighthouse على صفحات تمثيلية قبل الترحيل وبعده لقياس المكاسب بموضوعية.

يقيس LCP الوقت الذي يستغرقه أكبر عنصر محتوى مرئي حتى يكتمل تصييره. تحسّن Islands Architecture قيمة LCP لأن الخادم يرسل HTML مصيّرًا بالكامل فورًا، فلا ينتظر المتصفح JavaScript لتصيير المحتوى. وتُرسم صورة رئيسية أو عنوان كان سيشكّل قيمة LCP من استجابة HTML الأولية.

في تطبيق React SPA، غالبًا ما يتأخر LCP لأن المتصفح يجب أن ينزّل JavaScript وينفّذه قبل أن يصيّر React عنصر LCP. أما مع Islands Architecture، فيكون محتوى LCP موجودًا في HTML الأولي، لذلك لا يعيق تنفيذ JavaScript عملية LCP. وهذه إحدى أهم الفوائد القابلة للقياس.

يقيس إجمالي وقت الحظر المدة التي يكون فيها الخيط الرئيسي محجوبًا بسبب مهام JavaScript التي تتجاوز 50ms. قد ينتج عن تنفيذ hydration لتطبيق React SPA كبير مئات المللي ثانية من TBT. تقلل معمارية الجزر TBT بدرجة كبيرة لأن JavaScript الذي يُنفَّذ يتناسب مع عدد الجزر، لا مع حجم الصفحة.

يقيس التحول التراكمي للتخطيط الاستقرار البصري، أي تحرك العناصر أثناء تحميل الصفحة. قد يتسبب المحتوى الذي يُصيَّر بواسطة JavaScript في تحولات في التخطيط عندما يُصيّر React المحتوى ويغيّر أبعاده. يتجنب HTML المُصيَّر على الخادم من معمارية الجزر التحولات المرتبطة بـ hydration، لأن التخطيط الأولي يأتي من HTML ثابت لا يتغير أثناء hydration.

يقيس First Input Delay (الذي حلّ محله الآن Interaction to Next Paint،‏ INP) مدى سرعة استجابة الصفحة لتفاعلات المستخدم. تحسّن معمارية الجزر INP لأن لكل جزيرة حزمة JavaScript صغيرة ومركزة. تُنفَّذ التفاعلات داخل الجزيرة بسرعة، إذ لا توجد شجرة React كبيرة لجدولة العمل عبرها.

لنأخذ مقارنة نموذجية لصفحة مدونة: قد تحصل React SPA كاملة على درجة بين 45 و65 في Lighthouse على الأجهزة المحمولة (TBT: 800ms، ‏LCP: 3.2s). وقد تحصل الصفحة نفسها بالمحتوى ذاته، عند تنفيذها كموقع Astro مع جزيرة React واحدة، على درجة بين 90 و98 (TBT: 80ms، ‏LCP: 1.1s). تكون المكاسب الأكبر في الصفحات كثيفة المحتوى ذات التفاعلية المحدودة.

لا تُعدّ معمارية الجزر الخيار المناسب للتطبيقات شديدة التفاعلية، مثل لوحات المعلومات ومحررات التعليمات البرمجية والأدوات التعاونية. تحتوي هذه التطبيقات على مكوّنات تتشارك الحالة باستمرار وتعيد التصيير معًا؛ وستلغي كلفة الاتصال بين الجزر مكاسب الأداء، كما ستضيف تعقيدًا معماريًا.

تتفوّق معمارية الجزر في المواقع كثيفة المحتوى ذات التفاعلية المتفرقة: المدونات (قراءة المحتوى مع إمكانية الإعجاب أو التعليق من حين لآخر)، والوثائق (قراءة الوثائق مع البحث أو زر نسخ التعليمات البرمجية من حين لآخر)، والصفحات الترويجية (محتوى ثابت في الغالب مع جزيرة لنموذج النشرة البريدية)، وصفحات منتجات التجارة الإلكترونية (صور ووصف ثابتان مع جزيرة لإضافة المنتج إلى سلة التسوق).

تستخدم Google مؤشرات الويب الأساسية (LCP وINP وCLS) بوصفها إشارات لترتيب نتائج البحث. ويؤدي تحسين هذه المقاييس باستخدام معمارية الجزر إلى تحسين ترتيب الموقع في نتائج البحث مباشرةً. فعندما يرفع موقعٌ درجته على Lighthouse للأجهزة المحمولة من 55 إلى 92 باعتماد معمارية الجزر، فإنه يحقق في الوقت نفسه فوائد لتجربة المستخدم وتحسين محركات البحث.

تُظهر الفرق التي تنتقل من Next.js React SPA إلى Astro في مواقع التسويق والوثائق أنماطًا متسقة: تنخفض حمولات JavaScript بنسبة 70 إلى 90%، وترتفع درجات الأداء على الأجهزة المحمولة بمقدار 20 إلى 40 نقطة، وتنخفض تكاليف الاستضافة على الخادم، لأن الملفات الثابتة تُقدَّم من CDN من دون كلفة التصيير من جانب الخادم لكل طلب.

تحسّن معمارية الجزر جميع مؤشرات الويب الأساسية: يستفيد LCP من HTML المُصيَّر على الخادم، وينخفض TBT لأن JavaScript يتناسب مع مستوى التفاعلية، ويقل CLS بفضل التخطيطات المستقرة المُصيَّرة على الخادم، ويتحسن INP بفضل حزم الجزر الصغيرة والمركزة. تتحسن درجات Lighthouse بدرجة كبيرة في الصفحات كثيفة المحتوى. ولا يناسب هذا النمط التطبيقات شديدة التفاعلية، لكنه يتفوّق في المدونات والوثائق والصفحات الترويجية ومواقع التجارة الإلكترونية.