يشير مسار العرض الحرج إلى الخطوات المطلوب تنفيذها إلى أن تبدأ صفحة الويب في العرض في المتصفّح. لعرض الصفحات، تحتاج المتصفحات إلى مستند HTML نفسه بالإضافة إلى جميع الموارد المهمة اللازمة لعرض تلك الوثيقة.
تم توفير مستند HTML إلى المتصفّح من خلال وحدة اعتبارات أداء HTML العامة السابقة. في هذه الوحدة، سنلقي نظرة أكثر على ما يفعله المتصفّح بعد تنزيل مستند HTML لعرض الصفحة.
العرض التدريجي
يتم توزيع الويب بشكل طبيعي. وعلى عكس التطبيقات الأصلية التي تم تثبيتها قبل الاستخدام، لا يمكن أن تعتمد المتصفحات على المواقع الإلكترونية التي تمتلك جميع الموارد اللازمة لعرض الصفحة. لذلك، تكون المتصفحات جيدة جدًا في عرض الصفحات بشكل تدريجي. تشتمل التطبيقات الأصلية عادةً على مرحلة تثبيت، ثم مرحلة تشغيل. ومع ذلك، بالنسبة إلى صفحات الويب وتطبيقات الويب، تكون الخطوط بين هاتين المرحلتين أقل تميزًا، وقد تم تصميم المتصفحات بشكل خاص مع وضع ذلك في الاعتبار.
بعد حصول المتصفِّح على موارد لعرض الصفحة، يبدأ عادةً بفعل ذلك. وبالتالي، يعتمد الاختيار على وقت العرض: متى يكون مبكرًا جدًا؟
إذا كان المتصفّح يُعرض في أقرب وقت ممكن عندما يتضمّن ترميز HTML، ولكن قبل أن يتضمّن أي CSS أو لغة JavaScript ضرورية، ستبدو الصفحة للحظات معطّلة وستتغيّر بشكل كبير بالنسبة إلى العرض النهائي. وهذه تجربة أسوأ من عرض شاشة فارغة في البداية إلى أن يتوافر في المتصفح المزيد من هذه الموارد اللازمة للعرض الأولي الذي يقدم تجربة أفضل للمستخدم.
من ناحية أخرى، إذا كان المتصفِّح ينتظر إتاحة جميع الموارد بدلاً من إجراء أي عرض تسلسلي، سيترك المستخدم في الانتظار لفترة طويلة، وغالبًا ما يحدث بدون داعٍ لذلك إذا كانت الصفحة قابلة للاستخدام في وقت سابق بكثير.
يحتاج المتصفح إلى معرفة الحد الأدنى من الموارد التي يجب أن ينتظرها لتجنب تقديم تجربة معطلة بوضوح. ومن ناحية أخرى، يجب ألا ينتظر المتصفح وقتًا أطول من اللازم قبل تقديم بعض المحتوى إلى المستخدم. يُعرف تسلسل الخطوات التي يتخذها المتصفّح قبل تنفيذ العرض الأولي باسم مسار العرض الحرج.
يمكن أن يساعدك فهم مسار العرض الحرج في تحسين أداء الويب من خلال التأكّد من عدم حظر العرض الأولي للصفحة أكثر من اللازم. ومع ذلك، من المهم أيضًا في الوقت نفسه عدم السماح بعرض المحتوى في وقت مبكّر جدًا من خلال إزالة الموارد اللازمة لعملية العرض الأولية هذه من مسار العرض الحرج.
مسار العرض (الحرج)
يتضمّن مسار العرض الخطوات التالية:
- إنشاء نموذج كائن المستند (DOM) من ملف HTML.
- إنشاء نموذج كائن CSS (CSSOM) من CSS
- تطبيق أي نص JavaScript يغيّر DOM أو CSSOM
- إنشاء شجرة العرض من DOM وCSSOM
- تنفيذ عمليات النمط والتخطيط على الصفحة لمعرفة العناصر التي تتناسب مع مكانها.
- لوِّن وحدات بكسل العناصر في الذاكرة.
- وتركيب وحدات البكسل إذا تداخل أي منها.
- ارسم فعليًا جميع وحدات البكسل الناتجة على الشاشة.
لن يرى المستخدم المحتوى على الشاشة إلا بعد إكمال جميع هذه الخطوات.
وتتمّ عملية العرض هذه عدّة مرات. يستدعي العرض الأولي هذه العملية، ولكن مع توفّر المزيد من الموارد التي تؤثر في عرض الصفحة، سيعيد المتصفح تشغيل هذه العملية، أو ربما أجزاء منها فقط، لتعديل ما يشاهده المستخدم. يركّز مسار العرض الحرج على العملية التي تم توضيحها سابقًا للعرض الأولي، ويعتمد على الموارد الحرجة اللازمة له.
ما هي الموارد المتوفّرة على مسار العرض الحرج؟
يحتاج المتصفّح إلى انتظار تنزيل بعض الموارد المهمة قبل أن يتمكّن من إكمال العرض الأولي. تشمل هذه المراجع ما يلي:
- جزء من HTML.
- حظر عرض CSS في العنصر
<head> - حظر عرض JavaScript في العنصر
<head>
والنقطة الأساسية هي أن المتصفح يعالج HTML بطريقة تدفق. بمجرد أن يحصل المتصفح على أي جزء من HTML للصفحة، يبدأ المتصفح في معالجتها. ويمكن للمتصفّح عندها، وغالبًا ما يختار ذلك، أن يقرّر عرضها قبل أن يتلقّى بقية محتوى HTML الخاص بالصفحة.
والأهم من ذلك، لن ينتظر المتصفّح عادةً ما يلي أثناء العرض الأوّلي:
- تنسيق HTML بالكامل.
- الخطوط
- الصور
- رمز JavaScript لا يمنع العرض خارج العنصر
<head>(على سبيل المثال، عناصر<script>الموضوعة في نهاية رمز HTML) - محتوى CSS الذي لا يحظر العرض خارج العنصر
<head>أو CSS الذي يتضمّن قيمة سمةmediaلا تنطبق على إطار العرض الحالي
غالبًا ما يعتبر المتصفّح الخطوط والصور على أنّها محتوى يجب ملؤه أثناء عمليات عرض الصفحات اللاحقة، وبالتالي لا تحتاج إلى إيقاف العرض الأولي. مع ذلك، قد يعني ذلك أنّه يتم ترك مناطق من المساحة الفارغة في العرض الأولي بينما يكون النص مخفيًا في انتظار الخطوط، أو إلى أن تتوفّر الصور. والأسوأ من ذلك هو عندما لا يتم حجز مساحة كافية لأنواع معيّنة من المحتوى، وخصوصًا عند عدم توفير أبعاد الصورة في HTML، قد يتغيّر تنسيق الصفحة عند تحميل هذا المحتوى لاحقًا. يُقاس هذا الجانب من تجربة المستخدم باستخدام مقياس متغيّرات التصميم التراكمية (CLS).
يُعد العنصر <head> عاملاً أساسيًا لمعالجة مسار العرض الحرج. لدرجة أنّ القسم التالي سيتناولها ببعض التفاصيل. إنّ تحسين محتوى عنصر <head> هو جانب رئيسي من جوانب أداء الويب. لفهم مسار العرض الحرج في الوقت الحالي، ما عليك سوى معرفة أنّ العنصر <head>
يحتوي على بيانات وصفية حول الصفحة ومواردها، ولكن لا يتضمّن أي محتوى فعلي يمكن للمستخدم مشاهدته. ويتم تضمين المحتوى المرئي داخل عنصر <body>
الذي يلي العنصر <head>. قبل أن يتمكن المتصفح من عرض أي
محتوى، يحتاج كل من المحتوى إلى عرضه بالإضافة إلى البيانات الوصفية حول كيفية عرضه.
ومع ذلك، لا تكون جميع الموارد المشار إليها في العنصر <head> ضرورية تمامًا للعرض الأولي للصفحة، ولذلك لا ينتظر المتصفح سوى الموارد تلك. لتحديد الموارد التي تقع في مسار العرض الحرج، يجب فهم لغة CSS وJavaScript التي تحظر العرض والمحلِّل.
موارد حظر العرض
يتم اعتبار بعض الموارد بالغة الأهمية لدرجة أن المتصفح يوقف عرض الصفحة مؤقتًا إلى أن يعالج هذه الموارد. تندرج CSS ضمن هذه الفئة تلقائيًا.
عندما يرى المتصفّح محتوى CSS، سواء كان CSS مضمّنًا في عنصر <style> أو
موردًا تمت الإشارة إليه خارجيًا والذي تم تحديده بواسطة عنصر <link rel=stylesheet href="...">، يتجنّب المتصفّح عرض أي محتوى إضافي إلى أن يكتمل
تنزيل ومعالجة CSS تلك.
إنّ عرض حظر الموارد لا يعني بالضرورة أنّه سيمنع المتصفّح من تنفيذ أي إجراء آخر. وتحاول المتصفحات أن تكون فعّالة قدر الإمكان، لذا عندما يرى المتصفّح أنّه يحتاج إلى تنزيل أحد موارد CSS، سيطلبه ويوقف العرض مؤقتًا، ولكنه ستواصل معالجة باقي محتوى HTML والبحث عن إجراءات أخرى لتنفيذها.
يتم استخدام موارد حظر العرض، مثل CSS، لحظر عرض الصفحة بشكل كامل عند اكتشافها. وهذا يعني أن تحديد ما إذا كانت بعض صفحات CSS تحظر العرض أم لا
على ما إذا كان المتصفّح قد اكتشفها. تحظر بعض المتصفحات (Firefox
في البداية والآن Chrome) عرض المحتوى أسفل مورد حظر العرض فقط. ويعني هذا أنّه بالنسبة إلى المسار الحرج لحظر العرض،
نهتم عادةً بالموارد التي تحظر العرض في <head>، لأنّها تحظر عرض الصفحة بأكملها بشكل فعّال.
أما الابتكارات الحديثة، فهي السمة blocking=render التي تمت إضافتها إلى الإصدار 105 من Chrome. ويتيح ذلك للمطوّرين وضع علامة بشكل صريح على عنصر <link> أو <script> أو
<style> للإشارة إلى أنّه يمنع العرض إلى أن تتم معالجة العنصر، مع السماح للمحلل اللغوي بمواصلة معالجة المستند في الوقت الحالي.
موارد حظر المحلل اللغوي
أما موارد حظر المحلل اللغوي، فهي تلك الموارد التي تمنع المتصفح من البحث عن إجراءات أخرى للقيام بها من خلال الاستمرار في تحليل ترميز HTML. تعمل لغة JavaScript تلقائيًا على حظر المحلل اللغوي (ما لم يتم وضع علامة غير متزامنة أو مؤجلة على وجه التحديد)، إذ يمكن لJavaScript تغيير نموذج العناصر في المستند (DOM) أو CSSOM عند تنفيذه. وبالتالي، لا يمكن أن يواصل المتصفّح معالجة الموارد الأخرى إلى أن يتعرّف على التأثير الكامل لـ JavaScript المطلوب في HTML للصفحة. وبالتالي تحظر لغة JavaScript المتزامنة المحلل اللغوي.
كما أن موارد حظر المحلل اللغوي تعمل على حظر العرض بشكل فعال أيضًا. نظرًا لأن المحلل اللغوي لا يمكنه متابعة تجاوز مورد حظر التحليل حتى تتم معالجته بالكامل، فلا يمكنه الوصول إلى المحتوى وعرضه بعده. ويمكن للمتصفح عرض أي ترميز HTML تم استلامه حتى الآن أثناء انتظاره، ولكن عندما يتعلق الأمر بمسار العرض الحرج، يعني ذلك أنّ أي موارد لحظر المحلل اللغوي في <head> تعني فعليًا أنّه سيتم حظر عرض كل محتوى الصفحة.
قد يؤدي حظر برنامج التحليل اللغوي إلى تحقيق تكلفة عالية جدًا، أكثر بكثير من مجرد حظر العرض. ولهذا السبب، ستحاول المتصفحات خفض هذه التكلفة من خلال استخدام محلّل HTML ثانوي يُعرف باسم أداة فحص التحميل المسبق لتنزيل الموارد القادمة أثناء حظر محلّل HTML الأساسي. على الرغم من أنّ تحليل HTML ليس بجودة تحليل HTML الفعلي، فهو يسمح على الأقل لوظائف الشبكة في المتصفح بالعمل قبل المحلل اللغوي المحظور، ما يعني أنه لن يكون من غير المرجح حظره مرة أخرى في المستقبل.
تحديد موارد الحظر
تحدِّد العديد من أدوات تدقيق الأداء موارد العرض وحظر المحلل اللغوي. يضع WebPageTest علامة على الموارد التي تحظر العرض باستخدام دائرة برتقالية على يمين عنوان URL للمورد:
يجب تنزيل جميع الموارد التي تحظر العرض ومعالجتها قبل بدء العرض، وهو ما يظهر من خلال الخط الأخضر الداكن الخالص في مسار العرض الإعلاني بدون انقطاع.
وتعمل أداة Lighthouse أيضًا على إبراز الموارد التي تحظر العرض، ولكن بطريقة أكثر دقة، وفقط إذا أؤخر المورد عرض الصفحة. ويمكن أن يفيد ذلك في تجنُّب النتائج الموجبة الخاطئة التي يتم من خلالها تقليل حظر العرض. عند تشغيل عنوان URL للصفحة نفسه مثل رقم WebPageTest السابق من خلال Lighthouse، يتم تحديد إحدى أوراق الأنماط على أنها مورد لحظر العرض.
تحسين مسار العرض الحرج
ويشمل تحسين مسار العرض الحرج تقليل الوقت اللازم لتلقّي تنسيق HTML (الذي يمثّل مقياس "الوقت المستغرق حتى أول بايت" (TTFB)) كما هو موضّح في الوحدة السابقة، فضلاً عن تقليل تأثير الموارد التي تمنع عرض الإعلانات. تتم دراسة هذه المفاهيم في الوحدات التالية.
مسار العرض الحرج للمحتوى
ومنذ فترة طويلة، كان مسار العرض الحرج معنيًا بالعرض الأولي. ومع ذلك، ظهرت المزيد من المقاييس التي تركِّز على المستخدم في ما يتعلق بأداء الويب، مما يثير بعض التساؤلات بشأن ما إذا كانت نقطة النهاية في مسار العرض الحرج يجب أن تكون أول عرض محتوى أو أحد أنواع الرسم الأكثر تشويقًا التي تتبعها بعد ذلك.
بدلاً من ذلك، ننصحك بالتركيز على الوقت المستغرَق حتى انتهاء سرعة عرض أكبر محتوى مرئي (LCP)، أو حتى سرعة عرض أول محتوى مرئي (FCP)، كجزء من مسار العرض بالمحتوى (أو المسار الرئيسي الذي يمكن للآخرين استخدامه). في هذه الحالة، قد تحتاج إلى تضمين موارد لا تحظر بالضرورة - كما كان التعريف النموذجي لمسار العرض الحرج - ولكنها ضرورية لعرض محتوى الصفحة.
بغض النظر عن التعريف الدقيق للمحتوى الذي تُعرّف به على أنّه "حرج"، من المهم فهم ما يعيق أي عرض أوليّ والمحتوى الرئيسي. يقيس الرسم الأول أول فرصة ممكنة لعرض أي شيء للمستخدم. من الناحية المثالية، يجب أن يكون هذا مفيدًا، وليس لون خلفية مثلاً، ولكن حتى لو لم يكن محتوى مرئيًا، لا تزال القيمة التي يتم تقديمها عند تقديم شيء ما مفيدة للمستخدم، وهو ما يشكّل وسيطة لقياس مسار العرض الحرج المحدّد تقليديًا. في الوقت نفسه، هناك أيضًا قيمة في قياس وقت تقديم المحتوى الرئيسي للمستخدم.
تحديد مسار العرض للمحتوى
بإمكان العديد من الأدوات تحديد عناصر LCP ووقت عرضها. بالإضافة إلى عنصر LCP، ستساعدك أداة Lighthouse أيضًا في تحديد مراحل LCP والوقت المستغرق في كل منها، وذلك لمساعدتك في معرفة الجوانب الأفضل لتركيز جهودك على التحسين:
بالنسبة إلى المواقع الإلكترونية الأكثر تعقيدًا، تسلط Lighthouse الضوء أيضًا على سلاسل من الطلبات المهمة في عملية تدقيق منفصلة:
يرصد تدقيق Lighthouse هذا جميع الموارد التي يتم تحميلها بأولوية عالية، لذلك يتضمّن خطوط الويب وغير ذلك من المحتوى الذي يضبطه Chrome كمرجع ذي أولوية عالية، حتى إذا لم يكن يحظر العرض.
اختبِر معلوماتك
إلى ماذا يشير مسار العرض الحرج؟
ما هي الموارد المتضمنة في مسار العرض الحرج؟
<head><head>لماذا يُعدّ حظر العرض جزءًا ضروريًا من عرض الصفحة؟
لماذا يحظر JavaScript محلل HTML (بافتراض عدم تحديد سمات defer أو async أو module في عنصر <script>)؟
<script> المحلل اللغوي ويحظر العرض.التالي: تحسين تحميل الموارد
تناولت هذه الوحدة بعض النظريات الكامنة وراء كيفية عرض المتصفّح لصفحة الويب، لا سيّما العناصر الضرورية لإكمال العرض الأولي للصفحة. تتناول الوحدة التالية كيفية تحسين مسار العرض هذا من خلال التعرّف على كيفية تحسين تحميل الموارد.