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

قسم "الفرص" في تقرير 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>.

الموارد