أكثر 5 طرق فاعلية لتسريع تحميل الموقع
تنعكس سرعة فتح تطبيقك أو موقعك في الانطباع الأول الذي يحصل عليه المستخدمون، وتسرد هذه المقالة من شركة SEO سيو ماستر طرق العمل لتقليل وقت تحميل الصفحة، والذي ينعكس بالسلب أو الإيجاب على تجربة المستخدم وبالتالي على سيو الموقع بالعموم.
وقت التحميل الأولي
الوقت الذي يمر من اللحظة التي يقوم فيها المستخدم أو العميل بإدخال اسم مجال موقعك إلى اللحظة التي يرون فيها المحتوى هو الثواني القليلة الأكثر أهمية التي يجب أن تترك انطباعًا أوليًا جيدًا.
وفقًا لـ Amazon ، فكل 100 مللي ثانية من التأخير يكلفها 1٪ من المبيعات، ومع ذلك، يتعامل العديد من مطوري الويب مع سرعة التنزيل على أنها مصدر قلق ثانوي، ويضيفون المزيد والمزيد من المكتبات والميزات ويبدئون تدريجيًا في ملاحظة انخفاض في التحويلات، والأسوأ من ذلك كله أنه من الصعب اكتشاف هذه الخسائر حيث يترك المستخدمون صفحات بطيئة التحميل قبل أن يتاح للموقع الوقت لتخزين أي مقاييس.
يمكن تنفيذ بعض الطرق أدناه على الواجهة الأمامية والبعض الآخر في النهاية الخلفية، وفي كلتا الحالتين يجب أن يتم تحميل تطبيقات الويب بسرعة.
1. استخدم المقاييس الصحيحة
أول شيء عليك القيام به هو إضافة المقاييس، وتحتوي عملية القياس على العديد من الخطوات، ولن تعرف أين توجد عنق الزجاجة حتى تبدأ في مراقبة المعلمات الصحيحة.
دعونا نلقي نظرة على كيفية القيام بذلك.
الوقت المستغرق من المتصفح إلى الاستجابة
تتبع هذا المؤشر على الخادم الخاص بك، وتحتاج إلى تحديد الوقت من اللحظة التي تتلقى فيها واجهة برمجة التطبيقات طلبًا إلى الوقت الذي تصدر فيه ردًا.
الوقت من إرسال إلى تلقي الرد
يصعب قياس هذا، ولكن إحدى الطرق الممكنة هي إضافة طابع زمني عندما تغادر استجابتك الخادم الخاص بك ومقارنتها بالوقت على جانب المستخدم في أول لحظة ممكنة (علامة البرنامج النصي في رأس صفحة HTML).
الحصول على رد على عرض المحتوى الأول
First Contentful Paint هو الوقت من لحظة انتقالك إلى الموقع حتى يعرض المتصفح الجزء الأول من المحتوى من DOM، ويمكن أن يكون شيئًا بسيطًا مثل نص أو خلفية أو مؤشر تحميل، كما يمكنك قياس المعلمة باستخدام Lighthouse في Chrome Developer Tools.
الوقت من أول عرض للمحتوى إلى عرض أكبر عنصر
Largest Contentful Paint هو وقت عرض أكبر عنصر مرئي في منفذ عرض المستخدم، وعادةً ما يشير إلى نهاية عملية عرض الصفحة عندما يرى المستخدم ملء الشاشة، كما يمكن العثور على هذه المرة أيضًا عن طريق تشغيل Lighthouse.
رسم أكبر عنصر ووقت للتفاعل
أخيرًا، وقت التفاعل هو النقطة التي يمكن للمستخدم عندها تنفيذ إجراءات مثل التمرير والنقر والكتابة، وتعتبر الدرجة العالية في هذا المقياس مزعجة بشكل خاص، حيث يرى المستخدم شاشة معروضة أمامه، لكنه لا يستطيع فعل أي شيء مخالف لتوقعاته! يمكن أيضًا قياس هذا المقياس باستخدام Lighthouse.
2. اختصر الرمز
بعد تلقي جميع المقاييس اللازمة، يمكنك البدء في التحسين، وعليك البحث عن حلول وسط، فبمساعدة القياسات، سوف تفهم القياسات التي تستحق البحث عنها.
يمكن إضافة الكثير من التعليمات البرمجية إلى التطبيق قبل أن يلاحظ أي شخص الفرق في سرعة التحميل بينه وبين صفحة فارغة، ففي بعض الأحيان تكون صغيرة جدًا لدرجة أن التغييرات لا يمكن ملاحظتها من إنشاء إلى آخر حتى يبدأ الموقع يومًا ما في الظهور ببطء.
أنت تدرك أن تطبيقك بطيء، وهذه هي اللحظة المناسبة لتقليل الكود.
عند تقصير الرمز، تحصل على سرعتين في وقت واحد:
- يتم نقل تطبيقك عبر الشبكة بشكل أسرع؛
- ينتهي متصفح المستخدم من تحليل الشفرة بشكل أسرع.
التسارع الأول غير مهم، ونظرًا لأن الطلبات يتم ضغطها عبر الشبكة، فإن تقليل 1 ميغابايت من الكود المصدري في الإخراج يمكن أن يؤدي إلى توفير 10 كيلوبايت فقط.
في الوقت نفسه، يمكن ملاحظة فائدة التحليل السريع بشكل أكبر، ومن المحتمل أن يقوم المستخدمون بتشغيل تطبيقك على مجموعة متنوعة من المتصفحات وأجهزة الكمبيوتر، والعديد منها لا يتمتع بقدرة المعالجة لتحليل الكود بسرعة كافية.
قد يستخدمون أيضًا أجهزة محمولة ذات طاقة معالجة أقل، ويمكن أن يصل الفرق بعد التحسين إلى عدة ثوانٍ،
وبالتالي كلما قل الرمز لديك زادت سرعة إنهاء المتصفح للتحليل وبدء تشغيل التطبيق.
إذا كنت تريد إظهار شاشة التحميل باستخدام JavaScript ، فستحتاج أيضًا إلى المعالجة، الأمر الذي سيستغرق بعض الوقت أيضًا.
لنفترض أنك لا تريد قص الميزات أو إزالتها تمامًا، لحسن الحظ هناك بعض الطرق الجيدة لاختصار الكود:
- قم بتشغيله من خلال المصغرات: تصنع المصغرات الأسماء الطويلة قصيرة (يصبح Sign Up Dark Mode Button )، وتزيل المسافات البيضاء، وتقوم بإجراء تحسينات أخرى لجعل شفرتك مضغوطة وخالية من الضياع قدر الإمكان.
- استيراد وظائف فردية: غالبًا ما تكون المكتبات ممتلئة بما لا تحتاج إليه، ولكن يتم تجميعها في حزمة مشتركة لنفترض أنك تحتاج فقط إلى وظيفة معينة، بدلاً من استيراد المكتبة بأكملها، يمكنك استيراد الرمز الذي تحتاجه فقط.
- إزالة الكود الميت: في بعض الأحيان، يتم ترك رمز على الموقع لتصحيح الأخطاء أو الميزات المهملة التي لم تعد مستخدمة.
تقدم JavaScript أدوات مثل Webpack التي يمكنها اكتشاف التعليمات البرمجية الميتة أو التبعيات غير المستخدمة وإزالتها تلقائيًا من بنية الإنتاج.
3. قسم الكود إلى أجزاء
بمجرد قيامك بتحسين التطبيق الخاص بك، يمكنك الانتقال إلى اختصار الكود المطلوب للتنزيل الأولي.
لنفترض أن 20٪ من شفرتك تستخدم للعمل مع بعض ميزات التطبيق التي لا يمكن للمستخدمين الوصول إليها إلا بعد بضع نقرات.
قبل عرض شاشة التحميل، سيقضي المتصفح وقتًا في التحليل. سيؤدي تقسيم الكود إلى أجزاء إلى تقليل وقت التفاعل بشكل كبير.
تخطي الرسم البياني المربك لتبعية الاستيراد لجميع ملفات جافا سكريبت، وبدلاً من ذلك، حدد المناطق التي يسهل قطعها، على سبيل المثال تقوم بعض المكونات بتحميل العديد من المكتبات الثقيلة.
يمكنك عزله في ملف منفصل ثم استيراده فقط عندما يكون المستخدم جاهزًا للتفاعل معه.
اختر مكتبة للتحميل البطيء اعتمادًا على إطار العمل الذي تستخدمه، ولا داعي للمضي قدمًا وفصل كل مكون، ففي هذه الحالة، سيتلقى المستخدم تحميلًا أوليًا سريعًا، ولكن سيتعين عليه انتظار كل تفاعل لاحق.
ابحث عن أكبر أجزاء الكود التي يمكن تقسيمها وتحسينها.
4. استخدم عرض جانب الخادم
نظرًا لأن المتصفحات يجب أن تقوم بتحليل وتجميع التعليمات البرمجية بشكل مكثف، ويعمل المستخدمون على أجهزة Chromebook والأجهزة المحمولة، فإن إحدى الطرق الشائعة لتقليل أوقات التحميل هي الاستعانة بمصادر خارجية لهذه المهمة جزئيًا للخوادم.
بمعنى آخر وبدلاً من توفير صفحة فارغة وتعبئتها بالبيانات من خلال جافا سكريبت كما هو الحال مع معظم تطبيقات الصفحة الواحدة الحديثة، يمكنك استضافة محرك بنفسك (على سبيل المثال، Node.js) ومعالجة أكبر قدر من المحتوى ممكن من خلاله.
خوادمك أسرع بكثير ويمكن التنبؤ بها أكثر من متصفحات المستخدمين، وستظل بعض التعليمات البرمجية بحاجة إلى المعالجة على أجهزتهم حتى يكون التطبيق تفاعليًا، ومع ذلك يمكن أن يؤدي العرض من جانب الخادم إلى ملء الكثير من البيانات، وسيحصل المستخدم على صفحة تعرض بالفعل شاشة تحميل، أو على الأقل شريط تقدم.
وإذا كانت البيانات مطلوبة للعرض الأولي، فلن يحتاج العميل إلى تقديم طلب منفصل للحصول عليها، فستكون متاحة بالفعل للاستخدام في التطبيق.
5. ضغط الأصول
إنها الأصول التي تجعل الصفحة تنبض بالحياة، وسيظهر الموقع محملاً بالكامل فقط بعد تقديمها، ويتضمن ذلك الخلفيات وأيقونات واجهة المستخدم وصور الملف الشخصي والملفات الأخرى.
تعمل الأصول على تحويل التنسيق مما يتسبب في انتقال الصفحة أثناء التحميل إذا حاول المستخدم التفاعل مع عناصرها وفي بعض الأحيان يعتمد وقت رسم العنصر الأكبر (LCP) عليها.
في الوقت نفسه، تعد الأصول من أثقل أجزاء التطبيق، ويمكن أن تصل أحجام الصور إلى عدة ميغا بايت، ويمكن أن يتجاوز تنزيل عدد كبير من الرموز بسهولة الحد الأقصى لطلبات الشبكة المتزامنة للمتصفح، مما يؤدي إلى التباطؤ.
في معظم الحالات يجب ألا تقوم بتنزيل صورة من الإنترنت واستخدامها في أحد التطبيقات دون معالجة، ويجب تصغير الصور إلى أصغر الأحجام الممكنة، اعتمادًا على كيفية عرضها.
إذا تم إدراج الصورة الرمزية للمستخدم في عنصر صغير بحجم 50 × 50 بكسل دون تعديل، فسيستغرق تطبيقك وقتًا لتحميل الصورة الكبيرة بالكامل ثم تصغيرها.
بالإضافة إلى ذلك، يمكن ضغط الصور حسب تنسيقها، ففي الوقت الحالي، يعد webp هو الخيار المفضل، لكن تقنية الضغط تتحسن باستمرار وهناك بدائل أفضل في الأفق.
نظرًا للعدد الهائل من التنسيقات المختلفة فإن بعض المتصفحات لا تعمل مع أحدث التنسيقات، ولحسن الحظ فهي تسمح لك عادةً بتنزيل الملفات المدعومة.
بالنظر إلى ما سبق، اختر تنسيقات الضغط الأكثر حداثة وفعالية، لكن اترك الإصدارات القديمة من الملفات كنسخ احتياطية، باستخدام عناصر احتياطية لمقاطع الفيديو والصور.
استنتاج
هذه هي الطرق الخمس الأكثر فاعلية التي ستسمح لعملائك بتحميل موقعك بسرعة البرق، فباستخدامهم ستعمل على تحسين تجربة المستخدم ومعدلات التحويل، بالإضافة إلى زيادة ترتيبك في نتائج البحث، لأن أوقات التحميل المنخفضة مفيدة لتحسين محركات البحث.
