أوضح أكبر رسم مضمون: كيفية تحسين وقتك

تكافح من أجل تحسين Largest Contentful Paint على موقع الويب الخاص بك؟ أو لست متأكدًا مما تعنيه Largest Contentful Paint ولماذا تحتاج إلى الاهتمام به في المقام الأول؟

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

يتضمن ذلك ما تعنيه Largest Contentful Paint ، ولماذا يهم ، وكيفية قياسها ، وكيفية تحسينها.

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

ما هو أكبر طلاء محتوى (LCP)؟ شرح أكبر معنى مضمون للطلاء

Largest Contentful Paint هو مقياس أداء يقيس المدة التي يستغرقها تحميل المحتوى الرئيسي لصفحة الويب.

يعد Largest Contentful Paint جزءًا من مقاييس Core Web Vitals من Google ، جنبًا إلى جنب مع تغيير التخطيط التراكمي (CLS) وتأخير الإدخال الأول (FID).

على مستوى أكثر تقنية ، يقيس Largest Contentful Paint المدة التي يستغرقها المستخدم من بدء تحميل الصفحة حتى يتم عرض أكبر كتلة نصية أو صورة أو مقطع فيديو داخل إطار العرض.

ماذا يعني "المحتوى الرئيسي" من حيث LCP؟

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

• النص - بشكل أكثر تحديدًا ، أي عناصر على مستوى الكتلة تحتوي على عقد نصية أو عناصر نصية أخرى على مستوى السطر.
• صورة - عناصر داخل عنصر <img> أو عناصر <image> داخل عنصر <svg>.
• الفيديو - أي عناصر <video> (تستخدم صورة الملصق).
• عنصر به صورة خلفية - فقط عند تحميله عبر وظيفة CSS url () (لا ينطبق على تدرجات CSS).

في وقت لاحق من هذا المنشور ، ستتعرف على كيفية العثور على عنصر Largest Contentful Paint الدقيق لأي صفحة على موقعك.

أكبر رسم محتوى مقابل أول رسم مضمون

أحد الأسئلة الشائعة التي قد تكون لديك هو ما هو الفرق بين Largest Contentful Paint و First Contentful Paint ، وهو مقياس أداء مشترك آخر.

في حين أن المصطلحين متشابهان ، فإن الاختلاف الرئيسي هو أن Largest Contentful Paint يقيس المدة التي يستغرقها تحميل "المحتوى الرئيسي" للصفحة ، بينما يقيس First Contentful Paint الوقت الذي يستغرقه تحميل "الكائن الأول" ( سواء كان ذلك أم لا إنه المحتوى الرئيسي ).

أساسًا:

• LCP = المحتوى الرئيسي فقط
• FCP = الجزء الأول من المحتوى ، بغض النظر عن ماهية هذا المحتوى

على هذا النحو ، سيكون وقت LCP دائمًا أعلى قليلاً من وقت FCP لأن عنصر "المحتوى الرئيسي" ليس عادةً أول عنصر يتم تحميله.

لماذا يعتبر أكبر وقت لطلاء المحتوى في موقعك مهمًا؟

هناك سببان رئيسيان لأهمية أكبر وقت لطلاء المحتوى في موقعك:

1. تجربة المستخدم
2. تحسين محرك البحث

تجربة المستخدم

السبب الأكبر الذي يجعلك تهتم بأكبر وقت لطلاء المحتوى في موقعك هو أن هذا المقياس هو وكيل جيد لفهم تجارب المستخدمين عندما يتعلق الأمر بأداء موقعك.

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

يقوم Largest Contentful Paint بعمل جيد في محاولة قياس لحظة "القيمة" من خلال معرفة الوقت الذي يستغرقه تحميل المحتوى الرئيسي.

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

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

تحسين محركات البحث (SEO)

على جبهة تحسين محرك البحث ، يعد Largest Contentful Paint جزءًا من ثلاثي Google لمقاييس Core Web Vitals ، والتي بدأت Google في استخدامها كعامل تصنيف SEO في تحديث خوارزمية 2022 Page Experience.

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

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

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

يمكن أن يؤثر نوعان "رئيسيان" من المشكلات على أكبر وقت لطلاء محتوى الصفحة:

1. كم من الوقت يستغرق الخادم الخاص بك للرد بمستند HTML الأولي.
2. كم من الوقت يستغرق تحميل مورد LCP الفعلي.

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

فيما يلي بعض المشكلات الشائعة التي تؤثر على ذلك:

• عدم استخدام التخزين المؤقت للصفحة - عدم استخدام التخزين المؤقت للصفحة يفرض على الخادم القيام بالمزيد من "العمل" قبل أن يتمكن من الاستجابة بمستند HTML.
• الاستضافة البطيئة - سيكون لدى موفر الاستضافة البطيء دائمًا TTFB بطيئًا ، بغض النظر عما تفعله.
• عدم استخدام CDN - يمكن لشبكة توصيل المحتوى (CDN) تسريع TTFB من خلال خدمة الصفحات من شبكتها العالمية بدلاً من مطالبة المستخدمين بتنزيلها من الخادم الأصلي لموقعك.

بعد أن يسلم خادم موقعك مستند HTML الأولي ، قد يكون هناك مزيد من الاختناقات عندما يتعلق الأمر بتحميل عنصر المحتوى الرئيسي الفعلي.

فيما يلي بعض المشكلات الشائعة التي تؤثر على ذلك:

• يحظر عرض JavaScript أو CSS (أو رمز غير محسن / غير ضروري بشكل عام) - إذا احتاج متصفح المستخدم إلى تنزيل و / أو معالجة JavaScript أو CSS غير ضروريين قبل أن يتمكن من تحميل العنصر الرئيسي ، فسيؤدي ذلك إلى إبطاء LCP الخاص بك.
• الصور غير المحسَّنة - إذا كان عنصر LCP عبارة عن صورة ، فإن استخدام الصور غير المحسَّنة سيبطئ من وقتك لأن الصور الأكبر تستغرق وقتًا أطول في التنزيل.
• تحميل خط غير محسّن - إذا كان عنصر LCP نصًا ، فإن تحميل خطوط مخصصة بطريقة غير محسّنة يمكن أن يجعل ظهور هذا النص يستغرق وقتًا أطول.
• الملفات غير المضغوطة - إذا كنت لا تستخدم تقنيات ضغط مثل Gzip أو Brotli ، فسيستغرق متصفح المستخدم وقتًا أطول لتنزيل ملفات موقعك.

اعتمادًا على موقعك ، قد تواجه اختناقات في كلا المجالين أو في منطقة واحدة فقط. ستتعلم كيفية حل كل هذه المشكلات لاحقًا في هذا المنشور.

ما هو أكبر وقت لطلاء المحتوى الجيد؟

تحدد Google أكبر وقت "جيد" لطلاء المحتوى على أنه أقل من 2.5 ثانية.

إذا كان أكبر وقت لطلاء المحتوى لصفحتك يتراوح بين 2.5 و 4.0 ثانية ، فإن Google تصنف ذلك على أنه "يحتاج إلى تحسين". وإذا كان وقت صفحتك يزيد عن 4.0 ثوانٍ ، فإن Google تحدد ذلك على أنه "ضعيف".

هذا رسم من Google يوضح هذا بشكل مرئي:

كيفية قياس أكبر محتوى محتوى: أفضل أدوات اختبار LCP

هناك عدد من الأدوات التي يمكنك استخدامها لاختبار أداء موقعك في Largest Contentful Paint - فلنستعرض بعضًا من أكثرها فائدة ...

PageSpeed ​​Insights

تُعد PageSpeed ​​Insights واحدة من أفضل الأدوات لتقييم Largest Contentful Paint لأنها توفر أربعة أجزاء مفيدة من المعلومات:

1. يمكنك مشاهدة أكبر أوقات رسم المحتوى في موقعك مع مستخدمين حقيقيين من تقرير Chrome UX ( إذا كان موقعك يحتوي على عدد كافٍ من الزيارات ليتم تضمينه في التقرير ).
2. يمكنك إجراء اختبارات محاكاة لمعرفة كيفية أداء موقعك.
3. ستخبرك Google عن عنصر LCP الفعلي الذي تستخدمه للاختبار ، مما يتيح لك معرفة العنصر الذي يجب تحسينه.
4. ستقدم Google اقتراحات حول كيفية تحسين وقت LCP الخاص بك.

إليك كيفية استخدامه:

1. انتقل إلى موقع PageSpeed ​​Insights على الويب.
2. أدخل عنوان URL للصفحة التي تريد اختبارها.
3. انقر فوق تحليل .

سيعرض لك Google بعد ذلك نتائج لكل من الأجهزة المحمولة وسطح المكتب - تأكد من التحقق من كليهما.

للعثور على العنصر الرئيسي الذي تستخدمه Google لحساب LCP ، يمكنك التمرير لأسفل إلى قسم التشخيصات وتوسيع قسم أكبر عنصر رسم محتوى :

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

أدوات مطوري Chrome

يمكنك أيضًا اختبار أكبر وقت لطلاء المحتوى مباشرةً من Chrome Developer Tools باستخدام علامة تبويب الأداء أو ميزة تدقيق Lighthouse. نوصي باستخدام علامة التبويب "الأداء" لأنها توفر لك مزيدًا من المعلومات.

إليك كيف تبدأ:

1. افتح الصفحة التي تريد اختبارها.
2. افتح أدوات مطوري Chrome.
3. انتقل إلى علامة التبويب "الأداء" .
4. تأكد من تحديد مربع Web Vitals .
5. انقر فوق الزر "إعادة تحميل" ( المشار إليه أدناه ).

يجب أن تشاهد الآن تحليلاً كاملاً لموقعك.

إذا قمت بالمرور فوق LCP في علامة تبويب الشبكة ، يمكنك مشاهدة الوقت:

إذا قمت بالمرور فوق LCP في علامة التبويب Timings ، يمكنك رؤية عنصر LCP الفعلي:

جوجل Search Console

على الرغم من أن Google Search Console لا تسمح لك باختبار صفحة فردية لأكبر وقت لرسومات المحتوى ، إلا أنها مفيدة حقًا لتقييم الأداء على مستوى الموقع.

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

باستخدام Google Search Console ، ستتمكن من معرفة مكان كل صفحة على موقعك في تصنيفات Google "جيد" و "بحاجة إلى تحسين" و "ضعيف". تأتي بيانات الأداء من تقرير Chrome UX ، لذا فهي تستند إلى بيانات المستخدم الحقيقية.

إذا لم تكن قد قمت بذلك بالفعل ، فستحتاج أولاً إلى التحقق من موقعك باستخدام Google Search Console.

بمجرد القيام بذلك ، إليك كيفية الوصول إلى تقرير LCP:

1. افتح Google Search Console لموقعك.
2. انتقل إلى Core Web Vitals ضمن علامة التبويب Experience .
3. انقر فوق فتح تقرير بجوار مخطط الجوال أو سطح المكتب.
4. ابحث عن أي مشكلات في قسم لماذا لا تعتبر عناوين URL جيدة . إذا قمت بالنقر فوق المشكلة ، يمكنك الاطلاع على مزيد من المعلومات حول عناوين URL التي تسبب المشكلات.

* تأكد من التحقق من نتائج سطح المكتب والجوال ، حيث قد تختلف البيانات في كل منهما.

WebPageTest

WebPageTest هو خيار مفيد آخر لتشغيل اختبارات الأداء المحاكاة.

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

إليك كيفية إجراء اختبار:

1. انتقل إلى WebPageTest.
2. أضف عنوان URL للصفحة التي تريد اختبارها.
3. قم بتوسيع خيارات التكوين المتقدم لتكوين اختبارك بالكامل.

في صفحة النتائج ، سترى بيانات LCP ، جنبًا إلى جنب مع الكثير من مقاييس الأداء الأخرى (بما في ذلك تحليل الانحدار).

كيفية البحث عن أكبر عنصر طلاء مضمون

إذا كنت ترغب في تحسين Largest Contentful Paint ، فقد يكون من المفيد حقًا أن تعرف بالضبط العنصر الذي يستخدمه Google لحساب وقت LCP الخاص بك.

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

كما ذكرنا سابقًا ، يمكنك العثور على أكبر عنصر Contentful Paint باستخدام PageSpeed ​​Insights أو Chrome Developer Tools.

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

كيفية تحسين أكبر رسم محتوى في WordPress (أو منصات أخرى)

الآن بعد أن عرفت كل شيء عن Largest Contentful Paint ، دعنا ندخل في بعض النصائح القابلة للتنفيذ حول كيفية تحسين Largest Contentful Paint في WordPress.

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

قم بإعداد التخزين المؤقت لتحسين وقت استجابة الخادم

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

إذا كنت تستضيف موقع WordPress الخاص بك مع Kinsta ، فلا داعي للقلق بشأن تكوين التخزين المؤقت لأن Kinsta ينفذ تلقائيًا التخزين المؤقت المحسن لك.

إذا كنت تستضيف في مكان آخر ، فيمكنك تمكين التخزين المؤقت على موقعك باستخدام مكون إضافي مجاني مثل WP Super Cache أو مكون إضافي مدفوع مثل WP Rocket.

لمزيد من الخيارات ، تحقق من منشورنا الذي يحتوي على أفضل المكونات الإضافية للتخزين المؤقت في WordPress.

قم بالترقية إلى Faster WordPress Hosting

في حين أن جميع التكتيكات الموجودة في هذه القائمة يمكن أن تساعدك على تحسين وقت LCP الخاص بك ، فلا يوجد أي تفوق على الأدغال:

إذا كنت تستخدم استضافة WordPress بطيئة وغير محسّنة ، فسيتم دائمًا تحديد أوقات LCP بجودة مضيفك.

قد تكون قادرًا على تحسين الأمور قليلاً ، لكنك ستكافح دائمًا لتحقيق أقل من 2.5 ثانية من LCP إذا كان مضيفك بطيئًا.

إذا كنت تريد أسهل طريقة لتحسين أكبر وقت لطلاء المحتوى ، فيمكنك ترحيل موقعك إلى Kinsta. لا تقدم Kinsta بنية تحتية استضافة مُحسّنة للأداء فحسب ، بل لدينا أيضًا ميزات مدمجة للتعامل مع الكثير من التحسينات الأخرى في هذه القائمة.

هذا يعني أنه يمكنك التركيز على تنمية موقعك بدلاً من العبث بتحسين أكبر وقت لطلاء المحتوى.

إذا كنت مهتمًا ، فسيقوم Kinsta بترحيل عدد غير محدود من مواقع الويب من أي مضيف مجانًا - تعرف على المزيد حول الهجرة المجانية هنا.

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

استخدم شبكة توصيل المحتوى (CDN)

بدون CDN ، يحتاج جميع زوار موقعك إلى تنزيل أصول HTML وثابتة للصفحة من خادم الاستضافة.

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

باستخدام CDN ، يمكنك توزيع الأصول الثابتة لموقعك (أو حتى صفحات HTML النهائية لموقعك) على شبكة CDN العالمية. بهذه الطريقة ، يمكن للزوار تنزيل الملفات من أقرب موقع لـ CDN ، وهو أسرع كثيرًا.

إذا كنت تستضيف مع Kinsta ، فإننا نوصي باستخدام ميزة Kinsta Edge Caching للحصول على أفضل النتائج.

تعمل ميزة التخزين المؤقت للحافة في Kinsta عن طريق التخزين المؤقت لصفحات HTML الكاملة لموقعك والأصول الثابتة على شبكة Cloudflare العالمية ( بدلاً من مجرد تخزين الأصول الثابتة مؤقتًا مثل معظم حلول CDN ).

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

لتمكين Kinsta's Edge Caching ، انتقل إلى علامة التبويب Edge Caching في لوحة معلومات موقعك في MyKinsta.

إذا كنت تستضيف مكانًا آخر ، فيمكنك إعداد CDN للأصول الثابتة لموقعك باستخدام خدمات CDN الشائعة مثل KeyCDN و Bunny و StackPath وغيرها.

تجنب Render-Blocking JavaScript (تأجيل أو إزالة)

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

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

لإصلاح ذلك ، هناك بعض الاستراتيجيات التي يمكنك تنفيذها:

• قم بإزالة JavaScript غير الضرورية إن أمكن.
• قم بتأجيل JavaScript حتى لا تمنع تحميل العنصر الرئيسي لموقعك.
• قم بتأجيل JavaScript حتى يتفاعل المستخدم مع موقعك.

بالنسبة لمعظم الأشخاص ، أسهل طريقة لتنفيذ هذه الوظيفة هي عبر المكونات الإضافية مثل Autoptimize أو WP Rocket.

للحصول على دليل كامل حول كيفية القيام بذلك ، لدينا منشورتان مفصلتان للغاية:

• كيفية التخلص من موارد حظر العرض على WordPress
• كيفية تأجيل تحليل JavaScript

تجنب CSS لحظر العرض وتحسين تسليم CSS

تمامًا كما يمكن أن تؤدي JavaScript غير المحسّن إلى إبطاء موقعك ، يمكن لـ CSS غير المحسّن أيضًا أن يفعل الشيء نفسه.

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

إذا لم تكن مطورًا ، فإن أسهل طريقة لتحقيق ذلك هي استخدام المكونات الإضافية لتحسين الأداء مثل Perfmatters أو WP Rocket أو FlyingPress.

على سبيل المثال ، يوفر WP Rocket ميزات مضمنة لإزالة CSS غير المستخدمة على أساس صفحة بصفحة وخدمة CSS بالطريقة المثلى.

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

تصغير HTML و CSS وجافا سكريبت

بالإضافة إلى تقنيات تحسين الشفرة المذكورة أعلاه ، ستحتاج أيضًا إلى تصغير HTML و CSS وجافا سكريبت لموقعك.

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

إذا كنت تستضيف مع Kinsta ، فيمكن لـ Kinsta معالجة التصغير تلقائيًا عبر تكامل Cloudflare. إليك كيفية التحكم في هذه الميزة:

1. افتح لوحة تحكم موقعك في MyKinsta.
2. انتقل إلى علامة التبويب CDN .
3. انقر فوق الإعدادات بجوار تحسين الصورة.
4. حدد المربعات الخاصة بـ CSS و JS واحفظ الإعدادات.

إذا كنت تستضيف موقعك في مكان آخر ، فيمكنك استخدام مكون إضافي مجاني مثل Autoptimize لتقليل الكود أو أحد المكونات الإضافية الشاملة المتميزة مثل Perfmatters أو WP Rocket أو FlyingPress.

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

استخدم الضغط على مستوى الخادم (Gzip أو Brotli)

يتيح لك الضغط على مستوى الخادم تقليص حجم ملفات موقعك باستخدام تقنيات مثل Gzip أو Brotli.

على سبيل المثال ، أدى الضغط الذي نستخدمه لموقع Kinsta على الويب إلى تقليل حجم ملف الصفحة الرئيسية لـ Kinsta بنسبة 85.82٪.

إذا كنت تستضيف موقع WordPress الخاص بك مع Kinsta ، فلا داعي للقلق بشأن هذا لأن Kinsta يتيح ضغط Brotli لجميع المواقع تلقائيًا.

إذا كنت تستضيف موقعك في مكان آخر ، فيمكنك استخدام هذه الأداة المجانية من GiftOfSpeed ​​للتحقق مما إذا كان موقعك قد تم تمكين Gzip أو Brotli.

إذا كان موقعك لا يستخدم الضغط ، يمكنك اتباع دليلنا حول كيفية تمكين ضغط Gzip لإعداده.

إذا كنت تستخدم Cloudflare لخدمة محتوى موقعك ، فإن Cloudflare لديها أيضًا إعدادًا مضمنًا لتمكين ضغط Brotli:

1. افتح موقعك في لوحة معلومات Cloudflare.
2. انتقل إلى Speed ​​→ Optimization في قائمة الشريط الجانبي.
3. تفعيل تبديل Brotli .

ضغط الصور وتغيير حجمها

إذا كان عنصر LCP الخاص بك عبارة عن صورة ، فإن إيجاد طرق لتقليل حجم ملف الصورة هذا سيقلل الوقت الذي يستغرقه متصفح المستخدم لتنزيل الصورة (وبالتالي تسريع وقت LCP الخاص بك).

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

هذا النهج هو بشكل عام أفضل ممارسة لتحسين الأداء - إنه ليس خاصًا بـ Largest Contentful Paint.

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

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

إليك كيفية تمكين هذه الميزة:

1. افتح لوحة تحكم موقعك في MyKinsta.
2. انتقل إلى علامة التبويب CDN .
3. انقر فوق الإعدادات بجوار تحسين الصورة.
4. اختر المستوى المفضل لديك من تحسين الصورة واحفظ الإعدادات - سيوفر استخدام Lossy أكبر تحسينات في السرعة ، على الرغم من أنه قد يكون له تأثير ضئيل على جودة الصورة.

قم بتحميل أكبر صورة رسم محتوى مسبقًا

إذا كان عنصر LCP الخاص بك عبارة عن صورة ، فإن الإستراتيجية الأخرى لتحسين LCP هي التحميل المسبق لصورة Largest Contentful Paint. هذا هو السبب في أنك قد ترى توصية مثل "Preload Largest Contentful Paint image" في PageSpeed ​​Insights.

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

الطريقة غير التقنية للتحميل المسبق لصور LCP هي استخدام مكون إضافي مثل Perfmatters ، والذي يقدم ميزة Preload Critical Images المخصصة. كل ما عليك فعله هو تحديد عدد الصور التي تريد تحميلها مسبقًا - نوصي بالبدء بواحدة فقط ، لأن التحميل المسبق لعدد كبير جدًا من الأصول يمكن أن يكون له تأثير سلبي.

هناك أيضًا بعض المكونات الإضافية المجانية في WordPress.org لتحقيق ذلك ، مثل المكوِّن الإضافي للصور المميزة Preload من WPZOOM ، بالإضافة إلى المكونات الإضافية المتميزة الأخرى ، مثل FlyingPress.

تحقق من مشاكل التحميل الكسول

هناك مشكلة أخرى يمكن أن تؤدي إلى ظهور رسالة "Preload Largest Contentful Paint image" في PageSpeed ​​Insights وهي مشاكل تتعلق بكيفية قيام موقع WordPress الخاص بك بتحميل الصور كسولًا.

أو ، يمكن أن يؤدي هذا أيضًا إلى ظهور تحذير "تم تحميل أكبر صورة مضمنة ببطء" في PageSpeed ​​Insights.

يتيح لك التحميل الكسول تسريع أوقات التحميل الأولية لموقعك من خلال الانتظار لتحميل موارد معينة (مثل الصور) حتى يبدأ المستخدم في التفاعل مع موقعك.

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

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

إذا كنت ترغب في استبعاد أكثر من الصورة الأولى ، فيمكنك استخدام وظيفة wp_omit_loading_attr_threshold (لكن معظم الأشخاص لن يحتاجوا إلى فعل أي شيء هنا).

ومع ذلك ، إذا كنت تستخدم مكونًا إضافيًا للتحميل يعمل بنظام JavaScript ، فقد تحتاج إلى إعداد هذا الاستبعاد يدويًا في إعدادات المكون الإضافي. على سبيل المثال ، يتضمن المكون الإضافي Perfmatters خيارًا يتيح لك استبعاد الصور "X" الأولى من التحميل البطيء.

إذا كان المكون الإضافي للتحميل الكسول لا يسمح لك بإعداد هذا النوع من الاستبعاد ، فيمكنك التبديل إلى مكون إضافي مختلف.

تحسين تحميل الخط مع عرض الخط: اختياري

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

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

لإصلاح ذلك ، يمكنك استخدام Font-Display: واصف CSS اختياري.

يخبر هذا المتصفح باستخدام خط احتياطي إذا لم يتم تحميل الخط المخصص ضمن نافذة صغيرة (عادةً حوالي 100 مللي ثانية أو أقل).

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

بدلاً من ذلك ، يمكنك أيضًا استخدام Font-Display: Swap ، والذي يقوم بتحميل الخط الاحتياطي على الفور ثم "التبديل" في الخط المخصص بمجرد تحميل الخط المخصص. ومع ذلك ، يمكن أن يتسبب هذا الأسلوب في حدوث مشكلات في النقل التراكمي للتخطيط إذا كانت الخطوط بأحجام مختلفة ، لذلك ستحتاج إلى توخي الحذر.

ما لم يكن الخط المخصص ضروريًا تمامًا لتصميم موقع الويب الخاص بك ، باستخدام Font-Display: عادةً ما يكون الخيار الاختياري هو الخيار الأفضل من منظور Core Web Vitals.

إذا كنت راضيًا عن استخدام CSS مباشرةً ، فيمكنك تحرير خاصية Font-Display يدويًا في ورقة أنماط السمة الفرعية الخاصة بك.

إذا كنت لا ترغب في استخدام CSS ، فيمكنك أيضًا العثور على مكونات إضافية لمساعدتك في القيام بذلك ، على الرغم من أن معظمها يركز على تحسين خطوط Google:

• Asset CleanUp - يدعم خطوط Google للخطوط المحلية المجانية والمخصصة مع إصدار Pro.
• Perfmatters - يقدم ميزة لخطوط Google.

إذا كنت تستخدم Elementor لتصميم موقعك ، فإن Elementor يتضمن أيضًا خيارًا مضمنًا للسماح لك باستخدام هذا للصفحات التي تقوم بإنشائها باستخدام Elementor:

1. انتقل إلى Elementor → Settings .
2. افتح علامة التبويب خيارات متقدمة .
3. قم بتعيين القائمة المنسدلة لتحميل خطوط Google بما يساوي اختياري .

ملخص

يعد تعلم كيفية تحسين Largest Contentful Paint أمرًا مهمًا لتحسين تجربة مستخدم موقعك وتعظيم تصنيفات محرك البحث الخاص بك.

يوجد بشكل عام جزءان لتحسين أكبر محتوى محتوى - تسريع وقت استجابة الخادم ثم تحسين كود موقعك لتقديم عنصر LCP في أسرع وقت ممكن.

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

بالإضافة إلى ذلك ، باستخدام ميزة Edge Caching من Kinsta ، يمكنك تخزين صفحات موقعك مؤقتًا على شبكة Cloudflare العالمية ، مما يعني أن الزوار من جميع أنحاء العالم سيستمتعون بأوقات استجابة الخادم بسرعة البرق (وبالتالي أوقات LCP فائقة السرعة).

إذا كنت تريد معرفة المزيد ، يمكنك التحقق من هذه الصفحات لمزيد من المعلومات حول استضافة WordPress المُدارة من Kinsta أو استضافة WooCommerce المُدارة من Kinsta.

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