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

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

Addy Osmani
Katie Hempenius
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

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

يمكن أن يؤثر المحتوى التابع لجهة خارجية في أداء الصفحة بعدة طرق. يمكن أن يكون هذا المورد مانعًا للعرض، أو يتنافس مع موارد مهمة أخرى على الشبكة وعرض النطاق الترددي، أو يؤثر في مقاييس Core Web Vitals. قد تتسبّب الرموز المضمّنة التابعة لجهات خارجية أيضًا في حدوث تغييرات في التنسيق أثناء تحميلها. تتناول هذه المقالة أفضل ممارسات الأداء التي يمكنك استخدامها عند تحميل المحتوى المضمّن التابع لجهات خارجية، وتقنيات التحميل الفعّالة، وأداة Layout Shift Terminator التي تساعد في تقليل عمليات تغيير التنسيق للمحتوى المضمّن الشائع.

ما هو التضمين؟

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

  • لم يتم إنشاؤه من قِبلكم
  • يتم عرضها من خوادم تابعة لجهات خارجية

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

يتم استخدام عمليات التضمين بشكل متكرر في ما يلي:

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

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

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

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

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

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

تدقيق 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 خارج الشاشة إلى أن يقترب المستخدمون منها. تتوفّر السمة loading الخاصة بإطار <iframe> في جميع المتصفّحات الحديثة.

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

تتيح سمة loading استخدام القيم التالية:

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

تتجاهل المتصفّحات التي لا تتوافق مع السمة loading هذه السمة، لذا يمكنك تطبيق ميزة التحميل الكسول على مستوى المتصفّح كتحسين تدريجي. قد تتضمّن المتصفّحات التي تتيح استخدام السمة عمليات تنفيذ مختلفة لحدّ distance-from-viewport (المسافة التي يبدأ عندها تحميل إطار 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 Maps Embed API. في ما يلي مثال على الرمز مع عنصر نائب لمفتاح 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>

مكتبة lazysizes

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

‫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>

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

يُرجى العِلم أنّ lazysizes تستخدم واجهة Intersection Observer API لرصد الوقت الذي يصبح فيه أحد العناصر مرئيًا.

استخدام data-lazy في Facebook

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

التحميل الكسول لخلاصات Instagram

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

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

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

تضمين خريطة مع ميزة التكبير والتصغير
واجهة خريطة عبارة عن صورة.

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

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

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

الخيار &quot;التقاط لقطة شاشة للعقدة&quot; مميّز في قائمة سياقية في محرّر HTML.

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

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

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

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

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

    يعرض المقتطف التالي رمزًا لصورة تم ضبط مصدرها على عنوان URL خاص بواجهة Maps Static API. تم تضمينها في علامة رابط تضمن إمكانية الوصول إلى الخريطة الفعلية من خلال النقر على الصورة. (ملاحظة: لا يتم تضمين سمة مفتاح واجهة برمجة التطبيقات في عنوان 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 للتغريدة وتعرض صورة تتضمّن محتواها. تقبل واجهة برمجة التطبيقات أيضًا مَعلمات لتخصيص الخلفية والألوان والحدود وأبعاد الصورة.

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

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

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

يمكن استخدام الواجهات مع المحتوى المضمّن التابع لجهات خارجية لمشغّلات الفيديو وتطبيقات الدردشة المصغّرة وخدمات المصادقة وتطبيقات وسائل التواصل الاجتماعي المصغّرة. إنّ عمليات تضمين فيديوهات على 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 وعملية التضمين الفعلية.

    Lite YouTube embed
    تضمين lite-YouTube
    تضمين YouTube الفعلي
    تضمين YouTube

    تشمل الواجهات المشابهة الأخرى المتاحة لمشغّلات YouTube وVimeo lite-youtube وlite-vimeo-embed وlite-vimeo.

  • واجهة تطبيق المحادثة المصغّر

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

    أداة محادثة Postmark في أداة تعديل HTML تعرض الرمز المجمّع

إذا تبيّن لك أنّ بعض عمليات التضمين التابعة لجهات خارجية تؤدي إلى ضعف أداء التحميل وأنّ استخدام أي من التقنيات الموضّحة سابقًا ليس خيارًا متاحًا، فإنّ أبسط ما يمكنك فعله هو إزالة عملية التضمين بالكامل. إذا كنت تريد أن يظل بإمكان المستخدمين الوصول إلى المحتوى في عملية التضمين، يمكنك تقديم رابط إليه باستخدام 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>

يمكنك استخدام "أدوات مطوّري البرامج في Chrome" لفحص 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>

Layout Shift Terminator

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

تتوفّر الآن أداة مبرمَجة، Layout Shift Terminator، يمكن أن تساعدك في تقليل عمليات تغيير تنسيق الصفحة من عمليات التضمين الشائعة، مثل تلك الواردة من Twitter وFacebook ومزوّدي خدمات آخرين.

محطة طرفية لتغيير التصميم:

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

  • ينشئ مقتطفًا مضمّنًا محسّنًا يمكن نسخه ولصقه في المكان الذي تريد تضمين المحتوى فيه في صفحتك.

    أداة Layout Shift Terminator تعرض ناتج الرمز البرمجي ومعاينة.

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

الخاتمة

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