ادوات قياس ومعرفة سرعة تحميل الموقع

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

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

افضل ادوات معرفة سرعة تحميل الموقع:

Google PageSpeed Insights.
WebpageTest.
Gtmetrix.
Pingdom Tools.
Web Page Analyzer.

ستظل سرعة مواقع الويب احد العوامل الهامة في سيو لتحديد قيمة النتائج.

تعد سرعة الموقع من اهم عوامل ترتيب الموقع في جوجل، التى تساعدك فى الحصول على المزيد من فرص الظهور على محرك بحث Google ويؤدى ذلك الى تحقيق تجربة مستخدم افضل.

دراسة حية: هذا تمامًا ما طبقناه في موقع سعر الذهب في عمان اليوم للحصول على أفضل ترتيب على جوجل وتطبيق واحد من أهم عوامل التصدر في نتائج الصفحة الأولى (SERPs).

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

هذا بالضبط سيكون نفس اختيار زائر موقعك سيارة احدث موديل وسريعة! هذا ما سيعطيه محرك البحث Google لعميله (مستخدم محرك البحث).

ما هو وقت التحميل الأولي؟

الوقت الذي يمر من اللحظة التي يقوم فيها المستخدم أو العميل بإدخال اسم مجال موقعك إلى اللحظة التي يرون فيها المحتوى هو الثواني القليلة الأكثر أهمية التي يجب أن تترك انطباعًا أوليًا جيدًا.

وفقًا لـ Amazon ، فكل 100 مللي ثانية من التأخير يكلفها 1٪ من المبيعات، ومع ذلك، يتعامل العديد من مطوري الويب مع سرعة التنزيل على أنها مصدر قلق ثانوي، ويضيفون المزيد والمزيد من المكتبات والميزات ويبدئون تدريجيًا في ملاحظة انخفاض في التحويلات، والأسوأ من ذلك كله أنه من الصعب اكتشاف هذه الخسائر حيث يترك المستخدمون صفحات بطيئة التحميل قبل أن يتاح للموقع الوقت لتخزين أي مقاييس.

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

خطوات زيادة سرعة تحميل الموقع

ببساطة، إذا كانت سرعة موقعك لا تمثل لك الأولوية، فانت تفقد فرص رائعة للظهور فى نتائج افضل، تتمثل أبسط الطرق لتحقيق افضل سرعة لموقعك:

1. ضغط وتحسين الصور

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

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

ان كثرة استخدام الأضافات على ووردبريس يعد أحد الممارسات السيئة التي تضر بسرعة موقعك، ومن جانب اخر تصبح استضافة ووردبريس الخاصة بموقعك مكلفة الى حد كبير.

كما انها أحد العوامل السلبية على عملية السيو (تحسين محركات البحث).

اذا كنت ستقوم بكتابة محتوى عالى الجودة، لماذا تقوم باستخدام الاضافات التلقائية؟

قم بعمل اختبار لسرعة الموقع قبل كل تعديل تقوم به على موقعك.

2. تفعيل الضغط والتخزين المؤقت

إذا قمت بتفعيل الضغط والتخزين المؤقت سيسمح هذا الأمر للمتصفحات بتخزين الملفات لمدة زمنية معينة.

إذا ما قام الزائر بزيارة موقعك خلال هذه المدة لن يحتاج الى تحميل كافة الملفات مرة اخرى، مثل الصور وملفات Js و Css وهذا يجعل تصفح الزائر سريع ويجد سهولة فى الانتقال داخل موقعك.

قم بالخطوات التالية للحصول على افضل سرعة تحميل لموقعك:

GZip

يعد تفعيل الضغط GZIP امر محبب جدا للحصول على سرعه تحميل افضل للصفحات، اضف الكود التالى الى ملف htaccess لتفعيل الضغط:

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>
#End Gzip

التخزين المؤقت (Browser Caching)

قم بأضافة الكود التالى الى ملف htaccess:

# BEGIN Caching
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|ttf|otf|woff|woff2|eot|svg)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=912300, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=234000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=234000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
# END Caching

او هذا الكود:

# BEGIN Expire headers  
<ifModule mod_expires.c>  
        ExpiresActive On  
        ExpiresDefault "access plus 5 seconds"  
        ExpiresByType image/x-icon "access plus 3042000 seconds"  
        ExpiresByType image/jpeg "access plus 3042000 seconds"  
        ExpiresByType image/png "access plus 3042000 seconds"  
        ExpiresByType image/gif "access plus 3042000 seconds"  
        ExpiresByType image/svg+xml "access plus 3042000 seconds"
        ExpiresByType application/x-font-ttf "access plus 3042000 seconds"
        ExpiresByType application/x-font-truetype "access plus 3042000 seconds"
        ExpiresByType application/x-font-opentype "access plus 3042000 seconds"
        ExpiresByType application/x-font-woff "access plus 3042000 seconds"
        ExpiresByType application/font-woff2 "access plus 3042000 seconds"
        ExpiresByType application/vnd.ms-fontobject "access plus 3042000 seconds"
        ExpiresByType application/font-sfnt "access plus 3042000 seconds"
        ExpiresByType application/x-shockwave-flash "access plus 3042000 seconds"  
        ExpiresByType text/css "access plus 704900 seconds"  
        ExpiresByType text/javascript "access plus 223000 seconds"  
        ExpiresByType application/javascript "access plus 223000 seconds"  
        ExpiresByType application/x-javascript "access plus 223000 seconds"  
        ExpiresByType text/html "access plus 600 seconds"  
        ExpiresByType application/xhtml+xml "access plus 600 seconds"  
</ifModule>  
# END Expire headers

اذا لم تعمل هذه الاكواد قم بمراسلة المستضيف الخاص بك، وعرض المشكلة عليه ليقوم بمساعدتك.

3. تقليل وقت استجابة الخادم

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

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

يمكنك استخدام العديد من التطبيقات لقياس سرعة الموقع وسرعة استجابة الخادم، واشهر هذه الادوات Google PageSpeed Insights و GTmetrix.

انصحك باستخدام Webpagetest لمساعدتك فى الحصول على تقريراً مفصلاً بكل ملف ووقت تحميله وسرعه استجابته بشكل منفصل.

كما يمكنك من خلال Webpagetest القيام باختبار السرعه من مختلف الاجهزة والمتصفحات، وبالتالى يمكنك مراجعه موقعك بشكل عام على كافة الاجهزة.

4. استخدم المقاييس الصحيحة

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

دعونا نلقي نظرة على كيفية القيام بذلك.

الوقت المستغرق من المتصفح إلى الاستجابة

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

الوقت من إرسال إلى تلقي الرد

يصعب قياس هذا، ولكن إحدى الطرق الممكنة هي إضافة طابع زمني عندما تغادر استجابتك الخادم الخاص بك ومقارنتها بالوقت على جانب المستخدم في أول لحظة ممكنة (علامة البرنامج النصي في رأس صفحة HTML).

الحصول على رد على عرض المحتوى الأول

First Contentful Paint هو الوقت من لحظة انتقالك إلى الموقع حتى يعرض المتصفح الجزء الأول من المحتوى من DOM، ويمكن أن يكون شيئًا بسيطًا مثل نص أو خلفية أو مؤشر تحميل، كما يمكنك قياس المعلمة باستخدام Lighthouse في Chrome Developer Tools.

الوقت من أول عرض للمحتوى إلى عرض أكبر عنصر

Largest Contentful Paint هو وقت عرض أكبر عنصر مرئي في منفذ عرض المستخدم، وعادةً ما يشير إلى نهاية عملية عرض الصفحة عندما يرى المستخدم ملء الشاشة، كما يمكن العثور على هذه المرة أيضًا عن طريق تشغيل Lighthouse.

رسم أكبر عنصر ووقت للتفاعل

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

5. اختصر الرمز

بعد تلقي جميع المقاييس اللازمة، يمكنك البدء في التحسين، وعليك البحث عن حلول وسط، فبمساعدة القياسات، سوف تفهم القياسات التي تستحق البحث عنها.

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

أنت تدرك أن تطبيقك بطيء، وهذه هي اللحظة المناسبة لتقليل الكود.

عند تقصير الرمز، تحصل على سرعتين في وقت واحد:

يتم نقل تطبيقك عبر الشبكة بشكل أسرع؛
ينتهي متصفح المستخدم من تحليل الشفرة بشكل أسرع.

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

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

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

وبالتالي كلما قل الرمز لديك زادت سرعة إنهاء المتصفح للتحليل وبدء تشغيل التطبيق.

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

لنفترض أنك لا تريد قص الميزات أو إزالتها تمامًا، لحسن الحظ هناك بعض الطرق الجيدة لاختصار الكود:

قم بتشغيله من خلال المصغرات: تصنع المصغرات الأسماء الطويلة قصيرة (يصبح Sign Up Dark Mode Button )، وتزيل المسافات البيضاء، وتقوم بإجراء تحسينات أخرى لجعل شفرتك مضغوطة وخالية من الضياع قدر الإمكان.
استيراد وظائف فردية: غالبًا ما تكون المكتبات ممتلئة بما لا تحتاج إليه، ولكن يتم تجميعها في حزمة مشتركة لنفترض أنك تحتاج فقط إلى وظيفة معينة، بدلاً من استيراد المكتبة بأكملها، يمكنك استيراد الرمز الذي تحتاجه فقط.
إزالة الكود الميت: في بعض الأحيان، يتم ترك رمز على الموقع لتصحيح الأخطاء أو الميزات المهملة التي لم تعد مستخدمة.
تقدم JavaScript أدوات مثل Webpack التي يمكنها اكتشاف التعليمات البرمجية الميتة أو التبعيات غير المستخدمة وإزالتها تلقائيًا من بنية الإنتاج.

6. قسم الكود إلى أجزاء

بمجرد قيامك بتحسين التطبيق الخاص بك، يمكنك الانتقال إلى اختصار الكود المطلوب للتنزيل الأولي.

لنفترض أن 20٪ من شفرتك تستخدم للعمل مع بعض ميزات التطبيق التي لا يمكن للمستخدمين الوصول إليها إلا بعد بضع نقرات.

قبل عرض شاشة التحميل، سيقضي المتصفح وقتًا في التحليل. سيؤدي تقسيم الكود إلى أجزاء إلى تقليل وقت التفاعل بشكل كبير.

تخطي الرسم البياني المربك لتبعية الاستيراد لجميع ملفات جافا سكريبت، وبدلاً من ذلك، حدد المناطق التي يسهل قطعها، على سبيل المثال تقوم بعض المكونات بتحميل العديد من المكتبات الثقيلة.

يمكنك عزله في ملف منفصل ثم استيراده فقط عندما يكون المستخدم جاهزًا للتفاعل معه.

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

ابحث عن أكبر أجزاء الكود التي يمكن تقسيمها وتحسينها.

7. استخدم عرض جانب الخادم

نظرًا لأن المتصفحات يجب أن تقوم بتحليل وتجميع التعليمات البرمجية بشكل مكثف، ويعمل المستخدمون على أجهزة Chromebook والأجهزة المحمولة، فإن إحدى الطرق الشائعة لتقليل أوقات التحميل هي الاستعانة بمصادر خارجية لهذه المهمة جزئيًا للخوادم.

بمعنى آخر وبدلاً من توفير صفحة فارغة وتعبئتها بالبيانات من خلال جافا سكريبت كما هو الحال مع معظم تطبيقات الصفحة الواحدة الحديثة، يمكنك استضافة محرك بنفسك (على سبيل المثال، Node.js) ومعالجة أكبر قدر من المحتوى ممكن من خلاله.

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

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

سيو ماستر

سرعة الموقع أحد عوامل سيو الهامة للحصول على تصنيفات اعلى في صفحة نتائج محركات البحث، عليك الاهتمام بسرعة تحميل موقعك بشكل أكبر.

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

وعمومًا يمكنك التأكد من جودة اتصال شبكة الإنترنت في منزلك من خلال قياس سرعة الإنترنت لأن المشكلة يمكن أن تكون تقنية بسيطة وبعيدة تمامًا عن موقعك.

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

تحليل سرعة تحميل الموقع + طرق زيادة السرعة