نصائح لزيادة Page performance

وعليكم السلام ورحمة الله وبركاته .

إذا قمت بالذهاب إلى موقع PageSpeed Insights وأظهر لك أن 64% performance فستجد أنه يخبرك بالمشاكل الموجودة والنصائح التي تجعل النسبة تزيد لديك.

أولا أنصحك بإستخدام مكتبة lazyload في جافاسكريبت نظرا لوجود الكثير من الصور لديك وهذا الأمر سيجعل النسبة ترتفع كثيرا .

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

أيضا يفضل إستخدام ال pagination إذا كان يتم عرض محتوى دايناميكي وذلك لمنع تكبير محتوى HTML بشكل يؤثر على الأداء.

أيضا من المهم جدا أن تضع للعناصر مثل الصور أو العناصر التي يتم تحميلها من ال API أى التي تأخذ وقتا لإحضارها من مصدر خارجي أن تجعل لها طول وعرض ثابتين . وذلك لتجنب إزاحة المحتوي فهذا الأمر مهم ويتم إحتسابه من ضمن الأداء . حيث مثلا تخيل أن هناك زر أسفل أعلى صورة مثلا ولم يتم تحميلها حتى الآن والمستخدم يرد الضغط على جزء أسفل الصورة ولكن بمجرد تحميل الصورة تجد أن الصورة أخذت طول وعرض مما أزاح المحتوى وجعل المستخدم يضغط على الزر الخاطئ ومن الممكن أن هذا الزر يفعل إجرار لا يريده المستخدم . وهذا الأمر يقلل تجربة المستخدم والتي تقلل من الأداء.

أيضا يفضل عدم تضمين ملفات js ليست مستخدمه ولو كنت لا تستخدم cdn أن تقوم بتفعيل ال cache فلا يتم تحميل الملفات الثابته كل مرة . 

وعليكم السلام ورحمة الله وبركاته.

وأيضاً من النقاط المهمة هو استخدام أشكال صور حديثة مثل WebP فهو شكل صور طور خصيصاً لتحسين أداء المواقع.

لنفترض أن لديك صورة واحدة لحالة طبية بحجم 500KB بشكل JPEG. إذا حولتها إلى WebP، ستصبح حوالي 250KB. وإذا حولتها إلى AVIF، قد تصبح 150KB أو أقل. اضرب هذا الرقم في 52 صورة، وستجد أن الفرق هائل.

أيضاً حاول استخدام أحجام مختلفة للشاشات المختلفة . فعندما تضع صورة واحدة بحجم كبير وتتركها تتكيف مع جميع الأجهزة، فإن المستخدم الذي يفتح الموقع من هاتفه المحمول سيضطر لتحميل صورة مصممة أصلاً لشاشة كمبيوتر كبيرة.