اذهب إلى المحتوى

السؤال

نشر

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

لديّ موقع انترنت عملته من خلال html , css js  لشركة في دبي ، و لكن عندما رفعته أرى انه على الهواتف يكون بطيئاً نوعاً ما ، هل من ارشادات تجعل الموقع اكثر سرعة 

الموقع يوجد فيه العديد من الصور و ٤ فيديو 

و شكرا لكم

Recommended Posts

  • 0
نشر

يمكنك إختبار سرعة تحميل الموقع من خلال خدمات مثل:

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

كما يفضل أن ضغط الصور عبر موقع tinypng بدون انقاص من جودة الصورة, كما يمكنك تحويل الصورة الى webp التي ينصح بها جوجل لانها جيدة في محركات البحث و سريعة التحميل.

  • 0
نشر

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

  • 0
نشر

قم بعمل إختبار باستخدام lighthouse وستقوم بعمل تحليل شامل لأداء الموقع وتعطيك أسباب بطئ الموقع بالتفصيل وطرق حل هذه المشاكل 

طريقة استخدام Google Lighthouse في Chrome DevTools.

أسرع طريقة للتحقق من الصفحة باستخدام Lighthouse هي استخدام أدوات المطورين المضمنة في Chrome.لاستخدام Lighthouse من خلال أدوات مطور Chrome 1. اتبع هذه الخطوات:

  1. افتح صفحة الويب التي تريد تقييمها.
  2. افتح لوحة DevTools بالنقر بزر الماوس الأيمن فوق الصفحة وتحديد فحص أو ببساطة عن طريق الضغط على Control + Shift + I على جهاز Mac أو Control + Shift + I على نظام Windows.
  3. في جزء DevTools ، حدد عنصر قائمة Lighthouse ثم ،انقر فوق إنشاء تقرير.
  4. بشكل افتراضي ، ستنشئ Lighthouse تقريرًا يحلل جميع الفئات الخمس الموجودة على جهازك. يمكنك تبديل هذه الإعدادات في أداة Lighthouse قبل إنشاء تقريرك.

85953021_HowtoUseGoogleLighthousetoOptimizeYourWebsiteUX.thumb.png.bc0b850f1916be188dbb7ee19f17bdd7.png

بعد بضع ثوانٍ ، ستنشئ Lighthouse تقريرًا عبر الإنترنت لموقعك على الويب.انظر الشرح أدناه لمزيد من المعلومات حول هذا التقرير.

  • 0
نشر

كما في التعليقات السابقة فإنه يمكنك الحصول على العديد من النصائح من خلال Lighthouse  لتحسن سرعة الموقع والعديد من النصائح الأخرى ولكن عند الحديث عن تحسين سرعة الموقع وبما أنه لديك كما قلت العديد من الصور والفيديوهات فمن المؤكد أنها المشكلة 

لذلك يجب عليك عمل optimize للصور والفيديوهات من خلال الخطوات التالية

  • لا تذهب دائمًا إلى JPG. توقع حجم الصورة التي ستعتمد على محتوياتها ، ثم استخدم نوع الصورة الصحيح.
  • لا تهتم باستخدام صور SVG على الإطلاق إذا كنت ترغب في تحسين الصور بسرعة. الوقت الذي ستضيعه في إنشائها لن يؤتي ثماره (على الرغم من عدم التردد في الاختلاف). ستكون ملفات PNG أسرع في الاستخدام ولن تكون أسوأ بكثير من حيث استهلاك مساحة القرص.استخدم WebP كثيرًا قدر الإمكان ، ولكن بشكل خاص عند التعامل مع الصور التي تظهر على صفحات متعددة أو صور كبيرة بشكل غير عادي. إذا كنت لا ترغب في تحويل صورك إلى WebP يدويًا ، فيمكنك استخدام مكون إضافي مثل Optimole ، والذي يخدم تلقائيًا صور WebP لزوار موقعك بشكل افتراضي.
  • قم بضغط ملفات JPG الخاصة بك للوصول إلى مستوى مقبول من الجودة مقابل مساحة القرص. قم بضغط ملفات PNG دائمًا.
  • استخدم أحجام الصور الصحيحة لتصميمك. إنشاء breakpoints. قم بإنشاء إصدارات متعددة من نفس الصورة لتغطية breakpoints. استخدم srcset و sizes ك attributes  عند عرض الصور.
  • استخدم ال Lazy load images.
  • اعرض صورًا أصغر حجمًا وأكثر ضغطًا للمستخدمين على اتصالات الإنترنت الأبطأ.

الخطوات السابقة تحتاج للدراسة حيث تحتوي على معلومات كثيرة يمكنك البحث عن كل خطوة للمزيد من التفاصيل حيث كل خطوة من الخطوات السابقة لها تأثير كبير على سرعة الموقع

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...