يشير قسم "الفرص" ضمن تقرير 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
لم يعد مؤثرًا سلبيًا على كل طلب من الطلبات.
يمكن أن تؤدي طلبات التحميل المُسبق إلى زيادة سرعة تحميل صفحاتك.
والمشكلة هنا أنّ المتصفح لا يطّلع إلا على آخر موردَين بعد تنزيل app.js
وتحليله وتنفيذه.
لكنك تعلم أن هذه الموارد مهمة ويجب
تنزيلها في أقرب وقت ممكن.
تحديد روابط التحميل المُسبق
حدِّد روابط التحميل المُسبق في ملف HTML الخاص بك لإرشاد المتصفِّح لتنزيل الموارد الرئيسية في أقرب وقت ممكن.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
راجِع أيضًا مقالة التحميل المُسبق لمواد العرض المهمة لتحسين سرعة التحميل للحصول على مزيد من الإرشادات.
توافُق المتصفح
اعتبارًا من حزيران (يونيو) 2020، أصبحت ميزة التحميل المُسبق متاحة في المتصفّحات المستنِدة إلى Chromium. للحصول على معلومات حول التحديثات، يمكنك مراجعة توافق المتصفّح.
توفير أداة لدعم التحميل المُسبق
راجِع صفحة مواد العرض التي تم تحميلها مُسبقًا فيTooling.Report.
إرشادات خاصة بحِزم البيانات
Angular
يمكنك تحميل المسارات مسبقًا مسبقًا لتسريع عملية التنقّل.
Magento
عدِّل تنسيق المظاهر
وأضِف علامات <link rel=preload>
.