كيفية استخدام GTmetrix لتحسين سرعة موقع ووردبريس: الدليل المفصل

صورة الكاتب

بقلم: نيل روتش تم التحديث في: 20 أكتوبر 2023

ما هو GTmetrix؟

GTmetrix هي أداة مجانية وشائعة للغاية لتحليل سرعة الصفحة والأداء تم تطويرها بواسطة GT.net ، وهي شركة استضافة ويب مقرها في فانكوفر. وهي تجمع ما بين أفضل ما في اختبارات سرعة صفحات جوجل Google’s PageSpeed مع مصفوفة تسجيل YSlow من ياهو.

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

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

البيانات المصنفة	ما تعنيه
PageSpeed score:	درجة صفحتك بناءً على مقاييس جوجل.
YSlow score:	درجة صفحتك بناءً على كيفية تقييم ياهو لها.
Fully Loaded Time	طول الوقت المطلوب لكي تصبح صفحتك تفاعلية في متصفح الاختبار.
Total Page Size	إجمالي كمية البيانات التي تم تنزيلها إلى خادم الاختبار ، بما في ذلك جميع صور الوسائط.
Requests	هذا هو عدد طلبات HTTP الفردية التي يولدها موقعك عبر البرمجيات النصية (scripts) ، و CSS ، وما إلى ذلك.

كما توفر الأداة بيانات أكثر تفصيلاً عن سرعة صفحات جوجل (Google PageSpeed) في شكل جدول.

يدمج GTmetrix بشكل كامل مع ووردبريس عبر المكون الإضافي الخاص الذي يتوفر في مستودع WP. لذلك يمكنك إجراء اختبارات السرعة دون الحاجة إلى مغادرة لوحة تحكم WordPress:

ملحوظة: ستحتاج إلى التسجيل للحصول على حساب GTmetrix مجاني لإنشاء مفتاح واجهة برمجة التطبيقات (API) المطلوب لتشغيل هذا المكون الإضافي.

إعداد الاختبار المثالي

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

من المهم أيضاً ضبط معايير اختبارك بشكل صحيح.

موقع خادم الاختبار

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

نوع المتصفح

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

سرعة الاتصال

يمكنك أيضًا اختيار سرعة الاتصال التي يجب إجراء الاختبار عليها ، مثلًا: 3G مقابل النطاق العريض السريع (Fast Broadband). يعد هذا إعدادًا بالغ ا

هناك أيضًا بعض خيارات الاختبار الإضافية التي يمكنك تشغيلها أو إيقاف تشغيلها:

1. إنشاء فيديو – ينشئ هذا مقطع فيديو قصيرًا يوضح بالضبط كيفية تحميل صفحتك ، مما يسمح لك بتحديد المكونات التي قد تحظر التحميل أو تبطئه.
2. Adblock Plus – يمكنك استخدام هذا الإعداد لتعطيل الإعلانات لتقييم تأثيرها على سرعة موقعك بشكل عام.
3. إيقاف الاختبار عند التحميل (Stop test Onload) – تنتظر اختبارات GTmetrix افتراضيًا لمدة ثانيتين من عدم نشاط الشبكة قبل تقييم موقعك ، مما قد يؤدي أحيانًا إلى تشويه بيانات النتائج. يمكنك ترك هذا معطلاً في معظم الحالات.

كيفية قراءة تقرير أداء GTmetrix

لنبدأ من الأعلى بلوحة معلومات التقرير – هذه نظرة عامة سريعة على أداء عنوان URL:

1. في المثال أعلاه ، تبلغ درجة PageSpeed الخاصة بنا 72٪ (الدرجة C) لذلك لدينا بعض العمل الذي يتعين علينا القيام به.
2. تبلغ درجة YSlow الخاصة بنا 81٪ (الدرجة B) وهي ليست مثالية ولكننا لن نحتاج على الأرجح إلا إلى تعديل الأشياء قليلاً لنقترب من الحصول على تصنيف 90٪ (الدرجة A).

في المثال أعلاه ، تبلغ درجة PageSpeed الخاصة بنا 72٪ (الدرجة C) ، لذا لدينا بعض العمل الذي يجب علينا القيام به. أما درجة YSlow الخاصة بنا فهي 81٪ (الدرجة B) وهي ليست مثالية ، ولكن من المحتمل أننا سنحتاج فقط إلى تعديل بعض الأشياء الصغيرة للحصول على تصنيف أقرب إلى 90٪ (الدرجة A).

مجموعة النتائج التالية التي نحتاج للنظر فيها هي “تفاصيل الصفحة”:

1. وقت التحميل الكامل (Fully Loaded Time): المدة الزمنية التي تتطلبها صفحتك كي تصبح تفاعليةً في متصفح الاختبار.
2. الحجم الكلي للصفحة (Total Page Size): إجمالي كمية البيانات التي تم تحميلها على خادم الاختبار، متضمنةً جميع الوسائط مثل الصور.
3. الطلبات (Requests): عدد طلبات HTTP الفردية التي يُنشئها موقعك من خلال النصوص البرمجية (scripts)، وCSS، وما شابه.

توصيات PageSpeed

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

تحسين الصور (Optimize Images)

تشكل الصور 60٪ على الأقل من الوزن الإجمالي للصفحة ، لذا فإن الصور غير المُحسَّنة هي السبب الرئيسي لبطء تحميل الصفحات.

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

تقديم صور متدرجة الحجم (Serve Scaled Images)

إذا قمت بتحميل صور كبيرة جدًا أو صغيرة جدًا ، فسيحاول سمة موقعك (theme) و/ أو المتصفح تغيير حجمها. يؤدي القيام بذلك بطبيعة الحال إلى إبطاء تحميل تلك الصفحة المعينة.

لذا فإن الحيلة هي تقديم صور ذات مقاسات تناسب متطلبات الصفحة.

تقليل عمليات إعادة التوجيه (Minimize Redirects)

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

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

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

هذا مهم وسيحسن جودة بنية الارتباط الداخلي لموقعك ، حيث قد يتم فقدان عصارة الربط “link juice” في عمليات إعادة التوجيه المتسلسلة الطويلة.

تصغير CSS و JS (Minify CSS And JS)

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

تقدم معظم المكونات الإضافية المجانية للتخزين المؤقت بعض وظائف التصغير على الأقل ، ولكن يعتبر WP Rocket ( مراجعة ) هو الأفضل بين الخيارات المدفوعة.

ملاحظة: إذا كنت لا تريد أو لا تستطيع استخدام مكون إضافي للتخزين المؤقت (caching) ، فإن Cloudflare يقوم أيضًا بتصغير CSS و JavaScript على مستوى الشبكة.

دمج CSS و JS (Inline CSS And JS)

تتمثل أفضل الممارسات في تحسين سرعة الموقع عادةً في دمج النصوص البرمجية من صفحات متعددة في نص برمجي واحد يمكن تحميله بشكل غير متزامن.

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

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

تأجيل تحليل جافا سكريبت (Defer Parsing Of JavaScript)

تعتبر طلبات JavaScript أحد الأسباب الرئيسية لبطء أوقات تحميل الصفحة. وذلك لأنه يجب تحميل جميع عناصر <script> قبل عناصر الصفحة الأخرى ، حتى لو كانت مجرد شيفرة Google Analytics الخاصة بك.

يُعرف هذا باسم “حظر التجسيد (render blocking)”. وغالبًا ما يكون سببه مكونات ووردبريس الإضافية سيئة التكويد.

يمكنك إصلاح هذه المشكلة باستخدام ميزة “تجميع ملفات JS” في المكون الإضافي (Autoptimize) الممتاز والمجاني.

الاستفادة من التخزين المؤقت في المتصفح

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

يمكنك تنفيذ التخزين المؤقت للمتصفح باستخدام مكون إضافي مجاني للتخزين المؤقت مثل W3 Total Cache. يوفر بعض المضيفين مثل Siteground أو Kinsta حل التخزين المؤقت الخاص بهم ، لذا تحقق أولاً مع مزود الخدمة لأن حلولهم غالبًا ما تكون مصممة خصيصًا لإعداد الخادم الخاص بهم.

تمكين ضغط Gzip

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

يمكنك إعداد ضغط gzip بنفسك ، أو اطلب من مضيف الويب الخاص بك القيام بذلك ، أو استخدام شيء مثل Cloudflare CDN بدلاً من ذلك.

توصيات YSlow

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

استخدم شبكة توصيل المحتوى (CDN)

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

هناك العديد من شبكات CDN المتاحة، لكن Cloudflare هو المفضل لدينا.

إضافة رؤوس انتهاء الصلاحية (Add Expires Headers)

رأس انتهاء الصلاحية (‘Expire Header’) عبارة عن جزء صغير من الشيفرة المصدرية على موقعك والتي تخبر الخادم متى يجب التوقف عن استخدام نسخة مخبأة من الصفحة وتحميل نسخة جديدة بدلاً من ذلك.

يمكن أن يكون هذا منطقيًا للغاية إذا كان لديك محتوى لا يتغير بشكل كبير أو في كثير من الأحيان.

يمكنك معرفة كيفية تنفيذ رؤوس انتهاء الصلاحية (‘Expires Headers’) هنا.

ملاحظة: يمكن أن يؤدي القيام بذلك بشكل غير صحيح إلى كسر سمة موقعك، لذا كن حذرًا.

استخدم نطاقات خالية من ملفات تعريف الارتباط (Use Cookie-Free Domains)

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

كلما زاد عدد ملفات تعريف الارتباط التي يتم تسليمها من صفحتك ، كلما أصبحت أبطأ ، وهو ما ينعكس في هذا الجزء من درجة YSlow .

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

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

تجنب خطأ HTTP 404 (لم يتم العثور عليه)

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

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

يمكنك استخدام مكون إضافي لمدقق الروابط المعطلة (ليس مثاليًا) ، أو الإصدار المجاني من برنامج الزحف Screaming Frog لتتبع 404 على موقعك.

تقليل عمليات بحث DNS (Reduce DNS Lookups)

(H3) عمليات بحث DNS هي عندما يتعين على موقعك الاستعلام عن خادم DNS للعثور على عنوان IP الحالي لموقع ويب.

لا تعد عمليات بحث DNS القليلة مشكلة ، ولكن إذا كان موقعك يولد العشرات منها، فقد يتسبب ذلك في مشاكل تتعلق بسرعة الصفحة.

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

الشلال (Waterfall)

هذا مخطط لكل طلب منفرد يتم إجراؤه على موقعك ، بما في ذلك ملفات الوسائط و JavaScript و CSS وما إلى ذلك.

ما هو رائع في ميزة “الشلال” هو أنها تلغي التخمين لما قد يؤدي إلى إبطاء موقعك، حيث يمكنك بدلاً من ذلك رؤية تمثيل مرئي للترتيب الذي تم به تنفيذ كل طلب.

للأشرطة الملونة المعنى التالي:

• أزرق مخضر (Teal) – بحث DNS
• بني – الحجب (Blocking)
• أخضر – الاتصال
• أحمر – الإرسال
• بنفسجي – الانتظار
• رمادي – الاستقبال

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

ثم إذا قمنا بالتمرير لأسفل قليلاً ، يمكننا رؤية أجزاء كبيرة من اللون البني:

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

إذن ، الحل السهل لهذه المشكلة المحددة هو تأجيل تحليل كلا النوعين من الملفات باستخدام المكون الإضافي Autoptimize ، وتصغيرهما باستخدام مكون إضافي للتخزين المؤقت مثل WP Rocket. ([راجع مقال المقارنة بين Autoptimize و WP Rocket])

التوقيتات (Timings)

هذا مشابه جدًا لما ستجده في نتيجة Google PageSpeed điển hình بسبب المصطلحات التي يستخدمها ، مثل “Contentful Paint”.

• لذلك ، كما ترى ، يقوم الخادم بتسليم البايت الأول من البيانات (Time To First Byte) إلى المتصفح بعد 119 مللي ثانية.
• ثم تحدث “First Paint” بعد 366 مللي ثانية – هذا هو الوقت المستغرق لعرض أي صفحة من الصفحة في المتصفح.
• يحدث “الظهور الأول ذي المغزى” في نفس الوقت، حتى يبدأ المستخدم بالفعل في رؤية بعض محتوى الموقع.
• بعد 1.4 ثانية ، يتم تحميل DOM (نموذج كائن المستند) ، لذلك ستبدأ جميع البرامج النصية في التحميل.
• يجب الآن تحميل الموقع بالكامل (Onload) بعد 9.0 ثانية.

الدرجة المهمة التي يجب الانتباه إليها هنا هي وقت “Onload” لأنها تشير إلى أن تصميم الموقع مفرط في التعقيد و/أو هناك العشرات من طلبات HTTP التي يتم إنشاؤها بواسطة ملفات JavaScript متعددة.

..… 418 منها ، على وجه الدقة.

يوجد فرق مدته 4 ثوانٍ تقريبًا بين وقت “التحميل (onload)” و “وقت التحميل الكامل (Fully Loaded)” لأن GTmetrix ينتظر الآن لمدة ثانيتين من عدم نشاط الشبكة قبل حساب درجة “التحميل الكامل”.

وعليك أيضًا أن تأخذ في الاعتبار أن مشغل “التحميل” يفتقد أحيانًا بعض الأحداث ، وهو ما يفسر الثواني الـ 1.8 الأخرى.

بدائل GTmetrix

إذن ، هل تبحث عن شيء مختلف قليلاً عن GTmetrix؟

هنا خيارات قليلة للتحقق منها.

Pingdom

Pingdom مثالي إذا كنت لا ترغب فقط في إجراء اختبارات متعمقة للسرعة ، ولكنك تحتاج أيضًا إلى مراقبة نشطة لموقعك (مواقعك).

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

Google PageSpeed Insights

هذه أداة مجانية ممتازة من Google لإجراء اختبارات سرعة الموقع – يجدر التحقق من اختبار سرعة الأجهزة المحمولة وحدها.

لقد قطعت هذه الأداة شوطًا طويلاً من الناحية البصرية في الأشهر الـ 12 الماضية.

Web Page Test

Web Page Test أداة قديمة ولكنها جيدة ، ولا تزال تحظى بشعبية كبيرة بين مطوري تحسين محركات البحث (SEOs) ومصممي المواقع. تتضمن ميزة الشلال (waterfall) مشابهة لتلك الموجودة في GTmetrix كما أن وظيفة TraceRT رائعة جدًا أيضًا.

وأخيرًا ، يمكنك أيضًا استخدام وظائف اختبار السرعة الأساسية الموجودة في Google Analytics:

سرعة موقع Google Analytics

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

خاتمة (Conclusion)

نأمل حقًا أن تكون قد استمتعت بجولتنا في GTmetrix ، وأن يكون لديك تقدير أفضل لمقدار البيانات التي تمنحك هذه الأداة بالفعل ، مجانًا لتعزيز أداء موقعك.

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

Niall Roche مرحبًا ، أنا نيل ، عضو في فريق كتابة Authority Hacker. سابقًا كنت معجبًا بدوام كامل بسلسلة Game of Thrones ، ولكن أيضًا كاتب مستقل طموح ومسوق أفيلييت (Affiliate marketer) من المدرسة القديمة. لقد كنت في اللعبة لفترة طويلة لدرجة أنني أتذكر عندما كانت Google هي المبتدئ الجديد. نعم ، أنا مزيج من هذه الأمور ، لكن كل شيء يسير كما يجب… بطريقة ما.

الكلمات المفتاحية عالية الأداء

• تحسين محرك البحث (SEO)
• سرعة الموقع (Site Speed)
• سرعة ووردبريس (WordPress Speed)
• GTmetrix
• تحسين الموقع (Website Optimization)
• PageSpeed
• YSlow
• صفحات جوجل للسرعة (Google PageSpeed)
• شبكة توصيل المحتوى (CDN)

ملخص النقاط الرئيسية

• تُحمل الصور غير المحسّنة بشكل صحيح وتتأخر في تحميل الصفحات وتضر بأداء الموقع.
• يمكن أن تؤدي عمليات إعادة التوجيه المتعددة إلى إبطاء موقعك بشكل ملحوظ.
• يؤدي تصغير ملفات CSS و JS في تحسين سرعة الموقع.
• تأجيل تحليل JavaScript يحسن أوقات تحميل الصفحة.
• يوفر التخزين المؤقت في المتصفح أوقات تحميل أسرع للمستخدمين العائدين.
• يؤدي تنفيذ ضغط Gzip إلى تقليل حجم الملف بشكل كبير.
• تحسن شبكة توصيل المحتوى (CDN) أوقات التحميل للمستخدمين ذوي المواقع الجغرافية المختلفة.
• يمكن لإضافة رؤوس انتهاء الصلاحية منع المتصفحات من تحميل الموارد القديمة.
• تجنب استخدام الكثير من ملفات تعريف الارتباط لأنها تزيد وقت التحميل.
• تقليل عمليات بحث DNS يحسن بشكل كبير سرعة تحميل الصفحة.

أهم الوجبات الجاهزة والملاحظات القابلة للتنفيذ

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