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