كيفية تحسين أكبر لوحة محتوى وترتيب أعلى في Google

كيفية قياس أكبر محتوى محتوى لموقعك على الويب

قم بإجراء اختبار سرعة موقع مجاني لمعرفة ذلك. سيتم عرض سرعة LCP الخاصة بك على الفور.

ستخبرك نتائج اختبار السرعة بما إذا:

• تم استيفاء عتبة LCP.
• أنت بحاجة إلى تحسين أي Core Web Vital آخر.

كيف يتم احتساب أكبر طلاء محتوى؟

تنظر Google في النسبة المئوية الخامسة والسبعين للتجارب - وهذا يعني أن 25٪ من زوار الموقع الحقيقيين يواجهون أوقات تحميل LCP تصل إلى 3.09 ثانية أو أعلى ، بينما بالنسبة لـ 75٪ من المستخدمين ، يكون LCP أقل من 3.09 ثانية.

في هذا المثال ، يظهر LCP للمستخدم الحقيقي في شكل 3.09 ثانية.

ما هي نتائج الاختبارات المعملية على بياناتي الأساسية على الويب؟

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

1. يتم تحديث المقاييس بمجرد تحسين موقع الويب الخاص بك ، بينما تستغرق بيانات Google في الوقت الفعلي 28 يومًا للتحديث الكامل.
2. تحصل على تقارير مفصلة بالإضافة إلى المقاييس التي يمكن أن تساعدك في تحسين موقع الويب الخاص بك.

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

كيف يمكنك العثور على أكبر عنصر طلاء ذي محتوى لديك؟

عند تشغيل اختبار سرعة الصفحة باستخدام DebugBear ، يتم تمييز عنصر LCP في نتيجة الاختبار.

في بعض الأحيان ، قد يكون عنصر LCP صورة كبيرة ، وفي أحيان أخرى ، قد يكون جزءًا كبيرًا من النص.

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

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

في المقابل ، LCP لهذه الصفحة عبارة عن فقرة من النص.

لتحسين أكبر محتوى (LCP) لموقع الويب الخاص بك ، تحتاج إلى التأكد من ظهور عنصر HTML المسؤول عن LCP بسرعة.

كيفية تحسين أكبر لوحة محتوى

لتحسين LCP ، تحتاج إلى:

1. تعرف على الموارد اللازمة لإظهار عنصر LCP.
2. انظر كيف يمكنك تحميل هذه الموارد بشكل أسرع (أو عدم تحميلها على الإطلاق).

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

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

الموارد المشتركة التي تؤثر على LCP هي:

• موارد منع العرض.
• الصور التي لم يتم تحسينها.
• تنسيقات صور قديمة.
• الخطوط التي لم يتم تحسينها.

كيفية تقليل موارد حظر العرض

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

لتقليل تأثير أداء موارد حظر العرض ، يمكنك:

1. تحديد الموارد التي تحظر العرض.
2. راجع ما إذا كان المورد ضروريًا.
3. راجع ما إذا كان المورد يحتاج إلى حظر العرض.
4. تحقق مما إذا كان يمكن تحميل المورد بسرعة أكبر ، على سبيل المثال باستخدام الضغط.

الطريقة السهلة: في عرض طلب DebugBear بدون انقطاع ، يتم تمييز طلبات موارد حظر العرض بعلامة "حظر".

كيفية تحديد الأولويات وتسريع طلبات صور LCP

بالنسبة لهذا القسم ، سنستفيد من سمة "fetchpriority" الجديدة على الصور لمساعدة متصفحات الزائر على تحديد الصورة التي يجب تحميلها أولاً بسرعة.

استخدم هذه السمة على عنصر LCP الخاص بك.

لماذا ا؟

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

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

ومع ذلك ، يمكن أن يعني ذلك أن المتصفح يبدأ فقط في تنزيل صورة LCP في وقت متأخر إلى حد ما.

يسمح معيار الويب الجديد لـ Priority Hints لمالكي مواقع الويب بتقديم مزيد من المعلومات لمساعدة المستعرضات في تحديد أولويات الصور والموارد الأخرى.

في المثال أدناه ، يمكننا أن نرى أن المتصفح يقضي وقتًا طويلاً في الانتظار ، كما يتضح من الشريط الرمادي.

سنختار صورة LCP هذه لإضافة سمة "fetchpriority" إليها.

كيفية إضافة سمة "FetchPriority" إلى الصور

ما عليك سوى إضافة السمة fetchpriority = "high" إلى علامة HTML img سيعطي المتصفح الأولوية لتنزيل تلك الصورة في أسرع وقت ممكن.

<img src="photo.jpg" fetchpriority="high" />

كيفية استخدام تنسيقات الصور الحديثة وحجم الصور بشكل مناسب

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

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

هناك طريقتان لتقليل أحجام الصور:

1. تأكد من أن دقة الصورة منخفضة قدر الإمكان. ضع في اعتبارك عرض الصور بدقة مختلفة اعتمادًا على حجم جهاز المستخدم.
2. استخدم تنسيق صورة حديثًا مثل WebP ، والذي يمكنه تخزين الصور بنفس الجودة بحجم ملف أقل.

كيفية تحسين أوقات تحميل الخط

إذا كان عنصر LCP هو عنوان أو فقرة HTML ، فمن المهم تحميل الخط لهذه القطعة النصية بسرعة.

تتمثل إحدى طرق تحقيق ذلك في استخدام علامات التحميل المسبق التي يمكنها إخبار المتصفح بتحميل الخطوط مبكرًا.

يمكن أن تضمن قاعدة عرض الخط: swap CSS أيضًا العرض السريع ، حيث سيعرض المتصفح النص على الفور بخط افتراضي قبل التبديل إلى خط الويب لاحقًا.

مراقبة موقع الويب الخاص بك للحفاظ على LCP سريع

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

يمكن لـ DebugBear مراقبة "أساسيات الويب الأساسية" ومقاييس سرعة الموقع الأخرى بمرور الوقت. بالإضافة إلى إجراء اختبارات معملية متعمقة ، يتتبع المنتج أيضًا مقاييس المستخدم الحقيقي من Google.

جرب DebugBear مع نسخة تجريبية مجانية مدتها 14 يومًا.