موقع ويب يعمل ببطء شديد ويستغرق وقتًا طويلاً للتحميل

بتاريخ منذ ساعة مضت قال زياد احمد محمود:

ما هي افضل طريقه او الجوانب التي اراعيها في موقعي حتي يصبح افضل واسرع

هناك العديد من الأمور الممكن تنفيذها حتى يصبح الموقع أسرع وأفضل، وهذه هي أبرزها:

1. الانتباه لحجم ملفات ال HTML, CSS, JS والصور ونوع الخطوط ومحاولة تقليل حجمها لتسهل تحميلها، وذلك عن طريق استخدام كود نظيف بدون مساحات فارغة كثيرة، وعن طريق استخدام أدوات لتقليل حجم الصور مثل ImageOptim, TinyPNG.
2. استخدام ما يدعى ال cache في الموقع، مما يتيح تخزين بعض البيانات في متصفح المستخدم، مثل بعض المحتوى أو الصور أو الملفات التي لاتحتاج الى تحديث طوال الوقت، والذي يمنع التحميل المتكرر وبالتالي سرعة أكبر للموقع.
3. استخدام التوابع غير المتزامنة (async) في جافا سكريبت، والذي يسمح لهذه التوابع بالعمل في الخلفية وعدم انتظار المتصفح لانتهاء تحميلها قبل تحميل الصفحة بالكامل.
4. استخدام مايعرف ب Server Side Rendering و Static Side Generation لتحميل صفحات الويب على السيرفر وارسالها الى المستخدم، عوضا عن تحميلها على متصفح المستخدم لتوفير الوقت وضمان السرعة.

الحاجات دي هتساعدك ترفع الperformance وaccessibility وseo

1- أولًا، لا يجب أن يحتوي الكود الخاص بـ HTML لديك على أخطاء؛ يجب أن يكون صحيحًا بالكامل (Valid). يمكنك زيارة هذا الموقع وإدخال الكود لحل المشكلات https://validator.w3.org/

2- يجب كتابة البادئات (prefixes) الخاصة بـ CSS لدعم المتصفحات. يمكنك وضع الكود الخاص بك هنا بعد الانتهاء، وهذا الموقع سيقوم بتعديله لك https://autoprefixer.github.io/

3- سأوضح هنا بعض الجوانب المتعلقة بالصور، مثل جودتها وحجمها، والبديل (alt attribute)، وتقنية التحميل الكسول (Lazy Load)، وتغيير حجم الصور، وتأثيرها على الأداء.

• يمكنك تحسين جودة صورك باستخدام العديد من المواقع التي توفر صوراً بجودة عالية مجاناً. فيما يتعلق بحجم الصور، إذا كان كبيراً، يجب تقليله دون التأثير على جودتها، وهناك العديد من المواقع التي تقدم خدمة ضغط الصور.
• بالنسبة لتقنية التحميل الكسول، عند فتح موقع، يُفترض أن جميع الصور تُحمّل دفعة واحدة، وهو ما يؤثر على الأداء بالطبع. هذه التقنية تجعل فقط الصور التي يراها المستخدم تبدأ بالتحميل، وكلما تم التنقل داخل الموقع، تُحمّل الصور واحدة تلو الأخرى. يمكنك استخدام هذه التقنية بإضافة السمة loading="lazy" إلى علامة img.
• يمكنك أيضاً التأكد من ملاءمة أحجام الصور لمختلف أحجام الشاشات باستخدام استعلامات الوسائط (media queries)، بتغيير حجم الصور عند تصغير الشاشة ووضع صور مناسبة للتابلت والموبايل، أو تثبيت حجم الصورة، لأن تغيير حجم الصور قد يقلل من الأداء. يمكن القيام بذلك باستخدام علامة HTML picture.
• بالنسبة للبديل (alt attribute)، لا يجب أن تكون فارغة، فهذا خطأ يؤثر على تحسين محركات البحث (SEO) وإمكانية الوصول، ويجب أن تحتوي على كلمات تصف الصورة.

4-من الضروري قبل رفع الموقع أن تقوم بتصغير حجم (minify) كود الـ CSS والـ JS لأن هذا سيخفض حجم ملف الكود إلى النصف تقريبًا، مما سيحسن الأداء بشكل ملحوظ ويقلل من عدد الطلبات الـ HTTP. كل ملف (CSS، JavaScript، صورة) يحتاج إلى طلب HTTP خاص به ليتم تحميله. يُنصح بدمج الملفات معًا قدر الإمكان لتقليل الطلبات. يمكنك القيام بذلك من خلال استخدام بعض المواقع الإلكترونية المتخصصة في هذا المجال.

5-يمكنك استخدم ال light house ستجدها ف dev tools يمكنك فتحها بالضغط علي f12 يمكنك من خلالها ان تقيس الperformance وaccessibility وseo وستعطيك تعليمات لاجل تحسينهم وستظهر من خلالها المشاكل التي لديك ويمكنك حلها

6- تاج meta description هذا يوضع في الhead  وهذا سيفرق في الSeo لدرجه كبيره جدا بمقارنه انه بسيط جدا.

7-يمكنك استخدم Bundlers ستفيدك في المشاريع الكبيره وستسهل عليك الكثير من الاشياء مثل Webpack او gulp او غيره.

8- استخدام الكاش (Cache) تخزين الكاش يساعد في تسريع التحميل للزوار العائدين لموقعك. يتم تخزين بعض البيانات مؤقتًا لتجنب إعادة تحميلها في كل مرة.

9. استخدام شبكة توصيل المحتوى (CDN) هي شبكات توزع المحتوى من موقعك على خوادم حول العالم، مما يقرب المحتوى من المستخدم ويسرع التحميل.

10. تقليل استخدام الإضافات (Plugins) كلما زادت الإضافات، زاد الوقت اللازم لتحميل الصفحة. استخدم فقط الإضافات الضرورية.

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

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