حل مشکل بارگذاری تنبل lazyload عکس

بارگذاری تنبل یا همان lazyload در عکسها گاهی مشکلاتی را برای سایت به‌وجود می‌آورد که میتواند باعث دیر رندر شدن صفحه و تاخیر در بارگذاری صفحه وب سایت شما شود

خوب مرورگر‌ها قطعا میتوانند و هوشمند هستند. اما این که این موضوع را درک کنند قطعا اینطور نیست.

وقتی یک عنصر تصویر را با lazyload بارگیری می‌کنید، صریحاً به مرورگر می‌گویید که این تصویر را از اولویت خارج کند.

این بدان معنی است که همه تصاویر غیر تنبل دیگر زودتر از تصاویر تنبل شما برای دانلود برنامه ریزی می شوند. هنگامی که این تصویر تنبل عنصر LCP شما باشد، احتمالا LCP خود را به تاخیر می اندازید.

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

با حذف ویژگی loading=”lazy” از تصویر LCP خود یا با به روز رسانی فیلترهای افزونه های خود برای دور زدن بارگذاری تنبل برای تصویر LCP برطرف کنید.

اخطار “Largest Contentful Paint image was lazily loaded” چیست؟

این اخطار زمانی ظاهر می‌شود که تصویر Largest Contentful Paint توسط مرورگر لود شود. چرا؟ از آنجا که بارگذاری تنبل مهم ترین تصویر در صفحه (the Largest Contenful Paint element) ایده بدی است. برای اهداف سرعت صفحه، باید این عنصر را در اسرع وقت بارگیری کنید. بارگذاری تنبل ممکن است Largest Contentful Paint را به تاخیر بیندازد.

یک یادآوری : بارگذاری تنبل

بارگذاری تنبل یا Lazy loading زمانی است که یک عنصر، اغلب یک تصویر، بلافاصله در حین بارگذاری صفحه برای بارگیری توسط مرورگر برنامه ریزی نشده است، بلکه زمانی که عنصر به قسمت قابل مشاهده صفحه نزدیک است. ارجاع داده می‌شود

Native lazy loading

بارگیری تنبل Native از API مرورگرها استفاده می کند. برای تصاویر به تگ تصویر به سادگی افزودن loading=”lazy” را می‌توانید انجام دهید. بارگذاری تنبل بومی در حال حاضر توسط همه مرورگرهای مدرن پشتیبانی می شود.

<img loading="lazy" 
     src="image.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

بارگذاری تنبل مبتنی بر جاوا اسکریپت

از یک API جاوا اسکریپت استفاده می کند. تا تعیین کند که یک تصویر به نمای قابل مشاهده تبدیل گردد. هنگامی که در تصویر قابل مشاهده است، src تصویر با تصویر نهایی تعویض می شود.

معمولاً می‌توانید آن را با ویژگی data-src روی تصویر تشخیص دهید. بارگیری تنبل جاوا اسکریپت توسط مرورگرهای بیشتری نیز پشتیبانی می شود، اما یک نقطه ضعف جدی دارد: «از جاوا اسکریپت استفاده می کند».

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

<img data-src="image.png" 
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

چگونه یک “lazy loading Largest Contentful Paint image” بر سرعت صفحه تأثیر می گذارد؟

اکنون که می دانیم بارگذاری تنبل چه کاری انجام می دهد، بیایید نگاهی بیندازیم به این که چرا تصویر LCP باعث به تاخیر افتادن می شود. Largest Contentful Paint بزرگترین عنصری است که در هنگام بارگذاری صفحه روی صفحه نمایش، در نمای قابل مشاهده، قابل رویت است. از منظر بصری، این لحظه ای را نشان می دهد که صفحه باید از نظر بصری “آماده” در نظر گرفته شود.

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

مهمترین تصویر، LCP باید فوراً بارگذاری شود تا اطمینان حاصل شود که می توان آن را در سریعترین زمان ممکن روی صفحه نمایش داد.

بخوانید : کش وبسایت چیست؟

حالا ممکن است فکر کنید که یک مرورگر به اندازه کافی هوشمند است که این موضوع را بفهمد؟ جواب این سوال منفی است! وقتی یک تصویر را با تنبلی بارگیری می‌کنید، صریحاً به مرورگر می‌گویید که این تصویر را از اولویت خارج کند.

این بدان معنی است که همه تصاویر غیر تنبل دیگر زودتر از تصاویر تنبل شما برای دانلود برنامه ریزی می شوند. هنگامی که این تصویر تنبل عنصر LCP شما باشد، احتمالا LCP خود را به تاخیر می اندازید.

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

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

نحوه رفع “Largest Contentful Paint image was lazily loaded” با تنبلی بارگیری شد

رفع نگرانی در مورد تصویر تنبل Largest Contentful Paint ساده است. شما می‌توانید تگی که در تصاویر باعث بارگذاری تنبل تصاویر می‌شود را غیر فعال کنید.

• اگر از Native بومی استفاده می کنید، loading=”lazy” را از عنصر LCP حذف کنید یا آن را به loading=”eager” تغییر دهید.
• اگر از بارگذاری تنبل مبتنی بر جاوا اسکریپت استفاده می کنید، می توانید به Native سریعتر تغییر دهید یا فقط تصویر LCP را حذف کنید.
• اگر از نوعی مولفه تصویر مانند next/image استفاده می‌کنید، استراتژی = “eager” را تنظیم کنید.

بسیاری از سایت‌ها از افزونه‌های بهینه‌سازی استفاده می‌کنند که تمام تصاویر روی صفحه را برای شما بارگذاری می‌کنند. این افزونه ها بین تصاویر مهم و همیشه قابل مشاهده است.

راه‌حل برای «Largest Contentful Paint image was lazily loaded»

گاهی اوقات CMS شما به شما اجازه نمی دهد تنظیمات بارگذاری تنبل تصاویر را تغییر دهید. در این صورت هنوز راه‌حل‌هایی وجود دارد که می‌توانید از آنها برای به حداقل رساندن تأثیر استفاده کنید.

برای مثال در وردپرس راه حل این موضوع بسیار ساده است و می‌توانید با افزونه Disable Lazy Load این مشکل را حل نمایید.