التحميل المُسبق للطلبات الرئيسية

يشير قسم "الفرص" ضمن تقرير Lighthouse إلى المستوى الثالث من الطلبات في سلسلة الطلبات المهمة باعتباره تحميلًا مسبقًا للعناصر المرشحة:

لقطة شاشة للتدقيق في الطلبات الرئيسية لميزة "التحميل المسبق" في Lighthouse

الآلية التي تتّبعها علامات Lighthouse في تحديد التحميل المسبق للمرشحين

لنفترض أنّ سلسلة الطلبات المهمة لصفحتك تبدو على النحو التالي:

index.html |--app.js |--styles.css |--ui.js

يعرِّف ملف index.html السمة <script src="app.js">. عند تشغيل app.js، يطلب الموقع fetch() لتنزيل styles.css وui.js. لا تظهر الصفحة كاملة حتى يتم تنزيل هذين الموردين الأخيرين وتحليلهما وتنفيذهما. باستخدام المثال أعلاه، تضع أداة Lighthouse علامة على styles.css وui.js كمرشحَين.

وتعتمد المبالغ المحتملة التي يمكن توفيرها على الوقت الذي سيتمكن فيه المتصفِّح من بدء الطلبات في حال أعلنت عن روابط التحميل المُسبق. على سبيل المثال، إذا كان تنزيل app.js وتحليله وتنفيذه يستغرق 200 ملي ثانية، سيتم توفير 200 ملي ثانية من التوفير المحتمل لكل مورد، لأنّ app.js لم يعد مؤثرًا سلبيًا على كل طلب من الطلبات.

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

بدون روابط التحميل المسبق، لا يتم طلب style.css وui.js إلا بعد تنزيل app.js وتحليله وتنفيذه.
بدون روابط التحميل المُسبق، لا يتم طلب السمتَين styles.css وui.js إلا بعد تنزيل app.js وتحليله وتنفيذه.

والمشكلة هنا أنّ المتصفح لا يطّلع إلا على آخر موردَين بعد تنزيل app.js وتحليله وتنفيذه. لكنك تعلم أن هذه الموارد مهمة ويجب تنزيلها في أقرب وقت ممكن.

حدِّد روابط التحميل المُسبق في ملف HTML الخاص بك لإرشاد المتصفِّح لتنزيل الموارد الرئيسية في أقرب وقت ممكن.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
باستخدام روابط التحميل المسبق، يتم طلب style.css وui.js في الوقت نفسه الذي يتم فيه طلب app.js.
باستخدام روابط التحميل المُسبق، يتم طلب styles.css وui.js في الوقت نفسه الذي يتم فيه إرسال الطلب إلى app.js.

راجِع أيضًا مقالة التحميل المُسبق لمواد العرض المهمة لتحسين سرعة التحميل للحصول على مزيد من الإرشادات.

توافُق المتصفح

اعتبارًا من حزيران (يونيو) 2020، أصبحت ميزة التحميل المُسبق متاحة في المتصفّحات المستنِدة إلى Chromium. للحصول على معلومات حول التحديثات، يمكنك مراجعة توافق المتصفّح.

توفير أداة لدعم التحميل المُسبق

راجِع صفحة مواد العرض التي تم تحميلها مُسبقًا فيTooling.Report.

إرشادات خاصة بحِزم البيانات

Angular

يمكنك تحميل المسارات مسبقًا مسبقًا لتسريع عملية التنقّل.

Magento

عدِّل تنسيق المظاهر وأضِف علامات <link rel=preload>.

المراجِع