قائمة فحص HTML لسرعة الصفحة
الصق HTML صفحة لإيجاد السكربتات المعطِّلة للعرض والصور بلا أبعاد أو تحميل كسول وغياب viewport و@import وdocument.write وغيرها.
افتح الصفحة واستخدم "عرض مصدر الصفحة" (Ctrl+U)، ثم انسخ كل شيء والصقه هنا.
أضف defer (أو async للسكربتات المستقلة) ليتمكن المتصفح من عرض الصفحة قبل تنزيل السكربت.
<script src="https://cdn.example.com/analytics.js">
حدّد width وheight (أو aspect-ratio في CSS) ليحجز المتصفح المساحة ولا يتحرك التخطيط (CLS).
<img src="/hero.jpg" alt="Hero">
أضف loading="lazy" للصور غير الظاهرة في الشاشة الأولى.
<img src="/b.png" alt="B" width="300" height="200">
قدّم الصور بصيغة WebP أو AVIF (مثلًا عبر <picture>)، فهي أصغر عادةً بنسبة 25–50% بالجودة نفسها.
<img src="/hero.jpg" alt="Hero"> <img src="/a.png" alt="A" width="300" height="200"> <img src="/b.png" alt="B" width="300" height="200">
أضف loading="lazy" للعناصر المضمّنة مثل الفيديو والخرائط.
<iframe src="https://www.youtube.com/embed/xyz">
أضف <meta name="viewport" content="width=device-width, initial-scale=1"> لعرض صحيح على الجوال.
<meta name="viewport">
أضف <meta charset="UTF-8"> كأول عنصر في <head>.
<meta charset="UTF-8">
أضف <link rel="preconnect"> للمصادر الخارجية المهمة لإنشاء الاتصالات مبكرًا.
cdn.example.com
الفحوصات الناجحة (8)
- ✓ عدد قليل من ملفات الأنماط الحاجبة
- ✓ لا يوجد CSS @import
- ✓ قواعد @font-face المضمّنة تحدد font-display
- ✓ الصورة الأولى غير محمّلة بشكل كسول
- ✓ لا يوجد document.write()
- ✓ الشيفرة المضمّنة صغيرة
- ✓ حجم DOM معقول
- ✓ حجم HTML معقول
ما هو قائمة فحص سرعة الصفحة؟
تراجع هذه الأداة مصدر HTML لصفحة وفق قائمة فحص لمشاكل أداء الواجهة الأمامية الشائعة وتشرح كيفية إصلاح كل منها: السكربتات وأوراق الأنماط المعطِّلة للعرض وCSS @import وخط @font-face بلا font-display والصور بلا أبعاد أو تحميل كسول وصورة رئيسية محمّلة كسولاً وصيغ الصور القديمة وiframes بلا تحميل كسول وغياب viewport أو charset وdocument.write والأكواد المضمنة الكبيرة وغياب preconnect وDOM أو HTML ضخم الحجم.
كيفية استخدام قائمة فحص سرعة الصفحة
- افتح صفحتك واستخدم View page source (Ctrl+U) وانسخ كل شيء.
- الصق HTML واضغط Analyze.
- راجع النتائج مرتبة بحسب التأثير مع الوسوم المخالفة كعينات.
- وسّع «Passed checks» لمعرفة ما هو سليم أصلاً.
مثال
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect
متى تستخدم قائمة فحص سرعة الصفحة
استخدمه لمراجعة ثابتة سريعة للقوالب أو الصفحات أو عندما لا تستطيع تشغيل Lighthouse. لا يقيس أزمنة التحميل الفعلية ولا Core Web Vitals ولا يرى الموارد التي يضيفها جافاسكربت؛ واستخدم Lighthouse أو PageSpeed Insights لبيانات المختبر والميدان.
كيف يعمل قائمة فحص سرعة الصفحة
يُفحص HTML في متصفحك بمحلل وسوم خفيف بعد إزالة التعليقات. تفحص كل قاعدة وسوماً وسمات محددة – مثل وسوم <script> الخارجية في <head> بلا async أو defer أو type=module، أو <img> بلا width وheight معاً، أو صور بعد أول اثنتين بلا loading="lazy"، أو أكثر من 1,500 عنصر إجمالاً. تُقارن أصول السكربتات وأوراق الأنماط التابعة لأطراف ثالثة بروابط preconnect وdns-prefetch. لا تُحمَّل أي صفحة ولا يعمل أي جافاسكربت.
حالات الاستخدام الشائعة
- إيجاد السكربتات التي تعطل العرض في ترويسة قالب.
- رصد الصور المسببة لإزاحة التخطيط لأنها بلا width وheight.
- التحقق من أن الصورة الرئيسية ليست محمّلة كسولاً (سيء لـ LCP).
- مراجعة قوالب بريد HTML أو صفحات الهبوط قبل الإطلاق.
الأسئلة الشائعة
هل هذا مثل Google PageSpeed Insights؟
لا. يحمّل PageSpeed Insights الصفحة ويقيسها. أما هذه الأداة فتقرأ HTML الذي تلصقه فقط، فهي فورية وخاصة لكنها لا تقيس السرعة.
لماذا لا تُحمَّل أول صورة تحميلاً كسولاً؟
الصورة الأكبر فوق خط الطي هي عادة عنصر Largest Contentful Paint. يؤخرها التحميل الكسول إلى ما بعد التخطيط مما يضر بـ LCP.
هل يجب أن يستخدم كل سكربت defer؟
السكربتات التي تحتاج DOM وتعمل بالترتيب ينبغي أن تستخدم defer؛ والمستقلة مثل التحليلات يمكنها استخدام async. وينبغي أن يبقى الكود الحرج المضمن صغيراً.