إزالة محتوى JavaScript غير المستخدَم

يمكن أن تؤدي لغة JavaScript غير المستخدَمة إلى إبطاء سرعة تحميل صفحتك:

  • إذا كانت لغة JavaScript render-blocking، على المتصفّح تنزيل النص البرمجي وتحليله وتجميعه وتقييمه قبل أن يتمكّن من متابعة كل الإجراءات الأخرى اللازمة لعرض الصفحة.
  • حتى إذا كان JavaScript غير متزامن (لا يمنع العرض)، يتنافس الرمز البرمجي مع الموارد الأخرى على عرض النطاق أثناء تنزيله، ما يؤدي إلى تأثيرات كبيرة في الأداء. كما أن إرسال التعليمات البرمجية غير المستخدمة عبر الشبكة يعد مضيعةً لمستخدمي الأجهزة المحمولة الذين ليس لديهم خطط بيانات غير محدودة.

أسباب تعذُّر تدقيق JavaScript غير المستخدَم

يُعلِم Lighthouse بكل ملف JavaScript يحتوي على أكثر من 20 كيلوبايت من الرموز غير المستخدَمة:

لقطة شاشة للتدقيق
انقر على قيمة في عمود عنوان URL لفتح رمز المصدر لنصّ البرمجة في علامة تبويب جديدة.

كيفية إزالة JavaScript غير المستخدَم

رصد محتوى JavaScript غير المستخدَم

يمكن أن تقدّم لك علامة التبويب "تغطية" في "أدوات مطوّري البرامج في Chrome" تحليلاً سطراً تلو الآخر للرموز البرمجية غير المستخدَمة.

يمكن أن تساعدك فئة Coverage في Puppeteer على التشغيل الآلي لمحاولة رصد الرمز البرمجي غير المستخدَم واستخراج الرمز البرمجي المستخدَم.

إنشاء أداة لدعم إزالة الرموز غير المستخدَمة

اطّلِع على اختبارات Tooling.Report التالية لمعرفة ما إذا كان أداة تجميع الحِزم تتيح ميزات تسهِّل تجنُّب الرموز البرمجية غير المستخدَمة أو إزالتها:

إرشادات خاصة بالمجموعة

Angular

إذا كنت تستخدم Angular CLI، يُرجى تضمين خرائط المصدر في إصدار الإنتاج لفحص الحِزم.

Drupal

يمكنك إزالة أصول JavaScript غير المستخدمة وإرفاق مكتبات Drupal المطلوبة فقط بالصفحة ذات الصلة أو بالمكوّن ذي الصلة في الصفحة. راجِع مستندات Drupal للحصول على التفاصيل. لتحديد المكتبات المرفقة التي تضيف لغة JavaScript دخيلة، يمكنك محاولة تشغيل تغطية الرمز البرمجي في "أدوات مطوري البرامج في Chrome". يمكنك تحديد المظهر أو الوحدة المسؤولة من عنوان URL للنص البرمجي عندما يكون تجميع JavaScript قيد الإيقاف في موقعك الإلكتروني على Drupal. يمكنك البحث عن التصاميم أو الوحدات التي تحتوي على العديد من النصوص البرمجية في القائمة والتي تتضمن الكثير من اللون الأحمر في تغطية الرمز البرمجي. ومن المفترض أن يُرفِق التصميم أو الوحدة مكتبة نصوص برمجية فقط في حال كانت مُستخدَمة في الصفحة. للاطّلاع على التفاصيل.

Joomla

يمكنك تقليل أو تغيير عدد إضافات Joomla التي تُحمِّل في صفحتك ملفات JavaScript غير المستخدَمة.

Magento

أوقِف حزمة JavaScript المدمجة في Magento.

React

إذا لم يكن العرض من جهة الخادم، يمكنك تقسيم حِزم JavaScript باستخدام React.lazy(). بخلاف ذلك، يمكن تقسيم الرمز باستخدام مكتبة تابعة لجهات خارجية، مثل المكوّنات القابلة للتحميل.

Vue

في حال عدم العرض من جهة الخادم واستخدام جهاز توجيه Vue، قسِّم الحزم حسب مسارات التحميل الكسول.

WordPress

يمكنك تقليل عدد مكونات WordPress الإضافية التي تُحمِّل في صفحتك ملفات JavaScript غير المستخدَمة أو تبديلها.

الموارد