كيفية تحسين أول رسم مضمون في WordPress باستخدام البرنامج المساعد

عندما يتعلق الأمر بأداء WordPress ، فإن أحد المقاييس الرئيسية هو First Contentful Paint (FCP). يقيس هذا الوقت الذي يستغرقه عرض المحتوى الأول على الصفحة ، وهو مؤشر جيد على مدى سرعة تحميل الصفحة. هناك عدد من الطرق لتحسين FCP ، ولكن من أسهل الطرق استخدام البرنامج المساعد. في هذه المقالة ، سنوضح لك كيفية تحسين First Contentful Paint في WordPress باستخدام مكون إضافي. نوصي باستخدام المكون الإضافي W3 Total Cache. يحتوي هذا المكون الإضافي على عدد من الميزات التي يمكن أن تساعد في تحسين FCP ، بما في ذلك تكامل شبكة توصيل المحتوى (CDN) وتقليله. بمجرد تثبيت المكون الإضافي وتنشيطه ، ستحتاج إلى تكوينه. نوصي باستخدام الإعدادات التالية: تمكين التخزين المؤقت: سيؤدي هذا إلى تخزين صفحاتك ومنشوراتك مؤقتًا حتى يمكن تقديمها بسرعة أكبر. تمكين CDN: سيؤدي ذلك إلى دمج CDN مع موقعك ، مما قد يؤدي إلى تحسين FCP. تمكين التصغير: سيؤدي ذلك إلى تصغير ملفات HTML و CSS وجافا سكريبت ، مما قد يقلل من حجم صفحاتك ويحسن FCP. بمجرد حفظ التغييرات ، يجب أن ترى تحسنًا ملحوظًا في FCP.

من المستحيل قياس أداء موقع ويب على مقياسين: وقت التحميل ووقت النقر. عندما يزور المستخدم موقعًا على الويب ، يعرض First Contentful Paint (FCP) توضيحًا للمدة التي يستغرقها العنصر الأول بناءً على صورة أو نص لكي يظهر. في المتوسط ​​، يتم قياس الوقت الذي يستغرقه تحميل كل عنصر في صفحة واحدة بوحدة LCP. في هذه المقالة ، سوف نستعرض ما هو FCP وكيفية قياس كل منهما. PageSpeed ​​Insights هي أداة رائعة تتيح لك اختبار أداء موقع الويب الخاص بك والحصول على توصيات حول كيفية تحسينه. عند تمكين التخزين المؤقت للموقع ، لن تضطر بعد ذلك إلى إعادة تحميل جميع عناصر موقعك في كل مرة يزورها الزائر. نظرًا لأن ملفات الوسائط هي من بين أكبر العناصر على أي موقع ويب ، يمكن أن يكون الضغط مفيدًا في تقليل أوقات التحميل.

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

كيف يمكنك تحسين أول رسم مضمون في منارة؟

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

مقياس First Contentful Paint هو أحد المقاييس الأساسية في Lighthouse. يتم عرض الوقت المستغرق لتصيير عنصر DOM الذي يدركه الإنسان في هذا العرض التوضيحي. على الصفحة ، قد يكون هذا صورة أو كتلة نصية أو عنصر قماش غير أبيض. يمكن تحسين المقياس عن طريق تحسين جميع خطواته قبل التنفيذ. عندما نحظر الأحداث أثناء تحميل الصفحة ، قد لا نتمكن من إكمال عملية First Contentful Paint في الوقت المحدد. الوقت إلى البايت الأول (TTFB) هو مقدار الوقت الذي يستغرقه الخادم في تلقي البيانات الأولى التي تم إنشاؤها بواسطة موقع ويب. كل هذا يجب أن يحدث قبل أن يكون لشفرة html في TTFB تأثير سلبي عليها.

كتوضيح ، حاولت إبطاء تنفيذ التعليمات البرمجية بمقدار 1500 ميلي ثانية. أسفرت أحدث تدقيقاتنا في Lighthouse عن 35 درجة إجمالية بالإضافة إلى 8.6 FCP. يستغرق الطلب الأصلي الآن 0.6 ثانية لإكماله ، وتحول FCP من الطابع الزمني 4831 مللي ثانية إلى الطابع الزمني 3492 مللي ثانية. مورد حظر العرض هو ملف يمنع عرض الصفحة حتى يتم تحميلها. إن أبسط حل هو استخدام علامة الإغلاق الموجودة أسفلها. في هذا المثال ، استخدمت Critical CSS NPM لإنشاء CSS مهمة. الآن ، انسخ CSS والصقه في قسم> head> باستخدام علامة> style>.

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

نصائح جوجل لتحسين أول وقت رسم ذي مغزى

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

أول محتوى مضمون في Google الرسام

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

يقيس اختبار التدفق السريع (FFT) المدة التي يستغرقها المتصفح لعرض الجزء الأول من صفحة DOM بعد انتقال المستخدم إليها. باستخدام بيانات من أرشيف HTTP ، يمكنك حساب درجة FCP الخاصة بك ، والتي تستند إلى فرق الوقت والوقت بين FCP لصفحتك ووقت مواقع الويب الحقيقية. على سبيل المثال ، إذا كان أحد المواقع يعمل في أعلى 90٪ من السوق ، فإنه يعرض FCP في 1.2 ثانية.

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

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

أول إصلاح مضمون للطلاء

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

يعد استخدام First Contentful Paint (FCP) لمراقبة سرعة تحميل الصفحة طريقة رائعة لمعرفة مدى سرعة تحميل الصفحة. يجب أن يكون Google وزائرك راضين عن جودة Final Cut Pro (FCP). إذا لم ينقر الزائر على صفحة أخرى بعد رؤية الصفحة على الشاشة ، فكلما طال ظهور الصفحة. يمكن عرض صفحة HTML في أقل من ثانية باستخدام First Contentful Paint (FCP). عند بدء بايت ، من الأفضل أن تبدأ بسرعة أقل من 600 مللي ثانية. الحلول المذكورة أدناه هي بعض الطرق التي أحسن بها بشكل متكرر FCP. قبل إجراء أي تغييرات على موقع الويب الخاص بك ، استشر أحد خبراء PageSpeed.

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

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

هناك أيضًا احتمال أن يؤدي ذلك إلى حظر عرض الصفحة ، ولكنه عادةً ما يكون موجودًا بالفعل على الشاشة. في إعلان CSS font-face ، يمكنك تحديد ترتيب مفضل لخط الويب الخاص بك. لا يعرض هذا النوع من الخطوط عادةً النص حتى يتم تحميل الخط. بدلاً من عرض النص بالخط الافتراضي للمتصفح ، يمكنك تبديله بخط مختلف باستخدام أداة عرض الخط: أداة التبديل.

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

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

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

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

إذا كنت تريد أن يعمل موقع الويب الخاص بك في أفضل حالاته ، فيجب عليك تحسين JavaScript الخاص به. للاستفادة من هذه التقنية ، يجب عليك استخدام مجموعة متنوعة من CSS الحرجة اعتمادًا على نوع الجهاز. يحتوي Web.dev على مقالة رائعة حول تقسيم التعليمات البرمجية. التخزين المؤقت ، بدوره ، يساهم في أداء الويب. عمال الخدمة مسؤولون عن تقليل حجم حمولة HTML من خلال تجنب تكرار العناصر المشتركة. يمكن تخزين HTML الثابت مؤقتًا ، مما يؤدي إلى تقليل TTFB بشكل كبير. عند استخدام HTTP / 2 Server Push و link rel = preload ، يمكنك تسريع تسليم الموارد الهامة.

الخطوة التالية هي تحديد أن المستعرض يجب أن يبدأ عملية إنشاء اتصال بمجال على الفور. هذا يقلل من مقدار الوقت الذي تقضيه في رحلات الذهاب والعودة إلى المجالات المهمة. عند الاتصال ، كن حذرا جدا. إذا كان موضوعك منتفخًا ، فقد تواجه زيادة كبيرة في أوقات التحميل وقد تتأثر "حيوية الويب الأساسية". بعد اختيار مكون إضافي ، ابحث عنه بعناية وراقب أدائه. إذا لم تكن لديك أية مخاوف بشأن عملية خطاب الاعتماد ، فمن الجيد البحث عن المشكلات في مجالك بشكل منتظم. تعتبر Google الصفحات المهمة مرة واحدة على الأقل شهريًا استنادًا إلى Core Web Vitals التي تلقتها لمدة 28 يومًا.

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

يختلف First Contentful Paint عن Core Web Vitals Largest Contentful Paint (LCP) لأن LCP يأخذ في الاعتبار الوقت الذي يستغرقه عنصر كبير على موقع الويب ليصبح مرئيًا. يجب تحميل العنصر الأول أولاً في حالة FCP ؛ ومع ذلك ، فإن العنصر الأول ليس بالضرورة هو العنصر الأكبر.

لماذا Fcp و Lcp مهمان لموقعك على الويب

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

أول صاروخ Wp Paintful

يقيس First Contentful Paint (FCP) الوقت من بدء تحميل الصفحة إلى الوقت الذي يعرض فيه المستعرض الجزء الأول من المحتوى من تلك الصفحة. يعد هذا مقياسًا مهمًا لقياس تجربة المستخدم لموقع الويب ، لأنه يمثل المدة التي يتعين على المستخدم انتظارها قبل أن يتمكن من رؤية أي محتوى على الصفحة. WP Rocket هو مكون إضافي لبرنامج WordPress يدعي تسريع موقع الويب الخاص بك عن طريق تحسين ملفات HTML و CSS وجافا سكريبت. كما يأتي مزودًا بميزات مثل التحميل المسبق لذاكرة التخزين المؤقت ، والتحميل البطيء ، والتصغير.

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

يوفر الخادم أداءً أفضل من خلال عرض المحتوى بشكل أسرع وتجنب رحلات الشبكة غير الضرورية. مع درجة 10٪ في Lighthouse 9.1 ، ستكون قد وصلت إلى النقطة التي تحتاج فيها إلى تجربة مثالية للوصول إلى الحد الأقصى. لم يتم تضمين مقدار الوقت الذي يستغرقه الخادم الخاص بك في معالجة البيانات من مزود خدمة الإنترنت إلى مركز البيانات في هذا الشكل. يمكن استخدام DevTools لتسجيل أدائك لـ FCP باستخدام واجهة برمجة تطبيقات Paint Timing.

كيفية تحسين النتيجة الأولى لطلاء المحتوى لموقعك.

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