Web performance - الجزء الرابع

بسم الله الرحمن الرحيم

الحمد لله ربّ العالمين، يُحب من دعاه خفياً، ويُجيب من ناداه نجيّاً، ويزيدُ من كان منه حيِيّاً، ويكرم من كان له وفيّاً، ويهدي من كان صادق الوعد رضيّاً، الحمد لله ربّ العالمين.

Web performance - 4

في الجزء الثالث من سلسلة المقالات الخاصة بالأداء؛ تحدثنا عن آلية عمل المتصفح، ودورة حياة ال Request من وإلى المستخدم، والآن سنتحدث عن طريقة تحسين الأداء بشكل يشعر به المستخدم، أي أن الموقع ولو كان فعلا ذا سرعة عالية بالنسبة لعدد ال resource المطلوبة، إلا أن ذلك لا يعني أن الموقع سريع بالنسبة للمستخدم من الناحية العملية أو الشعورية!، وهذا موضوعنا لهذا اليوم…

هناك مفهوم يطلق عليه ال Perceived performance، وهو مصطلح مهم يشير إلى قياس أداء الموقع الإلكتروني وتحسينه من خلال النظر إلى الشعور الذاتي الخاص بالمستخدمين، وهذا الأمر يعد أهم ما يمكنك فعله لتحسين الأداء، فلو شعر زوار الموقع بأن الموقع لا يتجاوب معهم، أو شعروا أنهم في مرحلة توقف ولا يدركون هل الموقع قيد معالجة طلبهم أم الموقع معطل؛ فاعلم أنك خسرت جُل هؤلاء المستخدمين بشكل قطعي!، لذلك قيل، أن سرعة التجاوب الخاصة بالصفحة مع تفاعلات المستخدمين هي أكثر أهمية من الوقت الفعلي لجلب ال resource المطلوبة، وذلك ليس تقليلا من أهمية ذلك، بل لأن شعور المستخدم الجيد بما تقدمه سينعكس بالإيجاب عليك من خلال المحافظة على المستخدمين وزيادتهم وزيادة المنفعة المتحققة من وجودهم عندك، لكن السؤال الذي سيطرح هنا، ماذا لو لم أكن قادرا أصلا على تحسين سرعة الموقع لسبب تقني حقيقي؟، فالجواب يكمن أيضا جعل الموقع يبدو أسرع للمستخدم، أي أنك ستقوم بتحسين طريقة عمل الموقع وما يظهر فيه لتشعر المستخدم وكأن كل شيء على ما يرام، ويسير بطريقة جيدة يُسعد بها!

والسؤال المهم الآن، كيف يمكن قياس الأداء الشعوري للأشخاص؟

والجواب هو: لا يوجد هناك طريقة محددة وثابتة لقياس الأداء الخاص بالشعور للمستخدمين، لأن ذلك يعبر عن إحساس ذاتي يصعب تقيمه أو الوصول إليه، لذلك هناك عدة طرق ووسائل يمكن استخدامها لتحديد هل شعر المستخدمون بالسعادة أثناء استخدامهم للموقع أم كانوا غاضبين؟، هل شعروا بالراحة والسلاسة أم أنهم شعروا بالانزعاج؟، للإجابة عن هذه الأسئلة علينا أن ننظر لبعض الوسائل المساعدة للحصول على معلومات تعطينا تصور عن شعور الناس، ومنها: 

• First paint: يمكنك تحسين الشعور من خلال استغلال أول عملية لل paint، على سبيل المثال تغيير لون ال background للموقع أو شيء من هذا القبيل، قد لا يكون هذا التغيير كبيرا، لكنه يعطي شعورا ما بأن هناك شيء ما يجري…
  
  

• First Contentful Paint: الاهتمام بالوقت الخاص بأول عرض للمحتوى أكان ذلك text أو غيره، وليس من الضرورة بأن يكون هناك معنى للمحتوى في أول عرض…، لكن المهم أن تعتني بالوقت اللازم لأول عرض…
  
  

• Largest Contentful Paint: الاهتمام بالوقت المستغرق حتى عرض ال main content للصفحة بعد ما تم تحميلها، بطريقة أخرى، قياس الوقت المستغرق من لحظة بدء التحميل للصفحة وصولا لأول وأكبر image أو text block تم عمل render لهم في ال viewport، وال LCP يجب أن لا يتجاوز الثانيتان والنصف وعلى الأقل ل 75% من المستخدمين للموقع…
  
  

• Speed index: وهي وحدة قياس تهتم بمدى سرعة رسم المحتوى على الصفحة لتصبح مرئية للمستخدم، ويتم حسابها من خلال حساب متوسط الوقت للأجزاء التي أصبحت مرئية في الصفحة بال millisecond، وكلما قل الوقت كلما كان الأداء أفضل، وتتم عملية الحساب لل Speed index عشر مرات في الثانية، أي بمعدل مرة كل 100 جزء من الثانية…
  
  

• Time to interactive: الوقت حتى يصبح ال UI متاح للتفاعل مع المستخدم…

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

ملاحظة: هناك أداء تسمى ب Lighthouse، هذه الأداء open source، تم تصميمها لتحديث وتطوير جودة صفحات الويب، وهي أداة رائعة يمكنك استخدامها للنظر إلى المشاكل التي تحدثنا عنها ومحاولة إيجاد حلول لها من خلال التقارير التي تقدمها لك، ويمكنك تحديد العديد من الخيارات…شاهد الصورة:

بناء على ما سبق، هناك بعض الخطوات التي يمكنك استخدامها لتحسين الأداء، نذكر منها:

• Minimize initial load: في هذه الخطوة نقوم بعمل حيلة لطيفة، فنقوم بتقليل المحتوى المراد جلبه للمستخدم وذلك من خلال تقسيمه لأجزاء، أي أننا سنهتم بأول تحميل للمحتوى، ثم الذي يليه وهكذا، وهذا ينفذ من خلال فكرة لطيفة وهي جلب المحتوى المهم للمستخدم في أول تحميل للبيانات، ثم قم بتحميل أو جلب بقية المعلومات في الخلفية، بهذه الطريقة سيشعر المستخدم أن الموقع سريع وفترة انتظاره قليلة جدا، كما أنك بحاجة لفصل ال interactive functionality عن المحتوى، أي قم بالاهتمام بتحميل النصوص والتنسيق، وأخر أو قم بعمل lazyload لملفات الجافا سكربت والصور ونحوها التي لن تستخدم في ال init load، بالإضافة إلى هذا كله، لا تنسى تطبيق عمليات التحسين على الملفات مثل ال compressed!
  
  

• Prevent jumping content and other reflows: في هذه النقطة عليك أن تدرك ما هي المكونات التي ستقوم بجلبها وستكون أبطأ من غيرها وستؤثر على ال layout، وأشهر مثال على هذا المواقع التي ترتبط بمواقع الإعلانات، فجأة تجد الموقع قفز وتغير موقعك للأعلى أو للأسفل في الصفحة بسبب ظهور إعلان ما!، والحل هنا بكل بساطة منع حدوث هذا من خلال حجز المساحة لهذا العنصر مسبقا في ال layout، وتعتبر هذه النقطة واحدة من أكثر النقاط التي يمكن أن تزعج المستخدمين وتعطيهم شعور بعدم الراحة، بالإضافة إلى شعور بضعف الأداء وبطئ الموقع…
   

• Avoid font file delays: الخطوط المستخدمة في الموقع تعتبر مهمة وتعطي شعورا رائعا للمستخدمين إن أحسن المصمم انتقاء الخطوط…، لكن على المطور أن ينتبه وأن يضع بحسبانه ال failback للخط، أي أن الخط البديل في حال حصل خطأ ما أو تأخر تحميل الخط الخاص بالموقع؛ يجب أن يكون بنفس الحجم وال weight للخط الأصلي قدر الإمكان، وهذا يمنع ظهور وميض أو تأرجح بسبب تغير الخطوط أمام المستخدم…
  
  

• Interactive elements are interactive: بكل بساطة تأكد أن جميع العناصر التي وضعتها في صفحتك ويمكن للمستخدم أن يتفاعل معها أن تعمل وقابلة للتفاعل بدون حدوث أي مشاكل وبدون وجود أي Lag، ويعتبر أي action أخذ أكثر من 50ms لحدوث تفاعل معين أنه laggy، مثلا لو كان لديك text input، إذا قمت بكتابة حرف الألف ثم وجدت شعورا وكأن الألف لم تكتب مباشرة أو تأخرت، فهنا لديك مشكلة lag، وإذا لم يكتب أصلا فالمشكلة أكبر وأعظم!
  
  

بهذا نكون انتهينا من هذه الجزئية بإذن الله -سبحانه وتعالى-، لكن قبل أن تغادر، هل لاحظت كيف أن الحلول تتمحور حول آلية وكيفية تحسين شعور المستخدم؟، إذا لاحظت ذلك فقد علمت أهمية هذا الجزء، وسيظهر في رأسك أفكارا كثيرة من مواقع متعددة تحل هذه المشاكل بأساليب لطيفة فعلا…يمكنك التعلم منها لأنها مبنية على تجارب حقيقية للمستخدمين…

يتبع في الجزء الخامس بإذن الله…