الحصول على تقييم PageSpeed ​​Insights من Google

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

تم الاستشهاد بسرعة الصفحة رسميًا على أنها سمة تصنيف مهمة في منتصف عام 2018. في هذه المقالة ، سنشرح نتائج الأداء التي يجب على أصحاب الأعمال الانتباه إليها: PageSpeed ​​Insights. سوف نتعمق في بعض التفاصيل الفنية التي ستساعد مطوري البرامج على إجراء تحسينات في الحالات المعقدة ، مثل تلك المتعلقة بتطبيقات الصفحة الواحدة.

لماذا يعتبر اختبار PageSpeed ​​Insights من Google أمرًا مهمًا

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

توفر الخدمة تفاصيل حول كيفية أداء موقع الويب على كل من متصفحات سطح المكتب والجوال. من السهل أن تفوت حقيقة أنه يمكنك التبديل بينهما باستخدام علامتي التبويب Mobile و Desktop في الجزء العلوي من التحليل:

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

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

ما هي الدرجة الكافية لاجتياز تقييم PageSpeed؟

يستخدم PageSpeed ​​مقاييس من Core Web Vitals لتقديم تقييم النجاح / الفشل.

تحتوي هذه الأداة على ثلاث درجات:

1. يعرض PageSpeed ​​نقاط الأداء بشكل بارز في دائرة ملونة في قسم تشخيص مشاكل الأداء. يتم حسابها باستخدام أجهزة افتراضية مدمجة في PageSpeed ​​ذات خصائص تطابق متوسط ​​جهاز الجوّال أو جهاز سطح المكتب. يُرجى الانتباه إلى أن هذه القيمة مخصصة لتحميل الصفحة وللجهاز الظاهري لـ PageSpeed ​​، ولا يعتبرها محرك بحث Google.

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

2. يتم حساب النتائج التفصيلية لصفحة معينة - وتلك التي تعتبرها PageSpeed ​​مشابهة للصفحة التي تم تحليلها - من الإحصائيات التي تجمعها متصفحات Chrome على أجهزة كمبيوتر حقيقية وترسلها إلى Google. هذا يعني أن الأداء على Firefox و Safari والمتصفحات الأخرى بخلاف Chromium لم يؤخذ في الاعتبار.

3. يتم الحصول على ملخص لجميع صفحات الموقع بنفس طريقة الحصول على درجة الصفحة الواحدة. للوصول إليه ، حدد علامة التبويب الأصل بدلاً من علامة التبويب عنوان URL هذا. سيكون عنوان URL المدرج أسفل شريط علامات التبويب مختلفًا ، حيث سيعرض Origin الصفحة الرئيسية للموقع (المجال فقط).

تقوم Google باستمرار بتحديث قائمة المقاييس التي تراها PageSpeed ​​، لذا فإن أفضل مصدر لما هو مهم هو قسم الخبرة / أساسيات الويب الأساسية في Google Search Console ، بافتراض أنك أضفت موقعك الإلكتروني هناك بالفعل.

لاجتياز تقييم أساسيات الويب الأساسية ، يجب أن تكون جميع الدرجات خضراء:

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

لفهم القيم بشكل أفضل ، انقر فوق عنوان الدرجة:

هذا رابط إلى منشور مدونة يشرح بمزيد من التفصيل حدود الفئة المحددة.

يتم تجميع البيانات لمدة 28 يومًا ، وهناك اختلافان رئيسيان آخران عما قد يواجهه المستخدمون الحقيقيون:

1. يختلف أداء الأجهزة الحقيقية وسرعات الإنترنت ، لذلك ينتج عن هذا الاختبار نتائج مختلفة من نتائج الجهاز الظاهري لـ PageSpeed.
2. يتم حساب التصنيفات التفصيلية خلال عمر الصفحة بالكامل ، مع أخذ أسوأ القيم من كل فاصل زمني مدته خمس ثوانٍ تفتح الصفحة.

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

تحسين النتائج باستخدام توصيات PageSpeed ​​Insights

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

يمكننا العثور على توصيات في قسم الفرص أسفل نتائج التقييم.

يمكننا توسيع كل عنصر والحصول على توصيات مفصلة للتحسينات. هناك الكثير من المعلومات ، ولكن فيما يلي أهم النصائح الأساسية:

• تحسين سرعة استجابة الخادم. على سبيل المثال ، إذا كنت تستخدم الاستضافة المشتركة ، فقم بترقية خطتك أو الانتقال إلى خادم افتراضي خاص (VPS) أو حتى خادم مخصص. أيضًا ، ليس كل المضيفين متساوين. حاول اختيار استضافة موثوقة مع أجهزة جيدة وضمانات وقت التشغيل.
• قلل حجم حركة المرور المطلوبة لفتح موقعك. لتحقيق ذلك ، يمكنك استبدال الصور بالصور المحسّنة: تغيير تنسيقها ، وضبط الدقة والضغط ، واستبدال الصور المتحركة بأخرى ثابتة إذا لزم الأمر ، وما إلى ذلك. تشتمل أنظمة إدارة المحتوى الشائعة على مكونات إضافية تجعل هذه العملية مباشرة.
• تخزين المزيد من البيانات مؤقتًا. إن أبسط طريقة للقيام بذلك هي استخدام شبكة توصيل المحتوى (CDN) مثل Cloudflare للمحتوى الثابت (الصور والأنماط والبرامج النصية والصفحات التي لا تتغير). يمكنك تكوين قواعد التخزين المؤقت لتحسين الأداء.

الآن دعونا نلقي نظرة على العوامل الأكثر تعقيدًا ، حيث يمكن للمبرمج المتمرس المساعدة.

كيفية تصحيح الأخطاء أثناء عمر الصفحة

كما ذكرنا سابقًا ، تأخذ Google Search Console في الاعتبار متوسط ​​الدرجات التي تم الحصول عليها من المتصفحات المستندة إلى Chromium خلال آخر 28 يومًا وتتضمن أيضًا قيمًا طوال عمر الصفحة.

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

الحل هو تضمين مكتبة Google Chrome Web Vitals في إصدار المطور لمشروع الموقع لمعرفة ما يحدث أثناء تفاعل المستخدم مع الصفحة.

توجد خيارات مختلفة حول كيفية تضمين هذه المكتبة في ملف README.md الخاص بها على GitHub. إن أبسط طريقة هي إضافة البرنامج النصي التالي. يتم تعديله لعرض القيم على مدى عمر الصفحة في <head> للقالب الرئيسي:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

لاحظ أن عملية الحساب التراكمي Layout Shift (CLS) وحساب Largest Contentful Paint (LCP) متاحان فقط للمتصفحات القائمة على Chromium ، بما في ذلك Chrome و Opera و Brave (قم بتعطيل Brave Shields لجعل المكتبة تعمل) ومعظم المتصفحات الحديثة الأخرى ، باستثناء Firefox ، والذي يعتمد على محرك Mozilla ومتصفح Safari من Apple.

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

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

هذا سوف يساعد في تحديد المشاكل. سيؤدي توسيع الصف في وحدة التحكم إلى إظهار تفاصيل حول سبب تغيير النتيجة.

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

بالنسبة لأولئك منا الذين يعانون من CLS ، سيكون هذا مفيدًا. قم بتوسيع سجل السجل ، ثم الإدخالات ، والإدخال المحدد ، والمصادر ، والمصدر المحدد ، وقارن currentRect مع previousRect تصحيح:

الآن بعد أن أصبح بإمكاننا رؤية ما تغير ، يمكننا تحديد بعض الطرق لإصلاحه.

تقليل التحول في التخطيط التراكمي

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

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

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

1. قم بتعيين الصفحة لإظهار المحتوى 500 مللي ثانية بعد أن ينقر المستخدم على زر أو رابط دون التسبب في تشغيل CLS.
2. غيّر المعلمات التي لا تتسبب في تغيير عناصر DOM الأخرى: الخلفية واللون وما إلى ذلك.
3. تأكد من أن العناصر الأخرى لن تتغير عند تغيير حجم العنصر أو موضعه.

تتوفر توصيات أكثر تفصيلاً على صفحة Google Developers Optimize CLS.

كيف يمكن لـ 500 ميلي ثانية تقليل CLS

لتوضيح كيفية استخدام الحد الأدنى البالغ 500 مللي ثانية ، سنستخدم مثالاً يتضمن تحميل صورة.

عادةً عندما يقوم المستخدم بتحميل ملف ، يضيف البرنامج النصي عنصر <img> إلى DOM ، ثم يقوم مستعرض العميل بتنزيل الصورة من الخادم. يمكن أن يستغرق جلب صورة من الخادم أكثر من 500 مللي ثانية وقد يتسبب في تغيير التخطيط.

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

فيما يلي مثال عالمي على ECMAScript خالص بدون مكتبات سيعمل على معظم المتصفحات الحديثة:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

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

قم بتحديث Google Search Console

بعد العثور على المشكلات وإزالتها ، قد يستغرق محرك بحث Google بعض الوقت لتسجيل التغييرات. لتحديث النتائج بشكل أسرع قليلاً ، اسمح لـ Google Search Console بمعرفة أنك قمت بإصلاح المشكلات.

حدد الصفحة التي تعمل عليها باستخدام مربع خاصية البحث في الزاوية اليسرى العلوية. ثم انتقل إلى Core Web Vitals في قائمة الهامبرغر اليسرى:

انقر فوق الزر "فتح تقرير" في الجزء العلوي الأيمن من تقرير الهاتف أو سطح المكتب. (إذا واجهت مشاكل مع كليهما ، فتذكر تكرار نفس الإجراءات للتقرير الثاني لاحقًا.)

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

ثم انقر فوق الزر "مشاهدة التفاصيل" لهذه المشكلة.

وأخيرًا ، انقر فوق Start New Validation.

لا تتوقع نتائج فورية. قد يستغرق التحقق ما يصل إلى 28 يومًا.

التحسين هو كفاح مستمر

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

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

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