ماذا قسنا أثناء بناء موقع عربي إنجليزي سريع؟

كيف قسنا؟

كل رقم في هذا المقال خرج من تقارير البناء التي نكتبها بعد كل مرحلة، وفيها الأداة والإعدادات وتاريخ القياس. قسنا نسخة الإنتاج نفسها وهي تعمل على جهازنا، لا نسخة التطوير. وهذه هي الأدوات الثلاث التي اعتمدنا عليها:1

ونقولها بوضوح: كان الجهاز مشغولًا ببرامج أخرى أثناء القياس، بحمل على المعالج بين 36 و60 % لم يأتِ من عملنا. لذلك نذكر مع كل رقم كم مرة قسناه: مقارنة LCP قبل تأجيل المجسمات وبعده تتبّع واحد لكل جانب، ومقارنة العناوين العربية أُجريت بالتناوب بين النسختين على الجهاز نفسه وفي الوقت نفسه. والموقع لم يُنشر بعد، وحين يُنشر سيُخدَم مضغوطًا، فستختلف أرقامه عن هذه.1

تأجيل المجسمات ثلاثية الأبعاد: أكبر مكسب

في الصفحة الرئيسية أربعة مشاهد ثلاثية الأبعاد. قبل التعديل كانت مكتبة three.js (نحو 660 كيلوبايت) وأحد النماذج ثلاثية الأبعاد (1.96 ميغابايت) وتهيئة WebGL كلها تُحمَّل قبل أن ينتهي تحميل الصفحة، فتزاحم النص الذي يراه الزائر أولًا. غيّرنا ذلك: لا يبدأ أي مشهد ثلاثي الأبعاد إلا بعد حدث التحميل.1

توصي Google بأن يظهر أكبر عنصر خلال 2.5 ثانية من بدء التحميل.5 الرقم الجديد في هذا التتبّع تحت هذا الحد، لكن بهامش ضيق. وأكبر عنصر في صفحتنا هو العنوان الرئيسي نفسه، نصًا لا صورة، وزمن استجابة الخادم كان بين 13 و15 مللي ثانية. أي أن التأخير كان في رسم الصفحة على الجهاز، لا في الشبكة.1

العناوين العربية: فرضية لم تصمد

الصفحة العربية كانت أبطأ في القياس الأول. تتبّعنا السبب فوجدنا أن أول تخطيط للصفحة استغرق 1.58 ثانية على المعالج الأبطأ، مقابل 6 مللي ثانية لإعادة التخطيط بعد ذلك، في صفحة فيها نحو 1,100 عنصر. وحين حذفنا قواعد موازنة أسطر العناوين الست (text-wrap: balance) من نسخة تجريبية، ظهر النص في 2.2 و2.0 و2.1 ثانية.1

الفرضية كانت معقولة: الموازنة توزّع الكلمات على الأسطر بالتساوي، وهذا حساب مكلف تقصره المتصفحات على العناوين القصيرة، ستة أسطر أو أقل في Chromium.7 لكن ذلك القياس أُخذ قبل تأجيل المجسمات ثلاثية الأبعاد. فأعدنا القياس على النسخة الحالية، وبالتناوب بين النسختين:2

الفرق داخل حدود التذبذب بين تشغيل وآخر، وهو يزيد على 300 مللي ثانية. والأهم أن حذف الموازنة أضرّ بالشكل: على الهواتف بعرض 320 إلى 376 بكسل صار العنوان الرئيسي ينتهي بكلمة وحيدة في سطر كامل. مع الموازنة يُقرأ «نبني الأنظمة / الرقمية التي تدير / الأعمال الحديثة»، ودونها «نبني الأنظمة الرقمية / التي تدير الأعمال / الحديثة». مررنا على العروض من 320 إلى 432 بكسل بخطوات 4 بكسل حتى لا نفوّت حالة.2

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

ما الذي ما زال يُثقل الصفحة؟

شغّلنا Lighthouse على نسخة الإنتاج. هذه نتيجة التشغيل الأول، وهو الوحيد الذي انتهى بقيم كاملة للصفحتين:1

الدرجة المستهدفة 90 لم تتحقق في هذه القياسات، ولا نخفي ذلك. ثبات التخطيط ممتاز في كل تشغيل. أما LCP فلم يكن تحت 2.5 ثانية إلا في هذا التشغيل الأول، وفي التشغيلات الأخرى على الجهاز المشغول تراوح بين 3.4 و8.8 ثانية. والمشكلة الأكبر في زمن الحظر الكلي (TBT)، وهو مجموع الوقت الذي تبقى فيه الصفحة عاجزة عن الاستجابة لنقرة أو لمسة أو ضغطة مفتاح.6 مصدره ما يعمل بعد التحميل: تهيئة WebGL وقراءة النماذج، ثم حلقات رسم المشاهد ثلاثية الأبعاد ومؤقّت الحركة الذي يدير التمرير والرسوم المتحركة، وكلها تعمل باستمرار. وفي متصفح الاختبار يُرسم WebGL بالمعالج لا ببطاقة الرسوم، فلم يهدأ المعالج في بعض التشغيلات اللاحقة، وأعطى Lighthouse درجة 0 لأنه لم يجد فترة هدوء يقيس عندها.1

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

لغتان، وصفحتان حقيقيتان

لكل لغة صفحة مبنية مسبقًا على عنوانها الخاص: / للعربية و/en/ للإنجليزية، لا نص يُبدَّل داخل صفحة واحدة. وكل صفحة تعلن عن نفسها وعن نظيرتها بوسوم hreflang، كما تطلب Google أن تذكر كل نسخة نفسها وكل النسخ الأخرى.8

وزر اللغة رابط عادي إلى الصفحة الأخرى، ويحمل معه ما كان أمام الزائر: لقطة واحدة في ذاكرة الجلسة، تُستخدم مرة واحدة عند الوصول إن كان عمرها أقل من 60 ثانية وكانت للصفحة نفسها، ثم تُحذف. قبل أن نبنيه قسنا النموذج الأولي للتصميم فوجدنا أن موضع التمرير الخام لا يصمد بين اللغتين (من 10549 إلى 10428 بكسل)، لأن المتصفح ومؤثرات التمرير يعيدان حساب المواضع بعد الانتقال. لذلك نعيد الزائر إلى القسم الذي كان في أعلى شاشته، وإلى المسافة نفسها داخله. والانتقال بين اللغتين يتلاشى في 420 مللي ثانية، ويُلغى التلاشي لمن فعّل تقليل الحركة في جهازه.3

حين يفشل الإرسال

نموذج «ابدأ مشروعك» يرسل الطلب إلى تيليجرام وإلى البريد معًا. إن وصل عبر أحدهما يرى الزائر رسالة النجاح. وإن فشلت القناتان (يرد الخادم بـ 502) تظهر للزائر لوحة فشل فيها زر إعادة المحاولة وزر واتساب يحمل الطلب (الخدمات والميزانية والتوقيت وبيانات التواصل، وأول 500 حرف من الرسالة)، فلا يضيع الطلب. ويغطي هذا الجزء 34 اختبار وحدة، منها حالة تعطّل تيليجرام مع عمل البريد.4

إن كنت تبني موقعًا بلغتين: ما نوصيك به

• قِس في وضع محاكاة الهاتف قبل كل تغيير وبعده، وسجّل التاريخ والإعدادات مع الرقم.
• أجّل كل ما هو ثقيل وليس هو المحتوى الأول، كالمجسمات ثلاثية الأبعاد والفيديو، إلى ما بعد التحميل.
• لا تتخذ قرارًا برقم قديم: أعد القياس على النسخة الحالية.
• راجع العناوين العربية على عرض 320 إلى 376 بكسل، فهناك تظهر الكلمة الوحيدة في آخر السطر.
• اجعل لكل لغة عنوانًا خاصًا ووسوم hreflang متبادلة.
• جهّز بديلًا حين يفشل إرسال النموذج، حتى لا يضيع طلب كتبه العميل.