رتّب تنفيذ سكربتاتك بواسطة defer وasync، ثم وجّه الشبكة بواسطة preload وpreconnect وprefetch.
افتح هذا الدرس في Kodokonالوسم <script src> الكلاسيكي يحجب تحليل HTML: يتوقف المتصفح، ويُنزّل، ويُنفّذ، ثم يستأنف. سمتان تغيّران المعادلة. defer تُنزّل بالتوازي مع التحليل وتُنفّذ السكربتات بترتيب المستند، مباشرةً قبل DOMContentLoaded: إنها الخيار الافتراضي لشيفرة تطبيقك التي قد تعتمد على DOM وعلى سكربتات أخرى. أما async فتُنزّل أيضًا بالتوازي لكنها تُنفّذ بمجرد وصول الملف، بلا ترتيب مضمون: احتفظ بها للسكربتات المستقلة مثل التحليلات، التي لا تعتمد على شيء.
<script src="/js/analytics.js" async></script>
<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>لا يكتشف المتصفح بعض الموارد الحرجة إلا متأخرًا جدًا: خط مُشار إليه داخل ملف CSS، أو صورة تُحمَّل في JavaScript. تُصلح <link rel="preload"> هذا الاكتشاف المتأخر بالتصريح عن المورد مباشرةً في <head>، مع السمة as الإلزامية كي يطبّق المتصفح الأولوية الصحيحة والتخزين المؤقت الصحيح. الحالة النموذجية: خطوط الويب، التي لولا ذلك لا تُطلب إلا بعد تنزيل CSS وتحليله.
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2" crossorigin>
<link rel="preload" as="image"
href="/img/hero-1600.jpg" fetchpriority="high">العائلة الأخيرة: تلميحات الشبكة منخفضة الأولوية. تُنشئ <link rel="preconnect"> الاتصال الكامل مسبقًا (DNS وTCP وTLS) بمصدر خارجي ستستخدمه قطعًا: حتى 300 مللي ثانية موفّرة على الطلب الأول. أما dns-prefetch فهي ابنة عمّها الخفيفة (تحليل DNS فقط)، مفيدة كبديل للمصادر الأقل يقينًا. وprefetch تُنزّل، أثناء الخمول، موردًا مخصّصًا لـ التنقّل التالي: صفحة الدفع من السلّة مثلًا. المقايضة واضحة: preload تخدم الصفحة الحالية، وprefetch تراهن على التالية.
<link rel="preconnect"
href="https://api.example.com">
<link rel="dns-prefetch"
href="https://cdn.example.com">
<link rel="prefetch" href="/checkout.html">