Preload وPrefetch وPreconnect
توجيه المتصفح إلى جلب الموارد المهمة مبكرًا
Preload وPrefetch وPreconnect درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
لماذا تلميحات الموارد؟
لا تكتشف المتصفحات الحديثة الموارد إلا أثناء تحليلها لـ HTML. وتتيح تلميحات الموارد، وهي سمات rel في وسم link داخل <head>، إخبار المتصفح بأنكم "ستحتاجون إلى هذا قريبًا" — فيبدأ طلب الشبكة في وقت أبكر مما يتيحه الاكتشاف المعتاد.
يحمّل preload الآن
يخبر <link rel="preload" as="..." href="..."> المتصفح بجلب المورد فورًا بالأولوية المناسبة لنوع as. استخدموه للأصول التي ستحتاج إليها الصفحة بالتأكيد، مثل الصور الرئيسية والخطوط المهمة وJavaScript الخاص بالمسار.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>السمة as
اضبطوا as دائمًا — فهي تحدد أولوية الطلب وترويسة Accept وتطبيق CSP. ومن القيم الشائعة: "script" و"style" و"font" و"image" و"fetch". ومن دون as، تتجاهل المتصفحات preload وتسجل تحذيرًا.
crossorigin للخطوط
تتطلب عمليات التحميل المسبق للخطوط crossorigin حتى عندما يكون الخط من المصدر نفسه. ومن دونه، يجلب المتصفح الخط بوضع CORS عند الاستخدام الفعلي، لكن بالوضع المجهول عند التحميل المسبق، مما يضاعف التنزيل — وهو خلل أداء شائع ودقيق.
يحمّل prefetch لاحقًا
يشير <link rel="prefetch" href="..."> إلى أن موردًا سيُحتاج إليه أثناء انتقال مستقبلي. يجلبه المتصفح بأدنى أولوية خلال وقت الخمول، ثم يخزنه مؤقتًا حتى تُعرض الصفحة التالية فورًا.
<link rel="prefetch" href="/next-page.html">يهيئ preconnect الاتصالات
يخبر <link rel="preconnect" href="https://api.example.com"> المتصفح بتنفيذ بحث DNS ومصافحة TCP وTLS مع مصدر تابع لجهة خارجية قبل وصول الطلب الأول. استخدموه لمضيفي API وشبكات CDN التي ستتصل بها الصفحة.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch هو النظير الأخف
ينفّذ <link rel="dns-prefetch"> بحث DNS فقط — وهو أقل تكلفة من preconnect. استخدموه مع العديد من المضيفين التابعين لجهات خارجية عندما لا يمكنكم تحمل إنشاء اتصال مسبق كامل لكل واحد منها؛ واقرنوا preconnect بأهم عدد قليل من المصادر.
قلّلوا التلميحات
تتنافس عمليات preload الكثيرة على النطاق الترددي نفسه وتبطئ الصفحة. حمّلوا مسبقًا الموارد التي تعيق مسار التصيير الحرج فقط — وعادةً ما تكون صورة رئيسية واحدة وخطًا أو خطين مهمين. ويمكن اكتشاف كل ما عدا ذلك بالطريقة المعتادة.
modulepreload لوحدات ES
لا يحمّل <link rel="modulepreload" href="/app.js"> ملف الوحدة مسبقًا فحسب، بل يحمّل أيضًا شجرة تبعياتها. ويؤدي ذلك إلى تجنب شلال التنزيل المتتابع المعتاد في وحدات ES الأصلية، حيث ينتظر كل import تحليل السابق.
قياس التأثير
استخدموا عمود Initiator في لوحة Network للتأكد من أن الموارد المحمّلة مسبقًا جُلبت فعلًا مبكرًا، واستخدموا فحص "Preconnect to required origins" في Lighthouse لاكتشاف الفرص الفائتة. وغالبًا ما تؤدي إزالة preload بطيء وغير مستخدم إلى مكسب يعادل إضافة preload جيد.
خصائص كل تلميح
يعرض preload تحذيرًا في وحدة التحكم إذا لم يُستخدم المورد خلال نحو 3 ثوانٍ. وقد يلغي المتصفح prefetch تحت ضغط الشبكة أو الذاكرة. وتُغلق اتصالات preconnect بعد نحو 10 ثوانٍ من عدم النشاط — لذا استخدموه للموارد التي سيُطلب إليها قريبًا.
اختبار المعرفة
ما الذي يفعله preconnect ولا يفعله dns-prefetch؟
الملخص
يجلب preload الموارد المهمة الآن، مع استخدام as وcrossorigin عند الحاجة. ويخزّن prefetch موارد الانتقال المحتمل التالي أثناء وقت الخمول. ويهيئ preconnect اتصالات TCP وTLS، بينما ينفّذ dns-prefetch بحث DNS فقط، وذلك مع المصادر التابعة لجهات خارجية. ويوسّع modulepreload وظيفة preload لتشمل شجرة تبعيات وحدة ES. استخدموا هذه التلميحات باعتدال وقيسوا تأثيرها.
الأسئلة الشائعة
هل درس «Preload وPrefetch وPreconnect» مجاني؟
نعم — نص درس «Preload وPrefetch وPreconnect» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «Preload وPrefetch وPreconnect»؟
توجيه المتصفح إلى جلب الموارد المهمة مبكرًا تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «Preload وPrefetch وPreconnect»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- سمتا async وdefer
- Preload وPrefetch وPreconnect
- التحميل الكسول للصور loading=lazy
- تلميحات الموارد modulepreload