مشاكل التصميم التي تؤدي إلى بطئ تحميل الموقع

سرعة تحميل الموقع الالكتروني تتعلّق بعوامل كثيرة ومواضيع عديدة يصعب اختصارها، وأيضاً حسب إطار العمل في حال كنت تستخدم واحداً. من أهم الأمور التي يمكنك البدء بها:

- حجم الصور:

حاول دوماً ضغط الصور واستخدام الصيغ الحديثة مثل .webp التي ينصح بها Google كونه يتمتع بحجم صغير مع المحافظة على دقة الصورة، كما يمكنك البحث أكثر عن تقنيات إظهار أحجام صور مخصصة لحجوم الشاشات المختلفة.

- حجم الملفات css و جافاسكريبت:

في حال كنت تستخدم إطار عمل معيّن في واجهة المستخدم مثل React , Vue, وغيرها سينتج عنها العديد من شيفرات الجافاسكريبت اللازمة لعمل المكتبة نفسها، مما يزيد من حجم ملفات الجافاسكريبت في موقعك، ولكن معظم أطر العمل هذه لديها تقنيات بناء build بحيث تقوم بضغط هذه الملفات لتقليل حجمها قدر المستطاع، لذلك يجب عليك التأكد من اتباع الخطوات المذكورة في التوثيق الرسمي لإطار العمل في حال كنت تستخدم واحداً.

- بالنسبة للمكتبات والإضافات:

حاول دوماً اختيار المكتبات الأقل حجماً والتي لها أقل عدد من الاعتماديات dependencies (أي لا تعتمد على مكتبات أخرى لعملها) وفي حال استطعت تطوير نفس الخاصية التي تقدمها المكتبة بنفسك، حاول دوماً الاستغناء عنها.

- تحميل البيانات:

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

- استخدام الذاكرة المؤقتة Cache:

سيكون عاملاً هاماً في سرعة تحميل الموقع، حاول البحث عن طرق استخدامات cache بدلاً من إعادة تحميل نفس النسخة من الموقع في كل مرة يقوم المستخدم بزيارة موقعك.

- استخدام شبكات توصيل المحتوى CDN:

والتي ستساعدك أيضاً على تقليل مدة تحميل الموقع من خلال نشر نسخ محلية عبر شبكة الانترنت لتسريع تصفح الموقع حسب النقطة الجغرافية للزائرين. (مثال cloudflare).

وأخيراً، يمكنك الاستفادة من بعض الأدوات المتاحة مجاناً (ومنها pagespeed المقدّمة من Google) لفحص موقعك وسيخبرك بأي تفاصيل أخرى وأي مشاكل موجودة وطرق تحسينها أيضاً

يمكنك ايضا الاستفادة من استخدام مفهوم الـ lazy loading لتحميل الصور وعرضها بالصفحة. والفكرة الاساسية فيه هو ان الصور يتم عرضها وتحميلها من موردها الاصلي بعد عرضها في الواجهة فقط وليس مع تحميل الصفحة. وهو ما سيقوم بتسريع اداء الموقع بشكل مبالغ فيه.

قم بضغط وتقليل ملفات الجافاسكربت والcss التي تستخدمها داخل الموقع، استعمل تطبيقات ال minifier للتخلص من الفراغات والتعليقات وغيرها من الاشياء التي تقوم بتكبير حجم الملف.

التزم بقواعد الشيفرات النظيفة ولا تكرر ما تقوم به، حاول اختصار شيفراتك وأعد صيانتها.

لا تستعمل المكتبات إلا في حالة الحاجة لها حقا، لما قد تستعمل مثلا مكتبة بـ 100 ميزة وتستعمل منها واحدة فقط؟ تذكر انها على الجافاسكربت و الـ css وقم ببناء واحدة لك تخدم غرضك بالضبط.

شكرا لك أخي عدنان كيف اطبق مفهوم lazy loading 

هل فقط من خلال css loading="lazy" ؟

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn-blue {
      @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
    }
}

بعد ذلك أستخدم الكلاس الوحيد في العنصر لتطبيق (.btn-blue)

-- وفي حالت أردت تنسيقات أخرى للغة العربية مثلا ماهي أفضل طريقة هل أنشئ ملف آخر مثل الأول وأغيير فيه فقط الإتجاهات هل يؤثر هذا على حجم الملفات وسرعة الموقع ؟

شكرا لك جزييل الشكر

بتاريخ On 26/08/2022 at 08:27 قال Brahim Semmani:

شكرا لك أخي عدنان كيف اطبق مفهوم lazy loading 

هل فقط من خلال css loading="lazy" ؟

استخدام الخاصية loading قد يكون حلا كافيا في بعض المتصفحات الحديثة ولكن رغم هذا الا انه يفضل عمل مقاربة تشمل كامل المتصفحات.

يمكنك تخزين الرابط المصدري للصورة في خاصية مخصصة ولتكن data-source ثم عن طريق الجافاسكربت تحديد كامل عناصر الصور في الوثيقة وحقن القيمة المخزنة بـ source داخل src حتى يتم تفسيرها من المتصفح بشكل عادي. وبالطبع فان هذا يكون بعد عرضها في الوثيقة او بالاستماع لحدث ما.

<img src="" data-source="./path/to/img.png" alt="image title" />

يتم الاستعانة بمفهوم مراقبات التقاطع Intersection observers لخدمة هذا الغرض في الغالب. يمكنك بها التعرف ما ان كانت الصورة معروضة او لم يتم الانزلاق اليها بعد.

بتاريخ On 26/08/2022 at 08:27 قال Brahim Semmani:

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

بعد ذلك أستخدم الكلاس الوحيد في العنصر لتطبيق (.btn-blue)

-- وفي حالت أردت تنسيقات أخرى للغة العربية مثلا ماهي أفضل طريقة هل أنشئ ملف آخر مثل الأول وأغيير فيه فقط الإتجاهات هل يؤثر هذا على حجم الملفات وسرعة الموقع ؟

يمكنك كطريقة تنظيمية انشاء اكثر من ملف نعم، ولكن يفضل استعمال محددات عناصر سليلة للتعرف على تلك الخاصة باللغة العربية وتلك الخاصة بلغات اخرى. مثال:

@tailwind base;
@tailwind components;
@tailwind utilities;


body {
  // تنسيقات عامة
}

body.rtl {
  // تنسيقات مخصصة عربية
}