نظرة عامة على أساليب تحميل عمليات التضمين الشائعة والتابعة لجهات خارجية بكفاءة
تستخدم العديد من المواقع الإلكترونية المُضمّنة من جهات خارجية لتوفير تجربة جذابة للمستخدم من خلال تفويض بعض أقسام صفحة الويب إلى موفّر محتوى آخر. ومن الأمثلة الأكثر شيوعًا على تضمينات المحتوى التابع لجهات خارجية هي مشغّلات الفيديو وخلاصات وسائل التواصل الاجتماعي والخرائط والإعلانات.
يمكن لمحتوى الجهات الخارجية أن يؤثر في أداء صفحة بعدة طرق. وقد يرجع ذلك إلى حظر العرض أو التعارض مع موارد مهمة أخرى للشبكة ومعدل نقل البيانات أو التأثير في مقاييس "مؤشرات أداء الويب الأساسية". قد تؤدي أيضًا العناصر المضمَّنة التابعة لجهات خارجية إلى حدوث متغيّرات في التصميم أثناء تحميلها. تتناول هذه المقالة أفضل ممارسات الأداء التي يمكنك استخدامها عند تحميل تنسيقات مضمّنة تابعة لجهات خارجية، وأساليب تحميل فعّالة، وأداة "أداة إنهاء متغيّرات التصميم" التي تساعد في تقليل متغيّرات التصميم للتضمينات الشائعة.
ما المقصود بالتضمين
التضمين التابع لجهة خارجية هو أي محتوى يتم عرضه على موقعك الإلكتروني ويكون:
- لم تكتبها بنفسك
- يتم عرضها من خوادم تابعة لجهة خارجية
يتم استخدام التضمينات بشكل متكرر في ما يلي:
- تستخدم المواقع الإلكترونية ذات الصلة بالرياضة والأخبار والترفيه والموضة الفيديوهات لتعزيز المحتوى النصي.
- وتُضمِّن المؤسسات التي لديها حسابات نشطة على Twitter أو وسائل التواصل الاجتماعي خلاصات من هذه الحسابات إلى صفحاتها على الويب للتفاعل مع المزيد من الأشخاص والتواصل معهم.
- غالبًا ما تشتمل صفحات المطاعم والمنتزهات ومكان الفعاليات على الخرائط.
يتم عادةً تحميل التضمينات التابعة لجهات خارجية في عناصر <iframe> على الصفحة. يعرض موفّرو الخدمات التابعون لجهات خارجية مقتطفات HTML تتألّف غالبًا من <iframe> تسحب صفحة تتألّف من ترميز ونصوص برمجية وأوراق أنماط. يستخدم بعض موفّري المحتوى أيضًا مقتطفًا نصيًا يُدخِل بشكل ديناميكي <iframe> لسحب المحتوى الآخر. وقد يؤدي ذلك إلى زيادة ثقيلة عمليات التضمين التابعة لجهة خارجية والتأثير في أداء الصفحة من خلال تأخير محتوى الطرف الأول.
تأثير أداء التضمينات التابعة لجهات خارجية
وتتضمّن العديد من عمليات التضمين الشائعة ما يزيد عن 100 كيلوبايت من JavaScript، وقد يصل حجمها في بعض الأحيان إلى 2 ميغابايت. تستغرق سلسلة التعليمات هذه وقتًا أطول في التحميل وتظل سلسلة التعليمات الرئيسية مشغولة عند تنفيذها. تساعد أدوات مراقبة الأداء، مثل Lighthouse وChrome DevTools، في قياس تأثير عمليات التضمين التابعة لجهات خارجية في الأداء.
الحدّ من تأثير الرمز البرمجي التابع لجهة خارجية: يعرض تدقيق 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> في جميع المتصفحات الحديثة.
<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 Observer API لرصد متى يصبح العنصر مرئيًا.
استخدام البيانات الكسولة في Facebook
يوفر Facebook أنواعًا مختلفة من المكوّنات الإضافية الاجتماعية التي يمكن تضمينها. ويشمل ذلك المشاركات والتعليقات والفيديوهات وزر إبداء الإعجاب الأكثر رواجًا. تتضمّن جميع المكوّنات الإضافية إعدادًا لـ data-lazy. وعند ضبطها على true، سيستخدم المكوّن الإضافي آلية التحميل الكسول في المتصفّح من خلال ضبط سمة إطار iframe في loading="lazy".
تحميل خلاصات Instagram باستخدام التحميل الكسول
يوفر Instagram مجموعة من الترميز والنص البرمجي كجزء من عملية التضمين. يُدخِل النص البرمجي علامة <iframe> في الصفحة. يمكن أن يؤدي التحميل الكسول لـ <iframe> إلى تحسين الأداء حيث يمكن أن يتجاوز حجم التضمين المضغوط 100 كيلوبايت. توفّر العديد من مكوّنات Instagram الإضافية للمواقع الإلكترونية على WordPress، مثل WPZoom وElfsight، خيار التحميل الكسول.
استبدال التضمينات بالواجهات
على الرغم من أن عمليات التضمين التفاعلية تضيف قيمة إلى الصفحة، قد لا يتفاعل معها العديد من المستخدمين. على سبيل المثال، لن يقوم كل مستخدم يتصفح صفحة مطعم بالنقر فوق تضمين الخريطة وتوسيعها وتمريرها والتنقل فيها. وبالمثل، لن يتفاعل كل مستخدم لصفحة مقدّمي خدمات الاتصالات مع روبوت الدردشة. وفي هذه الحالات، يمكنك تجنُّب تحميل التضمين أو التحميل الكسول للمحتوى بالكامل من خلال عرض واجهة في مكانه.
الواجهة هي عنصر ثابت يبدو مشابهًا للجهة الخارجية المضمّنة الفعلية، ولكنّه لا يعمل، وبالتالي سيفرض ضرائب أقل على تحميل الصفحة. في ما يلي بعض الاستراتيجيات لتحميل مثل هذه التضمينات بشكل مثالي مع الحفاظ في الوقت نفسه على توفير قيمة ما للمستخدم.
استخدام الصور الثابتة كواجهات
يمكن استخدام صور ثابتة بدلاً من تضمينات الخريطة حيث قد لا تحتاج إلى جعل الخريطة تفاعلية. يمكنك تكبير المنطقة محل الاهتمام على الخريطة والتقاط صورة واستخدامها بدلاً من تضمين الخريطة التفاعلية. يمكنك أيضًا استخدام ميزة التقاط لقطة شاشة للعقدة في "أدوات مطوّري البرامج" للحصول على لقطة شاشة للعنصر iframe المضمّن.
تلتقط "أدوات مطوري البرامج" الصورة على أنّها png، ولكن يمكنك أيضًا تحويلها إلى تنسيق WebP لتحقيق أداء أفضل.
استخدام الصور الديناميكية كواجهات
يتيح لك هذا الأسلوب إنشاء صور تتجاوب مع تضمين تفاعلي في وقت التشغيل. في ما يلي بعض الأدوات التي تتيح لك إنشاء نُسخ ثابتة من التضمينات على صفحاتك.
واجهة برمجة التطبيقات الثابتة في "خرائط Google": تُنشئ خدمة Google Maps Static API خريطة استنادًا إلى معلَمات عناوين URL المضمّنة في طلب HTTP عادي، وتعرض الخريطة كصورة يمكنك عرضها على صفحتك على الويب. يجب أن يتضمّن عنوان URL مفتاح واجهة برمجة التطبيقات لخرائط Google ويجب وضعه في العلامة
<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 الخاص بالتغريدة وتعرض صورة تتضمّن محتواها. تقبل واجهة برمجة التطبيقات أيضًا مَعلمات لتخصيص خلفية الصورة والألوان والحدود وأبعادها.
استخدام النقر للتحميل لتحسين الواجهات
ويجمع مفهوم "النقر للتحميل" بين التحميل الكسول والواجهات. يتم تحميل الصفحة في البداية مع الواجهة. وعندما يتفاعل المستخدم مع العنصر النائب الثابت من خلال النقر عليه، يتم تحميل المحتوى المضمّن التابع للجهة الخارجية. يُعرف ذلك أيضًا باسم نمط الاستيراد عند التفاعل ويمكن تنفيذه باستخدام الخطوات التالية.
- عند تحميل الصفحة: يتم تضمين الواجهة أو عنصر ثابت في الصفحة.
- عند تمرير الماوس: تتصل الواجهة مسبقًا بموفر التضمين التابع لجهة خارجية.
- عند النقر: يتم استبدال الواجهة بمنتج الجهة الخارجية.
يمكن استخدام الواجهات مع تضمينات تابعة لجهات خارجية لمشغّلات الفيديو والتطبيقات المصغّرة للمحادثات وخدمات المصادقة وتطبيقات وسائل التواصل الاجتماعي. إن تضمينات فيديو 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 Lite 
تضمين في YouTube وتشمل الواجهات الأخرى المشابهة المتوفّرة لمشغّلي YouTube وVimeo كلاً من lite-youtube وlite-vimeo-embed وlite-vimeo.
واجهة تطبيق Chat المصغّر
تعمل أداة تحميل المحادثة المباشرة الخاصة بالتفاعل على تحميل زر يبدو كمحتوى مضمّن في المحادثة بدلاً من التضمين نفسه. ويمكن استخدامها مع العديد من المنصات لمقدّمي خدمة الدردشة، مثل Intercom وHelp Scout وMessenger. تتميّز الأداة المشابهة بأنّها أخف بكثير من أداة الدردشة ويتم تحميلها بشكل أسرع. ويمكن أن يتم استبداله بأداة المحادثة الفعلية عندما يمرِّر المستخدم مؤشر الماوس أو ينقر على الزر أو إذا ظلّت الصفحة غير نشِطة لفترة طويلة. توضّح دراسة حالة Postmark الطريقة التي اتّبعتها الشركة لتنفيذ
react-live-chat-loaderوتحسينات الأداء التي حقّقتها.
إزالة التضمينات أو استبدالها بالروابط
إذا وجدت أن بعض التضمينات التابعة لجهات خارجية تؤدي إلى ضعف أداء التحميل ولم يكن استخدام أي من الأساليب الموضحة سابقًا خيارًا، فإن أبسط ما يمكنك فعله هو إزالة التضمين بالكامل. إذا كنت لا تزال تريد أن يتمكّن المستخدمون من الوصول إلى المحتوى المضمّن في التضمين، يمكنك تقديم رابط إليه باستخدام "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 إلى مختلف أحجام إطارات العرض الشائعة.
- لكل إطار عرض شائع، يلتقط أبعاد التضمين لإنشاء استعلامات عن الوسائط وطلبات البحث في الحاويات لاحقًا.
- ضبط حجم برنامج تضمين min-height حول ترميز التضمين باستخدام الاستعلامات عن الوسائط (وطلبات البحث في الحاوية) إلى أن يتم تهيئة التضمين (وبعدها تتم إزالة أنماط الحدّ الأدنى للارتفاع).
إنشاء مقتطف تضمين محسّن يمكن نسخه ولصقه في المواضع التي تريد تضمين التضمين فيها في صفحتك.
جرِّب أداة إنهاء متغيّرات التصميم، ولا تتردد في تقديم أي تعليقات على GitHub. الأداة في حالة تجريبية، وتهدف إلى تحسين أدائها بمرور الوقت من خلال إجراء تحسينات إضافية.
الخاتمة
يمكن أن تقدم التضمينات التابعة لجهات خارجية قيمة كبيرة للمستخدمين، ولكن مع زيادة عدد التنسيقات المضمَّنة على الصفحة وحجمها، قد يؤثر ذلك سلبًا على الأداء. لهذا السبب، من الضروري قياس المحتوى المضمّن والتقييم واستخدامه عند استخدام استراتيجيات تحميل مناسبة استنادًا إلى موضعها ومدى صلتها بموضوع البحث والمستخدمين المحتملين. احتياجاتهم.