اثرات عملکرد بارگذاری بیش از حد تنبل

توصیه های مبتنی بر داده برای بارگذاری تنبل تصاویر با در نظر گرفتن Core Web Vitals.

Felix Arntz

Rick Viscomi

بارگذاری تنبل تکنیکی است که دانلود یک منبع را تا زمانی که نیاز باشد به تعویق می‌اندازد تا داده‌ها حفظ شود و اختلاف شبکه برای دارایی‌های حیاتی کاهش یابد. در سال 2019 به یک استاندارد وب تبدیل شد و امروز loading="lazy" برای تصاویر توسط اکثر مرورگرهای اصلی پشتیبانی می شود.

این صفحه تجزیه و تحلیل ما از داده‌های شفافیت وب در دسترس عموم و آزمایش موقت A/B را برای درک ویژگی‌های پذیرش و عملکرد بارگیری تنبل تصویر داخلی خلاصه می‌کند. ما دریافتیم که بارگذاری تنبل می‌تواند یک ابزار شگفت‌انگیز موثر برای کاهش بایت‌های تصویر غیرضروری باشد، اما استفاده بیش از حد از آن می‌تواند بر عملکرد سایت تأثیر منفی بگذارد. تجزیه و تحلیل ما نشان می‌دهد که بارگیری مشتاقانه تصاویر در نمای اولیه، در حالی که بارگیری بقیه با تنبلی انجام می‌شود، می‌تواند بهترین هر دو جهان را به ما بدهد: بایت‌های کمتر بارگیری شده و Core Web Vitals بهبود یافته.

فرزندخواندگی

طبق جدیدترین داده‌های موجود در بایگانی HTTP ، 29 درصد از وب‌سایت‌ها از بارگذاری تنبل تصویر داخلی استفاده می‌کنند و پذیرش به سرعت در حال رشد است.

جستجوی داده‌های خام در پروژه بایگانی HTTP به ما درک واضح‌تری از نوع وب‌سایت‌هایی می‌دهد که منجر به پذیرش می‌شوند: 84 درصد از سایت‌هایی که از بارگذاری تنبل تصویر داخلی استفاده می‌کنند از WordPress استفاده می‌کنند، 2 درصد از CMS دیگری استفاده می‌کنند و 14 درصد باقی‌مانده از آن استفاده می‌کنند. از یک CMS شناخته شده استفاده نکنید. این نتایج نشان می دهد که چگونه وردپرس در پذیرش هزینه ها پیشرو است .

میزان پذیرش نیز قابل توجه است. در جولای 2020، سایت‌های وردپرسی که از بارگذاری تنبل استفاده می‌کنند، ده‌ها هزار وب‌سایت را در مجموع حدود 6 میلیون (1٪ از کل) تشکیل دادند. با شروع سال 2021، پذیرش بارگذاری تنبل تنها در وردپرس به بیش از 1 میلیون وب سایت (14٪ از کل) افزایش یافته بود.

عملکرد همبستگی

با کاوش عمیق‌تر در بایگانی HTTP، می‌توانیم نحوه عملکرد صفحات با و بدون بارگذاری تنبل تصویر داخلی را با معیار بزرگ‌ترین رنگ محتوایی (LCP) مقایسه کنیم. داده‌های LCP از تجربیات کاربر واقعی از گزارش تجربه کاربر Chrome (CrUX) در مقابل آزمایش مصنوعی در آزمایشگاه می‌آیند. نمودار زیر از نمودار جعبه و سبیل برای تجسم توزیع LCP صدک 75 هر صفحه استفاده می کند: خطوط نشان دهنده صدک 10 و 90 و کادرها نشان دهنده صدک 25 و 75 هستند.

صفحه میانه بدون بارگذاری تنبل دارای صدک 75 LCP 2922 میلی‌ثانیه است، در مقایسه با صفحه میانه با بارگذاری تنبل 3546 میلی‌ثانیه. به طور کلی، وب سایت هایی که از بارگذاری تنبل استفاده می کنند، عملکرد LCP بدتری دارند.

ذکر این نکته مهم است که اینها نتایج همبستگی هستند و لزوماً به بارگذاری تنبل به عنوان دلیل عملکرد کندتر اشاره نمی کنند. به عنوان مثال، اگر سایت‌های وردپرس کمی کندتر هستند، با توجه به اینکه چه مقدار از گروه بارگذاری تنبل را تشکیل می‌دهند، این می‌تواند تفاوت را توضیح دهد. بنابراین نمودار بعدی سعی می کند این تنوع را فقط با نگاه کردن به سایت های وردپرس از بین ببرد.

متأسفانه، همین الگو تنها از صفحات وردپرس پدیدار می شود. آنهایی که از بارگذاری تنبل استفاده می کنند، عملکرد LCP کندتری دارند. صفحه میانه وردپرس بدون بارگذاری تنبل دارای صدک 75 LCP 3495 میلی‌ثانیه است، در حالی که برای صفحه میانه با بارگذاری تنبل 3768 میلی‌ثانیه است.

این هنوز ثابت نمی کند که بارگذاری تنبل باعث کندی بارگذاری صفحات می شود، اما استفاده از آن با عملکرد کندتر همزمان است. برای اینکه مشخص کنیم چه چیزی باعث این می شود، یک تست A/B مبتنی بر آزمایشگاه راه اندازی کردیم.

عملکرد علی

هدف آزمون A/B اثبات یا رد این فرضیه بود که بارگذاری تنبل تصویر داخلی، همانطور که در هسته وردپرس پیاده‌سازی شد، منجر به عملکرد کندتر LCP و بایت‌های تصویر کمتر می‌شود. روشی که ما استفاده کردیم آزمایش یک وب سایت وردپرس آزمایشی با موضوع twentywentyone بود. ما هر دو نوع آرشیو و تک صفحه را که مانند صفحه اصلی و مقاله هستند، روی دسکتاپ و دستگاه های تلفن همراه شبیه سازی شده با استفاده از WebPageTest آزمایش کردیم. ما هر ترکیبی از صفحات با و بدون بارگذاری تنبل را آزمایش کردیم و هر آزمایش را 9 بار انجام دادیم تا مقدار متوسط ​​LCP و تعداد بایت های تصویر را بدست آوریم.

این نتایج میانگین LCP را بر حسب میلی ثانیه برای آزمایشات روی آرشیو و صفحات تک برای دسکتاپ و موبایل مقایسه می کند. وقتی بارگذاری تنبل را در صفحات بایگانی غیرفعال کردیم، شاهد بهبود LCP با حاشیه قابل توجهی بودیم. با این حال، در صفحات تک، تفاوت کمتری ایجاد کرد.

به نظر می رسد غیرفعال کردن بارگذاری تنبل صفحات تک را کمی سریعتر می کند. با این حال، تفاوت در LCP کمتر از یک انحراف استاندارد برای تست‌های دسکتاپ و موبایل است، بنابراین ما این را به واریانس نسبت می‌دهیم و تغییر کلی را خنثی در نظر می‌گیریم. در مقایسه، تفاوت برای صفحات آرشیو نزدیک به دو تا سه انحراف استاندارد است.

این نتایج تعداد متوسط ​​بایت های تصویر (بر حسب کیلوبایت) را برای هر آزمون مقایسه می کند. همانطور که انتظار می رفت، بارگذاری تنبل تأثیر مثبت بسیار واضحی در کاهش تعداد بایت های تصویر دارد. اگر یک کاربر واقعی در کل صفحه پیمایش کند، همه تصاویر به هر حال با عبور از نمای دید بارگیری می‌شوند، اما این نتایج عملکرد بهبود یافته بارگذاری صفحه اولیه را نشان می‌دهد.

برای خلاصه کردن نتایج آزمون A/B، تکنیک بارگذاری تنبل که توسط وردپرس استفاده می‌شود، به وضوح به کاهش بایت‌های تصویر به قیمت LCP تاخیری کمک می‌کند.

یک اصلاح بالقوه

مهمترین جنبه اجرای بارگذاری تنبل فعلی وردپرس برای این آزمایش این است که تصاویر را در نمای (_بالای قسمت) بارگذاری می کند. پست وبلاگ CMS این را به‌عنوان الگویی برای اجتناب از آن تصدیق می‌کند ، اما داده‌های تجربی در آن زمان نشان داد که تأثیر بر LCP حداقل بوده و ارزش ساده‌سازی پیاده‌سازی در هسته وردپرس را دارد.

با توجه به این داده‌های جدید، ما یک اصلاح آزمایشی ایجاد کردیم که از بارگذاری تنبل تصاویر در بالای صفحه جلوگیری می‌کند و آن را تحت شرایطی مشابه با اولین آزمایش A/B آزمایش کردیم.

این نتایج بسیار امیدوارکننده تر هستند. بارگذاری تنبل فقط تصاویر زیر تاشو منجر به معکوس شدن کامل رگرسیون LCP و احتمالاً حتی بهبود جزئی نسبت به غیرفعال کردن کامل LCP می شود. چگونه می تواند سریعتر از لود نشدن تنبل باشد؟ یکی از توضیح ها این است که بارگذاری نکردن تصاویر زیر، اختلاف شبکه با تصویر LCP را کاهش می دهد، که به آن اجازه می دهد سریعتر بارگذاری شود.

از نظر بایت های تصویر، اصلاح رفتار پیش فرض را تحت تاثیر قرار نمی دهد. این عالی است، زیرا یکی از نقاط قوت رویکرد پیش فرض بود.

این اصلاح با برخی هشدارها همراه است. وردپرس تعیین می‌کند که کدام تصاویر در سمت سرور بارگذاری شوند، به این معنی که چیزی در مورد اندازه نمای کاربر یا اینکه آیا تصاویر در ابتدا در آن بارگیری می‌شوند، نمی‌داند. بنابراین این اصلاح از اکتشافی در مورد مکان نسبی تصاویر در نشانه گذاری استفاده می کند تا حدس بزند که آیا در نمای بارگذاری می شود یا خیر. به طور خاص، اگر تصویر اولین تصویر برجسته در صفحه یا اولین تصویر در محتوای اصلی باشد، فرض بر این است که در بالای صفحه یا نزدیک به آن قرار دارد و بارگذاری تنبلی نخواهد داشت. شرایط سطح صفحه مانند تعداد کلمات در عنوان یا مقدار متن پاراگراف اولیه در محتوای اصلی می تواند بر قرار گرفتن تصویر در قسمت دید تأثیر بگذارد. همچنین شرایطی در سطح کاربر وجود دارد که ممکن است بر دقت اکتشافی تأثیر بگذارد، به ویژه اندازه نمای و استفاده از پیوندهای لنگر که موقعیت اسکرول صفحه را تغییر می‌دهد. به این دلایل، مهم است که اذعان کنیم که اصلاح فقط برای ارائه عملکرد خوب در حالت کلی کالیبره شده است، و ممکن است برای قابل اجرا کردن این نتایج برای همه سناریوهای دنیای واقعی، تنظیم دقیق لازم باشد.

پیاده سازی (:#پیاده سازی)

اکنون که راه بهتری برای بارگذاری تنبل تصاویر، تمام صرفه جویی در داده ها و عملکرد سریعتر LCP شناسایی کرده ایم، چگونه می توانیم سایت ها را وادار به استفاده از آن کنیم؟ بالاترین اولویت، ارسال یک وصله به هسته وردپرس برای اجرای اصلاح آزمایشی است. ما همچنین دستورالعمل‌های بارگذاری تنبل در سطح مرورگر را برای پست وبلاگ CMS به‌روزرسانی می‌کنیم تا تأثیرات منفی بارگیری تنبل بالا را روشن کنیم و اینکه چگونه CMS‌ها می‌توانند از روش‌های اکتشافی برای اجتناب از آن استفاده کنند.

از آنجایی که این بهترین شیوه‌ها برای همه توسعه‌دهندگان وب قابل اجرا هستند، ممکن است ارزش آن را داشته باشد که استفاده بیش از حد از بارگذاری تنبل در ابزارهایی مانند Lighthouse را علامت‌گذاری کنید. برای پیگیری پیشرفت آن ممیزی، به درخواست ویژگی در GitHub مراجعه کنید. تا آن زمان، یکی از کارهایی که توسعه‌دهندگان می‌توانند برای یافتن نمونه‌هایی از عناصر LCP انجام دهند، اضافه کردن گزارش دقیق‌تر به داده‌های فیلد خود است.

کد زیر جدیدترین عنصر LCP را ارزیابی می‌کند و در صورت بارگذاری تنبلی، هشداری را ثبت می‌کند.

new PerformanceObserver((list) => {
  const latestEntry = list.getEntries().at(-1);

  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console.warn('Warning: LCP element was lazy loaded', latestEntry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

این همچنین لبه تیز تکنیک بارگذاری تنبل و پتانسیل بهبود API در سطح پلت فرم را برجسته می کند. به عنوان مثال، یک مشکل باز در Chromium وجود دارد که با وجود ویژگی بارگیری، چند تصویر اول را مشتاقانه بارگیری کنید، شبیه به loading مشکل.

نتیجه

اگر سایت شما از بارگذاری تنبل تصویر داخلی استفاده می کند، نحوه پیاده سازی آن را بررسی کنید و برای درک بهتر هزینه های عملکرد آن، تست های A/B را اجرا کنید. ممکن است از بارگیری مشتاقانه‌تر تصاویر در بالای صفحه بهره مند شود. اگر یک سایت وردپرس دارید، امیدواریم به زودی یک وصله در هسته وردپرس ایجاد شود. اگر از CMS دیگری استفاده می‌کنید، مطمئن شوید که آنها از مشکلات عملکرد بالقوه توضیح داده شده در اینجا آگاه هستند.

عکس فرانکی لوپز در Unsplash