إذا كان هناك نص برمجي تابع لجهة خارجية يعمل على إبطاء تحميل الصفحة، فلديك خياران لتحسين الأداء:
- أزِلها إذا لم تضِف قيمة واضحة إلى موقعك الإلكتروني.
- قم بتحسين عملية التحميل.
توضّح هذه المشاركة كيفية تحسين عملية تحميل النصوص البرمجية التابعة لجهات خارجية باستخدام الأساليب التالية:
- استخدام السمة
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 Observer
هي واجهة برمجة تطبيقات للمتصفح ترصد بكفاءة الحالات التي يدخل فيها عنصر إلى مساحة العرض في المتصفح أو يخرج منها، ويمكنك استخدامها لتنفيذ هذه التقنية.
lazysizes هي مكتبة JavaScript رائجة
لتحميل الصور وiframes بشكل بطيء.
تتيح هذه الميزة تضمين فيديوهات YouTube و
تطبيقات مصغّرة.
وتتوفّر أيضًا إمكانية اختيارية
لاستخدام Intersection Observer.
يُعدّ استخدام السمة loading لتأخير تحميل الصور وإطارات iframe
بديلاً رائعًا لأساليب JavaScript، وقد أصبح متاحًا مؤخرًا
في الإصدار 76 من Chrome.
تحسين طريقة عرض النصوص البرمجية التابعة لجهات خارجية
إليك بعض الاستراتيجيات الموصى بها لتحسين استخدامك للنصوص البرمجية التابعة لجهات خارجية.
استضافة شبكة توصيل المحتوى (CDN) التابعة لجهة خارجية
من الشائع أن يقدّم المورّدون التابعون لجهات خارجية عناوين URL لملفات JavaScript التي يستضيفونها، وعادةً ما تكون على شبكة توصيل المحتوى (CDN). تتمثل فوائد هذا الأسلوب في إمكانية البدء بسرعة من خلال نسخ عنوان URL ولصقه، ولن تتكبد أي أعباء صيانة. يتعامل العميل الخارجي مع إعدادات الخادم وتعديلات النصوص البرمجية.
ولكن نظرًا لأنها ليست على نفس المصدر مثل بقية مواردك، فإن تحميل الملفات من شبكة توصيل محتوى (CDN) عام يصاحبه تكلفة الشبكة. على المتصفّح إجراء بحث في نظام أسماء النطاقات وإنشاء اتصال HTTP جديد، وعلى المصادر الآمنة، إجراء مصافحة طبقة المقابس الآمنة (SSL) مع خادم المورّد.
عند استخدام ملفات من خوادم تابعة لجهات خارجية، نادرًا ما يمكنك التحكّم في التخزين المؤقت. قد يؤدي الاعتماد على استراتيجية التخزين المؤقت لشخص آخر إلى إعادة جلب النصوص البرمجية من الشبكة بشكل غير ضروري أكثر من اللازم.
استضافة النصوص البرمجية التابعة لجهات خارجية بنفسك
إنّ الاستضافة الذاتية للنصوص البرمجية التابعة لجهات خارجية هي خيار يمنحك مزيدًا من التحكّم في عملية تحميل نص برمجي. ويمكنك إجراء ما يلي من خلال الاستضافة الذاتية:
- تقليل وقت البحث في نظام أسماء النطاقات ووقت الرحلة ذهابًا وإيابًا
- تحسين عناوين تخزين مؤقت لبروتوكول HTTP
- يمكنك الاستفادة من HTTP/2 أو HTTP/3 الأحدث.
على سبيل المثال، تمكّن Casper من تقليل أوقات التحميل بمقدار 1.7 ثانية من خلال الاستضافة الذاتية لنص اختبار A/B.
يرتبط الاستضافة الذاتية بسلبيّة كبيرة، وهي أنّ النصوص البرمجية قد تصبح قديمة ولن تتلقّى تحديثات تلقائية عند إجراء تغيير على واجهة برمجة التطبيقات أو إصلاح مشكلة أمان.
استخدام مهام الخدمة لتخزين النصوص البرمجية مؤقتًا من الخوادم التابعة لجهات خارجية
يمكنك استخدام خدمة "العامل الجاري" لتخزين النصوص البرمجية مؤقتًا من خوادم تابعة لجهات خارجية كبديل للاستضافة الذاتية. يمنحك ذلك تحكمًا أكبر في التخزين المؤقت، مع الاحتفاظ بمزايا شبكات توصيل المحتوى التابعة لجهة خارجية.
يمكنك التحكّم في عدد المرات التي تتم فيها إعادة جلب النصوص البرمجية من الشبكة، و
إنشاء استراتيجية تحميل تُبطئ طلبات موارد تابعة لجهات خارجية وغير ضرورية
إلى أن يصل المستخدم إلى تفاعل رئيسي على الصفحة.
باستخدام preconnect، يمكنك إجراء عمليات ربط مبكر والمساعدة أيضًا في
تقليل تكاليف الشبكة.