يشير مسار العرض الحاسم إلى الخطوات المُتّبعة إلى أن تبدأ صفحة الويب في العرض في المتصفّح. لعرض الصفحات، تحتاج المتصفّحات إلى مستند 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> أو ملف CSS
مرجع خارجيًا محدّدًا من خلال عنصر <link rel=stylesheet href="...">
، يتجنّب المتصفّح عرض أي محتوى آخر إلى أن يكملتحميل ملف CSS هذا ومعالجته.
إنّ حظر المورد للعرض لا يعني بالضرورة أنّه يوقف المتصفّح عن تنفيذ أي إجراء آخر. تحاول المتصفّحات أن تكون فعّالة قدر الإمكان، لذلك عندما يرصد المتصفّح أنّه يحتاج إلى تنزيل مورد CSS، سيطلبه ويوقف العرض مؤقتًا، ولكن سيواصل معالجة بقية ملف HTML ويبحث عن عمل آخر ينجزه في هذه الأثناء.
موارد حظر عرض الإعلانات، مثل CSS، التي كانت تحظر كلّ عرض للصفحة عند اكتشافها وهذا يعني أنّ ما إذا كانت بعض صفحات CSS تمنع عرض المحتوى
أو لا يعتمد على ما إذا كان المتصفّح قد رصدها. لا تحظر بعض المتصفّحات (Firefox
في البداية، والآن Chrome أيضًا) عرض المحتوى إلا أسفل
المورد الذي يحظر العرض. وهذا يعني أنّه بالنسبة إلى المسار الحرج الذي يحظر العرض،
يكون اهتمامنا عادةً بالموارد التي تحظر العرض في <head>، لأنّها
تحظر بشكل فعّال عرض الصفحة بأكملها.
من الميزات المبتكرة الحديثة سمة blocking=render التي تمت إضافتها إلى Chrome 105. يتيح ذلك للمطوّرين وضع علامة بشكل صريح على عنصر <link> أو <script> أو
<style> على أنّه يمنع العرض إلى أن تتم معالجة العنصر، مع
السماح لأداة التحليل بمواصلة معالجة المستند في الوقت نفسه.
الموارد التي تحظر عمل المُحلِّل اللغوي
الموارد التي تحظر التحليل هي تلك التي تمنع المتصفّح من البحث عن مهام أخرى من خلال مواصلة تحليل لغة HTML. تكون JavaScript تلقائيًا محظورة على المُحلِّل (ما لم يتم وضع علامة عليها تحديدًا على أنّها غير متزامنة أو مؤجّلة)، لأنّه يمكن أن تغيّر JavaScript بنية DOM أو بنية CSSOM عند تنفيذها. لذلك، ليس بإمكان المتصفّح مواصلة معالجة الموارد الأخرى إلى أن يعرف التأثير الكامل لملف JavaScript المطلوب على ملف HTML للصفحة. وبالتالي، تحظر JavaScript المُحلِّل.
إنّ الموارد التي تحظر التحليل تمنع عرض المحتوى أيضًا. بما أنّه لا يمكن لبرنامج التحليل مواصلة التحليل بعد الوصول إلى مورد يحظر التحليل إلى أن تتم معالجته بالكامل، لا يمكنه الوصول إلى المحتوى بعد ذلك وعرضه. يمكن للمتصفّح عرض أي محتوى HTML تم استلامه حتى الآن أثناء الانتظار، ولكن في ما يتعلق بمسار العرض المُهم، فإنّ أي موارد تحظر المُحلِّل في <head> تعني بشكلٍ فعّال أنّه تم حظر عرض كل محتوى الصفحة.
يمكن أن يؤدي حظر المُحلِّل إلى تكلفة أداء كبيرة، أكثر بكثير من مجرّد حظر العرض. لهذا السبب، ستحاول المتصفّحات تقليل هذه التكلفة من خلال استخدام وحدة تحليل 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> إلى حظر المُحلِّل وحظر العرض.الخطوة التالية: تحسين تحميل الموارد
تناولت هذه الوحدة بعض النظريات المتعلّقة بطريقة عرض المتصفح لصفحة ويب، وعلى وجه الخصوص، الخطوات اللازمة لإكمال عملية عرض الصفحة الأولية. تتناول الوحدة التالية كيفية تحسين مسار العرض هذا من خلال معرفة كيفية تحسين تحميل الموارد.