Web performance - الجزء السادس والأخير

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

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

 

Web performance - 6

 

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

 

تمثل الصور والفيديوهات أكثر من 70% -بالمتوسط- من حجم ال bytes التي يتم تحميلها من المواقع الإلكترونية بشكل عام، لذلك تعد معالجة المشاكل المتعلقة بالصور والفيديوهات إحدى الحلول المثالية والسريعة لتحسين الأداء، وتمثل الصور ما نسبته 51% -بالمتوسط- تقريبا من حجم ال bytes التي يتم تنزيلها من الموقع الإلكتروني، و25% -بالمتوسط- من حجم ال bytes التي يتم تنزيلها للفيديوهات، وتحسين الأداء هنا مهم لعدة أسباب، أهمها أنك ستوفر على الكثير من المستخدمين النقود، فكثير من الدول أو الأشخاص ينفقون أموالا كثيرة لشراء حزم بيانات بالميجا!، وكثير من المستخدمين أيضا لديهم أجهزة ذات RAM صغيرة ومحدودة، والصور والفيديوهات يتم تحميلها على ال RAM، فأنت بذلك أيضا حرمتهم من الاستفادة من خدماتك وحُرمت منهم!، يلي ذلك التأثير السيء على التجربة الخاصة بالمستخدم والمتعلقة بالشعور الذاتي الخاص به… 

 

هناك عدة استراتيجيات يمكننا استخدامها لتحسين الأداء الخاص بالصور ومنها:

  1. Loading: استخدام أسلوب التحميل المناسب للصور، مثل استخدام ال lazy loading، وهي مهمة جدا، فبدلا من جلب كل الصور عند تحميل الصفحة مرة واحدة، يمكنك مثلا جلب ما تراه فقط، وعند ال scroll يتم جلب المزيد…، أو تأخير جلب الصور ليتم جلبها بال background…

  2. اختيار امتداد / نوع الصورة المناسب، فمثلا متى نستخدم SVG ومتى نستخدم PNG؟، هل نستخدم WebP؟ هل نستخدم JPEG؟، للإجابة على الأسئلة من هذا النوع، عليك أن تعلم طبيعة وميزة كل نوع من هذه الإمتدادات، والمساوئ التي يمكن أن تلحق بها…، فمثلا سنستخدم ال SVG إذا كانت الصورة تعبر عن رموز وأمر غير واقعي، عبارة عن vectors تحتاج لإعطائها القليل من الألوان فقط، وهي أفضل من استخدام ال icon fonts، بينما مثلا لو كانت الصورة مثلا PNG فهناك أكثر من خيار بناء على نوع الصورة، فلو كانت الصورة 24bit color و 8bit transparency، فإنك ستحصل على صورة حجمها كبير، وهنا يفضل أن تستخدم ال webP، وبشكل عام، يعتبر استخدام الـ WepP خيارا ممتازا للامتداد الخاص بالصور، فهو أفضل بال compression من ال PNG, JPEG ويدعم ال higher color بشكل أفضل، وهذا يعني أنك لن تخسر الكثير من دقة الصورة وستحصل على صورة أقل حجما!، لكن قد تجد بعض المتصفحات أو الإصدارات القديمة لم تدعمه حتى وقت متأخر -حتى تاريخ كتابة هذا المقال-!، ومع ذلك قد يُعد ال WebP من أفضل الخيارات حاليا…

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

  4. يفضل تحديد حجم الصورة، وذلك لأن الصورة يتم تحميلها async لذلك فهي تأتي بعد ال first paint، بوجود العرض والارتفاع فإننا نضمن عدم حصول مشكلة التأرجح لل layout والتي تحدثنا عنها سابقا…

وهناك عدة استراتيجيات يمكننا استخدامها لتحسين الأداء الخاص بالفيديو أيضا، ومنها:

  1. Compress الفيديو، فهو يقلل من الحجم من خلال حذف التفاصيل المرتبطة بالفريم، مثل ال WebM, MPEG-4…

  2. ترتيب ال source من الأصغر للأكبر، لأن أول source هو ما سيتم جلبه بشكل افتراضي…

  3. إضافة ال muted=true إذا كان الفيديو بلا صوت

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

 

للاستزادة (بعض الروابط التي استخدمت كمراجع لهذه السلسلة، وفي كل منها روابط فرعية يمكنك الولوج إليها لقراءة المزيد):

  1. Image Type

  2. Web Performance

  3. Performance Api

  4. Understanding latency

  5. TCP handshake

  6. TLS

 

والآن، وصلنا إلى نهاية رحلتنا في هذه السلسلة من المقالات، ونسأل الله -سبحانه وتعالى- أن نكون وفقنا لما فيه خير لنا ولكم، وآخر دعوانا أن الحمد لله رب العالمين.

 

رب اغفر لي ولوالدي، رب ارحمهما كما ربياني صغيرا

أو مشاهدة مباشرة: