مسار العرض الحرج: ما هو وكيفية تحسينه

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

لكن الحقيقة هي:

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

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

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

تُعرف هذه العملية أيضًا باسم مسار العرض الحرج (CRP) .

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

• ما هو مسار العرض الحرج؟
• شرح تسلسل مسار العرض الحرج
• كيفية تحسين مسار العرض الحرج لموقعك
• 3 ملحقات WordPress لتحسين CRP الخاص بك
• قائمة مراجعة تحسين CRP

هيا نبدأ!

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

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

يتضمن سلسلة من العمليات ، مثل إنشاء نموذج كائن المستند (DOM) ، وإنشاء نموذج كائن CSS (CSSOM) ، والجمع بين كليهما لإنشاء شجرة العرض. ثم يتم استخدام Render Tree لحساب التخطيط ورسم وحدات البكسل على شاشة المستخدم.

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

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

شرح تسلسل مسار العرض الحرج

فيما يلي نظرة عامة سريعة على الخطوات التي يقوم بها المتصفح عند عرض الصفحة:

1. يقوم المتصفح بتنزيل ترميز HTML وتحليله وإنشاء DOM.
2. بعد ذلك ، يقوم بتنزيل ومعالجة ترميز CSS وإنشاء نموذج كائن CSS (CSSOM).
3. بعد ذلك ، تدمج العقد الضرورية من DOM و CSSOM لإنشاء Render Tree ، وهي بنية شجرية لجميع العقد المرئية المطلوبة لعرض الصفحة.
4. يقوم بحساب أبعاد وموضع كل عنصر على الصفحة من خلال عملية التخطيط.
5. أخيرًا ، يقوم المتصفح برسم وحدات البكسل على الشاشة.

الآن دعنا نركز على كل خطوة.

DOM

نموذج كائن المستند (DOM) هو التمثيل الداخلي للمستعرض لمستند HTML.

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

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

CSSOM

بينما يحتوي DOM على جميع محتويات الصفحة ، فإن CSSOM يتضمن جميع المعلومات حول كيفية تصميم نموذج DOM.

هناك اختلاف آخر بين DOM و CSSOM وهو:

بناء DOM تدريجي ، بينما CSSOM ليس كذلك.

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

يتم ذلك لتجنب إظهار الأنماط التي سيتم استبدالها لاحقًا وإهدار الموارد.

ببساطة:

يحظر المتصفح عملية العرض حتى يتلقى ويحلل جميع CSS.

لهذا السبب تعتبر CSS موردًا لحظر العرض.

شجرة التقديم

Render Tree هو مزيج من DOM و CSSOM الذي يستخدمه المتصفح لإنشاء تمثيل مرئي لصفحة الويب.

يستخدم المستعرض Render Tree لحساب أبعاد العقدة وموضعها كمدخل لعملية الطلاء.

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

تَخطِيط

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

لكن هذا هو الشيء:

يتأثر أداء التخطيط بواسطة DOM.

بعبارة أخرى:

كلما زاد عدد عُقد DOM ، طالت عملية التخطيط.

طلاء

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

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

ضع في اعتبارك أن مدة مرحلة الطلاء تعتمد على طبيعة التحديثات التي يتم تنفيذها على شجرة العرض.

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

كيفية تحسين مسار العرض الحرج لموقعك

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

• حجم الوثيقة
• عدد الطلبات
• جهاز المستخدم
• الأنماط المطبقة

ومع ذلك ، هناك ثلاث تقنيات تعتبر خيارات الانتقال عندما يتعلق الأمر بتحسين CRP:

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

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

تحسين موارد CSS و JS لحظر العرض

أنت تعلم بالفعل أنه عندما يواجه المتصفح موارد CSS و JS لحظر العرض ، يجب عليه تنزيلها وتحليلها وتنفيذها قبل القيام بأي شيء آخر ، بما في ذلك العرض.

عندما يتعلق الأمر بتحسين CSS ، يمكنك تنفيذ الأساليب التالية:

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

فيما يتعلق بملفات JavaScript الخاصة بك ، إليك ما يمكنك فعله:

• تأخير تحميل JS. يُعد تحميل Defer JS أسلوبًا يعمل على تسريع موقعك عن طريق تأخير تحميل ملفات JavaScript حتى بعد تحميل مستند HTML وتحليله . يمكنك استخدام سمة defer على علامة البرنامج النصي التي تشير إلى ملف JS. من المهم ملاحظة أن السمة defer يجب أن تُستخدم فقط لملفات JS التي لا تحتاج إلى تنفيذها فور تحميلها (على سبيل المثال ، الملفات التي تُستخدم فقط في صفحات معينة) ، حيث قد يكون ترتيب التنفيذ غير متوقع إذا كانت هناك عدة نصوص برمجية مؤجلة يستخدم.
  
• تحميل JS بشكل غير متزامن. قد تتطلب بعض ملفات JS استخدام السمة غير المتزامنة ، والتي تسمح بتحميل الملف وتنفيذه بشكل غير متزامن مع تحليل مستند HTML.

هناك بعض التحسينات التي يمكنك تطبيقها على كل من CSS و JavaScript:

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

قم بتحسين موارد حظر العرض على الطيار الآلي. قم بتثبيت NitroPack →

قلل حجم ملفاتك

لتقليل كمية البيانات التي يحتاج المتصفح إلى تنزيلها ، يمكننا استخدام تقنيات مثل التصغير والضغط والتخزين المؤقت لموارد HTML و CSS وجافا سكريبت.

أنت تعرف بالفعل ما يعنيه التصغير ، لذلك دعنا نركز على الاثنين الآخرين:

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

اعتمد على آلية التخزين المؤقت الأكثر تقدمًا. احصل على NitroPack اليوم →

إعطاء الأولوية لتنزيل الأصول الهامة

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

يمكنك استخدام تلميحات الموارد لإخبار المتصفح بكيفية التعامل مع موارد أو صفحات ويب معينة.

فيما يلي العناصر الثلاثة الرئيسية:

• ارتباط rel = الجلب المسبق. الجلب المسبق هو تلميح مورد ذو أولوية منخفضة يسمح للمتصفح بجلب الموارد التي قد تكون مطلوبة لاحقًا وتخزينها في ذاكرة التخزين المؤقت للمتصفح.

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

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

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

الآن بعد أن عرفت كيفية التعامل مع تحسين مسار العرض الحرج ، دعنا نلقي نظرة على بعض مكونات WordPress الإضافية التي يمكنها أتمتة العملية.

3 ملحقات WordPress لتحسين مسار العرض الحرج

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

لحسن الحظ لجميع مستخدمي WordPress ، هناك مكونات إضافية يمكن أن تساعد في تحسين CRP. دعونا نتحقق من أفضل 3 مرشحين ، في رأينا:

NitroPack - الحل الكل في واحد

NitroPack هو الحل الرائد الشامل لتحسين سرعة الموقع الذي يجمع أكثر من 35+ ميزة أداء الويب. عندما يتعلق الأمر بتحسين مسار العرض الحرج الخاص بك ، فإن NitroPack سيتعامل تلقائيًا مع التحسينات مثل:

• CSS الحرجة
• تصغير CSS و JS
• ضغط CSS و JS
• التخزين المؤقت
• تأخير تحميل JS
• قم بإزالة CSS و JS غير المستخدمة

لكن ميزات التحسين لا تنتهي هنا. ستحصل أيضًا على مجموعة أدوات الأداء الكاملة:

• المدمج في CDN
• كومة تحسين الصورة الكاملة
• تحسين الخط
• التخزين المؤقت لعربة التجارة الإلكترونية
• دعم على مدار الساعة طوال أيام الأسبوع

تسريع موقع الويب الخاص بك تلقائيًا. احصل على NitroPack اليوم →

WP Super Cache - التخزين المؤقت فقط البرنامج المساعد

WP Super Cache هو مكون إضافي للتخزين المؤقت يقدم بشكل أساسي ميزات التخزين المؤقت وضغط HTTP ولكنه يقصر في تصغير الموارد وتحسين JavaScript بسمات غير متزامنة وتأجيل.

تشمل أبرز الميزات ما يلي:

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

أداء سريع

Swift Performance هو مكون إضافي آخر قد تجده مفيدًا في سعيك وراء تحسين CRP. تشمل بعض ميزاته ما يلي:

• تصغير ملفات CSS و JavaScript
• CSS الحرجة
• التخزين المؤقت
• تحسين الصورة

تحسين مسار العرض الحرج [قائمة التحقق]

لقد تناولنا الكثير من التفاصيل في هذه المقالة ، لذا إليك قائمة مرجعية سهلة الاستخدام لجميع التحسينات التي ذكرناها:

• إنشاء CSS حرجة
• اجمع ملفات CSS
• تأخير تحميل JavaScript
• قم بتحميل JavaScript بشكل غير متزامن
• تصغير CSS و JavaScript
• ضغط CSS و JavaScript
• قم بإزالة CSS وجافا سكريبت غير المستخدمة
• تطبيق التصغير
• استخدم الضغط
• استخدم التخزين المؤقت
• تنفيذ الرابط rel = preload
• تنفيذ الرابط rel = الجلب المسبق
• تنفيذ الارتباط rel = preonnect

قم بتنزيل قائمة مراجعة تحسين CRP →

وأخيرًا وليس آخرًا - لا تنسَ الاختبار قبل كل تحسين وبعده!