8 طرق عملية لتحسين FCP في WordPress

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

ما هو FCP؟

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

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

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

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

اختبار وفهم الرسم المحتوى الأول

من السهل جدًا فهم واختبار مقاييس First Contentful Paint. كل ما تحتاجه هو أداة Google Pagespeed. ما عليك سوى إدخال عنوان URL الخاص بك ، وسيخبرك أحد المقاييس الأولى في ثوانٍ ، بمدى سرعة تحميل موقع الويب الخاص بك.

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

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

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

التركيز على الوقت حتى البايت الأول

الشيء الأول والأكثر قابلية للتنفيذ الذي يمكنك القيام به لتقليل وقت FCP وزيادة هذه النتيجة هو التركيز على Time To First Byte. تمتلك العديد من مواقع الويب TTFB بطيئًا جدًا ، أو الوقت الذي يستغرقه المستعرض لتلقي اللقمة الأولى من محتوى صفحة الويب. TTFB هي مجموع الوقت المستغرق للحصول على طلب HTTP ومعالجة هذا الطلب ووقت استجابة طلب HTTP نفسه.

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

يعد FCP هو أول مقياس يظهر ، لذلك فهو مرتبط بشكل مباشر تقريبًا بـ TTFB. الطريقتان الرئيسيتان اللتان يمكنك من خلالهما تحسين Time To First Byte على موقع WordPress على الويب ، زيادة درجة First Contentful Paint مباشرة هما عن طريق اختيار مضيف WordPress سريع ، واستخدام CDN عالي الجودة.

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

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

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

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

تخلص من موارد حظر العرض

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

نظرًا لأن هذه العناصر تمنع عملية العرض ، يحتاج المتصفح إلى الانتظار لعرض عناصر DOM فعليًا للزائر ، وتنزيل مورد حظر العرض ، وتحليله ، ثم متابعة عرض الصفحة بأكملها.

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

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

CSS الحرجة المضمنة

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

تم التخلص من CSS غير المستخدمة

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

يعد التخلص من أوراق أنماط CSS غير المستخدمة طريقة رائعة لتقليل كمية البيانات المنقولة ، مما يمهد الطريق أمام عنصر First Contentful الهام ليتم رسمه على موقعك. يؤثر هذا بشكل مباشر على نتيجة FC بطريقة مفيدة.

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

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

إزالة عناصر البرنامج النصي الموجودة في الجزء المرئي من الصفحة (مثل إعلانات JS)

فيما يتعلق بالتركيب الفعلي لموقع الويب الخاص بك ، فإن إزالة العناصر المستندة إلى البرنامج النصي الموجودة في الجزء المرئي من الصفحة هي طريقة مؤكدة لتحسين First Contentful Paint لموقع WordPress. يمكن تحسين JavaScript قدر الإمكان ، ولكن نظرًا لتركيبها ، فسيكون عرضها أبطأ دائمًا من عرض HTML المباشر و CSS المضمن.

لذلك ، إذا كان لديك أي JavaScript يمكن اعتباره أول رسم محتوى لصفحة ويب (أي شيء موجود في الجزء المرئي من الصفحة ، أو في منفذ العرض الأولي الذي يتم تحميله للزائر) ، فأنت بالتأكيد تريد التخلص منه واستبداله مع HTML خالص.

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

من خلال استبدالها بتنسيق HTML سريع التحميل ، ستعمل على تحسين First Contentful Paint بشكل جدي ، فقط بسبب طبيعة تقنية HTML و CSS.

تعطيل التحميل الكسول فوق الطي (مجنون ، وأنا أعلم)

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

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

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

الصور المضمنة (SVG أو Base64)

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

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

ومع ذلك ، قد يكون استخدام SVG والشعارات الأساسية 64 وأيقونات البحث وأيقونات الوسائط الاجتماعية والخلفيات مفيدًا لـ First Contentful Paint ، وتحسين درجة موقع WordPress على Google ، والاستفادة من تصنيفك وتجربة المستخدم.

ركز على حجم DOM

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

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

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

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

خاتمة

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

هناك العديد من الطرق الأخرى التي يمكنك استخدامها لزيادة الأداء العام لموقع WordPress ، والتي ستكون مفيدة أيضًا لـ First Contentful Paint ، ولكن هذه الطرق الست هي أفضل طريقة لزيادة رسمك الأول في الهيكل على موقع WordPress. إذا كان لديك أي توصيات تحسين إضافية ، فلا تتردد في تركها في قسم التعليقات أدناه.