أفضل الممارسات المتعلّقة بالعلامات ومدراء العلامات

يمكنك تحسين العلامات وإدارة العلامات في "مؤشرات أداء الويب الأساسية".

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

يختلف تأثير أداء العلامات ومدراء العلامات اختلافًا كبيرًا من موقع إلكتروني إلى آخر. يمكن مقارنة إدارة العلامات بمغلف: يوفر مدير العلامات سفينة — ولكن الأمر في الغالب متروك لك فيما تملأه وكيف تستخدمه.

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

التأثير في "مؤشرات أداء الويب الأساسية"

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

يكون سرعة عرض أكبر محتوى مرئي (LCP) عرضة للاعتراض على معدّل نقل البيانات خلال مدة تحميل الصفحة المهمة. بالإضافة إلى ذلك، يمكن أن يؤدي حظر سلسلة التعليمات الرئيسية إلى تأخير عرض مقياس LCP.

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

مدى استجابة الصفحة لتفاعلات المستخدم (INP) عرضة لتعارض وحدة المعالجة المركزية (CPU) على سلسلة التعليمات الرئيسية، وقد لاحظنا ارتباطًا بين حجم برامج إدارة العلامات وانخفاض نتائج INP.

أنواع العلامات

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

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

عند التفكير في العلامات، ضع في اعتبارك المقياس: تأثير أداء أي قد تكون هناك علامة واحدة ضئيلة — ولكنها يمكن أن تصبح ذات دلالة عندما عشرات أو مئات استخدام العلامات في نفس الصفحة.

يجب عدم تحميل بعض النصوص البرمجية باستخدام أداة "إدارة العلامات من Google".

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

توخي الحذر بشأن علامات HTML المخصّصة

رمز HTML المخصّص العلامات موجودة منذ سنوات عديدة ويتم استخدامها بكثرة في معظم المواقع. رمز HTML المخصّص تتيح لك العلامات إدخال التعليمات البرمجية الخاصة بك مع وضع بعض القيود، حيث إنه، على الرغم من الاسم، يتمثل الاستخدام الرئيسي لهذه العلامة في إضافة عناصر <script> مخصصة إلى إحدى الصفحات.

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

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

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

التفكير في استخدام النماذج المخصَّصة

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

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

إدخال النصوص البرمجية بشكل صحيح

إنّ استخدام أداة "إدارة العلامات من Google" لإدخال نص برمجي هو من حالات الاستخدام الشائعة جدًا. تشير رسالة الأشكال البيانية الطريقة الموصى بها للقيام بذلك هي استخدام نموذج مخصص injectScript واجهة برمجة التطبيقات.

للحصول على معلومات عن استخدام واجهة برمجة التطبيقات injectScript لتحويل رمز HTML مخصّص حالي راجع تحويل علامة حالية .

إذا كان يجب استخدام علامة HTML مخصّصة، إليك بعض الأمور التي يجب وضعها في الاعتبار:

• يجب تحميل المكتبات والنصوص البرمجية الكبيرة التابعة لجهات خارجية من خلال علامة نص برمجي تنزِّل ملفًا خارجيًا (مثل <script src="external-scripts.js">)، بدلاً من نسخ ملف النص البرمجي ولصقه مباشرةً في العلامة. على الرغم من التخلي عن استخدام علامة <script> سيزيل رحلة ذهاب وعودة منفصلة لتنزيل محتويات النصّ، تؤدي الممارسة إلى زيادة حجم الحاوية ومنع التخزين المؤقت للنص البرمجي بشكل منفصل من خلال المتصفح.
• ينصح العديد من المورّدين بوضع علامة <script> في أعلى <head> ومع ذلك، بالنسبة إلى النصوص البرمجية التي يتم تحميلها عبر إدارة العلامات، فإن هذا الاقتراح عادة ما يكون غير ضروري: في معظم الحالات، يكون المتصفح قد انتهى. تحليل <head> حسب الوقت الذي يتم فيه تنفيذ أداة "إدارة العلامات من Google".

استخدام وحدات البكسل

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

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

بدائل وحدات البكسل

أصبحت هواتف Pixel تحظى بشعبية كبيرة لأنها كانت في وقت ما من أرخص وأكثر الطرق موثوقية لإنشاء طلب HTTP في المواقف التي يكون فيها الخادم الرد غير ذي صلة ( على سبيل المثال، عند إرسال البيانات إلى تحليلات Google). تشير رسالة الأشكال البيانية navigator.sendBeacon() وfetch() keepalive تم تصميم واجهات برمجة التطبيقات لمعالجة حالة الاستخدام نفسها، ولكن يمكن القول إنّها أكثر موثوقية. من البكسل.

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

sendBeacon()

تشير رسالة الأشكال البيانية navigator.sendBeacon() تم تصميم واجهة برمجة التطبيقات (API) لإرسال كميات صغيرة من البيانات إلى خوادم الويب في حالات حيث لا تكون استجابة الخادم مهمة.

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

تتميّز واجهة برمجة التطبيقات sendBeacon() بواجهة برمجة تطبيقات محدودة، وهي تتيح تقديم طلبات POST فقط. لا تتيح إعداد رؤوس مخصصة. من المهم متوافقًا مع جميع المتصفحات الحديثة

fetch() keepalive

keepalive هي علامة تسمح بإجراء جلب من واجهة برمجة التطبيقات لاستخدامها في تقديم طلبات لا تؤدي إلى الحظر، مثل إعداد تقارير عن الأحداث والإحصاءات من المهم المستخدمة من خلال تضمين keepalive: true في المعلَمات التي تم تمريرها إلى fetch().

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

إذا بدا كل من fetch() keepalive وsendBeacon() متشابهين جدًا، فذلك لأنهما في الواقع، تم إنشاء sendBeacon() استنادًا إلى fetch() keepalive في متصفحات Chromium.

عند الاختيار بين "fetch() keepalive" و"sendBeacon()"، من المهم: التفكير في الميزات وتوافق المتصفح الذي تحتاج إليه. واجهة برمجة التطبيقاتFetch() هي أكثر مرونة بكثير؛ مع ذلك، يتضمّن keepalive متصفّحًا أقل الدعم من sendBeacon().

الحصول على توضيح

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

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

أسباب طلب المساعدة

تحسين العلامة بشكل عام المشغلات بشكل عام الحرص على عدم تشغيل العلامات أكثر من اللازم اختيار عامل يوازن بين احتياجات النشاط التجاري وتكاليف الأداء.

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

اختيار حدث عامل تشغيل مناسب

تأثير أداء علامة ما غير ثابت: بشكل عام، تنشيط العلامة، زاد تأثيرها في الأداء. عادةً ما تكون الموارد أثناء التحميل الأولي للصفحة وبالتالي تحميل أو تنفيذ مورد معين (أو علامة) يأخذ الموارد بعيدًا عن شيء آخر.

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

يمكن تشغيل العلامات في مشاهدات الصفحة على الويب (عادةً Page load في DOM Ready أو في Window Loaded)، أو استنادًا إلى حدث مخصص. لتجنُّب التأثير في تحميل الصفحة، ننصح بتنشيطها. العلامات غير الضرورية بعد Window Loaded.

استخدام الأحداث المخصّصة

الأحداث المخصّصة تسمح لك بتنشيط المشغلات استجابةً لأحداث الصفحة التي لا تغطيها المشغِّلات المدمجة في أداة "إدارة العلامات من Google" على سبيل المثال، تستخدم العديد من العلامات مشاهدة الصفحة على الويب المشغلات، وَلَكِنْ يمكن أن تكون الفترة الزمنية بين DOM Ready وWindow Loaded طويلة في العديد من وقد يؤدي ذلك إلى صعوبة الضبط عند تنشيط إحدى العلامات. مُخَصَّصْ والأحداث توفر حلاً لهذه المشكلة.

لاستخدام أحداث مخصّصة، أنشِئ أولاً عامل تشغيل حدث مخصّص وعدِّل علاماتك. لاستخدام هذا المشغل.

لتنشيط المُشغِّل، ادفع الحدث المقابل إلى طبقة البيانات.

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

استخدام شروط عامل التفعيل المحددة

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

يمكن أن تؤدي المتغيرات المضمّنة ويمكن أن يتم أيضًا دمجها في شروط التشغيل للحدّ من تنشيط العلامات.

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

تحميل أداة "إدارة العلامات من Google" في الوقت المناسب

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

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

المتغيرات

تسمح المتغيرات بقراءة البيانات من الصفحة. إنها مفيدة في المشغلات، في العلامات نفسها.

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

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

إدارة العلامات

ويؤدي استخدام العلامات بكفاءة إلى تقليل مخاطر حدوث مشاكل في الأداء.

استخدام طبقة البيانات

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

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

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

إزالة العلامات المكرّرة وغير المستخدَمة

يمكن أن تحدث العلامات المكرّرة عندما يتم تضمين علامة في ترميز HTML لصفحة ما في بالإضافة إلى إدراجها من خلال أداة "إدارة العلامات من Google"

يجب إيقاف العلامات غير المستخدَمة بشكل مؤقت أو إزالتها بدلاً من حظرها باستخدام عامل التفعيل. يؤدي إيقاف علامة مؤقتًا أو إزالتها إلى إزالة الرمز من الحاوية؛ يؤدي الحظر لا.

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

استخدام قوائم السماح وقوائم الحظر

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

يتم ضبط قوائم السماح وقوائم الحظر من خلال طبقة البيانات.

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

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

استخدام وضع العلامات من جهة الخادم

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على مقدمة عن جهة الخادم. وضع العلامات.

الحاويات

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

استخدام حاوية واحدة فقط لكل صفحة

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

من النادر أن تُستخدَم حاويات متعدّدة بفعالية. ومع ذلك، يمكن أن يكون هناك الحالات التي يمكن فيها تحقيق ذلك - في حال التحكم فيه بشكل جيد - بما في ذلك:

• استخدام "وقت مبكر" أخف وحاوية و"تحميل لاحق" أكثر كثافة container, بدلاً من حاوية واحدة كبيرة.
• إن وجود حاوية مقيّدة يستخدمها عدد أقل من المستخدمين التقنيين، مع سعة أقل حاوية للعلامات التي لا يمكن استخدامها ولكنها خاضعة لقيود أكبر، ولكنها أكثر تحكمًا في الحاوية المحظورة.

إذا كان عليك استخدام حاويات متعدّدة لكل صفحة، اتّبِع "إدارة العلامات من Google". إرشادات لإعداد عناوين URL متعددة الحاويات.

استخدِم حاويات منفصلة إذا لزم الأمر.

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

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

محاولة إعادة استخدام حاوية واحدة على نطاق واسع جدًا عادةً ما يزداد بدون داعٍ مدى تعقيد الحاوية وحجمها من خلال فرض استخدام منطق معقد لإدارة العلامات والمشغلات.

مراقبة حجم الحاوية

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

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

إدارة العلامات من Google حاوية limits إلى 200 كيلوبايت، وسيتم إرسال تحذير بشأن حجم الحاوية الذي يبدأ من 140 كيلوبايت. ومع ذلك، يجب أن تهدف معظم المواقع إلى إبقاء حاوياتها أصغر بكثير من ذلك. بالنسبة المنظور، فإن حاوية الموقع المتوسطة تكون حوالي 50 كيلوبايت.

لتحديد حجم حاويتك، اطّلِع على حجم الردّ. تم إرجاعه بواسطة https://www.googletagmanager.com/gtag/js?id=YOUR_ID. هذا النمط تحتوي استجابة على مكتبة إدارة العلامات من Google بالإضافة إلى محتويات . يبلغ حجم مكتبة "إدارة العلامات من Google" في حد ذاته حوالي 33 كيلوبايت. مضغوطًا.

تسمية إصدارات الحاوية

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

سير عمل وضع العلامات

من المهم إدارة التغييرات التي يتم إجراؤها على علاماتك لضمان عدم تأثير سلبي على أداء الصفحة.

اختبار العلامات قبل النشر

يمكن أن يساعد اختبار العلامات قبل النشر في اكتشاف المشكلات (الأداء بخلاف ذلك) قبل شحنها.

ومن الأمور التي يجب مراعاتها عند اختبار علامة ما يلي:

• هل تعمل العلامة بشكل صحيح؟
• هل تتسبب العلامة في أي متغيّرات في التصميم؟
• هل تحمِّل العلامة أي موارد؟ ما حجم هذه الموارد؟
• هل تشغّل العلامة نصًا برمجيًا تم إنشاؤه لفترة طويلة؟

وضع المعاينة

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

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

الاختبار المستقل

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

مراقبة أداء العلامات

تتيح أداة مراقبة "إدارة العلامات من Google" واجهة برمجة التطبيقات لجمع معلومات حول عمليات التنفيذ الوقت لعلامة معينة. ويتم إبلاغ هذه المعلومات إلى نقطة نهاية الاختيار.

لمزيد من المعلومات، اطّلِع على كيفية إنشاء أداة "إدارة العلامات من Google". المراقبة:

يجب الموافقة على تغييرات الحاوية

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

تدقيق استخدام العلامات بشكل دوري

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

يؤدي تصنيف كل علامة بحيث تكون واضحة للمالك إلى تسهيل تحديد هوية المالك يستجيب لتلك العلامة ويعرف ما إذا كانت لا تزال مطلوبة.

عند تدقيق العلامات، لا تنس تنظيف المشغلات والمتغيرات أيضًا. يمكن أن تكون بسهولة أيضًا سببًا في حدوث مشاكل في الأداء.

وللحصول على مزيدٍ من المعلومات، يُرجى الاطلاع على إبقاء النصوص البرمجية التابعة لجهات خارجية ضمن والتحكم المستمر.