كيفية التخلص من موارد حظر العرض

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

يمكن أن يساعد تقليلها في تحميل صفحتك بشكل أسرع وتحسين "حيوية الويب الأساسية لصفحتك" بشكل ملحوظ.

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

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

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

في الواقع ، تشمل الفوائد الكاملة للقيام بهذه العملية ما يلي:

• سرعة أكبر للصفحة.
• تتطلب Google موارد أقل لتحميل صفحتك.
• الحد من المشاكل الناجمة عن سخام التعليمات البرمجية.
• حجم ملف إجمالي أصغر لـ DOM (نموذج كائن المستند).
• عدد أقل من ملفات JavaScript و CSS للتنزيل.
• نشر أفضل وأسرع عبر مجموعة من الأنظمة الأساسية والأجهزة.
• تحسين تفاعل المستخدم على الهاتف المحمول.
• تحسين الأداء بشكل عام.

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

لماذا يجب عليك تحديد موارد حظر العرض؟

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

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

في عام 2021 ، كان متوسط ​​الوقت المستغرق لعرض صفحة ويب للجوال بالكامل 22 ثانية. في عام 2018 ، كانت 15 ثانية.

من الواضح أن هذا رقم أعلى بكثير من الوقت الذي توصي به Google وهو ثانيتين إلى ثلاث ثوانٍ. كما أنها أعلى بكثير مما كانت عليه من قبل.

ما الذي يمكن أن يسبب هذه المشكلات مع موارد حظر العرض؟

ما الذي يدفع هذه الزيادة في سرعة عرض الصفحة الإجمالية؟

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

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

لقطة شاشة من Web Almanac ، نوفمبر 2022

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

بالإضافة إلى ذلك ، تميل خدمات Google الخاصة إلى أن يكون لها تأثير كبير على عرض الوقت ، مثل Google Analytics أو استخدام Facebook pixel لجهة خارجية لأغراض التتبع.

إن الرغبة في الاعتماد على هذه التقنيات ليست بالضرورة رهيبة من منظور التسويق.

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

الحل المثالي هو ضمان تحميل صفحتك لتفاعل المستخدم بأسرع ما يمكن.

من المحتمل أيضًا أن تكون ممارسات تطوير الويب السيئة المستخدمة من قبل مطوري الويب هي السبب في ذلك.

في كلتا الحالتين ، هذا شيء في كل مشروع موقع ويب يجب معالجته كجزء من عمليات تدقيق Core Web Vitals.

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

بدلاً من ذلك ، يتعلق الأمر بالتجربة العامة للصفحة كما تم قياسها من خلال إطار عمل تجربة صفحة Google أو Core Web Vitals.

هذا هو سبب رغبتك في العمل على تحسين سرعة صفحتك وتحسينها لمسار العرض الحرج عبر DOM أو نموذج كائن المستند.

ما هو مسار العرض الحرج؟

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

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

يعني تحسين مسار العرض الحرج التأكد من تحسين أداء العرض على العديد من الأجهزة المختلفة.

يتم تحقيق ذلك عن طريق تحسين مسار العرض الحرج للوصول إلى الطلاء الأول في أسرع وقت ممكن.

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

لقطة شاشة من web.dev ، نوفمبر 2022

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

كيف يعمل مسار العرض الحرج؟

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

لقطة شاشة من Medium ، نوفمبر 2022

يحتاج المستعرض بشكل أساسي إلى طلب واستلام وتحليل جميع ملفات HTML و CSS (بالإضافة إلى بعض الأعمال الإضافية) قبل أن يبدأ في عرض أي محتوى مرئي.

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

فيما يلي مثال على كيفية تجربة المستخدمين لكيفية تحميل الصفحة وفقًا للمراحل المختلفة لعملية تحميل الصفحة:

لقطة شاشة من web.dev ، نوفمبر 2022

وبالتالي ، يمكن أن يؤدي تحسين مسار العرض الحرج إلى تحسين تجربة الصفحة الإجمالية ، والتي يمكن أن تساعد في تحسين الأداء في مقاييس Core Web Vitals.

كيف يمكنني تحسين مسار العرض الحرج؟

لتحسين مسار العرض الحرج ، يجب عليك تحليل موارد حظر العرض.

قد يؤدي أي من موارد حظر العرض إلى حظر العرض الأولي للصفحة والتأثير سلبًا على نتائج Core Web Vitals نتيجة لذلك.

يتضمن هذا عملية تحسين:

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

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

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

وتشمل هذه العملية:

• عناصر الصفحة مسبقة التحميل.
• تضمين الأنماط النقدية.
• إرجاء تحميل ملفات جافا سكريبت.
• تلميحات مبكرة.

عناصر الصفحة التي يتم تحميلها مسبقًا

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

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

كيف تحصل حول هذا؟ باستخدام رابط التحميل المسبق لتنزيل الملفات الهامة بشكل غير متزامن والتي تحظر عرض الصفحة (تمت مناقشتها لاحقًا في هذه المقالة).

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

يمكنك تحميل CSS أو JS أو Fonts أو Images مسبقًا. فيما يلي أمثلة على كيفية تحميلها مسبقًا:

تحميل JavaScript مسبقًا

 <link rel = "preload" as = "script" href = "itical.js ">

التحميل المسبق لـ CSS

 <link rel = "preload" href = "style.css" as = "style" />

الخطوط التحميل المسبق

 <link rel = "preload" href = "Fonts / webfont.woff2" as = "font" type = "font / woff2" crossorigin />

تحميل الصور مسبقا

 <link rel = preload href = "cat.png" as = image image>

هذا يساعد على تسريع عملية الصفحة. ومع ذلك ، هذه ليست طريقة مثالية.

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

للأسف ، هذا ليس محاولة واقعية لمتابعة.

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

تضمين الأنماط الحرجة

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

كحد أدنى ، يتطلب هذا عادةً:

• أي تصريحات الخط.
• أي CSS خاص بالتخطيط.
• جميع قواعد نمط CSS لعناصر DOM (نموذج كائن المستند) في الجزء العلوي.

باستخدام مثالنا السابق للصفحة التي يتم فيها تحميل جميع الموارد في وقت واحد ، فإن تضمين الأنماط المهمة يتضمن استخدام التعليمات البرمجية داخل علامة HTML <head> نفسها.

إذا قمت بالتحقق ، على سبيل المثال ، من شفرة مصدر google.com ، فسترى أنه مضمّن CSS مهم في قسم <head> في HTML.

لقطة شاشة من شفرة مصدر Google.com ، تشرين الثاني (نوفمبر) 2022

هناك العديد من الأدوات التي يمكن أن تساعد في استخراج CSS الهامة.

• Criticalcss.com.
• حرج.
• البرنامج الإضافي HTML Critical Webpack.

إرجاء تحميل ملفات جافا سكريبت

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

مثال على كيفية تأجيل ملف JavaScript:

 <script defer src = "script.js"> </script>

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

ثانيًا ، إذا لم تكن حريصًا ، عن طريق إرجاء تحميل ملفات JavaScript ، فمن المحتمل أن تقدم مشكلات في تفاعل الصفحة (التفاعل مع مقياس Core Web Vitals التالي).

رقم ثلاثة هو أنه يمكنك أيضًا تقديم مشاكل في كيفية عمل الموقع بشكل عام.

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

من خلال القيام بذلك ، يمكنك التأثير بشكل كبير على سرعة صفحتك وكيفية رؤية Google لموقعك.

ومع ذلك ، فإن القلق الآخر هو عند استخدام المكونات الإضافية مثل Nitro لتأجيل الملفات الهامة مثل CSS و JavaScript.

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

ماذا يعني هذا؟ هذا يعني أن محرك بحث Google لا يمكنه رؤية المستند بالكامل كما هو مُعد للعرض. يشبه هذا حظر ملفات CSS وملفات جافا سكريبت باستخدام ملف robots.txt ، والذي تحتاجه Google لتحديد ما إذا كان موقعك متوافقًا مع الجوّال.

تقول صفحة Google Developer الرسمية هذا ، كما هو مذكور في مكان آخر:

"للحصول على أفضل عرض وفهرسة ، اسمح دائمًا لبرنامج Googlebot بالوصول إلى ملفات جافا سكريبت و CSS وملفات الصور التي يستخدمها موقع الويب الخاص بك حتى يتمكن Googlebot من رؤية موقعك كمستخدم عادي.

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

إذا كنت تؤجل ملفات CSS و JavaScript المهمة لأسباب تحسين محركات البحث ، طالما أنك تضمن أن Google يمكنه رؤية هذه الملفات عند تحميل الصفحة ، فلا يجب أن تواجه أي مشكلات كبيرة تتعلق بكيفية رؤية Google لموقعك.

استخدام التلميحات المبكرة لتحسين الخادم بشكل أفضل

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

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

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

عند حدوث وقت الاستجابة هذا ، يمكنك مواجهة مواقف قد يستغرق فيها الموقع بضع ثوانٍ قبل الظهور في نافذة المتصفح.

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

فيما يلي مثال لما يحدث عندما لا يستجيب خادمك بشكل صحيح ويستغرق وقتًا طويلاً لمعالجة موارد معينة:

لقطة شاشة من developer.chrome.com ، نوفمبر 2022

لذا ، كيف تعمل التلميحات المبكرة؟

وفقًا لدليل مطوري Google Chrome ، "التلميحات المبكرة هي رمز حالة HTTP (103 تلميحات مبكرة) والتي تُستخدم لإرسال استجابة HTTP أولية دقيقة قبل الاستجابة النهائية."

ماذا يحقق هذا؟

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

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

التلميحات المبكرة هي شيء "يساعد المتصفح على طول الطريق" ويسرع وقت تفكير الخادم من خلال العمل على هذا التحميل مقدمًا.

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

أدوات لمساعدتك على تحسين مسار العرض الحرج الخاص بك

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

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

يتضمن ما يلي قائمة بالأدوات التي يمكنك استخدامها للمساعدة في تحسين مسار العرض الحرج الخاص بك لتحقيق النجاح:

• البرنامج الإضافي الهام لـ CSS : تتيح لك هذه الأداة المفيدة إنشاء CSS الهامة التي يحتاجها موقعك. ما عليك سوى إضافة عنوان URL الخاص بك ، والنقر فوق إنشاء ، وستذهب بعيدًا.
• Autoptimize Page Speed ​​Plugin: هذا المكون الإضافي المحدد هو مكون إضافي آخر لسرعة الصفحة يسمح لك أيضًا بتأجيل الملفات الهامة. بالإضافة إلى ذلك ، فإنه يساعد على حقن CSS المضمنة في رأس الصفحة ، وإرجاء البرامج النصية إلى التذييل ، وتقليل ملفات HTML الخاصة بك.
• WP Rocket Page Speed ​​Plugin: يعد هذا المكون الإضافي لسرعة الصفحة أحد أقوى المكونات الإضافية للتخزين المؤقت. بعد التثبيت ، يتيح لك هذا المكون الإضافي الخاص الاستفادة من التخزين المؤقت للصفحة وضغط GZIP والتحميل المسبق لذاكرة التخزين المؤقت والتخزين المؤقت للمتصفح.
• WP-Optimize: هذا مكون إضافي لبرنامج WordPress يتيح لك القيام بالعديد من الأشياء للمساعدة في تحسين موقعك بشكل أفضل لأوقات تحميل سريعة. وهي تشمل تحسين قاعدة البيانات الخاصة بك ، وضغط الصور ، والتخزين المؤقت لصفحاتك ، إلى جانب تصغير ملفات CSS و JavaScript وعدم مزامنتها.

يرجى ملاحظة: هذا المؤلف ليس لديه أي تحيز مالي مع أي من هذه الأدوات.

لماذا يجب علي الاهتمام؟

تشير بيانات سلوك مستخدم Google إلى أن معظم المستخدمين يغادرون موقعًا بطيئًا بعد حوالي ثلاث ثوانٍ.

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

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

ستنفذ Google تجربة الصفحة على سطح المكتب في عام 2022 ، وستبدأ طرح تجربة صفحة سطح المكتب في فبراير وتنتهي في مارس.

وفقًا لـ Google ، سيتم الآن ربط نفس مقاييس Core Web Vitals الثلاثة (LCP و FID و CLS) ، جنبًا إلى جنب مع العتبات المرتبطة بها ، بترتيب سطح المكتب.

أيضًا ، تعمل Google على مقياس جديد تمامًا ، وربما تجريبيًا لأهمية الويب الأساسية ، مع مراعاة الحد الأقصى لمدة الحدث والمدة الإجمالية للحدث.

شرحهم لهذه العوامل التي يفكرون فيها هو:

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

مع وجود العديد من الدراسات التي تربط التخفيضات في أوقات تحميل الصفحة بالتحسينات في مؤشرات الأداء الرئيسية القيمة (التحويلات ، ومعدل الارتداد ، والوقت المستغرق في الموقع) ، أصبح تحسين وقت استجابة الموقع هدفًا تجاريًا يحتل الأولوية بالنسبة للعديد من المؤسسات.

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

تساعدنا القدرة على تدقيق الموقع وتحليل النتائج وتحديد مجالات التحسين على العمل مع المطورين لتحسين الأداء وترجمة النتائج إلى أصحاب المصلحة الرئيسيين.

أهداف تحسين موارد حظر العرض

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

يجب عدم ترتيب أولويات أي موارد تمنع العرض ، وأي موارد تمنع عرض الصفحة بسرعة.

ستساهم كل نقطة من نقاط التحسين في التحسين العام لسرعة صفحتك وتجربة الصفحة ونتائج Core Web Vitals.

لماذا تحسين CSS لحظر العرض؟

قالت Google عدة مرات أن الترميز ليس بالضرورة مهمًا للترتيب.

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

عندما يتعلق الأمر بملفات CSS ، فإنها تعتبر موارد تمنع العرض.

لماذا هذا؟

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

إذا كان المستعرض يعرض محتوى غير مصمم بشكل صحيح ، فكل ما ستحصل عليه هو مجموعة من النصوص والروابط العادية التي لم يتم تصميمها حتى على غرار.

هذا يعني أن صفحتك ستكون في الأساس "عارية" ، لعدم وجود مصطلح أفضل.

ستؤدي إزالة أنماط CSS إلى صفحة غير قابلة للاستخدام حرفيًا.

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

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

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

يمكن أن تختلف أيضًا ، والتي يمكن أن تعتمد على الحجم ، إلى جانب الكمية ، من ملفات CSS هذه.

تُظهر شجرة العرض التالية مثالاً على متصفح يعرض جميع الملفات مع CSS داخل DOM:

لقطة شاشة من Medium ، نوفمبر 2022

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

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

تنص توصية Google الرسمية على ما يلي:

"CSS هو مورد لحظر العرض. احصل عليه للعميل في أقرب وقت ممكن وبأسرع وقت ممكن لتحسين وقت العرض الأول ".

يجب تحويل HTML إلى شيء يمكن للمتصفح العمل معه: DOM. ملفات CSS هي نفسها. يجب تحويل هذا إلى CSSOM.

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

لماذا تحسين JavaScript حظر العرض؟

هل تعلم أن تحميل JavaScript ليس مطلوبًا دائمًا؟

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

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

لكن التحذير من هذا هو: يتم ترميز معظم المواقع الحديثة بطريقة تجعل JavaScript (على سبيل المثال ، إطار عمل Bootstrap JS) مطلوبًا لتقديم تجربة الجزء المرئي من الصفحة.

ولكن إذا عثر المستعرض على ملفات JavaScript قبل العرض الأول للصفحة ، فيمكن إيقاف عملية العرض حتى وقت لاحق وبعد تنفيذ ملفات JavaScript بالكامل.

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

أحد الأمثلة على ذلك هو ما إذا كانت هناك وظائف JS مثل التنبيه المدمج في HTML. قد يؤدي هذا إلى إيقاف عرض الصفحة حتى بعد تنفيذ كود JavaScript هذا.

تمتلك JavaScript القوة الوحيدة لتعديل كل من أنماط HTML و CSS ، لذلك هذا أمر منطقي.

قد يتأخر تحليل وتنفيذ JavaScript بسبب حقيقة أن JavaScript يمكن أن يغير محتوى الصفحة بالكامل. يتم تضمين هذا التأخير في المتصفح افتراضيًا - لمثل هذا السيناريو "فقط في حالة".

توصية Google الرسمية:

"يمكن لجافا سكريبت أيضًا حظر إنشاء DOM والتأخير عند عرض الصفحة. لتقديم الأداء الأمثل ... تخلص من أي جافا سكريبت غير ضروري من مسار العرض الحرج. "

كيفية تحديد موارد حظر العرض

لتحديد مسار العرض الحرج وتحليل الموارد الهامة:

• قم بإجراء اختبار باستخدام webpagetest.org وانقر على صورة "الشلال".
• ركز على جميع الموارد المطلوبة والتي تم تنزيلها قبل السطر الأخضر "Start Render".

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

لقطة شاشة من WebPageTest ، نوفمبر 2022

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

في المثال الخاص بي ، لاحظت بعض طلبات JavaScript التي قد تكون حرجة.

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

لقطة شاشة من WebPageTest ، نوفمبر 2022

هناك أيضًا طرق أخرى لتحسين هذه الموارد.

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

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

يمكن أن يؤدي تحسين تقنيات الترميز أيضًا إلى تحميل ملف أسرع ويؤدي إلى تأثير أقل على سرعة عرض صفحتك.

كيفية تقليل عناصر منع العرض على الصفحة

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

هناك العديد من الحلول لهذه المشكلة ، من تأجيل ملفات JavaScript و CSS إلى تقليل التأثير الذي يمكن أن تحدثه CSS.

أحد الحلول الممكنة هو عدم إضافة CSS باستخدام قاعدةimport.

تأكد من عدم إضافة CSS باستخدام قاعدةImport

من منظور الأداء ، على الرغم من أنimport يبدو أنه يحافظ على نظافة ملف HTML الخاص بك ، إلا أنه يمكن أن يخلق مشكلات في الأداء.

سيؤدي إعلانimport في الواقع إلى قيام المتصفح بمعالجة ملف CSS بشكل أبطأ. لماذا ا؟ لأنه يقوم أيضًا بتنزيل جميع الملفات المستوردة.

سيتم حظر العرض تمامًا حتى تكتمل العملية.

في الواقع ، فإن أفضل حل هو استخدام الطريقة القياسية لتضمين ورقة أنماط CSS باستخدام إعلان <link rel = ”stylesheet”> في HTML.

تصغير ملفات CSS و JavaScript

إذا كنت تستخدم WordPress ، فإن استخدام مكون إضافي لتقليل ملفات CSS و JavaScript الخاصة بك يمكن أن يكون له تأثير هائل.

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

أيضًا ، حتى إذا لم تكن تستخدم WordPress ، يمكنك استخدام خدمات مطور مؤهل جيدًا لإكمال العملية يدويًا.

سيستغرق هذا وقتًا أطول ولكنه يستحق ذلك.

عادةً ما تكون الملفات المصغرة أخف بكثير من نظيراتها السابقة ، مما يعني أن العرض الأولي سيكتمل بشكل أسرع.

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

استخدم خطوط النظام بدلاً من خطوط الطرف الثالث

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

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

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

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

في هذه الحالة ، يمكن أن تؤدي إزالة كل هذه الملفات غير الضرورية إلى تحسين موارد حظر العرض بشكل كبير والمساهمة في التحسين العام في Core Web Vitals.

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

أيضًا ، من المحتمل أن تكون هناك خطوط نظام قد تكون مشابهة جدًا لخطوط الجهات الخارجية التي تستخدمها.

ومع ذلك ، إذا كان يجب عليك استخدام خطوط الجهات الخارجية بشكل مطلق ، فهناك شيئان تريد القيام بهما للمساعدة في التخفيف من المشكلات المتعلقة بجوانب معينة من خطوط الجهات الخارجية.

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

المشكلة الأخرى عند استخدام خطوط الجهات الخارجية هي أن الخطوط غير مرئية حتى يتم تحميل الخط نفسه ، مما يؤثر سلبًا على Core Web Vitals وتجربة المستخدم. لتجنب ذلك ، يمكنك استخدام font-swap CSS.

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

الطفل الجديد على الكتلة: الخطوط المتغيرة

اعتبارًا من عام 2020 ، أصبحت الخطوط المتغيرة مدعومة على نطاق واسع في معظم المتصفحات. ما هي بالضبط الخطوط المتغيرة؟

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

هناك أيضًا العديد من الفوائد لاستخدام الخطوط المتغيرة ، والتي تشمل:

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

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

تحسين تقنيات الترميز والجمع بين الملفات

إذا كنت تعمل باستخدام الكود بنفسك ، فقد تجد (أو قد لا ... لا أحد يحكم هنا) أن التقنيات أقل من الأمثل.

مثال واحد: أنت تستخدم CSS مضمنة في كل مكان ، وهذا يتسبب في حدوث مشكلات في المعالجة والعرض داخل المتصفح.

الحل السهل هو التأكد من أنك تأخذ كل CSS المضمنة وترميزها بشكل صحيح في ملف ورقة أنماط CSS.

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

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

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

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

يمكن أن يؤدي دمج الملفات أيضًا إلى تحسين الوضع

على سبيل المثال: إذا كان لديك ثمانية أو 10 ملفات جافا سكريبت تساهم جميعها في نفس المهمة ، فيمكنك الاستعانة بمطور يمكنه دمج كل هذه الملفات نيابةً عنك.

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

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

الماخذ الرئيسية

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

• الخطوة 1: الزحف إلى موقعك باستخدام Screaming Frog أو أدوات الزحف الأخرى.
• الخطوة 2: تحديد الصفحات ذات سرعة الصفحة البطيئة.
• الخطوة 2 أ: يمكنك أيضًا استخدام Google Search Console أو Google Analytics لهذا الغرض.
• الخطوة 3: رتب الصفحات ذات الأداء الأدنى الذي تجده في قائمة مرتبة حسب الأولوية.
• الخطوة 4: انزل إلى أسفل عناصر قائمة التحقق أعلاه (يمكنك أيضًا إنشاء جدول بيانات لكل عنصر لكل صفحة إذا كنت تفضل ذلك) ، وابحث عن موارد حظر العرض هذه أو قللها أو أصلحها حسب الحاجة.
• الخطوة 5: شطف وكرر كل صفحة على موقعك.

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

من خلال هذه العملية ، يمكنك أيضًا الاستفادة من الميزة التي ستتمتع بها ، ويمكنك أيضًا تجربة تعزيز من "حيوية الويب الأساسية" من Google.

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

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

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

وهذا يترجم أيضًا إلى تجربة مستخدم أفضل.

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

After all, keeping your site in top shape for prime time is what all of this optimization work is all about!

المزيد من الموارد:

• Advanced Core Web Vitals: A Technical SEO Guide
• Difference Between Search Console CWV Report & PageSpeed Insights
• Core Web Vitals: A Complete Guide

Featured Image: SuperOhMo/Shutterstock