إذا كان هناك نص برمجي تابع لجهة خارجية يعمل على إبطاء تحميل الصفحة، فأمامك خياران لتحسين الأداء:
- وننصحك بإزالتها إذا لم تكن تضيف قيمة واضحة إلى موقعك الإلكتروني.
- تحسين عملية التحميل
توضّح هذه المشاركة كيفية تحسين عملية تحميل النصوص البرمجية التابعة لجهات خارجية باستخدام الأساليب التالية:
- استخدام السمة
asyncأوdeferعلى علامات<script> - إجراء عمليات ربط مبكرة بالمصادر المطلوبة
- التحميل الكسول
- تحسين طريقة عرض النصوص البرمجية التابعة لجهات خارجية
استخدام async أو defer
نظرًا لأنّ النصوص البرمجية المتزامنة تؤخّر إنشاء DOM وعرضه، عليك دائمًا تحميل النصوص البرمجية التابعة لجهات خارجية بشكل غير متزامن ما لم يكن من الضروري تشغيل النص البرمجي قبل عرض الصفحة.
تخبر السمتان async وdefer المتصفّح بأنّه يمكنه مواصلة تحليل ترميز HTML أثناء تحميل النص البرمجي في الخلفية، ثم تنفيذ النص البرمجي بعد التحميل. بهذه الطريقة، لا تحظر عمليات تنزيل النصوص البرمجية إنشاء DOM أو عرض الصفحة،
ما يتيح للمستخدم مشاهدة الصفحة قبل الانتهاء من تحميل جميع النصوص البرمجية.
<script async src="script.js">
<script defer src="script.js">
يكمن الفرق بين السمتَين async وdefer في الحالات التي ينفّذ فيها المتصفّح النصوص البرمجية.
async
يتم تنفيذ النصوص البرمجية التي تتضمّن السمة async في المرة الأولى بعد
انتهاء التنزيل وقبل حدث
load في النافذة. هذا يعني أنّه من المحتمل (والمحتمل) ألّا يتم تشغيل async نصوص برمجية بالترتيب الذي تظهر به في رمز HTML. ويعني ذلك أيضًا أنه يمكنهم مقاطعة إنشاء DOM إذا
انتهوا من التنزيل بينما لا يزال المحلل قيد العمل.
async حظر تحليل HTML.defer
النصوص البرمجية التي تتضمّن السمة defer يتم تنفيذها بعد انتهاء تحليل HTML بالكامل،
ولكن قبل حدث
DOMContentLoaded. تضمن defer تشغيل النصوص البرمجية بالترتيب الذي تظهر به في HTML ولا تحظر المحلل اللغوي.
defer التشغيل حتى
ينتهي المتصفّح من تحليل ترميز HTML.- يمكنك استخدام
asyncإذا كان من المهم تشغيل النص البرمجي في مرحلة مبكرة من عملية التحميل. - استخدام
deferمع الموارد الأقل أهمية، مثل مشغّل فيديو في الجزء السفلي غير المرئي من الصفحة
يمكن أن يؤدي استخدام هذه السمات إلى تسريع تحميل الصفحة بشكل ملحوظ. على سبيل المثال، أجّلت Telegraph جميع نصوصها البرمجية، بما في ذلك الإعلانات والتحليلات، وحسنت وقت تحميل الإعلانات بمقدار أربع ثوانٍ في المتوسط.
إجراء عمليات ربط مبكرة بالمصادر المطلوبة
يمكنك توفير ما بين 100 و500 مللي ثانية من خلال إنشاء اتصالات مبكرة بمصادر مهمة تابعة لجهات خارجية.
يمكن أن يساعدك نوعان من <link>،
preconnect وdns-prefetch، هنا:
preconnect
يخبر <link rel="preconnect"> المتصفّح بأنّ صفحتك تريد إنشاء اتصال مع مصدر آخر، وأنّك تريد بدء العملية في أقرب وقت ممكن. عندما يطلب المتصفِّح موردًا من المصدر المتصل مسبقًا،
ستبدأ عملية التنزيل على الفور.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
تتعامل السمة <link rel="dns-prefetch> مع مجموعة فرعية صغيرة من القيم
التي تعالجها <link rel="preconnect">. يتضمن إجراء الاتصال بحث نظام أسماء النطاقات وتأكيد اتصال بروتوكول التحكم بالنقل (TCP)، وبالنسبة إلى المصادر الآمنة، فإن مفاوضات بروتوكول أمان طبقة النقل (TLS).
تطلب خدمة dns-prefetch من المتصفِّح ضبط نظام أسماء النطاقات الخاص بنطاق معيّن فقط قبل طلبه صراحةً.
يمكن استخدام التلميح preconnect على أفضل نحو لإجراء الاتصالات الأكثر أهمية فقط. بالنسبة إلى
النطاقات الأقل أهمية التابعة لجهات خارجية، يمكنك استخدام <link rel=dns-prefetch>.
<link rel="dns-prefetch" href="http://example.com">
يختلف دعم المتصفّح dns-prefetch
قليلاً عن توافق preconnect،
لذا يمكن أن يكون dns-prefetch بمثابة عنصر احتياطي للمتصفّحات التي لا تتوافق مع
preconnect. استخدِم علامات روابط منفصلة لتنفيذ هذا الإجراء بأمان:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
التحميل الكسول للموارد التابعة لجهات خارجية
يمكن أن تؤدي الموارد المضمنة التابعة لجهات خارجية إلى إبطاء تحميل الصفحة بشكل كبير إذا تم إنشاؤها بشكل سيئ. إذا لم تكن الإعلانات ذات أهمية كبيرة أو كانت في الجزء السفلي غير المرئي من الصفحة (أي إذا كان على المستخدمين الانتقال للأسفل أو للأعلى للاطّلاع عليها)، من المفيد استخدام طريقة "التحميل الكسول" لتحسين سرعة الصفحة ومقاييس عرض المحتوى. بهذه الطريقة، يحصل المستخدمون على محتوى الصفحة الرئيسية بشكل أسرع وتحصل على تجربة أفضل.
إحدى الطرق الفعّالة هي التحميل الكسول للمحتوى التابع لجهة خارجية بعد تحميل محتوى الصفحة الرئيسية. وتتناسب الإعلانات مع هذا المنهج.
تُعدّ الإعلانات مصدرًا مهمًا للدخل للعديد من المواقع الإلكترونية، ولكنّ المستخدمين يزورونها للحصول على المحتوى. ومن خلال \"التحميل الكسول\" وتقديم المحتوى الرئيسي بسرعة أكبر، يمكنك زيادة النسبة المئوية الإجمالية لإمكانية العرض للإعلانات. على سبيل المثال، بدّلت MediaVine إلى الإعلانات ذات التحميل الكسول وشهدت تحسّنًا بنسبة 200% في سرعة تحميل الصفحات. يتضمّن "مدير إعلانات Google" مستندات حول كيفية التحميل الكسول للإعلانات
يمكنك أيضًا ضبط محتوى تابع لجهة خارجية لتحميله فقط عندما ينتقل المستخدمون لأول مرة إلى ذلك القسم من الصفحة.
Intersection Monitorer
هي واجهة برمجة تطبيقات للمتصفّح ترصد بفعالية وقت دخول عنصر إلى إطار عرض المتصفّح أو خروجه منه، ويمكنك استخدامها لتنفيذ هذا الأسلوب.
الترميز الكسول هو مكتبة JavaScript شائعة
لصور التحميل الكسول وiframes.
وهي تدعم التضمينات
والتطبيقات المصغَّرة في YouTube.
كما أن لديها دعمًا اختياريًا
لأداة Intersection Monitorer.
إنّ استخدام السمة loading للصور وإطارات iframe التي يتم تحميلها ببطء
هو بديل رائع لتقنيات JavaScript، وقد أصبحت متوفّرة مؤخرًا
في الإصدار 76 من Chrome.
تحسين طريقة عرض النصوص البرمجية التابعة لجهات خارجية
في ما يلي بعض الاستراتيجيات الموصى بها لتحسين استخدام النصوص البرمجية التابعة لجهات خارجية.
استضافة شبكة توصيل المحتوى (CDN) التابعة لجهة خارجية
من الشائع أن يقدّم المورّدون الخارجيون عناوين URL لملفات JavaScript التي يستضيفها، وتكون عادةً على شبكة توصيل المحتوى (CDN). تكمن فوائد هذا المنهج في أنّه يمكنك البدء بسرعة، فما عليك سوى نسخ عنوان URL ولصقه، وبدون النفقات العامة للصيانة. يتعامل المورّد الخارجي مع إعدادات الخادم وتحديثات النص البرمجي.
ولكن نظرًا لأن هذه الملفات ليست على المصدر نفسه لبقية مواردك، فإن تحميل الملفات من شبكة توصيل محتوى (CDN) عامة يتطلّب تكلفة الشبكة. يحتاج المتصفح إلى إجراء بحث نظام أسماء النطاقات وإنشاء اتصال HTTP جديد وإجراء تأكيد اتصال طبقة المقابس الآمنة مع خادم المورد في المصادر الآمنة.
عندما تستخدم ملفات من خوادم تابعة لجهات خارجية، نادرًا ما يمكنك التحكم في التخزين المؤقت. قد يؤدي الاعتماد على استراتيجية التخزين المؤقت الخاصة بشخص آخر إلى إعادة جلب النصوص البرمجية بشكل غير ضروري من الشبكة بشكل متكرر جدًا.
النصوص البرمجية التابعة لجهات خارجية ذاتية الاستضافة
تتيح لك الاستضافة الذاتية للنصوص البرمجية التابعة لجهات خارجية إمكانية التحكّم بشكل أكبر في عملية تحميل النص البرمجي. من خلال الاستضافة الذاتية، يمكنك إجراء ما يلي:
- تقليل أوقات البحث في نظام أسماء النطاقات والإرسال والاستقبال
- تحسين رؤوس التخزين المؤقت لبروتوكول HTTP
- يمكنك الاستفادة من HTTP/2 أو من بروتوكول HTTP/3 الأحدث.
على سبيل المثال، تمكّن "كاسبر" من تقليل مدّة التحميل بمقدار 1.7 ثانية عن طريق الاستضافة الذاتية لنص اختبار A/B.
مع ذلك، تنطوي الاستضافة الذاتية على جانب سلبي واحد، وهو: قد تصبح النصوص البرمجية قديمة ولا تتلقّى تحديثات تلقائية عند إدخال تغيير في واجهة برمجة التطبيقات أو إصلاح أمان.
استخدام مشغّلي الخدمات لتخزين النصوص البرمجية من خوادم تابعة لجهات خارجية مؤقتًا
يمكنك استخدام مشغِّلات الخدمات لتخزين النصوص البرمجية من خوادم تابعة لجهات خارجية كبديل للاستضافة الذاتية. يمنحك هذا تحكمًا أكبر في التخزين المؤقت، مع الاحتفاظ بمزايا شبكات توصيل المحتوى (CDN) التابعة لجهة خارجية.
يمكنك التحكّم في عدد المرات التي تتم فيها إعادة جلب النصوص البرمجية من الشبكة، وإنشاء استراتيجية تحميل تحدّ من طلبات الحصول على الموارد غير الأساسية التابعة لجهات خارجية، إلى أن يصل المستخدم إلى تفاعل رئيسي على الصفحة.
باستخدام "preconnect"، يمكنك إجراء اتصالات مبكرة والمساعدة
في الحد من تكاليف الشبكة.