بعض مسؤولي مواقع WordPress مهووسون بمقاييس PageSpeed Insights أو GTmetrix. نصيحتي، ونصيحة العديد من الآخرين الذين يعرفون أكثر من ذلك بكثير، هي أنه لا ينبغي عليك إعطاء تلك المقاييس أهمية أكبر مما هي عليه.
إذا كانت سرعة التحميل المتصورة جيدة، فليس من الضروري وضع كل شيء "باللون الأخضر". في كثير من الحالات، قد يؤدي ذلك إلى نتائج عكسية لأنك قد تقع في الإفراط في التحسين، أو الأسوأ من ذلك، قد ينتهي بك الأمر إلى تدمير أشياء مختلفة في محاولة إصلاح شيء واحد.
ومع ذلك، سواءً كنت من هواة WPO، أو من عشاق التحسين أو ترغب فقط في محاولة تحسين استجابة موقعك، فإن هذه الأدوات تكاد تكون ضرورية. المشكلة أنها تقدم "صورًا ثابتة" مأخوذة من خوادم خارجية. ولكن ماذا يحدث عندما تتصفح موقعك كمسؤول، ماذا عن تلك الإعلانات التي يتم تحميلها متأخراً أو تلك القائمة التي تقفز عندما تكون على وشك النقر عليها؟
المنشأ
وُلد Speed Auditor كاستجابة لحاجة شخصية إلى امتلاك العديد من أدوات التشخيص المحلية البسيطة والفعالة في نفس الوقت. إنها ليست إضافة تحسين (فهي لا تغير أي شيء في شفرتك البرمجية)، بل هي إضافة للتدقيق في الوقت الحقيقي.
إذا كنت تبحث عن مكون إضافي جيد، وربما الأفضل، مدفوع الأجر لـ WPO، يمكنك من خلاله إجراء تغييرات وضبط دقيق، ألقِ نظرة على Perfmatters. من ناحية أخرى، إذا كنت تبحث عن شيء مجاني وبسيط، دون أن تشغل رأسك بالإعدادات والتعديلات، ولكن مع الكثير من الاحتمالات، يمكنك تجربة WPO Rocket Tweaks من قبل فرناندو تيلادو، المتاح في مستودع ووردبريس.
إذا كنت لا تعرف ما هي عقدة DOM أو مقياس زمن الوصول، فلا تقلق. تم تصميم مدقق السرعة لمساعدتك على فهم موقعك الإلكتروني في لمحة سريعة:
- المؤشر الذكي: ستظهر أيقونة متغيرة اللون في شريط المشرف الخاص بك. إذا كان أخضر، فهذا يعني أن الوقت الذي تستغرقه لرؤية الأشياء الأكثر أهمية هو الأمثل. إذا تحولت إلى اللون البرتقالي أو الأحمر، فهذا يعني أن هناك شيئًا ما يحتاج إلى انتباهك.
- التدقيق أثناء التصفح: ليس عليك تكوين أي شيء معقد. يمكنك تنشيط الإضافة وأثناء قيامك بالتدقيق في منشوراتك، تعمل الإضافة في الخلفية على تحليل ما إذا كانت صورك ثقيلة للغاية أو إذا كان الخادم الخاص بك يستجيب ببطء.
- المزيد من التقارير البشرية: بنقرة واحدة، يمكنك تنزيل ملف .txt يمكنك إرساله إلى المطور أو حفظه لمقارنة النتائج بعد تطبيق التغييرات.
تحت غطاء المحرك
يحاول الإصدار 1.1.8 توفير بعض العمق في التشخيص لتوفير وقت العبث في وحدة تحكم المتصفح.
- تحديد دقيق لـ LCP: يكتشف المكوّن الإضافي العنصر (صورة أو كتلة نصية) الذي أدى إلى تشغيل أكبر طلاء للمحتوى بالضبط.
- تحليل عمق DOM: حاسم لتجنب "حجم DOM المفرط". يقسم مدقق السرعة عدد العُقد حسب المناطق (الرأس، والمحتوى، والتذييل) ويحذرك إذا تجاوز التداخل 15-20 مستوى.
- مراقب زمن انتقال الوسائط: يقيس وقت النقل الفعلي (واجهة برمجة تطبيقات توقيت الموارد) للصور. إذا استغرق تنزيل صورة ما 500 مللي ثانية لتحميلها، فإن المكون الإضافي يصنفها على أنها حرجة.
- لا يوجد تأثير على الخادم: تحدث كل المعالجة على جانب العميل (المتصفح). لا توجد استعلامات قاعدة بيانات ثقيلة أو عمليات PHP تبطئ الموقع.
القفزة الكبيرة قريبًا مدقق السرعة 1.1.9 (مع "رادار CLS")
حتى الآن، كانت إزاحة التخطيط التراكمي (CLS) رقمًا مجردًا في التقرير. كنت تعرف أن شيئًا ما يتحرك، لكنك لم تكن تعرف دائمًا ما هو. قريبًا جدًا، في الإصدار 1.1.9، سيتغير هذا الأمر.
يتم تقديم زر "تمييز" الرادار أو زر "تمييز" نظام CLS المرئي أو الرادار.
تخيل تفعيل وضع "الرادار" الذي يرسم مربعات حمراء فوق أي عنصر يتحرك أثناء التمرير. هذا الأمر، الذي تقوم به بعض الإضافات بالفعل، بنجاح أكثر أو أقل، دائمًا ما يكون وسيلة مساعدة بصرية مفيدة جدًا لمحاولة التقاط تلك "التدفقات الزائدة" التي تفلت من العين أحيانًا.
- هل هو شعار AdSense يدفع المحتوى الخاص بك؟ ستراها بمربع أحمر. يمكنك التعمق في هذه المشكلة هنا.
- هل هي صورة بدون أبعاد محددة؟ سيلتقطها الرادار.
- المثابرة التامة: ستتمكن من تصفح موقع الويب الخاص بك بالكامل مع تشغيل الرادار، وستتذكر الإضافة أنك تريد الاستمرار في التدقيق البصري في كل زاوية.
سيتضمن هذا التحديث أيضًا مسردًا تقنيًا قصيرًا للمصطلحات التقنية، والذي سيتم توسيعه ليشمل نصائح ودروسًا تعليمية، والتي سيتم دمجها في لوحة تحكم WordPress الخاصة بك، بحيث لا تصبح مصطلحات مثل ins أو iframe أو figure لغزًا بعد الآن.
الفكرة هي تحسين كل من استجابة التحليل والتقارير التي تم إنشاؤها أثناء اختباره في سيناريوهات مختلفة وإذا تلقيت أي اقتراحات للتحسين أو تحذيرات من الأخطاء.
أصبح الإصدار 1.1.8 متاحًا الآن لترتيب مقاييسك، وقريبًا سيجعل الإصدار 1.1.9 من الإصدار 1.1.9 من الاستقرار البصري لـ WordPress أسهل. إذا قمت بتثبيته الآن، فسوف تتلقى التحديث قريباً.
كيف تعمل؟
يتبع الرمز هذه الخطوات الثلاث:
1. مراقب الأداء
يحتوي المتصفح (كروم، إيدج، أوبرا) على واجهة برمجة تطبيقات أصلية تسمى واجهة برمجة تطبيقات الأداء. تُسجِّل الإضافة "مراقبًا" يُدعى PerformanceObserver مهيأ خصيصًا لنوع إدخال تحول التخطيط.
في كل مرة يتحرك فيها شيء ما على الشاشة بعد رسمه في البداية، يُنشئ المتصفح حدثًا. يحبس المكون الإضافي هذا الحدث ويستخرج جزأين رئيسيين من البيانات:
- قيمة الإزاحة: (هذا الرقم 0.0145).
- العنصر الجاني: يقوم المتصفح بإخبار المكون الإضافي بعقدة HTML التي تم نقلها بالضبط.
2. مرشح "التفاعل الأخير"
هنا يحاول المكون الإضافي أن يكون ذكيًا. ليست كل الحركات "سيئة". إذا نقرت على قائمة منسدلة وتم تمرير المحتوى لأسفل، فهذه حركة متوقعة من المستخدم.
تتحقّق الإضافة من خاصية تُدعى hadRecentInput. إذا كنت قد لمست مفتاحًا أو نقرت على مفتاح في آخر 500 مللي ثانية، فإن المتصفح يصنف هذه الحركة على أنها "متوقعة" وتتجاهلها الإ ضافة لتجنب الإيجابيات الخاطئة. يكتشف فقط الحركات التي تحدث بشكل غير متوقع (مثل ظهور إعلان فجأة).
3. العرض المرئي (المربعات الحمراء)
بمجرد أن يحتوي المكون الإضافي على العنصر الذي تم نقله، يبدأ الجزء المرئي في العمل:
- حساب الإحداثيات: يستخدم دالة تُدعى getBoundingClientRientRect() لمعرفة مكان هذا العنصر على الشاشة في تلك اللحظة بالتحديد (بكسل لأعلى، بكسل لليسار).
- حقن الإطار: قم بإنشاء
قسمبموضع مطلق، وحدود حمراء 2 بكسلومؤشر zمرتفع جدًا للرسم فوق كل شيء. - التسمية: أضف مربعًا صغيرًا في أعلى يسار المربع الأحمر باسم التسمية (ins، img، div) وقيمة CLS المتراكمة.
لماذا هذا أفضل من التقرير الخارجي؟
تفشل أدوات مثل PageSpeed في بعض الأحيان في اكتشاف CLS لأنها لا تقوم بالتمرير إلى الأسفل أو لا تنتظر تحميل إعلانات معينة.
تقيس الإضافة باستخدام المثابرة CLS المتراكمة طوال جلسة التصفح الفعلية للمستخدم. إذا تحرّك عنصر ما قليلاً في البداية وقليلاً عند التمرير، تقوم الإضافة بجمعها وإبرازها، مما يمنحك الرقم الحقيقي التقريبي الذي ستراه جوجل في نهاية المطاف في تقرير"تجربة مستخدم كروم" (CrUX).
