كيف تصل إلى 100 في Google PageSpeed ​​Insights (على WordPress)

ألن يكون رائعًا إذا كانت هناك أداة لمساعدتك في جعل موقع الويب الخاص بك أسرع؟ حسنًا ، هناك! Google PageSpeed ​​Insights هو الاسم ، وهو خدمة مجانية متوفرة لحل مشاكل موقع الويب البطيء. في هذه المقالة سنلقي نظرة على ما هو عليه ، وكيف يعمل ، وكيف يمكنك الوصول إلى درجة 100/100 في WordPress المراوغة من Google PageSpeed ​​Insights.

ما هي Google PageSpeed ​​Insights؟

تُعد Google PageSpeed ​​Insights أداة عبر الإنترنت لقياس سرعة وتجربة المستخدم لموقعك على الويب. يقيس وقت تحميل الموقع على سطح المكتب والجوال ويعرض مقاييس مختلفة حول أداء الموقع. إذا تم الحكم على المقاييس على أنها دون المستوى الأمثل ، فإن الأداة تقدم اقتراحات حول كيفية تحسينها.

ما عليك سوى الانتقال إلى Google PageSpeed ​​Insights وإدخال عنوان URL والضغط على تحليل. يحكم Google على موقعك على كل من الأجهزة المحمولة وسطح المكتب. قد تجد أنك تحصل على نتيجة أفضل من الأخرى.

اعتادت Google على إعطاء درجة إجمالية من 100 لصفحة ويب ، لكنها لم تعد كذلك.

بدلاً من ذلك ، تقيس Google ثلاثة إحصائيات تسميها Core Web Vitals . هؤلاء هم:

• أكبر رسم محتوى (LCP) : مدى سرعة تحميل المحتوى الرئيسي للموقع. يجب أن يكون هذا 2.5 ثانية أو أقل لتجربة مستخدم جيدة.
• تأخير الإدخال الأول (FID) : مدى استجابة الموقع لإدخال المستخدم. يجب أن يكون FID 100 مللي ثانية أو أقل.
• التحول في التخطيط التراكمي (CLS) : يقيس الثبات المرئي لصفحة الويب. يفضل الحصول على درجة CLS من 0.1 أو أقل.

بالإضافة إلى ذلك ، يقيس Google ما يلي:

• First Contentful Paint (FCP) : الوقت الذي تستغرقه صفحة الويب لبدء العرض على الشاشة. درجة FCP الجيدة هي 1.8 ثانية أو أقل.
• التفاعل مع Next Paint (INP) : يقيس مدى استجابة الصفحة لتفاعلات المستخدم. يحتوي موقع الويب سريع الاستجابة حقًا على INP يبلغ 200 مللي ثانية أو أقل.
• الوقت إلى البايت الأول (TTFB) : الوقت المستغرق لإرسال البايت الأول من البيانات بعد طلب الخادم. يعتبر TTFB من 0.8 ثانية أو أقل مثاليًا.

أسفل ذلك ، في قسم تشخيص مشكلات الأداء ، تمنحك Google PageSpeed ​​Insights أربع درجات - الأداء وإمكانية الوصول وأفضل الممارسات وتحسين محركات البحث. 90 أو أكثر هي نتيجة جيدة ، و 50 إلى 89 تشير إلى أنه يمكن إجراء تحسين ، وأي شيء أقل من 50 يعتبر سيئًا.

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

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

لماذا سرعة الموقع مهمة؟

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

يبلغ متوسط ​​الوقت المستغرق لتحميل صفحة مقصودة للجوّال بالكامل 22 ثانية [1] .

يزيد احتمال الارتداد بنسبة 32٪ مع انتقال وقت تحميل الصفحة من ثانية واحدة إلى 3 ثوانٍ [2] .

يتم التخلي عن 53٪ من الزيارات إذا استغرق تحميل موقع ويب للجوّال أكثر من 3 ثوانٍ [3] .

من الواضح ، إذا كنت تدير موقعًا للتجارة الإلكترونية ، فإن الموقع البطيء يؤدي إلى انخفاض التحويلات ، وهذا شيء تريد معالجته. ينخفض ​​معدل التحويل مع الوقت الذي يستغرقه تحميل الموقع [4] :

• الصفحات التي تم تحميلها في 2.4 ثانية كان لديها معدل تحويل 1.9٪
• في 3.3 ثانية ، كان معدل التحويل 1.5٪
• في 4.2 ثانية ، كان معدل التحويل أقل من 1٪
• في 5.7+ ثانية ، كان معدل التحويل 0.6٪

نقاط PageSpeed ​​Insights عالية مقابل سرعة الصفحة الفعلية

تحسب Google نقاط PageSpeed ​​Insights من كل من البيانات المعملية (التي تم جمعها في ظل ظروف خاضعة للرقابة) والبيانات الميدانية (التي تم جمعها من مستخدمين حقيقيين في البرية).

لاختبار سرعة صفحتك الفعلية ، يمكنك استخدام أدوات عبر الإنترنت مثل GTmetrix أو اختبار سرعة Pingdom.

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

يمكنك أن ترى على GTmetrix أن وقت تحميل الصفحة لخادم الاختبار في سان أنطونيو ، تكساس هو 666 مللي ثانية - درجة جيدة جدًا.

في هونغ كونغ ، يكون وقت تحميل الصفحة أطول قليلاً - 1.4 ثانية.

يُظهر Pingdom أيضًا وقت تحميل سريع يبلغ 850 ملي ثانية للاختبار في واشنطن العاصمة ولكن وقت تحميل أبطأ يبلغ 1.06 ثانية في طوكيو باليابان.

تتيح لك أداة Uptrends الاختبار عبر الهاتف المحمول وسطح المكتب. إليكم نتيجة موقع WP Shout من باريس ، فرنسا على iPad Air - وقت تحميل يبلغ 1.9 ثانية:

لذلك يبدو أن هناك علاقة بين نتيجة Google PageSpeed ​​Insights وسرعة الصفحة الفعلية.

كيفية الحصول على درجة Google PageSpeed ​​Insights 100 المثالية على WordPress

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

طرق تحسين نقاط Google PageSpeed ​​Insights

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

يعد تحسين صورك للويب طريقة سهلة لتحسين نقاط الأداء الخاصة بك.

ستحتاج إلى مكون إضافي لضغط الصور مثل Optimole.

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

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

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

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

هناك طريقة أخرى لتقليل حجم ملف الصورة وهي استخدام صور SVG. ملفات SVG هي ملفات متجهة بحيث يمكن إعادة قياسها بسهولة دون التأثير على حجم ملفها. لا يتم دعمها أصلاً في WordPress ولكن يمكنك إضافتها إلى مكتبة الوسائط الخاصة بك باستخدام مكون إضافي مثل SVG Support أو Safe SVG.

2. تجنب زيادة حجم DOM

ما هو DOM؟ يرمز DOM إلى نموذج كائن المستند وهو هيكل يشبه الشجرة مع تضمين جميع عناصر HTML والسمات ونص الصفحة.

هناك طريقتان لتقليل حجم DOM وهما تقسيم صفحات الويب الطويلة إلى أقسام أصغر ، وتجنب إخفاء عُقد DOM بإعلان {display: none؛} في CSS.

أحد العوامل التي يمكن أن تزيد من حجم DOM هو استخدام أداة إنشاء الصفحات. يميل منشئو الصفحات إلى زيادة عدد عناصر <div> على الصفحة.

إذا كنت تستخدم Elementor ، فقد تمت إزالة بعض أغلفة HTML منذ الإصدار 3.0 ، مما أدى إلى تقليل حجم DOM.

أو يمكنك الانتقال إلى استخدام Gutenberg بدلاً من أداة إنشاء الصفحات ، كما فعل Chris Lema.

يمكنك العثور على مزيد من النصائح حول تجنب زيادة حجم DOM في هذا المنشور.

3. تحسين JavaScript و CSS

يمكن تصغير ملفات CSS و JS وضغطها لتحسين الأداء. يزيل التصغير جميع المسافات من ملف CSS أو JS ، بينما يزيل ضغط GZIP الأحرف المتكررة مثل {.

إضافات WordPress التي تسمح لك بتقليل CSS أو JS تشمل Autoptimize (مجاني) و WP Rocket (مدفوع).

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

يحتوي WP Rocket أيضًا على خيار دمج ملفات CSS و JS في ملف واحد ، مما يقلل الطلبات. لن ترغب في القيام بذلك إذا كان خادم الويب الخاص بك يستخدم HTTP / 2 ، مع ذلك. يمكنك اختبار ما إذا كان الخادم الخاص بك يقوم بتشغيل HTTP / 2 للتحقق أولاً.

يمكنك تنشيط ضغط GZIP مع معظم ملحقات التخزين المؤقت. إذا كان خادم الويب الخاص بك هو Apache أو LiteSpeed ​​، فيمكن للمكوِّن الإضافي الكتابة إلى ملف htaccess الخاص بك مباشرةً أو توفير أسطر لنسخها ولصقها فيه. إذا كنت تستخدم NGINX أو IIS ، فإن Hummingbird يوفر أيضًا التكوين لتمكين الضغط على هذه الخوادم.

إذا كان هناك أي CSS أو JS على موقعك لم يتم استخدامه ، فقد حان الوقت لإزالته. يمكنك استخدام Chrome DevTools للعثور على CSS و JS غير المستخدمة ، والتي تأتي على الأرجح من مكون إضافي.

يمكنك أيضًا استخدام برنامج Rapidload's CSS Saver لمعرفة CSS الذي يمكن أن تفقده من موقع الويب الخاص بك:

4. القضاء على موارد حظر العرض

CSS و JS لحظر العرض هي ملفات يتم وضع علامة عليها على أنها تحظر الرسم الأول لصفحة الويب الخاصة بك.

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

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

يعتمد وقت استجابة الخادم على عدة عوامل: السمة والمكونات الإضافية التي تستخدمها ونوع استضافة الويب لديك.

ضع في اعتبارك إزالة أي مكونات إضافية زائدة لا تستخدمها أو التبديل إلى سمة خفيفة الوزن ، مثل Astra.

للاستضافة ، نوصي باستضافة WordPress المُدارة عبر استضافة الويب المشتركة. يشمل مضيفو WordPress المُدارون تحسين الخادم كجزء من الخدمة.

6. تأكد من بقاء النص مرئيًا أثناء تحميل خط الويب. تأكد من بقاء النص مرئيًا أثناء تحميل خط الويب

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

تقترح التوصية إضافة عرض الخط: swap؛ إلى إعلان @ font-face في ورقة الأنماط الخاصة بك.

توضح لقطة الشاشة أدناه كيفية إضافة هذه الخاصية باستخدام المكون الإضافي Asset CleanUp.

7. حافظ على طلب التهم منخفض وتحويل أحجام صغيرة

تسجل Google PageSpeed ​​Insights عدد الملفات المطلوبة بواسطة خادم الويب وحجم هذه الملفات.

إذا كانت لديك أعداد كبيرة هنا ، فيمكنك تقليلها من خلال:

• تحسين الصور وملفات الوسائط الخاصة بك. يوصى باستخدام ملفات الفيديو بدلاً من صور GIF المتحركة.
• تحسين CSS و JS
• تحسين الخطوط الخاصة بك والبرامج النصية التابعة لجهات خارجية
• تصغير حجم ملف HTML

8. تجنب تسلسل الطلبات الحرجة

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

تعتبر السلاسل الطويلة والسلاسل التي تحتوي على تنزيلات كبيرة ضارة لسرعة موقع الويب الخاص بك. إنها تؤثر على أول رسم محتوى وأكبر رسم محتوى.

وفقًا لـ Google ، لتجنب تسلسل الطلبات الحرجة ، يجب عليك:

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

يمكنك القيام بذلك عن طريق:

• التحميل المسبق لطلبات المفاتيح والصور والخطوط باستخدام "link rel =" preload "في HTML الذي يشير إليها.
• تصغير CSS و JavaScript.
• تخلص من موارد حظر العرض.

يمكنك استخدام مكون إضافي مثل WP Rocket لأداء هذه المهام نيابة عنك.

9. تجنب مهام الخيط الرئيسي الطويلة وتقليل عمل الخيط الرئيسي

مهام السلسلة الرئيسية الطويلة هي مهام JavaScript (أكثر من 50 مللي ثانية) والتي تؤخر وقت التفاعل للمستخدم.

يعني تقليل عمل الخيط الرئيسي تقليل الوقت المستغرق في تحليل JS وتجميعه وتنفيذه.

يمكنك تقليل طول ووقت مهام JavaScript من خلال:

• التقليل من استخدام المكونات الإضافية المتضخمة
• استضافة الخطوط والنصوص التحليلية محليًا
• تصغير JS و CSS أو تأجيلهما
• تحميل صور الخلفية كسول

راجع المقالة التالية للحصول على مزيد من النصائح حول تقليل عمل الخيط الرئيسي في WordPress.

10. تجنب التحولات الكبيرة في التخطيط: تجنب التحولات الكبيرة في التخطيط

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

يمكنك علاج هذه المشكلة عن طريق:

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

لمزيد من المعلومات ، اقرأ هذا الدليل حول إصلاح تغيير التخطيط التراكمي في WordPress.

11. تقليل تأثير التعليمات البرمجية الخاصة بطرف ثالث

البرامج النصية للجهات الخارجية هي تلك المستضافة في مكان آخر ، مثل تتبع Google Analytics أو تضمين YouTube.

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

يمكنك استخدام المكون الإضافي Local Google Fonts لاستضافة خطوط Google على الخادم الخاص بك.

برنامج Google Analytics المحلي لـ WordPress - يقوم البرنامج المساعد للطلبات الخارجية بتخزين مؤقت يستضيف Google Analytics محليًا.

12. استخدم CDN

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

يمكن لـ CDN تحسين سرعة موقعك عن طريق تخزين الملفات الثابتة مؤقتًا (مثل HTML و CSS و JavaScript) وتقديمها من موقع قريب للمستخدم. يساعد هذا في تقليل أول لوحة Contentful Paint وأكبر درجات Contentful Paint.

نحن نستخدم Cloudflare CDN في WP Shout. يمكنك البدء في ذلك مجانًا.

تعرف على المزيد حول سبب استخدام CDN وأفضل الخيارات.

استنتاج حول كيفية الوصول إلى Google PageSpeed ​​Insights 100 درجة

لقد رأينا أن هناك عددًا غير قليل من العوامل التي تحدد سرعة الموقع. ستساعدك هذه النصائح على تحقيق درجة مثالية.

لا يجب أن تتوقف كثيرًا عند تسجيلك 100 ، على الرغم من أن النتيجة 90+ لا تزال جيدة جدًا. اقرأ منشور ديفيد حول تحسين أداء الموقع لمعرفة ما فعلناه لتحسين نتائجنا.