كيفية تسريع تحميل صفحات موقعك؟
تسريع صفحات موقعك لم تعد رفاهية الشركات الكبيرة فقط، بل أصبحت ضرورة لكي تحصل علي ترتيب جيد في محركات البحث وخاصةً محرك البحث العملاق جوجل. لأن مشروع كروميوم أعلن منذ أيام عن ظهور اشعار للزائر أن موقعك بطئ عند معظم الناس، وتحدثنا عن هذا الخبر هنا من قبل . مشروع كروميوم هو خاص بمتصفح مفتوح المصدر مبني عليه العديد من المتصفحات. اهم هذه المتصفحات هو العملاق جوجل كروم، والكثير من المتصفحات الأخرى مثل مايكروسوفت إيدج، وأوبرا.
كما أن جوجل تضع في معايير ترتيب المواقع في محرك البحث سرعة تصفح موقعك. ولا تنسي أيضاً أن الزائر لن ينتظر كثيراً لكي تحمل صفحة موقعك. فإن لم تظهر صفحة موقعك في أقل من ٣٠ ثانية سيذهب إلي آلاف المواقع الأخري التي تقدم نفس النصائح والمعلومات والخدمات والمنتجات.
بعد ان تحدثنا عن أسباب الإهتمام بتسريع تحميل صفحات موقعك أو مدونتك، نبدأ الآن في سرد كل العوامل التي تحتاجه لتجعل موقعك سريع في التصفح.
١. تبسيط المميزات 🔗
إن كنت أنت المبرمج الخاص بموقعك، ركز علي تبسيط المميزات والخصائص الجديدة التي تضيفها لموقعك لكي تظل محتفظ بسرعة تحميل الصفحات لكي يكون تصفح موقعك سلس لدي كل المستخدمين بغض النظر علي سرعة الإنترنت لديهم.
٢. استخدام صور بنفس المقاس الذي تظهر به 🔗
استخدم مقاس صور مناسب لصندوق العرض. لا تستخدم صور أكبر من الحجم المعروض من الصورة. لأنك تزيد من حجم الصفحة دون داعي.
٣. استخدم صور بصيغة JPG 🔗
استخدم صور بإمتداد JPG لأنها مدعومة في كل المتصفحات بلا استثناء، ويمكن ضغطها بشكل كبير دون فقد بيانات (lossless compression) أو بفقد بيانات (lossy compression).
٤. ضغط الصور بالطريقة المناسبة 🔗
إن كان الصورة مجرد صورة توضيحية تظهر بها فتاة تحمل موبايل مثلاً فالأفضل أن تضغط هذه الصورة مع فقد بعض البيانات لأنها لن تؤثر علي الهدف من الصورة (Lossy Compression). أما إن كانت الصورة التي تريد استخدامها هي لقطة شاشة تشرح كيفية عمل شئ معين في الحاسوب فلابد أن تحتفظ بكل البيانات والمعلومات الموجودة في الصورة لذلك قم بضغط الصورة بدون فقد بيانات منها (Lossless Compression). يمكنك ضغط الصور عبر الموقع المجاني الرائع squoosh.app الذي أستخدمه انا بشكل دائم.
٥. التحميل الكسول للصور 🔗
التحميل الكسول (Lazy Loading) هي طريقة جميل لتحميل الصور. حيث لا يتم تحميل الصور إلا عندما يراها الزائر. وبذلك توفر في وقت التحميل وتجعل الصفحة تحمل حسب الطلب. والتحميل حسب الطلب هي فكرة ذكية جداً. ولكنها ليست سهلة التنفيذ. لذلك أنصحك إما بإستخدام مكتبة جافاسكربت لتحميل الصور عند الطلب (Lazy Loading) أو استخدام كود تحميل الصور عند الطلب المتاح علي متصفح جوجل كروم فقط وهو إضافة attribute للصور كالتالي:
<img loading='lazy' src='' alt='' />
٦. تحميل سكربتات جافاسكربت في النهاية إن أمكن 🔗
قم بوضع سكربتات المتاح تحميلهم في نهاية تحميل الصفحة مع بعض في ملف واحد وأكتبه كالتالي:
<script async='async' defer='defer' .. />
بهذه الطريقة أنت تجعلك تحميل السكربت بعد الإنتهاء من تحميل الصفحة وأيضاً تجعل تحميله غير متزامن مما يجعل المستخدم لا يشعر بطول وقت تحميل ملفات صفحة موقعك.
٧. تقليل عدد طلبات صفحة الويب 🔗
تقليل عدد الـ http requests هام جداً لكي يحصل المستخدم علي صفحة ويب قابلة للتصفح والإستخدام في أقل وقت ممكن. يمكنك تقليل عدد الطلبات عن طريق وضع كل تنسيقات الصفحة في ملف css واحد، ووضع كل سكربتات الصفحة في ملف Javascript واحد، واستخدام صور svg في شكل inline وليست روابط. ويمكنك أيضاً استخدام الصور الـ png أو jpg في شكل مجموعة من الصور في صورة واحد، مما يقلل عدد طلبات الصور من ٥ أو ٦ طلبات إلي طلب واحد فقط، وستجد شروحات لهذه الطريقة علي اليوتيوب.
٨. تحميل الـ iframe بشكل غير متزامن 🔗
اضف الـ iframes في صفحات موقعك بالكود التالي:
<iframe async='async' defer='defer' ..
٩. استخدام preload 🔗
يمكنك استخدام preload مع التنسيقات والسكربتات بهذا الشكل:
<link as='style' href='style.css' rel='preload'/>
<link as='script' href='script.min.js' rel='preload'/>
توضع هذه الأسطر بين علامتي <head> و </head> في بداية صفحة الويب.
١٠. استخدم dns-prefetch 🔗
من الأفضل أن تستخدم dns-prefetch مع الروابط التي تستعين بها داخل صفحتك. مثل الروابط التي يتم تحميل الصور منها، أو الروابط التي تتبع حركة الزوار علي موقعك، او الروابط التي تعرض الإعلانات علي موقعك، .. وهكذا. طريقة كتابة هذا الكود كالتالي:
<link href='https://www.google-analytics.com' rel='dns-prefetch'/>
يوضع هذا الكود بين علامتي <head> و </head> في رأس الصفحة.
١١. تصغير حجم سكربتات جافاسكربت 🔗
هناك طرق لتصغير حجم سكربتات جافاسكربت عن طريق استخدام أسماء متغيرات قصيرة جداً ووضع الكود في أسطر قليلة. هذه الأدوات موجودة بكثرة علي الإنترنت ودائماً تُسمي Javascript minify.
١٢. تصغير حجم تنسيقات الصفحة 🔗
هناك طرق أيضاً لتضغير تنسيقات الصفحة styling لتجعل ملف الـ css أصغير بكثير. مما يساعد في سرعة تحميل صفحة الوقت ويجعلها قابلة للتصفح في أقل وقت ممكن.
١٣. وضع مدة مناسبة للحفظ المؤقت (Cache) 🔗
ضع مدة مناسبة للصور، والسكربتات، والتنسيقات لكي لا يتم تحميلها مرة أخري في كل مرة يدخل الزائر علي صفحة من صفحات موقعك.
أتمني ان تكون استفدت من الموضوع ويفيدك في تحسين سرعة موقعك وزيادة ظهوره للزوار في جوجل. وإن أردت متابعة الموضوعات الجديدة انضم لقناة تيليجرام .
