آیا به دنبال یک وبسایت با کارایی بالا هستید؟ یکی از جنبههای مهم در طراحی سایت، سرعت سایت و نحوه بارگیری آن است. فرض کنید یک وبسایت فروشگاهی دارید که به کندی بارگذاری میشود. در این صورت، کاربران به دلیل کند بودن سایت از آن خارج میشوند و هرگز به آن باز نمیگردند. همچنین، آمارهای گوگل نشان داده است که حدود 70 درصد تصمیمات خرید کاربران فروشگاههای آنلاین تحت تاثیر سرعت سایت قرار دارد. یکی از راههای افزایش سرعت، رفع خطای Defer Offscreen Images است. در این مقاله، ما به طور مفصل به بررسی تکنیکهای بهینهسازی تصاویر و نحوه رفع ارور Defer Offscreen Images خواهیم پرداخت.
این تکنیک چیست، چه تاثیری دارد و چگونه میتوان به برطرف کردن خطای Defer Offscreen Images پرداخت؟ پس تا انتهای این مقاله همراه ما باشید.
تصاویر یا ویدیوهای Offscreen چه هستند؟
پیش از رفع مشکل تصاویر Offscreen، ابتدا باید با یک سری مفاهیم آشنا شوید تا به بهترین شکل دلیل ایجاد این خطا را درک کنید و بتوانید به طور موثری به Defer کردن تصاویر Offscreen بپردازید. تصاویر یا ویدیوهای Offscreen به محتواهایی اطلاق میشود که در لحظه بارگذاری اولیه صفحه، در محدوده دید کاربر (Viewport) قرار ندارند و کاربر برای مشاهده آنها باید اسکرول کند. این محتواها میتوانند شامل تصاویر، ویدیوها، نقشهها و دیگر عناصر رسانهای باشند که در ابتدا برای کاربر قابل مشاهده نیستند.
از بین تمام منابع حیاتی مورد نیاز برای کاربردی کردن صفحه وب شما، تصاویر یکی از بزرگترین منابعی هستند که صفحه وب شما برای بارگیری نیاز دارد. در مقایسه با منابع مبتنی بر متن، پردازش و دانلود تصاویر زمان بیشتری میبرد. در مقاله 6 روش رفع خطای Properly Size Images مفصل به یکی دیگر از راههای بهینه سازی تصاویر سایت پرداختهایم که پیشنهاد میکنیم برای بهبود عملکرد وبسایت خود مطالعه کنید.
مفهوم ارور Defer Offscreen Images
حالا که به خوبی با مفهوم Offscreen آشنا شدید اصلا بیایید ببینیم که خطای Defer Offscreen Images چیست و چطور باید به رفع خطای تصاویر غیرفعال بپردازیم. یکی از خطاهایی که PSI میتواند شما را به دردسر بیندازد، خطای 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، میتوانید از مزایای زیر بهرهمند شوید:
- کاهش زمان بارگذاری صفحات: وقتی تصاویری که خارج از Viewport قرار دارند بارگذاری نشوند، بهبود سرعت بارگذاری صفحه شما محسوس خواهد بود.
- حفظ پهنای باند: با بارگذاری تدریجی بخشهای مختلف صفحه، مصرف پهنای باند بازدیدکنندگان سایت شما به میزان قابل توجهی کاهش مییابد. حداکثر پهنای باند مخصوص زمانی است که بازدیدکنندگان کل صفحه را مشاهده کنند.
- رتبهبندی بهتر در نتایج جستجو (SERP): این یک قانون مشخص است که وبسایتهای سریعتر، رتبههای بالاتری نیز دارند. وقتی سایت شما در نتایج جستجو بالاتر نمایش داده میشود، ترافیک بیشتری دریافت خواهید کرد و این در نهایت سبب افزایش نرخ تبدیل نیز خواهد شد.
- تجربه کاربری بهتر بازدیدکننده: کاهش تجربه کاربری، سبب کاهش فروش و افزایش Bounce Rate میشود. با بهینهسازی سرعت بارگذاری، بهینهسازی تجربه کاربری نیز صورت میگیرد که میتواند منجر به افزایش فروش و کاهش نرخ خروج از صفحه شود.
همانطور که دیدید، برطرف کردن خطای Defer Offscreen Images نه تنها باعث بهبود عملکرد صفحه و تجربه کاربری میشود، بلکه به بهبود رتبهبندی سایت شما در موتورهای جستجو نیز کمک میکند. بهینهسازی سرعت بارگذاری صفحات وب یکی از مهمترین جنبههای طراحی وب است که نباید نادیده گرفته شود.
ابزار هایی برای بررسی ارور Defer Offscreen Images
از ابزارهای زیر برای بررسی این ارور میتوانید استفاده کنید:
- Lighthouse: یک ابزار منبع باز است که توسط گوگل توسعه یافته و این توانایی را دارد که وبسایتها را از نظر عملکرد، دسترسی، سئو و غیره نظارت کند. این ابزار در Google Chrome DevTools تعبیه شده است و با باز کردن DevTools، رفتن به برگه Audits میتوانید آن را مشاهده کنید. این ابزار، اولین پیشنهاد ما در آموزش نحوه رفع ارور Defer Offscreen Images است.
- PageSpeed Insights: عملکرد صفحات وب را در دستگاههای تلفن همراه و دسکتاپ تجزیه و تحلیل میکند. پیشنهادهایی برای بهبود سرعت صفحه ارائه میدهد، از جمله پیشنهادهایی برای به تعویق انداختن تصاویر خارج از صفحه. اگر اخطار Defer Offscreen Images پاک شود، آن را به عنوان ممیزی گذرانده دریافت خواهید کرد. PSI تصاویری را که به تعویق نمیافتند علامتگذاری میکند که برای عیبیابی زمانی که همه تصاویر با تنبلی بارگذاری نمیشوند خوب است (در بخش بعدی بیشتر در مورد بارگذاری تنبل خواهید خواند).
- GTmetrix: یک ابزار تست عملکرد وب سایت است که بینشهایی را در مورد سرعت و بهینهسازی صفحات با رفع ارور Defer Offscreen Images ارائه میدهد.
- تست سرعت وب سایت Pingdom: یک ابزار تست سرعت وب سایت که عملکرد وب سایت شما را تجزیه و تحلیل میکند.
اگر برای انتخاب ابزار بررسی و نحوه رفع ارور Defer Offscreen Images، کمی گیج شدهاید، بهتر است به مقاله بررسی بهترین ابزار تست سرعت نیز مراجعه کنید.
نحوه رفع ارور Defer Offscreen Images
حال وقت آن رسیده که به نحوه رفع ارور Defer Offscreen Images بپردازیم:
1. از Lazy Load استفاده کنید
به عنوان یک کاربر وردپرس، باید بدانید که وردپرس به طور پیش فرض، ویژگی loading=”lazy” را به تمام تصاویر با ویژگیهای عرض و ارتفاع اضافه میکند. با این حال، این ویژگی برای تصاویر پسزمینه و iframe در همه مرورگرها اعمال نمیشود. در نتیجه، اگر نیاز به بارگذاری تنبل چنین تصاویری دارید، باید یا به صورت دستی و یا با استفاده از افزونههای موجود، این کار را انجام دهید.
2. از فرمت های جدید و سریع تر تصویر استفاده کنید
گاهی اوقات برای رفع مشکل بارگذاری تصاویر، نمیتوان تصاویر خارج از صفحه را به تعویق انداخت. اما میتوانید فرمتهای جدیدتر و سریعتر تصاویر مانند WebP و SVG و AVIF را جایگزین فرمتهای قدیمی مانند PNG و JPEG برای بهینهسازی تصاویر وب کنید.
3. تقسیم صفحات بزرگ به چند صفحه
تقسیم صفحات بزرگ به چند صفحه کوچکتر میتواند تاثیر مثبتی بر سرعت بارگذاری سایت داشته باشد. با کاهش تعداد تصاویر نمایش داده شده در یک صفحه، میتوانید زمان بارگذاری را بهبود بخشید و تجربه کاربری را ارتقا دهید. همچنین، این روش میتواند به رفع ارور Defer Offscreen Images کمک کند.
4. قابلیت اسکرول بی نهایت
5. استفاده از CSS Sprites
CSS Sprites یک تکنیک بهینهسازی وب است که در آن چندین تصویر کوچک (آیکونها، دکمهها، پسزمینهها و…) در یک تصویر بزرگتر ترکیب میشوند و سپس با استفاده از CSS، بخشهای خاصی از این تصویر بزرگتر به عنوان پسزمینه برای عناصر مختلف در صفحه وب نمایش داده میشوند. این روش باعث کاهش تعداد درخواستهای HTTP به سرور و برطرف کردن خطای Defer Offscreen Images میشود.
سخن پایانی
ما در مقاله نحوه رفع ارور Defer Offscreen Images، سعی کردیم به آموزش راهحلهای خطای Defer بپردازیم. آیا هنوز به دنبال نحوه رفع این ارور هستید و به نتایج دلخواه نرسیدهاید؟ پس ممکن است نیاز به یک تیم متخصص داشته باشید. نجوانت به عنوان یک تیم قابل اعتماد در بهینهسازی وبسایتها، آماده است تا شما را در این مسیر همراهی کند. متخصصان سئو و برنامهنویسان ما با تحلیل دقیق وبسایت شما و استفاده از روشهای بهینهسازی مدرن، میتوانند به طور موثر به برطرف کردن خطای Defer Offscreen Images کمک کنند تا عملکرد وبسایت شما بهینه گردد.
اگر نیازمند افزایش سرعت و عملکرد سایت خود و رفع مشکلاتی مانند Defer Offscreen Images هستید، نگاهی به دیگر آموزشهای ما بیندازید. در این منابع، راهکارهای عملی و موثری را خواهید یافت که به شما کمک میکنند تا عملکرد و تجربه کاربری وبسایت خود را بهبود بخشید:
ما در نجوانت بر این باوریم که موفقیت شما، موفقیت ماست. بنابراین، ما در این مسیر به شما کمک خواهیم کرد تا به اهداف دیجیتال خود دست یابید. با ما در ارتباط باشید و فرصتهای جدید برای بهبود وبسایت خود را کشف کنید!
سوالات متداول
آیا همه تصاویر باید به صورت تنبل بارگذاری شوند؟
خیر، بهتر است تصاویری که در بالای صفحه قرار دارند و بلافاصله بعد از بارگذاری صفحه به چشم می آیند به صورت عادی بارگذاری شوند تا تجربه کاربری بهتری فراهم شود.
آیا رفع ارور Defer Offscreen Images بر روی SEO تاثیر دارد؟
بله، سرعت بارگذاری صفحه یکی از عوامل مهم در SEO است و بهینه سازی تصاویر، می تواند تاثیر مثبتی بر رتبه بندی موتورهای جستجو داشته باشد.
چطور Offscreen Images Deferring باعث کاهش مصرف پهنای باند می شود؟
تعویق در تصاویر خارج از صفحه می تواند مصرف پهنای باند را کاهش دهد؛ زیرا تصاویر و ویدئوهایی که در ابتدا قابل مشاهده نیستند، بارگذاری نخواهند شد.
