هذا الدرس يبني على رأس المستند، HTML وJavaScript، الصور المتجاوبة والأداء، ودليل الأسلوب. أداء الصور مغطّى بالكامل هناك — هنا نكمل الصورة: ترتيب تحميل الموارد، والفحص الفعلي بأدوات المطوّر.
Core Web Vitals من زاوية HTML
Google تقيس تجربة الصفحة الفعلية بثلاثة مقاييس رئيسية. اثنان منها يتأثران مباشرة بقرارات HTML:
- LCP (وقت ظهور أكبر عنصر مرئي، غالبًا صورة أو عنوان رئيسي): لا تضع
loading="lazy"على الصورة الرئيسية الظاهرة فور فتح الصفحة (راجع الصور المتجاوبة والأداء للتفصيل الكامل) — هذا أكبر خطأ HTML شائع يبطئ LCP. - CLS (قفزات التخطيط غير المتوقعة): يُحل غالبًا بـ
width/heightعلى الصور، وهو مشروح بالتفصيل في نفس الدرس المذكور أعلاه. - INP (استجابة الصفحة للتفاعل): يتأثر أساسًا بجافاسكريبت وCSS، وHTML يلعب دورًا غير مباشر عبر ترتيب تحميل الموارد الذي يشرحه هذا الدرس — سكربت ثقيل يحجب المعالج المستخدم في التفاعل.
ترتيب تحميل الموارد
المتصفح يقرأ HTML من أعلى لأسفل، لكن أنواع الموارد المختلفة تتصرف بشكل مختلف أثناء القراءة:
<head>
<link rel="stylesheet" href="styles.css"> <!-- يحجب العرض حتى يكتمل تحميله -->
<script src="analytics.js"></script> <!-- يحجب تحليل بقية HTML حتى ينتهي -->
</head>
<link rel="stylesheet">يحجب العرض المرئي (Render-Blocking) — المتصفح لا يريد رسم صفحة قد يعيد تنسيقها فورًا بعد وصول CSS، فينتظره.<script>عادي يحجب تحليل بقية HTML (Parser-Blocking) — المتصفح يتوقف عن قراءة الصفحة، يحمّل السكربت، يشغّله، ثم يكمل. هذا سبب النصيحة التقليدية بوضع السكربتات آخر<body>.defer/asyncيحرّران المتصفح من هذا الانتظار (راجع القسم التالي).preload/preconnect/dns-prefetch(سمةrelعلى<link>) لا تحجب شيئًا، بل تُسرّع موارد ستُحتاج لاحقًا يقينًا:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://api.example.com">
| السمة | متى تستخدمها |
|---|---|
preload | مورد متأكد أنك ستحتاجه فورًا (خط رئيسي، صورة LCP) — يرفع أولويته |
preconnect | ستطلب من نطاق خارجي عدة موارد قريبًا — يبدأ اتصال DNS/TLS مبكرًا |
dns-prefetch | بديل أخف من preconnect لنطاقات أقل يقينًا بالاستخدام الفوري |
⚠️ لا تُكثر من
preload— كل مورد تُحمّله مسبقًا "يسرق" أولوية شبكة من موارد أخرى تحتاجها الصفحة. استخدمها لأهم مورد أو مورَدين فقط.
defer مقابل async مقابل بلا شيء
درس HTML وJavaScript قدّم defer بإيجاز — إليك الفرق الكامل بينها وبين async:
<script src="a.js"></script> <!-- يحجب التحليل فورًا -->
<script src="b.js" defer></script> <!-- يُحمَّل بالخلفية، يُشغَّل بعد اكتمال تحليل HTML، بترتيب ظهوره -->
<script src="c.js" async></script> <!-- يُحمَّل بالخلفية، يُشغَّل فور اكتمال تحميله (يقاطع التحليل حينها) -->
| بلا سمة | defer | async | |
|---|---|---|---|
| يحجب تحليل HTML أثناء التحميل؟ | نعم | لا | لا |
| متى يُشغَّل؟ | فورًا، مكانه بالضبط | بعد اكتمال تحليل الصفحة | فور اكتمال تحميله (قد يقاطع التحليل) |
| يحافظ على ترتيب التنفيذ مع سكربتات أخرى؟ | نعم (طبيعي) | نعم | لا — كل سكربت async يعمل بمجرد جاهزيته |
القاعدة العملية: defer هو الخيار الافتراضي الآمن لأي سكربت يحتاج DOM كاملًا أو يعتمد على ترتيب تنفيذ مع سكربتات أخرى (وهذه أغلب الحالات). async يناسب سكربتات مستقلة تمامًا لا تلمس DOM ولا تعتمد على غيرها — تحليلات الزيارات مثال شائع.
أدوات المطوّر لفحص HTML فعليًا
- لوحة Elements تعرض DOM الحي كما هو الآن، بعد أي تعديل جافاسكريبت — مختلفة تمامًا عن "عرض المصدر" (Ctrl+U) الذي يعرض HTML الأصلي كما وصل من الخادم فقط. لو عدّل جافاسكريبت الصفحة، فحص المصدر لن يُظهر ذلك — لوحة Elements هي المرجع الحقيقي دائمًا.
- لوحة Accessibility (ضمن Elements أو منفصلة حسب المتصفح) تعرض شجرة إمكانية الوصول فعليًا: الاسم والدور اللذين سيسمعهما قارئ الشاشة لكل عنصر — استخدمها كما ذُكر في إمكانية الوصول المتقدمة.
- Lighthouse / PageSpeed Insights يعطيك تقرير Core Web Vitals فعليًا مع توصيات محدّدة مرتبطة بعناصر HTML بعينها في صفحتك.
- لوحة Network تعرض ترتيب تحميل الموارد الفعلي — طريقة مباشرة للتحقق هل CSS/JS يحجبان العرض كما ناقشنا أعلاه، وترتيب الأولوية الحقيقي لكل مورد.
اختبار الجوال وقارئ الشاشة فعليًا
محاكاة الجوال في أدوات المطوّر (Device Toolbar) تختبر الحجم فقط — لا تكشف مشاكل لمس حقيقية (زر صغير جدًا للإصبع) ولا سلوك قارئ شاشة حقيقي. قبل اعتماد أي صفحة حسّاسة للوصول:
- اختبرها على جهاز جوال حقيقي، لا محاكاة فقط.
- اختبرها بقارئ شاشة حقيقي: VoiceOver (مدمج بـ iOS/Mac)، TalkBack (أندرويد)، أو NVDA (ويندوز، مجاني).
الأخطاء الشائعة
- ❌
loading="lazy"على صورة LCP — يبطئ أهم مقياس بدل تحسينه (تفصيل كامل في درس الصور). - ❌ سكربت ثقيل بلا
defer/asyncأعلى<head>— يحجب ظهور الصفحة بالكامل. - ❌ الإفراط في
preloadلموارد غير مؤكد الحاجة الفورية إليها. - ❌ الثقة بمحاكاة الجوال في DevTools وحدها كبديل كامل عن اختبار جهاز حقيقي وقارئ شاشة حقيقي.
- ❌ الخلط بين "عرض المصدر" ولوحة Elements عند تصحيح مشكلة ظهرت بعد تنفيذ جافاسكريبت.
خلاصة
CSS يحجب العرض، والسكربت العادي يحجب التحليل — defer (الخيار الافتراضي الآمن) وasync يحرّران المتصفح من هذا الانتظار بطريقتين مختلفتين. preload/preconnect يسرّعان موارد مؤكدة الحاجة دون إفراط. ولفحص كل هذا فعليًا: لوحة Elements للـ DOM الحي، Network لترتيب التحميل الحقيقي، Lighthouse لتقرير Core Web Vitals، واختبار حقيقي على جهاز وقارئ شاشة حقيقيين قبل النشر.