لقد قمت بتحسين صورك. أعددت التخزين المؤقت (caching). حتى أنك رقّيت خادمك. ومع ذلك ما زالت صفحتك تُحمّل أبطأ مما تريد. الأرجح أن السبب الحقيقي ليس في كودك على الإطلاق، بل في كومة السكريبتات الخارجية (third-party scripts) التي نسيت أنك أضفتها أصلاً.
أدوات تحليل الزيارات، ويدجت الدردشة، وسوم الإعلانات، أزرار المشاركة الاجتماعية، أدوات اختبار A/B، مدراء الوسوم (tag managers)... كلها تتسلل إلى موقعك واحدة تلو الأخرى، وكل واحدة تبدو غير ضارة بمفردها. لكن مجتمعة، يمكنها بسهولة أن تضيف 2-3 ثوانٍ إلى وقت التحميل دون أن تلمس سطراً واحداً من كودك الخاص.
لماذا تضر السكريبتات الخارجية بشدة بعملية تحسين وقت تحميل الصفحة
كل وسم سكريبت يواجهه المتصفح عادة يُشغّل سلسلة من ردود الفعل:
- عملية بحث DNS لنطاق لا تتحكم فيه
- اتصال TCP جديد ومصافحة TLS
- تحميل السكريبت نفسه
- تحليل وتنفيذ الكود على الخيط الرئيسي (main thread)
- غالباً، طلبات إضافية يُطلقها ذلك السكريبت (بكسلات، موارد فرعية، سكريبتات أخرى)
هنا بالضبط تنهار جهود تحسين وقت تحميل الصفحة بصمت. يمكنك أن تُقلص 200 مللي ثانية من زمن استجابة الخادم، ثم تخسرها فوراً بسبب ويدجت دردشة واحد يُحمّل ملفات خطوط خاصة به وCSS ودزينة من بكسلات التتبع.
مشكلة الخيط الرئيسي
معظم السكريبتات الخارجية تعمل على الخيط الرئيسي للمتصفح، وهو نفس الخيط المسؤول عن رسم صفحتك والاستجابة لتفاعل المستخدم. عندما يعطّل سكريبت ثقيل هذا الخيط، قد تبدو صفحتك محمّلة بينما هي في الواقع مجمّدة. يضغط المستخدم على زر ولا يحدث شيء. هذه ليست مشكلة رسم، بل مشكلة تنفيذ JavaScript، وهذا بالضبط ما يقيسه مؤشر Total Blocking Time من Google.
كيف تقيس الضرر فعلياً
لا تخمّن. افتح Chrome DevTools، انتقل إلى تبويب Network، وصفّي حسب النطاق. غالباً ستُفاجأ بعدد الطلبات المتجهة إلى نطاقات خارجية مقارنة بنطاقك الخاص.
للحصول على صورة أوضح، شغّل موقعك عبر أداة لتحليل سرعة الصفحة وتحقق من قسم "Third-Party Usage" في تقرير Lighthouse. هذا القسم يوضح:
- إجمالي وقت الحجب الناتج عن كل سكريبت
- وقت الخيط الرئيسي لكل طرف ثالث
- حجم البيانات المنقولة لكل سكريبت
WebPageTest خيار ممتاز آخر. عرض الشلال (waterfall view) الخاص به يُظهر بالضبط متى يُطلق كل طلب خارجي وكم من الوقت ينتظره المتصفح قبل المتابعة.
مثال سريع من الواقع
ويدجت دردشة مباشرة شهير واحد يمكن أن يضيف:
- حوالي 150 كيلوبايت من JavaScript
- 3-5 طلبات شبكة إضافية
- 200-400 مللي ثانية من حجب الخيط الرئيسي على جهاز جوال متوسط المواصفات
اضرب ذلك في مدير وسوم، وأداتي تحليل زيارات، وبكسل إعادة استهداف، وستكون قد بنيت موقعاً بطيئاً دون كتابة سطر واحد من كودك الخاص.
حلول عملية تُحدث فرقاً حقيقياً
1. راجع السكريبتات واحذف ما لا تحتاجه
راجع كل سكريبت في موقعك واسأل: هل نستخدم هذه البيانات فعلاً؟ أدوات اختبار A/B القديمة وبكسلات التسويق المهجورة هي أسهل المكاسب. حذف الوزن الميت دائماً أسرع من تحسينه.
2. حمّل السكريبتات بشكل غير متزامن أو أجّلها
معظم السكريبتات الخارجية لا تحتاج فعلياً إلى حجب عملية الرسم. استخدم خاصيتي async أو defer حيثما يسمح المزوّد بذلك:
<script src="https://example.com/widget.js" defer></script>
هذا يسمح للمتصفح بمواصلة رسم صفحتك بدلاً من التوقف لجلب وتشغيل السكريبت فوراً.
3. استخدم نمط الواجهة (Facade Pattern) للعناصر الثقيلة المضمّنة
عناصر YouTube المضمّنة وويدجت الدردشة وموجزات وسائل التواصل الاجتماعي من أشهر المتسببين بالبطء. بدلاً من تحميل السكريبت الكامل عند تحميل الصفحة، اعرض عنصراً بديلاً خفيفاً (صورة مصغرة أو ثابتة) ولا تُحمّل السكريبت الحقيقي إلا عندما يتفاعل المستخدم معه. هذا وحده يمكن أن يُقلل وزن الصفحة الأولي بمئات الكيلوبايتات.
4. استضف بنفسك ما تستطيع استضافته
الخطوط، وأحياناً مكتبات تحليل الزيارات، يمكن استضافتها ذاتياً بدلاً من جلبها من شبكة CDN خارجية. هذا يُزيل تماماً عملية البحث الإضافية عن DNS وتكاليف الاتصال، ويمنحك تحكماً أكبر في رؤوس التخزين المؤقت (caching headers).
5. حمّل السكريبتات عبر مدير وسوم، لكن راجعه بانتظام
مديرو الوسوم يسهّلون إضافة السكريبتات، وهذا بالضبط ما يجعلها تتحول إلى مكبات نفايات. حدّد تذكيراً كل ثلاثة أشهر لمراجعة ما يعمل فعلياً وحذف أي شيء غير مرتبط بحاجة عمل واضحة.
أين يتموضع الاستضافة في كل هذا
خادمك لا يستطيع منع سكريبت خارجي من أن يكون بطيئاً، لكنه يستطيع تسريع كل شيء آخر حوله، مما يمنحك مساحة أكبر من "ميزانية السرعة" للعمل بها. التخزين المؤقت السريع من جهة الخادم (server-side caching) وإعداد أداء مضبوط جيداً يعنيان أن أصولك الخاصة تُحمّل بسرعة، تاركة مساحة أكبر قبل أن تبدأ السكريبتات الخارجية بسحب إجمالي وقت التحميل إلى المنطقة الحمراء.
لقد تناولنا جانب القياس بتعمق أكبر في مقال كيف تقيس وقت تحميل الصفحة باستخدام أدوات تخبرك فعلاً بشيء مفيد، وإذا أردت فهم كيف تؤثر أولويات الرسم على ما يراه المستخدمون أولاً، اطّلع على كيف يجعل تحسين مسار الرسم الحرج صفحتك تظهر أسرع.
خلاصة القول
السكريبتات الخارجية ليست سيئة بطبيعتها. تحليل الزيارات مهم، وأدوات الدردشة تُحوّل الزوار إلى عملاء، وإيرادات الإعلانات تدفع الفواتير. المشكلة أنها تتراكم بصمت، ولا أحد يراجعها حتى يتحول تحسين وقت تحميل الصفحة إلى حالة طارئة.
اجعل من عادتك المتكررة: مرة كل ثلاثة أشهر، اسحب تقرير Lighthouse جديداً، تحقق من تفصيل الأطراف الخارجية، واحذف أي شيء لا يستحق مكانه. وقت التحميل عندك، ومستخدموك، سيشكرونك على ذلك.
