مكونات السمة وأكبر عنصر محتوى (LCP)

[piffy]

أتطلع إلى تحسين مقاييس الويب لموقعي، وتحديدًا LCP. لقد كنت أواجه مشكلات حيث يكون الوقت حوالي 2.7 ثانية (يجب أن يكون أقل من 2.5 ثانية). من https://web.dev/optimize-lcp:

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

لقد عزلت المشكلة إلى مكون سمة لافتة قمت بإنشائه. صورة لافتة أقوم بتحميلها كعنصر واجهة مستخدم “above-main-container” هي أكبر كائن يتم رسمه على الشاشة لكل صفحة تقريبًا.

الكود

<script type="text/discourse-plugin" version="0.8">
  const h = require("virtual-dom").h; 

  api.createWidget("my-banner", {
    tagName: "div",

    html() {
      return  h("img.banner-center", {src: settings.banner_image, fetchpriority: "high", style: "aspect-ratio: 925 / 359 ; width: 100%"})
    }
  });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/banner">
  {{mount-widget widget="my-banner"}}
</script>

إليك ما أعتقد أنه يحدث. يتم تحميل الـ div الذي يحتوي على الصورة باستخدام JS، لذا تحتاج سلسلة من الأشياء المسبقة إلى الحدوث عند تحديث صفحة discourse قبل تشغيل كود JS هذا. هذا يتسبب في جلب اللافتة بعد 2.5 ثانية، مما يضر بمقياس LCP.

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

أي اقتراحات حول كيفية إعطاء الأولوية لعرض مكون السمة هذا؟ هل سيكون من الأفضل تحويله إلى إضافة؟ هل هناك أي طريقة أخرى يمكنني من خلالها إدراج اللافتة في أقرب وقت ممكن؟ شكرًا!

[piffy]

ربما يكون سؤالي مفصلاً للغاية. إليك سؤال أسهل إذا كان شخص ما يعرف الإجابة:

عند إعادة تحميل الصفحة، هل سيتم عرض العناصر من الإضافات قبل مكونات السمة؟

[Falco]

@piffy

لقد عزلت المشكلة إلى مكون سمة لافتة قمت بكتابته. صورة لافتة أقوم بتحميلها كعنصر واجهة مستخدم “above-main-container” هي أكبر كائن يتم رسمه على الشاشة لكل صفحة تقريبًا.

إذا كانت لافتتك أكبر من العنصر الذي نستخدمه لـ Introducing Discourse Splash - A visual preloader displayed while site assets load ، فسيكون لديك وقت سيء لـ LCP.

@piffy

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

إذا كنت تعتقد أن المشكلة الرئيسية هي تنزيل أصل الصورة، يمكنك إضافة شيء مثل

<link rel="prefetch" href="http://example.com/myimage.webp" />

إلى عنصر HEAD الخاص بك في سمة.

[piffy]

أنا أمر بوقت عصيب حاليًا هههههه

لقد انتقلت إلى استخدام شبكة توصيل محتوى (CDN) وهو ما لم يساعد. كما ذكرت، أعتقد أن استدعاء جلب الشعار هو الشيء الذي يحدث في وقت متأخر جدًا، وليس وقت الجلب. سأجرب الجلب المسبق لمعرفة ما إذا كان سيحدث فرقًا!

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

[Falco]

@piffy

يبدو أن جوجل تحسب LCP بشكل أساسي من حركة مرور البحث، والتي عادة ما تكون من المستخدمين غير المسجلين الدخول في حالتي

سيأتي LCP من جميع المستخدمين الذين يستخدمون Google Chrome، لذا Android و Windows و MacOS و Linux و Chromebooks.

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

[piffy]

من الجيد معرفة ذلك.

هل تعتقد أنه يمكنني تجاوز هذه المشكلة عن طريق جعل الرسوم المتحركة لشاشة البداية أكبر؟

[Falco]

هذا معقد للغاية.

أولاً، لقد تحققت للتو وتستخدم شاشة البداية الشاشة بأكملها بالفعل (100vh وعرض 100٪).

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

سأجرب علامة meta prefetch، وأتأكد من أنها أصل مُحسَّن جيدًا وأن جميع أصولك يتم تسليمها عبر شبكة توصيل المحتوى (CDN) مع نقاط تواجد قريبة من مكان وجود المستخدمين لديك.

[Stephen]

@piffy

هو أكبر كائن مرسوم على الشاشة لكل صفحة تقريبًا

هل يجب أن يكون كذلك؟

[piffy]

إنه أساسي في هذه المرحلة، يحبه المستخدمون

[Stephen]

وهل يمكن تعديله بأي شكل من الأشكال؟

[piffy]

بالتأكيد يمكنني دائمًا تقليصها أو شيء من هذا القبيل ولكني أفضل حلاً لا يضر بالجماليات

[piffy]

@Falco

إذا كنت تعتقد أن المشكلة الرئيسية هي تنزيل أصل الصورة، يمكنك إضافة شيء مثل

<link rel="prefetch" href="http://example.com/myimage.webp" />

إلى عنصر HEAD الخاص بك في سمة.

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

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

[piffy]

@piffy

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

بعيد كل البعد عن المثالية ولكنه يعمل

في حال واجه أي شخص مشكلة مماثلة