5 نحوه رفع ارور defer offscreen images

آیا به دنبال یک وبسایت با کارایی بالا هستید؟ یکی از جنبه‌های مهم در طراحی سایت، سرعت سایت و نحوه بارگیری آن است. فرض کنید یک وبسایت فروشگاهی دارید که به کندی بارگذاری می‌شود. در این صورت، کاربران به دلیل کند بودن سایت از آن خارج می‌شوند و هرگز به آن باز نمی‌گردند. همچنین، آمارهای گوگل نشان داده است که حدود 70 درصد تصمیمات خرید کاربران فروشگاه‌های آنلاین تحت تأثیر سرعت سایت قرار دارد. یکی از راه‌های افزایش سرعت، رفع خطای Defer offscreen images است. در این مقاله، ما به طور مفصل به بررسی تتکنیک‌های بهینه‌سازی تصاویر و نحوه رفع ارور defer offscreen images خواهیم پرداخت. این تکنیک چیست، چه تاثیری دارد و چگونه می‌توان به برطرف کردن خطای defer offscreen images پرداخت. پس تا انتهای این مقاله همراه ما باشید.

تصاویر یا ویدیوهای OffScreen چه هستند؟

می‌دانم که منتظر هستید هرچه سریع‌تر به نحوه رفع ارور defer offscreen images بپردازیم. اما پیش از رفع مشکل تصاویر offscreen، ابتدا باید با یکسری مفاهیم آشنا شوید تا به بهترین شکل دلیل ایجاد خطای defer offscreen images را درک کنید و بتوانید به طور موثری به Defer کردن تصاویر OffScreen بپردازید. تصاویر یا ویدیوهای OffScreen به محتواهایی اطلاق می‌شود که در لحظه بارگذاری اولیه صفحه، در محدوده دید کاربر (viewport) قرار ندارند و کاربر برای مشاهده آنها باید اسکرول کند. این محتواها می‌توانند شامل تصاویر، ویدیوها، نقشه‌ها، و دیگر عناصر رسانه‌ای باشند که در ابتدا برای کاربر قابل مشاهده نیستند.

از بین تمام منابع حیاتی مورد نیاز برای کاربردی کردن صفحه وب شما، تصاویر یکی از بزرگترین منابعی هستند که صفحه وب شما برای بارگیری نیاز دارد. در مقایسه با منابع مبتنی بر متن، پردازش و دانلود تصاویر زمان بیشتری می برد. در مقاله 6 روش رفع خطای properly size images مفصل به یکی دیگر از راه های بهینه سازی تصاویر سایت پرداخته ایم که پیشنهاد می کنیم برای بهبود عملکرد وب مطالعه کنید.

مفهوم ارور Defer offscreen images

حالا که به خوبی با مفهوم OffScreen آشنا شدید اصلا بیایید ببینیم که خطای Defer offscreen images چیست؟ و چطور باید به رفع خطای تصاویر غیرفعال بپردازیم. یکی از خطاهای که PSI می تواند شما را به دردسر بیندازد، خطای Defer offscreen images است و دانستن نحوه رفع ارور defer offscreen images ممکن است جایگاه شما را در نتایج گوگل دگرگون کند. معنی این خطا این است که سایت شما تصاویر را در زمانی که به آنها نیاز ندارد بارگذاری می کند یا به عبارت دیگر صفحه وب شما منابعی را دانلود می کند که در حال حاضر که برای عملکرد صفحه وب مهم نیستند. برای مثال، اگر تصاویری در پایین صفحه سایت دارید، بارگذاری آنها چه فایده ای دارد اگر خواننده بر  روی دکمه ای در بالای صفحه کلیک کرده و هیچ‌گاه به پایین صفحه اسکرول نکند؟

شاید برایتان این سوال پیش بیاید که چرا به این شکل عمل می کند و نحوه رفع ارور defer offscreen images به چه شکل خواهد بود؟ ماجرا از این قرار است که وقتی شما وارد سایتی می شوید، مرورگر وظیفه دارد تا تصاویر را رندر کند. اماDefer کردن تصاویر Offscreen یعنی این تصاویر را دانلود نکن تا منابع مهم با سرعت بیشتری دانلود شوند و بازدیدکنندگان بخش های خالی را مشاهده نکنند.

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

مزایای Deferring offscreen images

حتما تاکنون متوجه شده اید که چرا باید نحوه رفع ارور defer offscreen images را جدی گرفت؟ به تعویق انداختن بارگذاری تصاویر خارج از صفحه به طور مستقیم بر پارامتر First Input Delay (FID) در Core Web Vitals تأثیر می‌گذارد. FID زمان لازم برای پاسخگویی مرورگر به اولین تعامل کاربر با صفحه را محاسبه می‌کند. زمان ایده‌آل برای FID بین 0 تا 100 میلی‌ثانیه تخمین زده شده است و هر مقداری بیش از 300 میلی‌ثانیه ضعیف در نظر گرفته می‌شود. با بهینه‌سازی صفحات وب خود و کسب اطلاعات درباره نحوه رفع ارور defer offscreen images، می‌توانید از مزایای زیر بهره‌مند شوید:

1. کاهش زمان بارگذاری صفحات: وقتی تصاویری که خارج از viewport قرار دارند بارگذاری نشوند، بهبود سرعت بارگذاری صفحه شما محسوس خواهد بود.
2. حفظ پهنای باند: با بارگذاری تدریجی بخش‌های مختلف صفحه، مصرف پهنای باند بازدیدکنندگان سایت شما به میزان قابل توجهی کاهش می‌یابد. حداکثر پهنای باند مخصوص زمانی است که بازدیدکنندگان کل صفحه را مشاهده کنند.
3. رتبه‌بندی بهتر در نتایج جستجو (SERP): این یک قانون مشخص است که وب‌سایت‌های سریع‌تر، رتبه‌های بالاتری نیز دارند. وقتی سایت شما در نتایج جستجو بالاتر نمایش داده می‌شود، ترافیک بیشتری دریافت خواهید کرد و این در نهایت سبب افزایش نرخ تبدیل نیز خواهد بود.
4. تجربه کاربری بهتر بازدیدکننده: همان‌طور که در بالا هم اشاره کردیم؛ کاهش تجربه کاربری، سبب کاهش فروش و افزایش Bounce Rate می‌شود. با بهینه‌سازی سرعت بارگذاری، بهینه سازی تجربه کاربری نیز صورت می‌گیرد که می‌تواند منجر به افزایش فروش و کاهش نرخ خروج از صفحه شود.

همانطور که دیدید، برطرف کردن خطای defer offscreen images نه تنها باعث بهبود عملکرد صفحه و تجربه کاربری می‌شود، بلکه به بهبود رتبه‌بندی سایت شما در موتورهای جستجو نیز کمک می‌کند. بهینه‌سازی سرعت بارگذاری صفحات وب یکی از مهم‌ترین جنبه‌های طراحی وب است که نباید نادیده گرفته شود.

ابزار هایی برای بررسی و نحوه رفع ارور defer offscreen images

• Google Lighthouse :Lighthouse یک ابزار منبع باز است که توسط گوگل توسعه یافته و این توانایی را دارد که  وب سایت ها را از نظر عملکرد، دسترسی، سئو و غیره نظارت کند. این ابزار در Google Chrome DevTools تعبیه شده است و با باز کردن DevTools، رفتن به برگه “Audits” می توانید آن را مشاهده کنید.  این ابزار، اولین پیشنهاد ما برای فهمیدن نحوه رفع ارور defer offscreen images است.
• PageSpeed ​​Insights :PageSpeed ​​Insights، عملکرد صفحات وب را در دستگاه های تلفن همراه و دسکتاپ تجزیه و تحلیل می کند. پیشنهادهایی برای بهبود سرعت صفحه ارائه می دهد، از جمله پیشنهادهایی برای به تعویق انداختن تصاویر خارج از صفحه. اگر اخطار Defer Offscreen Images پاک شود، آن را به عنوان ممیزی گذرانده دریافت خواهید کرد. PSI تصاویری را که به تعویق نمی‌افتند علامت‌گذاری می‌کند  که برای عیب‌یابی زمانی که همه تصاویر با تنبلی بارگذاری نمی‌شوند خوب است (در بخش بعدی بیشتر در مورد بارگذاری تنبل خواهید خواند).
• GTmetrix :GTmetrix یک ابزار تست عملکرد وب سایت است که بینش هایی را در مورد سرعت و بهینه سازی صفحات با رفع ارور defer offscreen images  ارائه می دهد.
• تست سرعت وب سایت Pingdom :Pingdom یک ابزار تست سرعت وب سایت ارائه می دهد که عملکرد وب سایت شما را تجزیه و تحلیل می کند.

اگر برای انتخاب ابزار بررسی و نحوه رفع ارور defer offscreen images،  کمی گیج شده اید؛ بهتر است به مقاله بررسی بهترین ابزار تست سرعت مراجعه کنید.

نحوه رفع ارور defer offscreen images

حال وقت آن رسیده که به نحوه رفع ارور defer offscreen images بپردازیم:

از lazy load استفاده کنید

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

از فرمت های جدید و سریعتر تصویر استفاده کنید

گاهی اوقات برای رفع مشکل بارگذاری تصاویر، نمی توان تصاویر خارج از صفحه را به تعویق انداخت. اما می توانید از فرمت های جدیدتر و سریعتر تصاویر مانند: WebP، SVG و AVIF را جایگزین فرمت های قدیمی مانند PNG و JPEG برای بهینه‌سازی تصاویر وب استفاده کنید.

تقسیم صفحات بزرگ به چند صفحه

تقسیم صفحات بزرگ به چند صفحه کوچک‌تر می‌تواند تأثیر مثبتی بر سرعت بارگذاری سایت داشته باشد. با کاهش تعداد تصاویر نمایش داده شده در یک صفحه، می‌توانید زمان بارگذاری را بهبود بخشید و تجربه کاربری را ارتقا دهید. همچنین، این روش می‌تواند به رفع ارور Defer offscreen images کمک کند.

قابلیت اسکرول بی نهایت

استفاده از CSS Sprites

CSS Sprites یک تکنیک بهینه‌سازی وب است که در آن چندین تصویر کوچک (آیکون‌ها، دکمه‌ها، پس‌زمینه‌ها و …) در یک تصویر بزرگ‌تر ترکیب می‌شوند و سپس با استفاده از CSS، بخش‌های خاصی از این تصویر بزرگ‌تر به عنوان پس‌زمینه برای عناصر مختلف در صفحه وب نمایش داده می‌شوند. این روش باعث کاهش تعداد درخواست‌های HTTP به سرور و  برطرف کردن خطای defer offscreen images می‌شود.

سخن پایانی

ما در مقاله نحوه رفع ارور defer offscreen images،سعی کردیم به آموزش راه‌حل‌های خطای defer بپردازیم.

آیا هنوز به دنبال نحوه رفع ارور defer offscreen images هستید و به نتایج دلخواه نرسیده‌اید، ممکن است نیاز به یک  تیم متخصص داشته باشید. نجوانت به عنوان یک تیم قابل اعتماد در بهینه‌سازی وب‌سایت‌ها، آماده است تا شما را در این مسیر همراهی کند. متخصصان سئو و برنامه‌نویسان ما با تحلیل دقیق وب‌سایت شما و استفاده از روش‌های بهینه‌سازی مدرن، می‌توانند به طور مؤثر به برطرف کردن خطای defer offscreen images کمک کنند تا عملکرد وب‌سایت شما بهینه گردد.

اگر نیازمند افزایش سرعت و عملکرد سایت خود و رفع مشکلاتی مانند Defer offscreen images هستید، نگاهی به دیگر آموزش‌های ما بیندازید. در این منابع، راهکارهای عملی و مؤثری را خواهید یافت که به شما کمک می‌کنند تا عملکرد و تجربه کاربری وب‌سایت خود را بهبود بخشید:

• رفع خطای properly size images
• رفع ارور Eliminate render-blocking resources
• رفع خطا minimize main thread work
• رفع خطای avoid large layout shifts

ما در نجوانت بر این باوریم که موفقیت شما، موفقیت ماست. بنابراین، ما در این مسیر به شما کمک خواهیم کرد تا به اهداف دیجیتال خود دست یابید. با ما در ارتباط باشید و فرصت‌های جدید برای بهبود وب‌سایت خود را کشف کنید!

سوالات متداول