تحسين تحميل الموارد

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

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

حظر العرض

كما ذكرنا في الوحدة السابقة، خدمة CSS هي مورد render-blocking، لأنّ ذلك يمنع المتصفّح من عرض أي محتوى إلى أن يتم إصدار نموذج كائن CSS (CSSOM) يتم إنشاؤها. يحظر المتصفح العرض لمنع وميض المحتوى بدون نمط (FOUC)، وهو غير مرغوب فيه من منظور تجربة المستخدم

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

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

حظر المحلل اللغوي

يقاطع مورد حظر المحلِّل محلّل HTML، مثل <script> عنصر بدون سمات async أو defer. عندما يواجه المحلل اللغوي <script>، يحتاج المتصفِّح إلى تقييم النص البرمجي وتنفيذه قبل وستتابع تحليل باقي رموز HTML. يتم ذلك عن طريق التصميم، حيث إن النصوص تعديل نموذج العناصر في المستند (DOM) أو الوصول إليه أثناء فترة إنشائها.

<!-- This is a parser-blocking script: -->
<script src="/script.js"></script>

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

ملاحظة: يجب أن يحظر <script> الذي يحظر المحلل اللغوي أيضًا انتظار وصول أي موارد CSS تحظر العرض أثناء الطيران تحليلها قبل أن يتمكن المتصفح من تنفيذها. هذا أيضًا عن طريق التصميم، كنص يجوز له الوصول إلى الأنماط المعلَنة في ورقة أنماط حظر العرض (على سبيل المثال، باستخدام element.getComputedStyle()).

أداة فحص التحميل المُسبق

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

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

• الصور التي حمَّلتها CSS باستخدام السمة background-image. هذه الصور تكون المراجع في CSS، ولا يمكن العثور عليها بواسطة الماسح الضوئي للتحميل المسبق.
• النصوص البرمجية التي يتم تحميلها ديناميكيًا والتي تأتي على شكل ترميز عنصر <script> الذي تم إدخاله في نموذج العناصر في المستند (DOM) باستخدام JavaScript أو الوحدات التي يتم تحميلها باستخدام import() الديناميكي.
• محتوى HTML المعروض على البرنامج باستخدام JavaScript يتم تضمين هذا الترميز في السلاسل في موارد JavaScript ولا يمكن اكتشافها من خلال التحميل المسبق ماسح ضوئي.
• بيانات @import لصفحات الأنماط المتتالية (CSS)

وجميع أنماط تحميل الموارد هذه هي جميعها موارد تم اكتشافها مؤخرًا، وبالتالي لا تستفيد من برنامج الفحص المسبق للتحميل المسبق. يجب تجنبها كلما أمكن ذلك. في حال حذف ليس ممكنًا تجنب هذه الأنماط، لكنك قد تتمكن من استخدام تلميح "preload" لتجنُّب حدوث تأخير في اكتشاف الموارد

ملاحظة: تم تناول تلميح المورد preload في الوحدة التالية المتعلقة بالموارد النصائح.

CSS

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

تصغير

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

/* Unminified CSS: */

/* Heading 1 */
h1 {
  font-size: 2em;
  color: #000000;
}

/* Heading 2 */
h2 {
  font-size: 1.5em;
  color: #000000;
}

/* Minified CSS: */
h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}

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

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

إزالة خدمة مقارنة الأسعار (CSS) غير المستخدَمة

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

لاكتشاف خدمة مقارنة الأسعار (CSS) غير المستخدَمة للصفحة الحالية، يمكنك استخدام أداة التغطية في Chrome. أدوات مطوري البرامج:

تُعد أداة التغطية في Chrome DevTools مفيدة لاكتشاف CSS ( JavaScript) غير مستخدمة في الصفحة الحالية. يمكن استخدامها لتقسيم ملفات CSS إلى موارد متعددة ليتم تحميلها بواسطة صفحات مختلفة، بدلاً من شحن حزمة CSS أكبر بكثير يمكن أن تؤخر عرض الصفحة.

تؤدي إزالة محتوى CSS غير المستخدَم إلى مضاعفة حجم المحتوى الذي يمكن تنزيله: سيتم تحسين بنية شجرة العرض، لأنّ المتصفّح يحتاج إلى معالجة عدد أقل من قواعد CSS.

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

تجنُّب بيانات @import لصفحات الأنماط المتتالية (CSS)

قد يبدو لك ذلك مناسبًا، ولكن عليك تجنُّب تعريفات @import في CSS:

/* Don't do this: */
@import url('style.css');

وعلى غرار طريقة عمل العنصر <link> في HTML، يتم استخدام تعريف @import في CSS استيراد مورد CSS خارجي من داخل ورقة أنماط. تشير رسالة الأشكال البيانية يتمثل الاختلاف الكبير بين هذين الأسلوبين في أن عنصر HTML <link> هو جزء من استجابة HTML، وبالتالي تم اكتشافه في وقت أقرب بكثير من CSS تم تنزيله من خلال بيان @import.

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

<!-- Do this instead: -->
<link rel="stylesheet" href="style.css">

في معظم الحالات، يمكنك استبدال @import باستخدام العنصر <link rel="stylesheet"> تسمح عناصر <link> بأن تكون أوراق الأنماط يتم تنزيله بشكل متزامن ويقلل من وقت التحميل الإجمالي، بدلاً من @import التي يتم من خلالها تنزيل أوراق الأنماط بشكل متتالٍ.

ملاحظة: إذا كنت بحاجة إلى استخدام @import، مثل تتالي طبقات أو أوراق أنماط تابعة لجهة خارجية، فيمكنك تقليل التأخير باستخدام preload لورقة الأنماط التي تم استيرادها. بالإضافة إلى ذلك، إنّ CSS تستخدم المُعالجات الأولية، مثل SASS أو LESS، عادةً السمة @import وبناء الجملة كجزء من تحسين تجربة المطور الذي يسمح بفصل وملفات مصدر أكثر تقسيمًا إلى وحدات. ومع ذلك، عندما يصادف معالج بيانات CSS مسبقًا @import بيانًا، يتم تجميع الملفات المُشار إليها مكتوبة في ورقة نمط واحدة، لتجنب عقوبة الطلب المتتالية التي تتسبب فيها @import في CSS العادي.

تضمين CSS المهمة

يمكن أن يؤدي الوقت المستغرق لتنزيل ملفات CSS إلى زيادة سرعة عرض المحتوى على الصفحة (FCP). مضمَّنة أنماط مهمة في المستند <head> إلى إزالة طلب الشبكة ومورد CSS، وعند تنفيذها بشكل صحيح، يمكن تحسين أوقات التحميل المبدئي لم يتم إعداد ذاكرة التخزين المؤقت في متصفح المستخدم. يمكن تحميل صفحة CSS المتبقية بشكل غير متزامن، أو يتم إلحاقه بنهاية العنصر <body>.

العبارة الرئيسية: تشير لغة CSS المهمة إلى الأنماط المطلوبة لعرض محتوى مرئي في إطار العرض الأولي. القيمة الأولية يُشار أحيانًا إلى مفهوم إطار العرض باسم "الجزء المرئي من الصفحة". المتبقي يتم ترك المحتوى بدون نمط على الصفحة أثناء تحميل CSS المتبقي بشكل غير متزامن.

<head>
  <title>Page Title</title>
  <!-- ... -->
  <style>h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}</style>
</head>
<body>
  <!-- Other page markup... -->
  <link rel="stylesheet" href="non-critical.css">
</body>

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

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

الإصدارات التجريبية الخاصة بخدمة مقارنة الأسعار (CSS)

JavaScript

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

JavaScript لحظر العرض

عند تحميل عناصر <script> بدون السمتين defer أو async، لا يتم عرض حظر المتصفح وتحليله وعرضه إلى أن يتم تنزيل النص البرمجي وتحليله وتنفيذه. وبالمثل، تحظر النصوص البرمجية المضمنة المحلل حتى يتم تحليل النص البرمجي وتنفيذه.

"async" ضد "defer"

يسمح كل من async وdefer بتحميل النصوص البرمجية الخارجية بدون حظر HTML محلل لغوي بينما تكون النصوص البرمجية (بما في ذلك النصوص البرمجية المضمّنة) ذات type="module" هي وتأجيله تلقائيًا. ومع ذلك، هناك بعض الاختلافات بين async وdefer فهمها جيدًا.

مصدرها https://html.spec.whatwg.org/multipage/scripting.html

يتم تحليل النصوص البرمجية التي تم تحميلها باستخدام async وتنفيذها على الفور بعد تنزيلها، بينما يتم تنفيذ النصوص البرمجية التي تم تحميلها باستخدام defer عند تنفيذ تحليل مستندات HTML منتهي، يحدث ذلك في الوقت نفسه الذي يحدث فيه حدث DOMContentLoaded على المتصفّح. بالإضافة إلى ذلك، قد يتم تنفيذ async نص برمجي بدون ترتيب، في حين قد يتم تنفيذ defer نصًا برمجيًا. بالترتيب الذي تظهر به في الترميز.

ملاحظة: النصوص البرمجية التي تم تحميلها باستخدام يتم تأجيل السمة type="module" تلقائيًا، بينما النصوص البرمجية التي تم تحميلها من خلال إدخال ترميز <script> في نموذج العناصر في المستند (DOM) مع JavaScript تتصرف مثل async نصوص برمجية.

العرض من جهة العميل

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

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

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

تصغير

على غرار CSS، يؤدي تصغير JavaScript إلى تقليل حجم ملف مورد النص البرمجي. وقد يؤدي ذلك إلى زيادة سرعة التنزيل، ما يسمح للمتصفح بالانتقال إلى تحليل وتجميع JavaScript بسرعة أكبر.

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

// Unuglified JavaScript source code:
export function injectScript () {
  const scriptElement = document.createElement('script');
  scriptElement.src = '/js/scripts.js';
  scriptElement.type = 'module';

  document.body.appendChild(scriptElement);
}

عند حذف رمز مصدر JavaScript السابق، قد تظهر النتيجة شيء مثل مقتطف الرمز التالي:

// Uglified JavaScript production code:
export function injectScript(){const t=document.createElement("script");t.src="/js/scripts.js",t.type="module",document.body.appendChild(t)}

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

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

إصدارات JavaScript التجريبية

اختبِر معلوماتك

ما هي أفضل طريقة لتحميل ملفات CSS متعددة في المتصفح؟

بيان @import لخدمة مقارنة الأسعار (CSS).

يُرجى إعادة المحاولة.

عناصر <link> متعددة

إجابة صحيحة.

ما الإجراءات التي ينفّذها برنامج فحص التحميل المسبق في المتصفّح؟

إنه محلل HTML ثانوي يفحص الترميز الأولي لاكتشاف الموارد قبل أن يتمكن محلل DOM من اكتشافها بشكل أسرع.

إجابة صحيحة.

ترصد هذه الميزة <link rel="preload"> عنصر في مورد HTML.

يُرجى إعادة المحاولة.

لماذا يحظر المتصفح تحليل HTML مؤقتًا بشكل افتراضي عندما أو تنزيل موارد JavaScript؟

لمنع ظهور وميض من محتوى غير نمطي (FOUC)

يُرجى إعادة المحاولة.

نظرًا لأن تقييم جافا سكريبت يمثل مهمة تستهلك قدرًا كبيرًا من موارد وحدة المعالجة المركزية (CPU)، ويوفر تحليل HTML مزيدًا من معدل نقل البيانات لوحدة المعالجة المركزية (CPU) لإتمام تحميل النصوص البرمجية.

يُرجى إعادة المحاولة.

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

إجابة صحيحة.

التالي: مساعدة المتصفّح من خلال تعديلات الموارد

بعد أن تعرّفنا على كيفية تحميل الموارد في العنصر <head>، تؤثر على التحميل الأولي للصفحة والمقاييس المتنوعة، فقد حان وقت المضي قدمًا. في المرحلة التالية ومعلومات حول الموارد وكيفية تقديم نصائح قيّمة حول المتصفّح لبدء تحميل الموارد وفتح الاتصالات من مصادر متعددة خوادم أسرع من المتصفح بدونها.