گوگل: چرا لیزی لودینگ می‌تونه باعث کندی LCP بشه؟
توی یکی از پادکست‌های گوگل، «مارتین اسپلیت» توضیح می‌ده که چطور «لیزی لودینگ» (Lazy Loading) پیش‌فرض می‌تونه باعث تاخیر توی LCP بشه، چرا بعضی از کتابخانه‌ها جلوی ایندکس شدن رو می‌گیرن و چطوری می‌تونیم این مشکلات رو برطرف کنیم و از حل شدنشون مطمئن بشیم.
- گوگل در مورد لیزی لود کردن تصاویری که در بالای صفحه (above-the-fold) قرار دارن هشدار می‌ده.
- این کار می‌تونه LCP رو به تاخیر بندازه و برای کاربرا یه تجربه ناخوشایند ایجاد کنه.
- برای بررسی، HTML رندر شده رو توی سرچ کنسول چک کنید.
توی یکی از قسمت‌های اخیر پادکست Search Off the Record گوگل، «مارتین اسپلیت» و «جان مولر» در مورد این صحبت کردن که لیزی لودینگ کی به دردمون می‌خوره و کی می‌تونه سرعت سایت رو کم کنه.
اسپلیت با یه مثال واقعی از سایت developers.google.com یه الگوی رایج رو نشون داد: وقتی همه تصاویر به‌طور پیش‌فرض لیزی لود می‌شن، اگه تصویری بالای صفحه (above-the-fold) باشه، این کار می‌تونه معیار Largest Contentful Paint یا همون LCP رو به تاخیر بندازه.
اسپلیت گفت:
«سیستم مدیریت محتوایی که ما برای developers.google.com استفاده می‌کنیم… همه تصاویر رو به‌طور پیش‌فرض لیزی لود می‌کنه که اصلا چیز خوبی نیست.»
اسپلیت با همین مثال توضیح داد که چرا لیزی لود کردن تصاویر اصلی (Hero images) کار پرریسکیه: با این کار شما به مرورگر می‌گید که برای بارگذاری مهم‌ترین و اولین عنصری که کاربر می‌بینه، صبر کنه. این موضوع می‌تونه LCP رو عقب بندازه و اگه ابعاد تصویر مشخص نشده باشه، باعث جابجایی ناگهانی محتوا (Layout Shift) هم بشه.
اسپلیت گفت:
«اگه روی تصویری که بلافاصله بعد از باز شدن صفحه دیده می‌شه از لیزی لودینگ استفاده کنید، به احتمال خیلی زیاد روی LCP شما تاثیر منفی می‌ذاره. یعنی تقریباً می‌شه گفت این تاثیر قطعیه.»
لیزی لودینگ چطور باعث تاخیر در LCP می‌شه؟
LCP لحظه‌ای رو اندازه می‌گیره که بزرگ‌ترین متن یا تصویر در بخش قابل مشاهده اولیه صفحه (viewport) نمایش داده می‌شه.
در حالت عادی، اسکنر پیش‌بارگذاری (preload scanner) مرورگر، اون تصویر اصلی صفحه رو خیلی زود پیدا می‌کنه و با اولویت بالا دریافتش می‌کنه تا بتونه سریع نمایشش بده.
اما وقتی شما loading="lazy" رو به همون تصویر اصلی اضافه می‌کنید، زمان‌بندی مرورگر رو به هم می‌ریزید:
- تصویر با اولویت پایین‌تری در نظر گرفته می‌شه، برای همین منابع دیگه زودتر از اون شروع به بارگذاری می‌کنن.
- مرورگر صبر می‌کنه تا چیدمان صفحه (layout) و کارهای دیگه انجام بشن و بعد درخواست بارگذاری تصویر اصلی رو ارسال می‌کنه.
- در نتیجه، تصویر اصلی برای گرفتن پهنای باند باید با اسکریپت‌ها، استایل‌ها و بقیه فایل‌هایی که از قبل توی صف قرار گرفتن رقابت کنه.
این تاخیر، زمان نمایش بزرگ‌ترین عنصر صفحه رو عقب میندازه و باعث افزایش LCP شما می‌شه.
این تاثیر روی اینترنت‌های کند یا دستگاه‌هایی که پردازنده ضعیفی دارن، خیلی بیشتر به چشم میاد. اگه عرض و ارتفاع تصویر هم مشخص نشده باشه، دیر لود شدنش می‌تونه باعث جابجایی ناگهانی محتوا بشه و یه حس ناخوشایند به کاربر بده.
ریسک سئو در استفاده از بعضی کتابخانه‌ها (Libraries)
امروزه مرورگرها از یک ویژگی داخلی به اسم loading برای تصاویر و iframeها پشتیبانی می‌کنن که نیاز به استفاده از جاوا اسکریپت‌های سنگین رو توی حالت‌های استاندارد از بین برده. وردپرس هم به‌طور پیش‌فرض از لیزی لودینگ داخلی (native) استفاده کرد که به فراگیر شدنش کمک زیادی کرد.
اسپلیت در این مورد می‌گه:
«مرورگرها یه ویژگی داخلی برای تصاویر و iframeها به اسم loading attribute دارن… که باعث می‌شه خود مرورگر کار لیزی لودینگ رو براتون انجام بده.»
بعضی از کتابخانه‌های قدیمی یا سفارشی لیزی لودینگ، ممکنه آدرس URL تصویر رو توی ویژگی‌های غیراستاندارد مخفی کنن. اگه آدرس اصلی تصویر هیچ‌وقت توی src یا srcset در نسخه HTML نهایی که گوگل رندر می‌کنه قرار نگیره، ممکنه اون تصاویر برای ایندکس شدن انتخاب نشن.
اسپلیت می‌گه:
«ما خیلی از کتابخانه‌های لیزی لودینگ رو دیدیم که… به جای ویژگی source از یه چیزی مثل data-source استفاده می‌کنن… اگه آدرس تصویر توی ویژگی source نباشه و توی یه ویژگی سفارشی دیگه باشه، ما اون رو برای ایندکس شدن برنمی‌داریم.»
چطور صفحات خودمون رو بررسی کنیم؟
از ابزار URL Inspection توی سرچ کنسول استفاده کنید تا HTML رندر شده رو ببینید و مطمئن بشید که تصاویر بالای صفحه (above-the-fold) و ماژول‌های لیزی لود شده، در نهایت آدرسشون رو توی ویژگی‌های استاندارد قرار می‌دن. حواستون باشه که به اسکرین‌شات اکتفا نکنید.
اسپلیت توصیه می‌کنه:
«اگه توی HTML رندر شده، همه آدرس‌های تصاویر داخل ویژگی source تگ image قرار گرفته باشن… مشکلی پیش نمیاد و همه چیز مرتبه.»
تاثیر روی رتبه سایت
اسپلیت تاثیر این موضوع روی رتبه‌بندی رو جزئی توصیف کرد. Core Web Vitals یا همون هسته‌های حیاتی وب روی رتبه سایت تاثیر دارن، اما به گفته اون، «در بیشتر موارد این یه فاکتور خیلی خیلی کوچیکه.»
خب، حالا باید چیکار کنیم؟
- تصاویر اصلی (Hero) و بقیه تصاویری که بالای صفحه هستن رو به‌صورت عادی (eager) و بدون لیزی لودینگ بارگذاری کنید و حتماً عرض و ارتفاعشون رو مشخص کنید.
- برای تصاویر و iframeهایی که پایین صفحه (below-the-fold) هستن، از ویژگی داخلی
loading="lazy"استفاده کنید. - اگه برای پیش‌نمایش‌ها، ویدیوها یا بخش‌های داینامیک از کتابخونه خاصی استفاده می‌کنید، مطمئن بشید که توی کد نهایی، آدرس‌های واقعی در ویژگی‌های استاندارد قرار می‌گیرن و این موضوع رو حتماً با بررسی HTML رندر شده تایید کنید.
نگاه به آینده
لیزی لودینگ اگه هوشمندانه و به‌صورت انتخابی استفاده بشه، خیلی مفیده. بهش به چشم یه گزینه اختیاری برای محتوای غیرضروری نگاه کنید.
حتما پیاده‌سازی خودتون رو با HTML رندر شده چک کنید و روند تغییرات LCP سایتتون رو در طول زمان زیر نظر داشته باشید.
پاسخی بگذارید