يعد The First Contentful Paint (FCP) لموقع الويب الخاص بك أحد أكثر المقاييس ذات المغزى في Core Web Vitals من Google. على عكس مقاييس الطلاء والتحميل الأخرى ، فإن FCP ليس مقياسًا تقنيًا بحتًا فيما يتعلق بوقت الاستجابة. وتتركز FCP على تجربة المستخدم وما كانوا ينظرون لأول مرة على الموقع، وليس ما الأحمال في الخلفية. من خلال تحسين First Contentful Paint لموقعك ، فأنت لا تقوم فقط بتسريع أوقات التحميل الإجمالية وزيادة تقييمات سرعة الصفحة ، بل تُظهر أيضًا للزائرين أن طلباتهم تتم معالجتها وأن التحميل لم يتوقف.
في هذه المقالة ، سوف نتعمق في ماهية تقنيات تحسين المحتوى الأول (FCP) ، وكيفية قياسه وتحسينه ، والإجابة على بعض الأسئلة الشائعة حول FCP حتى تتمكن من التأكد من أن موقعك فعال وقابل للاستخدام قدر الإمكان يكون.
دورة كيفية إنشاء موقع على شبكة الإنترنت بدون مهارات برمجة
في هذا البرنامج التعليمي “كيفية إنشاء موقع ويب” ، سأوضح لك كيفية إنشاء موقع ويب جميل مكون من 5 صفحات خطوة بخطوة باستخدام WordPress وموضوع Divi القوي و Divi Visual Builder
ما هو تحسين المحتوى الأول First Contentful Paint (FCP)؟
أول رسم محتوى لموقعك على الويب هو عندما يعرض المتصفح أول عنصر DOM على صفحتك. يتضمن ذلك الصور أو عناصر لوحة الرسم (غير البيضاء) أو النص. في اللغة الإنجليزية البسيطة ، يكون FCP هو الوقت الذي يمكن فيه للمستخدم رؤية بعض التغييرات في صفحتك. غالبًا ما يأتي هذا كشريط رأس أو صورة خلفية. هذا العنصر قد لا يكون أول شيء المقدمة أو تحميلها من الخادم، ولكن هذا أول ما يمكن للمستخدم رؤية، مما يجعلها ذات أهمية قصوى لموقعك UX .
أي شيء يحتويه موقع الويب الخاص بك داخل إطار iframe لا يتم احتسابه بواسطة FCP. كما أن الرسم غير المحتوى مثل تغيير لون الخلفية. هذا هو أول رسم ، وليس أول رسم مضمون .
FCP مقياس مثير للاهتمام. بينما يمكنك قياسها كميًا ، فهي أيضًا ذاتية نسبيًا. يعد الحصول على First Contentful Paint سريعًا أمرًا مهمًا لأنه يجعل المستخدم يدرك أن موقعك يتم تحميله بسرعة. سواء كان ذلك في الواقع أم لا. قد يكون لموقعك تأخير تفاعلي أول أطول بكثير (الوقت الذي يمكن للمستخدم بعده التفاعل مع الموقع) من المنافسين ، ولكن قد يبدو للمستخدمين أنه أسرع بسبب FCP الخاص بك الأسرع.
ومع ذلك ، فإن FCP لا يتعلق بخداع المستخدمين. يعد وقت FCP المنخفض مؤشرًا جيدًا لسرعة الصفحة بشكل عام ، ويمكن أن تؤثر الطرق التي تقوم بتحسينها بها أيضًا على مقاييس سرعة الصفحة الأخرى (مثل Largest Contentful Paint).
كيفية قياس FCP
على الرغم من أهمية FCP بسبب إدراك المستخدم ، إلا أنه مقياس قابل للقياس يمكن قياسه وتقديره. ومع ذلك ، يمكنك استخدام هذه الأدوات للإشارة إلى ما إذا كان تأثير FCP في المجال (مع مستخدمين حقيقيين) مقابل تأثيره في المختبر (تحميل الصفحات المحاكاة لأغراض الاختبار).
ما هي درجة FCP الجيدة؟
قبل البحث في الأدوات المختلفة للتحقق من FCP الخاص بك ، تحتاج إلى معرفة ما يعتبر درجة FCP جيدة. من وثائق Google على تحديد عشرات متري ، يمكننا أن نرى أن يقيمون FCP مرات في ثلاثة. التصنيفات جيدة، يحتاج إلى تحسين، و سوء يناقش-وكيف تحقيق التهديف المئوي التي تستخدمها على أداة منارة .
- جيد - ما بين 0 ثانية و 1.8 ثانية
- يحتاج إلى تحسين - ما بين 1.8 ثانية و 3 ثوان
- ضعيف - أكثر من 3 ثوان
أدناه ، قمنا بإدراج العديد من الأدوات التي يمكنك استخدامها لمعرفة أي من هذه الفئات يصل موقعك.
الأدوات الميدانية
الأدوات الميدانية هي تلك التي يمكنك استخدامها لتتبع كيفية ظهور الصفحة للمستخدمين. مستخدمين حقيقيين. لا تعتمد هذه الأدوات على واجهات برمجة التطبيقات والافتراضات حول موقعك. يتم تشغيلها مباشرة ضد الخادم الخاص بك في الوقت الفعلي بحيث تحصل على المعلومات الأكثر دقة وحداثة قدر الإمكان.
توضح وثائق Google الخاصة بـ FCP على https://web.dev هذه كأفضل أدوات ميدانية لتحديد FCP:
- PageSpeed Insights
- تقرير تجربة مستخدم Chrome
- Search Console (تقرير السرعة)
- مكتبة JavaScript حيوية الويب
بالإضافة إلى ذلك ، ربما تكون أفضل أداة هي المراقبة الحقيقية للمستخدم (RUM). هذا هو المكان الذي تتتبع فيه وتشاهد المستخدمين الحقيقيين يتفاعلون مع موقعك. يمكنك تتبع أوقات التحميل الخاصة بهم كميًا باستخدام الأدوات المذكورة أعلاه ، ومن ثم يمكنك الحصول على تصوراتهم الذاتية عن FCP وسرعة تحميل صفحتك منها مباشرةً. من حيث العرض الأكثر اكتمالا لـ FCP وتأثيره على زوارك ، فإن RUM هي بالتأكيد على رأس القائمة. ومع ذلك ، فهو أيضًا الأكثر تعقيدًا وصعوبة في التنفيذ.
أدوات المعمل
تميل أدوات المعمل لفحص FCP إلى محاكاة النتائج فيما يتعلق بما سيكون عليه FCP في المواقف المثالية. بدلاً من المواقف الواقعية التي يحدث فيها وقت الاستجابة وعرض النطاق الترددي وازدحام الشبكة وحواجز الطرق الأخرى ، توفر أدوات المعمل هذه التي أوصت بها Google نظرة على ما يمكن أن يكون عليه موقعك عند التشغيل على النحو الأمثل.
أيضًا ، عندما تقوم بتطوير موقع لم يصل بعد إلى مرحلة الإنتاج ، فمن المستحيل اختباره في ظل ظروف العالم الحقيقي. يمكن أن يساعدك استخدام أدوات المعمل أيضًا في إنشاء معايير ومعالم أثناء انتقال مشروعك خلال دورة التطوير.
كيفية تحسين نقاط FCP الخاصة بك
تعطيك الأدوات المذكورة أعلاه نظرة عامة ودرجة عن سرعة موقع الويب الخاص بك و FCP بالتأكيد. لكنهم - بالإضافة إلى آخرين مثل GT Metrix و Pingdom - يعطونك أيضًا نظرة ثاقبة حول ما يمكنك القيام به لتحسين درجة FCP الخاصة بك وجعلها ترسم بشكل أسرع. سنقوم بإلقاء نظرة عامة على بعض الخطوات الأكثر شيوعًا لكيفية إصلاح أوقات First Contentful Paint حتى تعرف كيفية معالجة أي شيء ، ستطلق الاختبارات والأدوات طريقك.
إزالة موارد حظر العرض
قد يكون هذا هو العامل الأول على الصفحة لتقليل وقت FCP الخاص بك. موارد حظر العرض هي ملفات على موقع الويب الخاص بك يجب أن تعرضها صفحتك . تتضمن هذه الملفات HTML و JavaScript والخطوط وملفات CSS. ما يجعلهم "منع العرض" هو أنهم يأخذون الأولوية على أي شيء آخر على الصفحة ، مما يوقف عملية تحميل أي شيء آخر حتى ينتهي. يتم تعليق أي صور أو نص عادي أو أي محتوى آخر يواجه المستخدم حتى تنتهي الملفات الحيوية.
يتسبب هذا التعليق في زيادة كبيرة في FCP لسببين:
- تكون ملفات حظر العرض كبيرة الحجم بشكل عام
- لا تحتوي ملفات حظر العرض عادةً على محتوى الموقع ، وإنما تحتوي فقط على البنية والتنسيق
بإزالة هذه الموارد من مسار التجسيد الحرج ، فإنك تفتح مساحة للرسم ذي المحتوى. يمكنك تأجيل تحميل الموارد ، وتجنب استخدام import لـ CSS (استخدم media لـ CSS الشرطي بدلاً من ذلك) ، وتأكد من تصغير ودمج ملفات CSS و HTML و JavaScript (التي نناقشها لاحقًا في هذه المقالة).
بالإضافة إلى ذلك ، يمكن لمستخدمي Divi الاستفادة من نظام CSS الحرج الذي يزيل تلقائيًا كل طلب CSS يحظر العرض. علاوة على ذلك ، يحتوي الموضوع على خيارات تعزيز السرعة التي تساعد بشكل كبير في ذلك. لا يقتصر الأمر على تخزين خطوط Google مؤقتًا وطباعتها في السطر في العنوان (تجنب الاستيراد @ ) ، بل يتيح لك Divi أيضًا اختيار إزالة الرموز التعبيرية الأصلية و (على الأرجح) الخاصة بـ WordPress والتي تستهلك موارد FCP ، وتبديل jQuery deferral ، والإرجاء ورقة أنماط محرر كتلة Gutenberg من التقديم أولاً وحظر الموارد الأخرى. هذا هو السبب في أن أداء Divi رائع جدًا ويمكن أن يساعدك في تحقيق نتائج FCP رائعة بمجرد إخراجها من الصندوق.
قد يجد مستخدمو WordPress بدون Divi أيضًا بعض خيارات حظر العرض في مكونات التخزين المؤقت مثل WP Rocket ، وسيساعد تمكينها أيضًا في تقليل وقت FCP.
عرض النص قبل وأثناء تحميل الخط
هل سبق لك أن رأيت موقعًا على الويب يظهر فيه كل النص على الصفحة بطريقة سحرية دفعة واحدة عندما يكون المحتوى الآخر موجودًا حوله بالفعل؟
هذا لأن المتصفح يخفيه. لا يتم تحميل محتوى نص الموقع حتى يصبح جاهزًا للقراءة. النص عمومًا لا يمثل سوى عدد قليل من البايتات من المحتوى. ولكن في العديد من المواقع ، قد يستغرق التحميل وقتًا أطول بشكل كبير. لأن ملف الخط ليس "جاهزًا" للعرض. من بين جميع الطرق للحصول على وقت FCP سريع للغاية ، ربما يكون الحصول على محتوى نصي لموقعك هو الأفضل.
يمكنك استخدام العديد من معلمات عرض الخط ، ويمكنك إخبار المتصفح بتحميل نص موقعك باستخدام خط النظام على الفور ، ثم استبداله بخط العرض المحدد بمجرد تحميله.
محتوى النص ضئيل في حجم الملف ، غالبًا ما يكون مجرد عدد قليل من البايتات ، ومن خلال إخبار المستعرضات بعرضه دون تأخير ، من المحتمل أن يجعل FCP الخاص بك غير موجود تقريبًا. ما عليك سوى إضافة عرض الخط: قم بالتبديل إلى أي @ font-face CSS لديك. قد يؤدي هذا وحده إلى إصلاح الكثير من مشكلات وقت First Contentful Paint.
ديفي يفعل ذلك افتراضيا، لذلك أعضائنا لن تحتاج إلى إجراء أي تغييرات. سيتم تبديل مواقعك تلقائيًا من خط النظام بدلاً من إخفاء محتوى صفحتك حتى يتم تحميل الملفات بالكامل.
تصغير HTML و CSS وجافا سكريبت
التصغير هو إزالة الأحرف الدخيلة (مثل المسافات) من ملفات HTML و CSS وجافا سكريبت الخاصة بموقعك. في حين أن التباعد يسهل على البشر القراءة والتحليل ، فإن المتصفحات والخوادم لا تحتاج إليها. لا تزال هذه المسافات عبارة عن أحرف تستهلك بايت. من خلال تصغير أشياء مثل ملفات CSS ، فإنك تقلل حجم الصفحة. مما يزيد من سرعة الصفحة ويحسن وقت FCP.
إذا كنت من مستخدمي WordPress ، فمن المحتمل أن يكون لديك خيار تصغير في المظهر أو المكون الإضافي للتخزين المؤقت بالفعل. بالنسبة لمستخدمي Divi ، فقد تم الاعتناء بهم بالفعل. ستقوم Divi تلقائيًا بإدراج نسختها المصغرة من البرامج النصية. مع تلك الممكّنة ، سينخفض FCP الخاص بك.
إخراج CSS غير المستخدمة
إذا كان لديك رمز في أوراق الأنماط الخاصة بك لا يتم استخدامه ، فلماذا تحتفظ به؟ يجب حذف أي رمز قديم أو غير مستخدم حتى لا يتم تحميله في كل مرة يُطلب فيها موقعك. يمكن لـ Chrome DevTools (التي ربطناها أعلاه) أن توضح لك ضمن علامة التبويب Coverage أجزاء CSS الخاصة بك التي يتم تحميلها ولكن لا يتم عرضها.
بالإضافة إلى ذلك ، يجب على مستخدمي Divi ملاحظة أننا قمنا بإصلاح الطريقة التي يتعامل بها موضوعنا مع CSS وهذا النوع من الانتفاخ في الأسلوب. يحافظ تحديث أداء Divi الهائل على تصنيف CSS ديناميكيًا إلى ملفات صغيرة ومُصغرة تستند إلى الوحدات النمطية التي اخترتها على صفحتك. علاوة على ذلك ، نحدد أجزاء CSS التي يتم تحميلها في الجزء المرئي من الصفحة ونعرضها أولاً. وهذا يقلل FCP الخاص بك.
لذلك لم نقم فقط بتصغير CSS تلقائيًا ، بل قمنا أيضًا بتقطيعه إلى قطع صغيرة الحجم لمتصفحك وأعطينا الأولوية لتلك التي تزيد FCP وأوقات تحميل الصفحة الإجمالية.
تقليل الوقت إلى أول بايت (TTFB)
بشكل أساسي ، TTFB هي عندما يتم نقل البايت الأول من البيانات إلى المتصفح. يتوقف FCP على هذا المقياس ، لذا فكلما كان أسرع ، كلما كان أول برنامج Contentful Paint الخاص بك أسرع. أفضل الطرق لتقليل TTFB وتسريع صفحتك بسيطة جدًا:
- استخدام مضيف عالي الجودة
- تقديم المحتوى عبر CDN
- تمكين التخزين المؤقت للمتصفح (باستخدام WordPress ، من خلال مكون إضافي مثل WP Rocket )
إن التأكد من العناية بهذه العناصر الثلاثة بشكل مناسب يمكن أن يقلل بشكل كبير من TTFB ، وبالتالي ، FCP الخاص بك.
حافظ على حجم DOM الخاص بك صغيرًا
قد يكون هذا هدية. ولكن غالبًا ما يكون أحد أكبر العوامل المقيدة لوجود First Contentful Paint هو وجود DOM كبير جدًا. أنت تحاول أن تفعل الكثير على الفور. تقول Google أن "المكان المثالي هو قسم شجرة <32 عنصرًا وأقل من 60 عنصرًا من الأطفال / الوالدين."
يبالغ الكثير منا في تعقيد صفحاتنا الرئيسية وصفحاتنا المقصودة في محاولة لإقناع الزوار. ومع ذلك ، فإن هذه العناصر المضافة تضخم DOM وتسبب وقت FCP أعلى. يمكنك المساعدة في ذلك عن طريق تقليل عدد محددات CSS التي تستخدمها ، ربما باستخدام CSS المستندة إلى الفئة أكثر بكثير من المعرف أو استعلامات الوسائط الخاصة. تعمل المحددات الزائفة أيضًا على تعقيد الأمور وتزيد من حجم DOM الخاص بك.
إلى جانب ذلك ، يمكنك تقليل عدد العناصر التي تنطبق عليها المحددات. يستغرق تحميل وتطبيق أنماط 5 عناصر وقتًا أقل من 10. وهذا صحيح بشكل خاص مع المتصفحات القديمة والقديمة ، والتي على الرغم من كل الجهود التي نبذلها ، لا يزال الأشخاص يستخدمونها يوميًا.
استخدم صور SVG أو WebP
قد لا يؤثر هذا على موقع الجميع وهذا هو سبب تضمينه آخر مرة في قائمتنا. عادةً لا تكون الصور هي أول ما يتم رسمه على الصفحة ، خاصةً فوق النص أو الإطارات الإضافية ، ولكن من الممكن أن يؤدي تقليل حجم ملف الصور المهمة / البارزة (مثل شعار موقعك) إلى المساعدة في FCP.
على الرغم من أن ملفات .gif و .jpg و .png هي أكثر ملفات الصور شيوعًا التي تستخدمها ، إذا قمت بتبديلها إلى ملفات .webp أو .svg ، فستوفر الكثير من الوقت. مع وجود أحجام ملفات في نطاق البايت أحيانًا بدلاً من كيلوبايت ، سيتم تحميل صورك في لمح البصر. إذا كنت من مستخدمي WordPress ، فإن الإصدار 5.8 مدمج في دعم الويب .webp ، ولدينا ملخص حول كيفية استخدام صور SVG في أرشيفنا .
على الأرجح ، ستؤثر هذه الطريقة على أكبر رسم محتوى (LCP) لديك أكثر من FCP ، ولكن يمكن أن يكون شعار SVG الصغير بما يكفي هو أول ما يراه المستخدمون.
First Contentful Paint (FCP) الأسئلة المتداولة
كيف تتناسب FCP مع الأداء العام لموقع الويب الخاص بي؟
كمقياس مباشر لأداء الموقع ، ليس كثيرًا. FCP هو مقياس إدراك يركز على المستخدم ولا يشير بالضرورة إلى أداء الموقع. كما ذكرنا سابقًا في المقالة ، قد يكون لدى موقعين ويب نفس وقت التحميل بالضبط ، ولكن قد يُنظر إلى الموقع الذي يحتوي على وقت FCP أقل على أنه أسرع. يمكن أن يؤثر هذا التصور على تجربة المستخدم ، إن لم يكن الأداء العام لموقع الويب.
ومع ذلك ، فإن First Contentful Paint هو مقياس رائع يجب اتباعه من أجل رفع الأداء العام للموقع إلى مستوى أعلى. ستؤدي أي إجراءات تتخذها لخفض FCP أيضًا إلى تقليل سرعة الصفحة الإجمالية. لذلك يمكنك اعتبارها إشارة إلى أدائك العام تقريبًا.
لا يتزامن وقت FCP المنخفض بشكل عام مع وقت تحميل إجمالي مرتفع ، لذلك إذا كنت بحاجة إلى استخدام مقياس واحد لمعرفة المكان الذي تقف فيه ، يمكن أن يكون FCP دليلًا جيدًا. يمكنك أيضًا إقرانه بـ LCP ، أو أكبر لوحة محتوى ، للحصول على صورة أكثر اكتمالاً لما يراه المستخدمون في الثواني القليلة الأولى من القدوم إلى موقعك.
ما هو الفرق بين الطلاء الأول والرسام الأول المحتوى؟
على الرغم من أنه يمكن استخدام المصطلحين في بعض الأحيان بالتبادل ، إلا أنهما مقياسان مختلفان من الناحية الفنية. كما ناقشنا ، فإن First Contentful Paint هو عندما يعرض المتصفح أول عنصر DOM على الصفحة. يمكنك التفكير في هذا على أنه أي محتوى قابل للاستخدام (إن لم يكن تفاعليًا) على الصفحة. صورة خلفية أو نص أو div قائمة العناوين الخاصة بك ، على سبيل المثال.
ومع ذلك ، فإن First Paint هو عندما يعرض المستعرض البايتات الأولى من المعلومات ، سواء كانت ذات محتوى أم لا. التغيير في لون الخلفية (وليس تحميل صورة الخلفية) ليس مضمونًا. لا يمكن للمستخدم استهلاكها كمحتوى ، وبالتالي فهي ليست مثالاً على FCP.
يمكن أن يكون " الرسام الأول" هو نفس "الرسام الأول المحتوي". لكن FCP الخاص بك قد لا يكون هو نفسه الرسام الأول الخاص بك.
استنتاج
FCP هو مقياس حيوي للغاية لموقع الويب الخاص بك. تقدر Google سرعة الصفحة كأحد أهم جوانب تصنيف صفحتك. يرى المستخدمون سرعة الصفحة كأحد العوامل الحاسمة فيما إذا كانوا يبقون على موقعك أم لا. يمكن أن يؤدي الحصول على First Contentful Paint إلى إبقاء المستخدمين على موقعك ومساعدتهم في العثور على موقع الويب الخاص بك في المقام الأول. على الرغم من أن FCP غالبًا ما يكون مقياسًا صعبًا لفهمه وفهمه ، فإن أي تحسينات على تقليل وقت FCP ستزيد UX وتختصر الثواني الثمينة والميلي ثانية من أوقات التحميل الإجمالية لموقعك.
ما هي أفضل استراتيجياتك للحصول على First Contentful Paint؟
مقالة مميزة صورة من فيكتوريا الأناناس / shutterstock.com
دورة كيفية إنشاء موقع على شبكة الإنترنت بدون مهارات برمجة
في هذا البرنامج التعليمي “كيفية إنشاء موقع ويب” ، سأوضح لك كيفية إنشاء موقع ويب جميل مكون من 5 صفحات خطوة بخطوة باستخدام WordPress وموضوع Divi القوي و Divi Visual Builder
ملاحظة المحرر: ظهرت نسخة من هذه المقالة في الأصل على elegantthemes .
