چرا بارگذاری تنبل می تواند بزرگترین رنگ محتوا (LCP) را به تأخیر بیندازد

در یک قسمت اخیر از جستجوی Google از پادکست ضبط ، مارتین اسپلیت و جان مولر هنگام بارگیری تنبل کمک می کنند و چه زمانی می تواند صفحات را کند کند.

Splitt از یک مثال در دنیای واقعی در Developers.google.com استفاده کرد تا یک الگوی مشترک را نشان دهد: ساختن هر تصویر به طور پیش فرض می تواند بزرگترین رنگ محتوا (LCP) را در صورتی که شامل تصاویر بالاتر است ، به تأخیر بیندازد.

SPLITT گفت:

“سیستم مدیریت محتوا که ما برای توسعه دهندگان استفاده می کنیم. google.com … پیش فرض همه تصاویر را برای بارگیری تنبل ، که عالی نیست.”

SPLITT از مثال برای توضیح اینکه چرا تصاویر قهرمان بارگذاری تنبل خطرناک است ، استفاده کرد: به مرورگر می گویید که روی قابل مشاهده ترین عنصر صبر کنید ، که می تواند LCP را به عقب برگرداند و در صورت تنظیم ابعاد باعث تغییر طرح شود.

SPLITT گفت:

“اگر از بارگیری تنبل بر روی تصویری استفاده می کنید که بلافاصله قابل مشاهده است ، به احتمال زیاد در بزرگترین رنگ محتوا شما تأثیر خواهد گذاشت. این تقریباً تضمین شده است.”

چگونه بارگیری تنبل LCP را به تأخیر می اندازد

LCP لحظه ای بزرگترین متن یا تصویر در نمای اولیه را اندازه گیری می کند.

به طور معمول ، اسکنر از پیش بار مرورگر می یابد که تصویر قهرمان در اوایل تصویر می کند و آن را با اولویت بالا می برد تا بتواند سریع نقاشی کند.

وقتی اضافه می کنید loading="lazy" به همان قهرمان ، شما برنامه ریزی مرورگر را تغییر می دهید:

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

این تأخیر باعث تغییر زمان رنگ بزرگترین عنصر بعداً می شود که LCP شما را افزایش می دهد.

در شبکه های آهسته یا دستگاه های محدود CPU ، این اثر بیشتر قابل توجه است. اگر عرض و ارتفاع از بین نرود ، تصویر دیررس نیز می تواند چیدمان را گول بزند و احساس “جنجالی” کند.

خطر سئو با برخی از کتابخانه ها

مرورگرها اکنون از یک داخلی پشتیبانی می کنند loading ویژگی برای تصاویر و iframes ، که نیاز به جاوا اسکریپت سنگین را در سناریوهای استاندارد برطرف می کند. وردپرس بارگذاری تنبل بومی را به طور پیش فرض اتخاذ کرد و به گسترش آن کمک کرد.

SPLITT گفت:

“مرورگرها یک ویژگی بومی برای تصاویر و iframes ، ویژگی بارگذاری … که باعث می شود مرورگر از بارگیری تنبل برای شما مراقبت کند.”

کتابخانه های تنبل قدیمی یا سفارشی می توانند URL های تصویر را در ویژگی های غیر استاندارد پنهان کنند. اگر URL واقعی هرگز وارد نشود src یا srcset در HTML Google Renders ، تصاویر ممکن است برای نمایه سازی انتخاب نشوند.

SPLITT گفت:

“ما چندین کتابخانه بارگذاری تنبل را دیده ایم … که از نوعی ویژگی منبع داده استفاده می کنند نه ویژگی منبع … اگر در ویژگی منبع نباشد ، اگر در برخی از ویژگی های سفارشی باشد ، آن را انتخاب نمی کنیم.”

چگونه صفحات خود را بررسی کنیم

برای مرور کردن از بازرسی URL کنسول جستجو استفاده کنید ارائه HTML و تأیید کنید که تصاویر بالاتر و ماژول های تنبل به ویژگی های استاندارد برطرف می شوند. از تکیه بر روی تصویر خودداری کنید.

Splitt توصیه کرد:

“اگر HTML ارائه شده به نظر برسد ، شامل تمام URL های تصویر در ویژگی منبع یک برچسب تصویر است … پس شما خوب خواهید بود.”

تأثیر رتبه بندی

جلوه های رتبه بندی Splitt به عنوان متوسط. ویتای اصلی وب به رتبه بندی کمک می کند ، اما او آن را “یک عامل کوچک دقیقه در بیشتر موارد” خواند.

کاری که باید بعد انجام دهید

• قهرمان و سایر تصاویر بالاتر از آن را مشتاق با عرض و تنظیم ارتفاع نگه دارید.
• استفاده از بومی loading="lazy" برای تصاویر زیر برابر و iframes.
• اگر برای پیش نمایش ها ، فیلم ها یا بخش های پویا به یک کتابخانه تکیه می کنید ، اطمینان حاصل کنید که نشانه نهایی URL های واقعی را در ویژگی های استاندارد قرار می دهد و در HTML ارائه شده تأیید می شود.

نگاه کردن

بارگیری تنبل هنگام استفاده انتخابی مفید است. با آن به عنوان انتخابی برای محتوای غیرقانونی رفتار کنید.

اجرای خود را با HTML Rendered تأیید کنید ، و نحوه روند LCP خود را با گذشت زمان مشاهده کنید.

تصویر برجسته: تصویر از YouTube.com/googlesearchcentral ، اوت 2025.