تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

أفضل الممارسات لاستخدام التضمينات التابعة لجهات خارجية

نظرة عامة على أساليب تحميل التضمينات الشائعة التابعة لجهات خارجية بكفاءة.

Addy Osmani

Katie Hempenius

Leena Sohoni

تستخدم العديد من المواقع الإلكترونية تضمينات تابعة لجهات خارجية لترك انطباع جيد لدى المستخدم من خلال تفويض بعض أقسام صفحة الويب إلى موفّر محتوى آخر. تشمل الأمثلة الأكثر شيوعًا لتضمين المحتوى التابع لجهات خارجية مشغّلات الفيديو وخلاصات وسائل التواصل الاجتماعي والخرائط والإعلانات.

يمكن أن يؤثر المحتوى التابع لجهات خارجية في أداء صفحة بعدة طرق. وقد يؤدي ذلك إلى حظر العرض، أو التعارض مع موارد أخرى مهمة للشبكة أو معدل نقل البيانات، أو التأثير في مقاييس "مؤشرات أداء الويب الأساسية". وقد تؤدي أيضًا التضمينات التابعة لجهات خارجية إلى متغيّرات في التصميم أثناء تحميلها. تناقش هذه المقالة أفضل ممارسات الأداء التي يمكنك استخدامها عند تحميل التضمينات التابعة لجهات خارجية وتقنيات التحميل الفعالة وأداة إنهاء متغيّرات التصميم التي تساعد في تقليل متغيّرات التصميم للتضمينات الشائعة.

ما المقصود بالتضمين؟

التضمين التابع لجهة خارجية هو أي محتوى معروض على موقعك الإلكتروني: * لم تكتبه أنت * يتم عرضه من خوادم تابعة لجهات خارجية

يتم عرض عدة تضمينات خارج الشاشة، ويمكن تحميلها باستخدام طريقة التحميل الكسول.

وغالبًا ما يتم استخدام المحتوى المضمّن في ما يلي: * تستخدم المواقع الإلكترونية ذات الصلة بالرياضة والأخبار والترفيه والموضة الفيديوهات لتعزيز المحتوى النصي. * تضمِّن المؤسسات التي لديها حسابات نشطة على Twitter أو وسائل التواصل الاجتماعي خلاصات من هذه الحسابات في صفحاتها على الويب للتفاعل والتواصل مع المزيد من المستخدمين. * غالبًا ما تتضمّن صفحات المطاعم والمتنزهات وأماكن الفعاليات الخرائط.

يتم عادةً تحميل التضمينات التابعة لجهات خارجية في عناصر <iframe> على الصفحة. يقدّم مقدّمو الخدمات من جهات خارجية مقتطفات HTML غالبًا ما تتكون من <iframe> الذي يسحب صفحة مؤلّفة من ترميز ونصوص برمجية وأوراق أنماط. يستخدم بعض مقدّمي الخدمة أيضًا مقتطف نص برمجي يُدخل <iframe> ديناميكيًا لعرض محتوى آخر. ويمكن أن يؤدي ذلك إلى زيادة حجم التضمينات التابعة لجهات خارجية ويؤثر في أداء الصفحة من خلال تأخير تضمين محتوى الطرف الأول.

تأثير التضمينات التابعة لجهات خارجية في الأداء

يتضمّن العديد من التضمينات الشائعة أكثر من 100 كيلوبايت من JavaScript، وقد يصل حجمها أحيانًا إلى 2 ميغابايت. تستغرق المزيد من الوقت للتحميل وتبقي سلسلة التعليمات الرئيسية مشغولة عند التنفيذ. تساعد أدوات مراقبة الأداء، مثل Lighthouse وأدوات مطوّري البرامج في Chrome، في قياس تأثير الإعلانات المضمّنة التابعة لجهات خارجية في الأداء.

تقليل تأثير الرمز البرمجي التابع لجهة خارجية تعرض عملية تدقيق Lighthouse قائمة بمقدّمي الخدمات الخارجيين الذين تستخدمها إحدى الصفحات، بالإضافة إلى الحجم ووقت حظر سلسلة التعليمات الرئيسية. يتوفّر التدقيق من خلال "أدوات مطوري البرامج في Chrome" ضمن علامة التبويب Lighthouse.

من الممارسات الجيدة إجراء تدقيق دوري لتأثير أداء التضمينات والرموز البرمجية التابعة لجهات خارجية لأنّ رمز المصدر المضمّن قد يتغيّر. يمكنك الاستفادة من هذه الفرصة لإزالة أي رمز مكرّر.

التقليل من تأثير الرمز البرمجي التابع لجهة خارجية

جارٍ تحميل أفضل الممارسات

يمكن أن تؤثر التضمينات التابعة لجهات خارجية في الأداء بشكل سلبي، ولكنّها توفّر أيضًا وظائف مهمة. لاستخدام التضمينات التابعة لجهات خارجية بفعالية وتقليل تأثيرها في الأداء، يُرجى اتّباع الإرشادات أدناه.

ترتيب النصوص البرمجية

في الصفحة ذات التصميم الجيد، سيكون محتوى الطرف الأول الرئيسي هو محور تركيز الصفحة، بينما ستشغل التضمينات التابعة لجهات خارجية في الأشرطة الجانبية أو تظهر بعد محتوى الطرف الأول.

لتقديم أفضل تجربة للمستخدم، يجب تحميل المحتوى الرئيسي بسرعة وقبل أي محتوى داعم آخر. على سبيل المثال، يجب تحميل نص الأخبار في صفحة الأخبار قبل التضمينات لخلاصة Twitter أو الإعلانات.

قد تعرقل طلبات التضمينات التابعة لجهات خارجية تحميل محتوى الطرف الأول، لذلك من المهم موضع علامة النص البرمجي التابعة لجهة خارجية. يمكن أن تؤثر النصوص البرمجية في تسلسل التحميل بسبب إيقاف إنشاء DOM مؤقتًا أثناء تنفيذ النصوص البرمجية. يمكنك وضع علامات النصوص البرمجية التابعة لجهات خارجية بعد علامات الطرف الأول الرئيسية واستخدام السمتَين async أو defer لتحميلها بشكل غير متزامن.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

التحميل الكسول

ولأنّ المحتوى التابع لجهة خارجية يأتي عادةً بعد المحتوى الأساسي، قد لا يكون مرئيًا في إطار العرض عند تحميل الصفحة. وفي هذه الحالة، قد يتم تأجيل تنزيل الموارد التابعة لجهات خارجية إلى أن ينتقل المستخدم للأسفل إلى ذلك الجزء من الصفحة. ولا يساعد ذلك في تحسين التحميل الأولي للصفحة فحسب، بل يحدّ أيضًا من تكاليف التنزيل للمستخدمين المشتركين في خطط البيانات الثابتة واتصالات الشبكة البطيئة.

يُعرف تأخير تنزيل المحتوى إلى أن يكون هناك حاجة إليه بالتحميل الكسول. بناءً على المتطلبات ونوع التضمين، يمكنك استخدام أساليب مختلفة للتحميل الكسول كما هو موضّح أدناه.

التحميل الكسول المحلي للموقع الإلكتروني `<iframe>`

بالنسبة إلى التضمينات التابعة لجهات خارجية التي يتم تحميلها من خلال عناصر <iframe>، يمكنك استخدام التحميل الكسول على مستوى المتصفِّح لتأجيل تحميل إطارات iframe خارج الشاشة إلى أن يمرّر المستخدمون بالقرب منها. تتوفّر سمة التحميل للسمة <iframe> في الإصدار 77 من Chrome والإصدارات الأحدث، وقد تم توفيرها أيضًا في المتصفّحات الأخرى المستندة إلى Chromium.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

تتوافق سمة التحميل مع القيم التالية:

lazy: يشير إلى أنّ المتصفّح يجب أن يؤجِّل تحميل إطار iframe. سيحمّل المتصفح إطار iframe عندما يقترب من إطار العرض. استخدِم هذا الخيار إذا كان إطار iframe مناسبًا للتحميل الكسول.
eager: يؤدي هذا الإجراء إلى تحميل إطار iframe على الفور. استخدِم هذا الخيار إذا لم يكن إطار iframe مناسبًا لاستخدام التحميل الكسول. إذا لم يتم تحديد السمة loading، يكون هذا هو السلوك التلقائي، ما عدا الوضع البسيط.
auto: يحدّد المتصفّح ما إذا كان يجب استخدام التحميل الكسول لهذا الإطار.

وتتجاهل المتصفّحات التي لا تتوافق مع السمة loading هذه السمة، لذا يمكنك تطبيق التحميل الكسول المحلي كتحسين تدريجي. قد يكون للمتصفّحات التي تتيح السمة عمليات تنفيذ مختلفة لحدّ المسافة من إطار العرض (المسافة التي يبدأ عندها إطار iframe في التحميل).

في ما يلي بعض الطرق التي يمكنك من خلالها التحميل الكسول لإطارات iframe لأنواع مختلفة من التضمينات.

فيديوهات YouTube: لتحميل إطار iframe في مشغّل فيديو YouTube الكسول، يجب تضمين السمة loading في رمز التضمين الذي توفّره YouTube. يمكن أن يوفر التحميل الكسول لمحتوى YouTube المضمّن 500 كيلوبايت تقريبًا عند التحميل الأولي للصفحة.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

"خرائط Google": للتحميل الكسول لإطار iframe في "خرائط Google"، أدرِج السمة loading في رمز إطار iframe المضمّن الذي تم إنشاؤه من خلال واجهة برمجة التطبيقات لتضمين "خرائط Google". في ما يلي مثال على رمز برمجي يتضمّن عنصرًا نائبًا لمفتاح Google Cloud API.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

مكتبة الكسول

يمكن أن يكون التحميل الكسول الأصلي غير متسق لأنّ المتصفِّحات تستخدم المسافة من إطار العرض للتضمين، بالإضافة إلى إشارات مثل نوع الاتصال الفعّال والوضع البسيط، لتحديد الوقت الذي يجب تحميل إطار iframe. إذا كنت بحاجة إلى تحكّم أفضل في الحدود الدنيا لبُعد المسافة أو كنت تريد توفير تجربة تحميل بطيء متسقة على مختلف المتصفّحات، يمكنك استخدام مكتبة التحميل الكسول.

lazysizes هي أداة تحميل كسول وسريعة ومتوافقة مع تحسين محركات البحث لكل من الصور وإطارات iframe. بعد تنزيل المكوِّن، يمكن استخدامه مع إطار iframe لتضمين YouTube على النحو التالي.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

وبالمثل، يمكن استخدام التنسيق الكسول مع إطارات iframe للتضمينات الأخرى التابعة لجهات خارجية.

تجدر الإشارة إلى أنّ الحجم الكسول يستخدم Intersection Monitorer API لرصد الوقت الذي يصبح فيه العنصر مرئيًا.

استخدام \"البيانات الكسول\" في Facebook

يوفر Facebook أنواعًا مختلفة من المكوّنات الإضافية الاجتماعية التي يمكن تضمينها. ويشمل ذلك المشاركات والتعليقات والفيديوهات وزر أعجبني الأكثر رواجًا. تتضمّن جميع المكوّنات الإضافية إعدادًا لـ data-lazy. ويؤدي ضبطها على true إلى ضمان أن يستخدم المكوّن الإضافي آلية التحميل الكسول في المتصفّح من خلال ضبط سمة iframe على loading="lazy".

خلاصات Instagram باستخدام طريقة \"التحميل الكسول\"

يوفر Instagram جزءًا من الترميز ونصًا برمجيًا كجزء من المحتوى المضمّن. يُدخل النص البرمجي <iframe> في الصفحة. يمكن أن يؤدي التحميل الكسول لجهاز <iframe> هذا إلى تحسين الأداء لأنّ حجم التضمين يتجاوز 100 كيلوبايت عند ضغطه. توفِّر العديد من مكوّنات Instagram الإضافية لمواقع WordPress، مثل WPZoom وElfsight، خيار التحميل الكسول.

استبدال التضمينات بواجهات

على الرغم من أنّ التضمينات التفاعلية تضيف قيمة إلى الصفحة، قد لا يتفاعل معها العديد من المستخدمين. فعلى سبيل المثال، لن ينقر كل مستخدم يتصفح صفحة مطعم ما على تضمين الخريطة أو توسيعه أو تمريره أو التنقل فيه. وبالمثل، لن يتفاعل كل مستخدم في صفحة مقدّمي خدمات الاتصالات مع برنامج الدردشة المبرمَجة. في هذه الحالات، يمكنك تجنُّب تحميل المحتوى المضمّن أو التحميل الكسول كليًا من خلال عرض واجهة مكانه.

تضمين خريطة — خريطة مضمّنة مع ميزة التكبير والتصغير

الواجهة هي عنصر ثابت يبدو مشابهًا للواجهة الخارجية المضمّنة، ولكنّه لا يعمل، وبالتالي فإنّه لا يفرض الكثير من الضرائب على تحميل الصفحة. في ما يلي بعض الاستراتيجيات لتحميل هذه التضمينات على النحو الأمثل مع الاستمرار في تقديم بعض القيمة للمستخدم.

استخدام الصور الثابتة كواجهات

يمكن استخدام الصور الثابتة بدلاً من تضمينات الخريطة حيث قد لا تحتاج إلى جعل الخريطة تفاعلية. ويمكنك تكبير المنطقة محل الاهتمام على الخريطة، والتقاط صورة، واستخدام ذلك بدلاً من تضمين الخريطة التفاعلي. يمكنك أيضًا استخدام وظيفة التقاط لقطة شاشة لعقدة معيّنة في "أدوات مطوري البرامج" لالتقاط لقطة شاشة للعنصر iframe المضمَّن، كما هو موضّح أدناه.

التقاط لقطة شاشة للعقدة

تلتقط "أدوات مطوري البرامج" الصورة على أنّها png، ولكن يمكنك أيضًا تحويلها إلى WebP format for better performance.

استخدام الصور الديناميكية كواجهات

يتيح لك هذا الأسلوب إنشاء صور متوافقة مع المحتوى المضمّن التفاعلي في وقت التشغيل. في ما يلي بعض الأدوات التي تتيح لك إنشاء إصدارات ثابتة من التضمينات على صفحاتك.

واجهة برمجة التطبيقات الثابتة للخرائط: تُنشئ خدمة واجهة برمجة التطبيقات الثابتة لـ "خرائط Google" خريطة استنادًا إلى معلمات عنوان URL المضمّنة في طلب HTTP عادي، ثم تعرض الخريطة كصورة يمكنك عرضها على صفحة الويب. يجب أن يتضمّن عنوان URL مفتاح واجهة برمجة التطبيقات لخرائط Google، ويجب وضعه في العلامة <img> على الصفحة على أنّه السمة src.

تساعد أداة مصمم الخرائط الثابتة في ضبط المَعلمات المطلوبة لعنوان URL وتمنحك رمز عنصر الصورة في الوقت الفعلي.

يعرض المقتطف التالي رمزًا لصورة تم ضبط المصدر لها على عنوان URL لواجهة برمجة تطبيقات ثابتة في "خرائط Google". وقد تم تضمينها في علامة رابط تضمن إمكانية الوصول إلى الخريطة الفعلية عن طريق النقر على الصورة. (ملاحظة: لا يتم تضمين سمة مفتاح واجهة برمجة التطبيقات في عنوان URL)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
لقطات شاشة Twitter: تمامًا مثل لقطات الشاشة من الخرائط، يتيح لك هذا المفهوم تضمين لقطة شاشة من Twitter بشكل ديناميكي بدلاً من الخلاصة المباشرة. منصة Tweetpik هي إحدى الأدوات التي يمكن استخدامها لأخذ لقطات شاشة من التغريدات. تقبل واجهة Tweetpik API عنوان URL الخاص بالتغريدة وتعرض صورة بمحتواها. تقبل واجهة برمجة التطبيقات أيضًا المعلَمات لتخصيص خلفية الصورة وألوانها وحدودها وأبعادها.

استخدام ميزة "النقر للتحميل" لتحسين الواجهات

يجمع مفهوم "النقر للتحميل" بين التحميل الكسول والواجهات. يتم تحميل الصفحة مبدئيًا مع الواجهة. عندما يتفاعل المستخدم مع العنصر النائب الثابت عن طريق النقر عليه، يتم تحميل المحتوى المضمّن التابع لجهة خارجية. يُعرف هذا أيضًا باسم نمط الاستيراد عند التفاعل ويمكن تنفيذه من خلال الخطوات التالية.

عند تحميل الصفحة: يتم تضمين واجهة أو عنصر ثابت في الصفحة.
عند تمرير الماوس: تتصل الواجهة مسبقًا بموفر التضمين التابع لجهة خارجية.
عند النقر: يتم استبدال الواجهة بمنتج الجهة الخارجية.

يمكن استخدام الواجهات مع التضمينات التابعة لجهات خارجية لمشغّلات الفيديو والتطبيقات المصغّرة للمحادثات وخدمات المصادقة وأدوات الوسائط الاجتماعية. إن تضمينات فيديو YouTube التي تكون مجرد صور بها زر تشغيل هي واجهات نصادفها كثيرًا. لا يتم تحميل الفيديو الفعلي إلا عند النقر على الصورة.

يمكنك إنشاء واجهة مخصصة "انقر للتحميل" باستخدام نمط استيراد عند التفاعل أو استخدام إحدى الواجهات التالية مفتوحة المصدر المتوفرة لأنواع مختلفة من التضمينات.

واجهة YouTube

Lite-youtube-embed هي واجهة ننصح باستخدامها لمشغِّل YouTube، وهي تشبه المشغّل الفعلي، لكنّها أسرع بمقدار 224 مرة. يمكن استخدام هذه البيانات عن طريق تنزيل النص البرمجي وورقة الأنماط، ثم استخدام العلامة <lite-youtube> بتنسيق HTML أو JavaScript. يمكن تضمين معلَمات المشغّل المخصّصة التي يتيحها YouTube من خلال سمة params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
في ما يلي مقارنة بين lite-youtube-embed والتضمين الفعلي.

تضمين مبسّط من YouTube

تضمين YouTube

هناك واجهات أخرى مشابهة متوفّرة لمشغّلات YouTube وVimeo هي lite-youtube وlite-vimeo-embed وlite-vimeo.
واجهة تطبيق Chat المصغّر

تعمل ميزة React-live-chat-loader على تحميل زر يبدو كأنّه يتضمّن محادثة مضمَّنة بدلاً من التضمين نفسه. ويمكن استخدامه مع العديد من الأنظمة الأساسية لمقدّمي خدمات الدردشة، مثل Intercom وHelp Scout وMessenger وغير ذلك. يتميز تطبيق "المشاركة عن قرب" بأنّه أخف وزنًا من تطبيق "المحادثة" المصغَّر ويتم تحميله بشكل أسرع. ويمكن استبداله بأداة المحادثة الفعلية عندما يمرر المستخدم الماوس فوق الزر أو ينقر عليه أو إذا كانت الصفحة في وضع عدم النشاط لفترة طويلة. توضّح دراسة حالة Postmark الطريقة التي اتّبعتها الشركة في تنفيذ أداة تحميل المحادثة المباشرة التفاعلية وتحسينات الأداء.

إزالة التضمينات أو استبدالها بروابط

إذا وجدت أن بعض التضمينات التابعة لجهات خارجية ينتج عنها أداء تحميل ضعيف ولا يمكن استخدام أي من الأساليب المذكورة أعلاه، يمكنك ببساطة إزالة التضمين بالكامل. إذا كنت لا تزال تريد السماح للمستخدمين بالوصول إلى المحتوى في التضمين، يمكنك توفير رابط يؤدي إليه باستخدام علامة target="_blank" لكي يتمكن المستخدم من النقر عليه وعرضه في علامة تبويب أخرى.

ثبات التصميم

على الرغم من أنّ التحميل الديناميكي للمحتوى المضمّن يمكن أن يحسّن أداء تحميل الصفحة، يمكن أن يتسبب أحيانًا في حركة غير متوقعة لمحتوى الصفحة. يُعرف ذلك باسم "متغيّرات التصميم".

بما أنّ الثبات البصري مهمة لضمان تقديم تجربة سلسة للمستخدم، يقيس متغيّرات التصميم التراكمية (CLS) عدد المرات التي تحدث فيها هذه التغيّرات ومدى إزعاجها.

يمكن تجنُّب متغيّرات التصميم من خلال حجز مساحة أثناء تحميل الصفحة للعناصر التي سيتم تحميلها ديناميكيًا في وقت لاحق. يمكن للمتصفح تحديد المساحة المراد حجزها إذا كان يعرف عرض العناصر وارتفاعها. يمكنك ضمان ذلك من خلال تحديد السمتَين width وheight لإطارات iframe أو من خلال ضبط حجم ثابت للعناصر الثابتة التي سيتم تحميلها من خلالها. على سبيل المثال، يجب أن يتم تحديد العرض والارتفاع لإطار iframe لتضمينه في YouTube على النحو التالي.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

توفر التضمينات الشائعة مثل YouTube و"خرائط Google" وFacebook رمز التضمين مع سمات الحجم المحددة. ومع ذلك، قد يكون هناك مقدّمي خدمات لا يوفّرون هذه المعلومات. على سبيل المثال، لا يشير مقتطف الرمز هذا إلى أبعاد التضمين الناتج.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

يمكنك استخدام "أدوات مطوري البرامج" لفحص iframe الذي تم إدخاله بعد عرض هذه الصفحة. وكما هو موضّح في المقتطف التالي، يكون ارتفاع إطار iframe الذي تم إدخاله ثابتًا في حين يتم تحديد العرض بالنسبة المئوية.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

ويمكن استخدام هذه المعلومات لضبط حجم العنصر الذي يتضمّن المحتوى من أجل ضمان عدم توسيع الحاوية عند تحميل الخلاصة ومن عدم تغيير التصميم. يمكن استخدام المقتطف التالي لتعديل حجم المحتوى المضمّن مسبقًا.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

أداة إنهاء متغيّرات التصميم

وبما أنّ التضمينات التابعة لجهات خارجية غالبًا ما تغفل الأبعاد (العرض والارتفاع) للمحتوى النهائي الذي تعرضه، يمكنها أن تتسبب في حدوث تغييرات كبيرة في تنسيق الصفحة. قد يكون من الصعب معالجة هذه المشكلة بدون فحص الأحجام النهائية يدويًا باستخدام "أدوات مطوري البرامج" في مجموعة متنوعة من أحجام إطارات العرض المختلفة.

تتوفّر الآن أداة مبرمَجة، وهي أداة إنهاء متغيّرات التصميم، التي يمكن أن تساعدك في تقليل عمليات تغيُّر التصميم من التضمينات الشائعة، مثل Twitter وFacebook ومقدّمي الخدمات الآخرين.

أداة إنهاء متغيّرات التصميم:

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

يمكنك تجربة أداة إنهاء متغيّرات التصميم، ويمكنك إضافة أي تعليقات على GitHub. الأداة في حالة تجريبية وتهدف إلى التحسن بمرور الوقت باستخدام المزيد من التحسينات.

الخلاصة

يمكن أن توفر التضمينات التابعة لجهات خارجية قيمة كبيرة للمستخدمين، ولكن مع ازدياد عدد الأجزاء المضمنة في الصفحة وحجمها، يمكن أن يتأثر الأداء. لهذا السبب، من الضروري قياس استراتيجيات التحميل المناسبة للتضمينات وحكمها واستخدامها بناءً على موضعها ومدى صلتها بالموضوع واحتياجات المستخدمين المحتملين.