كيفية تحسين First Contentful Paint (FCP) في WordPress

مقدمة إلى First Contentful Paint

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

إنه مشابه لمقياس Largest Contentful Paint (LCP) في أساسيات الويب الأساسية من Google. ولكن بينما يقيس LCP الوقت الذي يستغرقه تحميل المحتوى "الرئيسي" للموقع ، يركز FCP فقط على الجزء الأول من المحتوى ، والذي قد يكون المحتوى الرئيسي أو لا يكون.

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

تعتبر درجة FCP الخاصة بك مهمة لأنها مؤشر على السرعة الإجمالية لموقع الويب الخاص بك. لا يعد الأداء أمرًا حيويًا لتجربة المستخدم فحسب ، ولكنه أيضًا عامل تضعه محركات البحث مثل Google في الاعتبار عند تحديد كيفية ترتيب صفحاتك. يمكن أن يؤدي الأداء الضعيف إلى تصنيفات بحث أقل. هذا يعني أنه إذا كنت لا تعرف كيفية تحسين First Contentful Paint ، فقد يؤثر ذلك على ظهور موقع الويب الخاص بك.

كيفية قياس أول رسم مضمون

بينما يمنحك FCP نافذة على إدراك المستخدم ، فإنه لا يزال مقياسًا يمكن قياسه بشكل موضوعي من خلال الاختبارات المعملية والبيانات الميدانية. على سبيل المثال ، PageSpeed ​​Insights هي أداة تمكنك من معرفة ما يواجهه المستخدمون الحقيقيون ( طالما أن موقعك يحتوي على عدد كافٍ من الزيارات ليتم تضمينه في تقرير تجربة مستخدم Chrome ).

حتى إذا لم يكن موقعك يحتوي على بيانات كافية لمشاهدة تجارب المستخدمين الحقيقية ، فلا يزال بإمكان PageSpeed ​​Insights مساعدتك في جمع بيانات FCP في اختباراته المعملية المحاكاة.

لاستخدامه ، ما عليك سوى إدخال عنوان URL الخاص بك والحصول على نتيجة فورية:

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

أداة أخرى مفيدة لقياس FCP هي WebPageTest ، والتي تستغرق وقتًا أطول قليلاً ولكن يمكن أن توفر تحليلًا أكثر تعمقًا.

ما هو وقت FCP الجيد؟

وفقًا لـ Chrome ، فإن موقعك لديه درجة FCP جيدة إذا كانت أقل من 1.8 ثانية. عندما تتجاوز درجة FCP الخاصة بك ثلاث ثوان ، فهذا مدعاة للقلق.

ومع ذلك ، حتى إذا كان موقعك يحتوي حاليًا على درجة FCP قوية ، فهناك دائمًا مجال للتحسين.

كيفية تحسين First Contentful Paint في WordPress (6 تقنيات)

الآن بعد أن عرفت المزيد عن FCP ، دعنا نلقي نظرة على كيفية تحسين First Contentful Paint على موقعك عبر ست طرق فعالة:

1. استخدم شبكة توصيل المحتوى (CDN)
2. تحسين الصور وضغطها
3. تخلص من موارد حظر العرض
4. تقليل حجم DOM الخاص بك
5. تحسين وقت استجابة الخادم
6. تجنب عمليات إعادة توجيه الصفحات كثيرة جدًا

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

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

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

أحد الأمثلة الشائعة على CDN هو Cloudflare ، التي لديها أكثر من 275 مركز بيانات حول العالم:

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

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

2. تحسين الصور وضغطها

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

تتمثل إحدى طرق تحسين صورك في التبديل إلى تنسيق ملف مختلف. على سبيل المثال ، إذا كنت تعتمد حاليًا على ملفات JPG / JPEG أو PNG ، فيمكنك الانتقال إلى تنسيق ذي ضغط أفضل ، مثل SVG أو WebP.

يجب أيضًا تغيير حجم الصور إلى أصغر الأبعاد التي تناسب احتياجاتك وضغطها لتقليل حجمها بشكل أكبر.

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

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

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

3. إزالة موارد حظر العرض

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

إذا كنت تتساءل عن كيفية تحسين First Contentful Paint ، فهناك عدة طرق للتخلص من موارد حظر العرض. إذا كنت مرتاحًا للتطوير ووجدت رمزًا غير مستخدم في صفحتك ، فيمكنك المضي قدمًا وحذفه. يمكنك أيضًا تحديد مواردك المهمة و "مضمنة" داخل صفحتك باستخدام علامتي <script> و <style>.

بالإضافة إلى ذلك ، من الممكن تأجيل JavaScript ، حتى لا يتأخر المحتوى الخاص بك أثناء انتظار المستعرض لمعالجة هذه الملفات. بالإضافة إلى ذلك ، يمكنك إنشاء CSS هام لعرض المحتوى "في الجزء المرئي من الصفحة" (الجزء الذي يراه المستخدمون على الفور). إذا لم تكن مطورًا ، يمكن أن تساعدك أداة مثل Jetpack في إجراء بعض هذه التغييرات.

4. تقليل حجم DOM الخاص بك

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

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

لذلك ، يمكنك تحسين FCP الخاص بك عن طريق تقليل حجم DOM الخاص بك. يمكنك القيام بذلك يدويًا عن طريق حذف علامات <div> غير الضرورية ، وتقسيم الصفحات الطويلة إلى صفحات أصغر ، والحد من عدد المنشورات في الأرشيف الخاص بك أو على صفحتك الرئيسية.

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

يمكن أن يساعد اختيار سمة محسّنة أيضًا في تقليل حجم DOM ، نظرًا لأن العديد من السمات (ومنشئو الصفحات) تستخدم عددًا كبيرًا جدًا من علامات <div>. إذا كنت في السوق للحصول على سمة جديدة ، فإننا نقترح عليك التحقق من Neve ، وهو سريع وخفيف الوزن ويستخدم فقط رمز الجودة.

5. تحسين وقت استجابة الخادم

يُشار أيضًا إلى وقت استجابة الخادم على أنه وقت البايت الأول (TTFB). يقيس هذا المقياس الوقت المستغرق بين وقت قيام المستخدم بتقديم طلب وبين قيام الخادم بإرسال البايت الأول من المعلومات.

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

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

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

ومع ذلك ، إذا كان مزود الاستضافة الخاص بك لا يقدم خوادم ملائمة ، فيمكنك دائمًا اختيار CDN ، والذي تحدثنا عنه سابقًا عند مناقشة كيفية تحسين First Contentful Paint.

يعد التخزين المؤقت طريقة رائعة لتقليل أوقات الاستجابة. يقدم بعض المضيفين التخزين المؤقت المدمج. بدلاً من ذلك ، يمكنك تثبيت مكون إضافي للتخزين المؤقت مثل WP Rocket أو WP Fastest Cache.

6. تجنب عمليات إعادة توجيه الصفحات كثيرة جدًا

عندما تزور صفحة تعيد توجيهك على الفور إلى موقع آخر ، يجب على متصفحك أن يقدم طلب HTTP آخر إلى الموقع الجديد. يمكن أن يؤدي هذا إلى ضعف نقاط FCP ، لأنه يؤخر تحميل صفحة الويب الخاصة بك.

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

إذا كانت المشكلة تحدث على مستوى الموقع ، فقد ترغب في النظر في كيفية إدارة عمليات إعادة التوجيه من www إلى non-www (أو العكس) و / أو من HTTP إلى HTTPS.

على سبيل المثال ، إذا قمت بإعادة التوجيه من http://www.yoursite.com إلى http://yoursite.com ثم مرة أخرى إلى https://yoursite.com ، فسيكون من الأفضل القيام بذلك في خطوة واحدة.

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

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

بمجرد التثبيت ، يمكنك استخدام هذه الأداة لإدارة عمليات إعادة التوجيه بسهولة وسرعة.

تحسين وقت FCP لموقعك اليوم

في مواقع الويب المعقدة أو ذات المحتوى الثقيل ، قد يكون من الصعب الحفاظ على أوقات تحميل سريعة. لحسن الحظ ، من خلال استهداف المقاييس الرئيسية مثل First Contentful Paint (FCP) ، يمكنك تقييم وتحسين الوقت الذي يستغرقه الزوار لمشاهدة المحتوى الخاص بك.

للتلخيص ، إليك كيفية تحسين First Contentful Paint في WordPress:

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

هل لديك أي أسئلة حول تحسين FCP في WordPress؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!