100 نقطة في PageSpeed: ما الذي غيّرناه لأجل ذلك

كانت القيمة الابتدائية 58 من 100 على الهاتف. وهذه قيمة ليست سيّئة لموقع فيه تأثير ثلاثي الأبعاد في الرأس، لكنها قيمة يعاقب عليها Google بوضوح في البحث على الهاتف. وفي النهاية بلغنا 100 نقطة على الحاسوب و98 على الهاتف، مع 100 كذلك لإمكانية الوصول.

ما يلي ليس قائمة تحقّق عامة، بل المسار الفعلي — بما في ذلك المواضع التي أخطأنا فيها.

الوضع الابتدائي

التدخّلات الخمسة التي كان لها وزن فعلي

1. استبدال المكتبة لا تحسينها

يعرض الرأس سحابة جسيمات ثلاثية الأبعاد. لأجل ذلك كانت تعمل مكتبة رسوميات معروفة — 458 كيلوبايت بعد التصغير. وأظهر القياس أن 51 كيلوبايت منها لم تُنفَّذ أبداً على الإطلاق.

النظرة الحاسمة كانت السؤال: كم نحتاج فعلاً؟ كانت أحد عشر لبنة: المُصيِّر، والمشهد، والكاميرا، والهندسة، والخامة، وبضع فئات مساعدة. وكل ذلك يمكن برمجته مباشرةً على واجهة الرسوميات في المتصفّح.

النتيجة: صارت 458 كيلوبايت إلى 6 كيلوبايت. والعرض مطابق — أخذنا المُظلِّلات نفسها.

2. الضغط كان مُشغَّلاً نصفياً فقط

في إعداد الخادم كان الضغط على «تشغيل» — لكن السطر الذي يحدّد أنواع الملفات التي تُضغَط كان معطّلاً بتعليق. وهذا هو الإعداد الافتراضي في كثير من التوزيعات. النتيجة: كان يُضغَط HTML وحده حصراً.

فكانت مكتبة الرسوميات تمرّ عبر الخطّ من دون ضغط. وبعد التشغيل: صارت 1243 كيلوبايت إلى 251 كيلوبايت. وإضافةً إلى ذلك نضع الآن النسخ المضغوطة محسوبةً مسبقاً بجانبها كي لا يحسبها الخادم من جديد عند كل طلب.

الجهد: سطران من الإعداد. الأثر: نحو ميغابايت لكل استدعاء أول.

3. إزالة مكتبة الحركة بالكامل

لأجل الظهور عند التمرير كانت تعمل مكتبة أخرى، 114 كيلوبايت. وأظهرها القياس فوق ذلك مُسبِّبةً لإعادات تخطيط قسرية — كانت تستعلم عن الهندسة أثناء التمرير وتُجبِر المتصفّح على إعادة حساب التخطيط في وسط الحركة.

استُبدِلت بـ IntersectionObserver يكتفي بوضع فئة. أما الحركة نفسها فيصنعها CSS. 114 كيلوبايت أقل، ولا إعادات بعد ذلك، ونحو 40 سطراً من كود خاص.

4. أيقونة الموقع كانت بحجم 205 كيلوبايت

أمر صغير بأثر مدهش، لأنه يُحمَّل مبكّراً جداً. استُبدِل بملف SVG بحجم 6 كيلوبايت، أُنشئ من الشعار الموجود.

5. الاستعلام عن الهندسة في إطار الحركة

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

القاعدة التي تلي ذلك وتنطبق في كل مكان: اقرأ في الحدث، واكتب في الإطار التالي. ولا العكس أبداً. ومنذ ذلك يُقاس ارتفاع الصفحة مرة واحدة ويُحفَظ بدل أن يُستعلَم عنه ستين مرة في الثانية.

الخطأ الذي كلّف 24 نقطة

ما أفاد قليلاً

لأجل الاكتمال، إليك الإجراءات التي ترد في كل دليل وكانت لدينا بالكاد قابلة للقياس:

صيَغ الصور. صفحتنا الرئيسة تكاد لا تحوي صوراً — والشعار ملف SVG. حيث ترد الصور، يستحقّ التحويل عناءه بالطبع؛ أما كعامل رئيس فلا يصلح إلا في الصفحات الغنيّة بالصور.

مزيد من تصغير الخطوط. نستضيف عائلتَي خطوط بأنفسنا ونُحمِّل مسبقاً ما يلزم للمنطقة الظاهرة. مزيد من التحسين ممكن، لكنه لا يحرّك القيمة.

موقع الخادم. يُنصَح به كثيراً، وفي حالتنا غير ذي صلة: زمن الوصول إلى أول بايت كان أصلاً 20 مِلّي ثانية. ومن هو جيّد هناك أصلاً لا يكسب شيئاً من شبكة توزيع.

الطريقة للمحاكاة

1. قِس قبل تغيير أي شيء. الهاتف والحاسوب منفصلين، ودوّن القيم.
2. ابحث عن أكبر ملف منقول. يكاد يكون دائماً JavaScript. والسؤال ليس كيف تصغّره، بل هل تحتاجه.
3. افحص الضغط. لا هل هو مُشغَّل، بل لأي أنواع ملفات.
4. عُدّ الطلبات الحاجبة. كل ملف ورقة أنماط في الرأس يؤخّر أول بناء للصورة.
5. افحص قفزات التخطيط بلا إبطاء. ذلك الاختبار الوحيد الذي فاتنا.
6. قِس من جديد بعد كل تغيير. وإلا لن تعرف في النهاية ما الذي أثّر.

ساعِدني في ترجمة تقرير PageSpeed لصفحتي إلى ترتيب.
كُن صارماً؛ لا تمدح شيئاً.

قيم قياسي:
- الهاتف: [عدد النقاط]، الحاسوب: [عدد النقاط]
- LCP وTBT وCLS لكل جهاز: [قيم]
- أكبر الملفات المنقولة مع الحجم: [قائمة]
- الطلبات الحاجبة للتصيير: [قائمة]
- رسائل التقرير: [أدرِج النصّ]

عن الصفحة:
- كيف بُنيت: [CMS / ثابتة / أداة بناء]
- هل يُحتاج JavaScript للمحتوى الظاهر؟ [نعم/لا]
- كيف يُسلَّم CSS؟ [خارجي / مسبق / مسبق جزئياً]

المهام:
1. اربط كل رسالة بسبب وقُل أي مؤشّر تؤثّر فيه —
   LCP أو TBT أو CLS.
2. رتّب الإجراءات حسب الأثر لكل جهد. واذكر لكلٍّ كم نقطة
   يحرّكها واقعياً ولماذا.
3. اذكر الإجراءات من التقرير التي لا تفيد عملياً في نوع
   بنائي — وعلِّل بدل أن تحذفها فحسب.
4. عند كل ملف JavaScript كبير اسأل أولاً هل يُحتاج، قبل
   أن تقترح التصغير.
5. نبِّه إن كان CSS يُسلَّم مسبقاً جزئياً فقط، واشرح لماذا
   قد يكون ذلك أسوأ لـ CLS من عدمه.
6. اذكر ما ينبغي أن أقيسه من جديد بعد كل تغيير.

لا تختلق قيم قياس.

الخلاصة

عدد النقاط بذاته ليس الهدف — فهو قيمة قياس لا نتيجة عمل. المهم هو التجربة خلفه: صفحة تصير مقروءة بعد 1,4 ثانية يقرؤها عدد أكبر من الناس ممن يقرؤون صفحة تحتاج ستّ ثوانٍ. ولدى زوّار الهاتف عبر شبكة الجوّال يكون الفرق أكبر من أي تحسين للنصّ.

والطريق إلى ذلك مرّ في حالتنا عبر سؤال واحد متكرّر: هل نحتاج هذا؟ خمسة من ستّة تدخّلات كانت حذف شيء، لا إضافة شيء.

أسئلة شائعة