ما هي تلميحات الموارد مثل preload و prefetch و preconnect؟

ما الذي تفعله كل واحدة

• preload — "أنا بحاجة إلى هذا للصفحة الحالية، اجلبه الآن بأولوية عالية." للموارد الحرجة التي يكتشفها المحلل محل وقت لاحق: الخطوط (fonts)، الصور الرئيسية، الأصول المرجعية من CSS. يتطلب as حتى يحدد المتصفح الأولوية/الرؤوس بشكل صحيح.

• preconnect — "سأتصل بهذا الأصل (origin) قريباً؛ قم بعملية البحث عن DNS + TCP + TLS handshake الآن." يوفر عدة رحلات ذهاب وإياب قبل الطلب الأول لطرف ثالث (API، مضيف الخطوط، CDN). استخدمه لعدة أصول حرجة.

• dns-prefetch — نسخة أخف من preconnect: فقط دقة DNS. خيار بديل جيد / للعديد من الأصول.

• prefetch — "أنا ربما سأحتاج إلى هذا للـ الملاحة التالية؛ اجلبه بأولوية منخفضة عندما يكون المتصفح خاملاً." للصفحات/الأصول المرجحة التالية. مخزن مؤقتاً للمستقبل، وليس للصفحة الحالية.

مثال حقيقي شائع: الخطوط

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

تحذير: لا تفرط في التلميحات

تحميل كل شيء مسبقاً يتعارض مع الغرض — فهو يتنافس مع الموارد الحرجة الفعلية على النطاق الترددي. قدّم التلميحات فقط للقليل الذي يهم أكثر.

لماذا يهم

تلميحات الموارد تختصر زمن الكمون من المسار الحرج: preconnect يزيل تأخير handshake للأطراف الثالثة، preload يعطي الأولوية للأصول الحرجة المكتشفة بوقت متأخر (الخطوط، صورة LCP)، و prefetch يجعل الملاحة التالية تبدو فورية.

عند استخدامها بحكمة، فإنها تحسّن Core Web Vitals بشكل ملحوظ.