مؤشرات أداء الويب الأساسية هي ثلاثة أرقام تستخدمها Google لوصف ما تشعر به الصفحة للزائر الحقيقي: مدى سرعة ظهور المحتوى الرئيسي، ومدى سرعة تفاعل الصفحة مع النقر، ومدى انتقال التخطيط. إنها جزء من إشارات تجربة صفحة Google، والأهم من ذلك أنها تتبع اللحظات التي يستسلم فيها الزائرون. إليك ما يقيسه كل واحد على موقع WordPress وأين يجب أن تبحث أولاً عندما يكون لونه أحمر.
المقاييس الثلاثة وأهدافها
- LCP (أكبر طلاء محتوى): الوقت حتى يتم رسم أكبر صورة أو كتلة نصية في إطار العرض. جيد هو 2.5 ثانية أو أقل.
- INP (التفاعل مع الطلاء التالي): المدة التي تستغرقها الصفحة للاستجابة بشكل مرئي بعد النقر أو الضغط أو الضغط على مفتاح، طوال الزيارة بأكملها. الجيد هو 200 مللي ثانية أو أقل. استبدل INP تأخير الإدخال الأول باعتباره عنصرًا حيويًا للويب في مارس 2024.
- CLS (إزاحة التخطيط التراكمي): مقدار المحتوى المرئي الذي يتحرك بشكل غير متوقع. جيد هو 0.1 أو أقل.
يحكم Google على الصفحة بنسبة 75 بالمائة من الزيارات الحقيقية، مقسمة حسب الهاتف المحمول وسطح المكتب. لا يخبرك الكمبيوتر المحمول السريع المتصل بشبكة Wi-Fi في المكتب إلا بالقليل؛ الرقم الذي يتم احتسابه يأتي من الهواتف العادية على الاتصالات العادية. التعاريف والعتبات تأتي من نظرة عامة على مؤشرات أداء الويب الخاصة بـ web.dev.
قم بالقياس قبل تغيير أي شيء
تشغيل الصفحات الرئيسية الخاصة بك من خلال رؤى سرعة الصفحة. يعرض القسم العلوي البيانات الميدانية من مستخدمي Chrome إذا كان موقعك يحتوي على عدد كافٍ من الزيارات؛ قسم المختبر أدناه عبارة عن حمل محاكاة واحد. قم بإصلاح ما تظهره البيانات الميدانية، واستخدم تقرير المختبر للعثور على السبب. يقوم تقرير مؤشرات أداء الويب الأساسية في Search Console بتجميع عناوين URL المتشابهة، بحيث يمكن لإصلاح قالب واحد مسح مئات الصفحات.
تحسين LCP
في معظم مواقع WordPress، يكون عنصر LCP هو الصورة الرئيسية أو الصورة المميزة للمنشور. الأسباب المعتادة لبطء LCP هي استجابة الخادم البطيئة، والصورة الكبيرة، والصورة التي يكتشفها المتصفح متأخرًا.
- قم بعرض الصورة الرئيسية في WebP أو AVIF بالحجم الذي تظهره، وليس التحميل الأصلي.
- لا تقم أبدًا بتحميل الصورة في الجزء المرئي من الصفحة بشكل بطيء. يضيف ووردبريس
أولوية الجلب = "عالية"إلى الصورة الكبيرة الأولى؛ تأكد من أن المظهر أو المكون الإضافي الخاص بك لا يتراجع عنه. - استخدم التخزين المؤقت للصفحة حتى يصل HTML بسرعة. يجب أن تبدأ الصفحة المخزنة مؤقتًا على الاستضافة اللائقة في الوصول في أقل من ثانية.
- تحميل خطوط الويب مع
عرض الخط: مبادلةوقم بتحميل الملف أو الملفين اللذين تحتاجهما الشاشة الأولى مسبقًا فقط.
ال تحسين دليل LCP يقسم المقياس إلى أربعة أجزاء، وهو ما يساعد عندما لا يكون الإصلاح واضحًا.
تحسين INP
INP يدور حول JavaScript. عندما يكون الموضوع الرئيسي مشغولاً بتشغيل البرامج النصية، يجب الانتظار بنقرة واحدة. تعد أشرطة التمرير وأدوات الدردشة وعلامات التتبع وأدوات إنشاء الصفحات التي تشحن حزمًا كبيرة من الأسباب الشائعة.
- قم بإزالة المكونات الإضافية التي لم تعد تستخدمها، وتحقق مما يتم تحميله على الواجهة الأمامية.
- قم بتأخير البرامج النصية التابعة لجهات خارجية غير المطلوبة للتفاعل الأول، مثل أدوات الدردشة والخرائط الحرارية.
- اجعل معالجات الأحداث قصيرة. يجب تقسيم العمل الثقيل بعد النقرة أو نقله من الموضوع الرئيسي.
تحسين CLS
يحدث تغيير التخطيط عندما يظهر شيء ما ويدفع المحتوى إلى الأسفل. الصور بدون أبعاد، وخطوط التحميل المتأخر التي تغير حجم النص، ولافتات ملفات تعريف الارتباط المُدرجة فوق المحتوى والإعلانات بدون مساحة محجوزة هي السبب في معظمها.
- امنح كل صورة وفيديو عرضًا وارتفاعًا، أو
نسبة العرض إلى الارتفاعفي CSS. - اعرض اللافتات كتراكبات في الجزء السفلي من الشاشة بدلاً من دفع الصفحة لأسفل.
- تحريك مع
تحويلوالعتامة، والتي لا تحرك التخطيط.
السرعة هي أيضًا خدمة تحسين محركات البحث (SEO).
الصفحات السريعة لا تنقذ المحتوى الضعيف، والمحتوى الجيد على صفحة بطيئة يفقد الزوار قبل قراءته. تعامل مع مؤشرات أداء الويب الأساسية كجزء من نفس الروتين مثل العناوين وخرائط الموقع والروابط الداخلية. لدينا قائمة التحقق من تحسين محركات البحث الخاصة بـ WordPress يغطي بقية هذا الروتين.
حيث يساعد FluxWP
سرعة التدفق يعرض الطلبات البطيئة والاستعلامات الثقيلة من داخل المشرف، حتى تتمكن من معرفة أي مكون إضافي أو صفحة تكلف وقتًا. نظرًا لأن مكونات FluxWP الإضافية تشترك في مسؤول واحد ونظام تصميم واحد، فإن الموقع الذي يستخدم النماذج وصندوق البريد الوارد للفريق والتحليلات يقوم بتحميل مجموعة واحدة من الأصول بدلاً من ثلاثة. إذا كان عنق الزجاجة هو الخادم، لدينا خطط الاستضافة المُدارة تم إعدادها مع التخزين المؤقت وضبطها لـ WooCommerce.
