6 روش رفع خطای Properly Size Images

بهینه‌سازی و افزایش سرعت وب‌سایت‌ برای بهبود سرعت بارگذاری صفحه و تجربه کاربری همواره از اهمیت زیادی برخوردار بوده است. اگر با خطای Properly Size Images مواجه شده‌اید و قصد دارید امتیاز PageSpeed Insights خود را به بیش از 90 برسانید، احتمالا می‌خواهید بدانید که این خطا چیست و چگونه می‌توان آن را حل کرد. بدین منظور، باید به بررسی علت و رفع خطای Properly Size Images در PageSpeed Insights و یا رفع خطای مشابه آن، یعنی رفع ارور تغییر اندازه عکس GTMetrix بپردازید. در این مقاله از نجوانت، چند تکنیک بهینه‌سازی را برای شما به اشتراک می‌گذاریم که می‌توانید برای بهینه سازی تصاویر سایت وردپرس خود آن‌ها را دنبال کنید.

خطای Properly Size Images چیست؟

قبل از اینکه بخواهیم بفهمیم این خطا چیست و یا حتی به رفع خطای Properly Size Images بپردازیم، باید نکته‌ای را بگوییم. این ارور به حدی جدی نیست که پس از رفع آن شما به جایگاه یک برسید. این مشکل، سئوی شما را مختل نمی‌کند و رفع آن احتمالا تاثیر آن‌چنانی بر روی جایگاه شما نخواهد داشت.

گرچه نمی توان نادیده گرفت که حل آن به بهبود زمان بارگذاری صفحه و Core Web Vitals کمک می‌کند، اما تاثیر چشمگیر و عظیمی نخواهد داشت؛ چرا که این تنها این یک عامل از عوامل رتبه‌بندی از صدها عامل است. حالا با در نظر گرفتن موضوع گفته شده به بررسی علت خطای Serve Scaled Images در PageSpeed جی تی متریکس و PageSpeed Insights می‌پردازیم.

خطای Properly Size Images به این معناست که تصاویری که در وب‌سایت شما استفاده می‌شوند، دارای ابعاد مناسبی نیستند. این نشان می‌دهد که تصاویر بزرگ‌تر از اندازه مورد نیازشان هستند و مرورگر باید زمان، منابع و پهنای باند اضافی را صرف لود و تغییر اندازه آن‌ها کند.

فرض کنید که شما تصویری با عرض 3000 پیکسل بارگذاری می‌کنید درحالی‌که صفحه نمایش شما کوچک‌تر از 1400 پیکسل است. در این صورت چه اتفاقی می‌افتد؟ کاربران شما باید بیش از 3 برابر آنچه که نیاز است منتظر بمانند. به همین جهت است که گوگل ترجیح می‌دهد تصاویر بارگذاری شده در صفحه تا حد امکان به‌ اندازه نمایش خود نزدیک باشند. شما نباید چیزی بزرگ‌تر از آنچه مورد نیاز است ارائه دهید، این کار بایت‌ها را هدر می‌دهد و صفحه را کندتر می‌کند.

تاثیر رفع خطای Properly Size Images بر روی سرعت

ابزارهای تست سرعت سایت مانند Lighthouse و PageSpeed Insights و GTMetrix در قدم اول، اندازه تصویر رندر شده را با اندازه تصویر واقعی مقایسه می‌کنند. اگر اندازه تصویر رندر شده حداقل 4 کیلوبایت کوچک‌تر از اندازه واقعی باشد، شما با خطای Properly Size Images مواجه خواهید شد.

رفع مشکل Properly Size Images جی تی متریکس و دیگر ابزار‌های تست سرعت، می‌تواند چالش‌برانگیز باشد. این مسئله عاملی کلیدی در حفظ بازدیدکنندگان سایت و کاهش نرخ پرش است. درصد بالایی از صفحات وب‌سایت‌ها را تصاویر در بر می‌گیرند و استفاده از فایل‌های تصویری بزرگ در ابعاد و اندازه‌های نامناسب، تنها باعث اتلاف بیت و سرعت بارگذاری داده‌ها می‌شود. شاید برای شما پیش آمده باشد که دسکتاپ سایت شما در سایت PageSpeed Insights امتیاز بالایی کسب کرده، اما در حالت موبایل امتیاز پایین‌تری دارد. این موضوع می‌تواند به عوامل مختلفی ربط داشته باشد و یکی از آن‌ها، تصاویر بالای صفحه است که برای مشاهده تلفن همراه بهینه نشده‌اند.

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

6 روش رفع خطای Properly Size Images

برای جلوگیری از هرگونه مشکل و جهت رفع ارور تغییر اندازه عکس GTMetrix و PageSpeed Insights، چند تکنیک آسان وجود دارد که می‌توانید پیاده‌سازی کنید. بیایید در اینجا به آن‌ها بپردازیم!

1. اندازه تصاویر را به ابعاد صحیح تغییر دهید

ابزارهای بهینه‌سازی تصاویر، یکی از راحت‌ترین روش‌های از بین بردن خطای مورد بحث است. در اینجا، چند مورد از بهترین ابزارها را برای شما لیست کرده‌ایم:

• compressnow
• JPEGmini
• compressor
• imagerecycle
• TinyPNG

2. استفاده از تنظیمات CDN برای تصاویر

CDN‌‌های تصویر می‌توانند به اندازه مناسب تصاویر برای سایت وردپرس شما کمک کنند. آن‌ها در تبدیل، بهینه‌سازی و تحویل تصاویر تخصص دارند. علاوه بر این، CDN‌ تصویر این امکان را دارد تا کار فشرده‌سازی تصاویر بدون افت کیفیت را انجام دهد. برخی از CDN‌های تصویر حتی قابلیت تبدیل فرمت تصاویر به فرمت‌های جدیدتر و بهینه‌تر مانند WebP را دارند که می‌تواند حجم تصاویر را به طور قابل توجهی کاهش دهد.

3. از عکس های وکتور استفاده کنید

استراتژی دیگر برای تغییر اندازه مناسب تصاویر استفاده از فرمت‌های تصویر مبتنی بر برداری (مانند SVG) است. یک تصویر SVG را می‌توان با مقدار متناهی کد بدون از دست‌ دادن کیفیت به بی‌نهایت مقیاس تبدیل کرد. به همین دلیل است که عکس‌های SVG به انعطاف‌پذیری خود شهرت دارند. همچنین، استفاده از فرمت‌های تصویری مناسب دیگری همچون WebP و JPG می‌تواند تاثیرات مثبتی را دارا باشد.

4. از پلاگین های وردپرسی استفاده کنید

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

• افزونه Imagify
• افزونه Optimole
• افزونه shortpixe

5. برای هر نقطه شکست یک عکس متفاوت بارگذاری کنید

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

6. استفاده از تگ srcset

با تنظیمات srcset برای تصاویر، می‌توانید به صورت خودکار تصاویر واکنش‌گرا را پیاده‌سازی کنید. این تگ HTML به مرورگر نسخه‌های مختلفی از یک تصویر را با اندازه‌های مختلف معرفی می‌کند، تا مرورگر بتواند در شرایط مختلف (مثلا در دستگاه‌های مختلف) تصویر مناسب را انتخاب و به کاربر نمایش دهد.

این قابلیت از نسخه 4.4 وردپرس که در دسامبر 2015 منتشر شد به صورت داخلی پشتیبانی می‌شود. وردپرس به طور خودکار برای هر تصویری که آپلود می‌کنید، تگ‌های srcset و sizes را اضافه می‌کند. این ویژگی به بهبود عملکرد وب سایت و تجربه کاربری سایت کمک می‌کند؛ زیرا باعث می‌شود تصاویر با کیفیت مناسب و حجم کمتر به کاربران نمایش داده شوند.

رفع خطای Serve Scaled Images

رفع خطای Serve Scaled Images نیز تفاوتی با رفع خطای Properly Size Images ندارد. به عبارتی، علت خطای Serve Scaled Images در PageSpeed جی تی متریکس بر می‌گردد به زمانی که تصویری با ابعاد بزرگ‌تر در یک فضای کوچک‌تر نمایش داده می‌شود و مرورگر باید تصویر را با مقیاس کوچک‌تر ارائه کند. این فرایند تغییر مقیاس، می‌تواند زمان و منابع بیشتری مصرف کند و باعث کاهش عملکرد وب‌سایت شود.

برای رفع ارور تغییر اندازه عکس GTMetrix، باید تصاویری با ابعاد دقیق مورد نیاز در وب‌سایت خود ارائه دهید. در نتیجه، شما می‌توانید برای رفع خطاهای عکس در جی ‌تی متریکس، دقیقا از همان روش‌های مشابهی که برای رفع خطای Properly Size Images توضیح داده شد، استفاده کنید. از سوی دیگر، ابزارهایی مانند PageSpeed Insights و GTmetrix می‌توانند به شما کمک کنند تا تصاویر مشکل‌دار را شناسایی و بهینه‌سازی کنید.

برای ارتقاء امتیاز Core Web Vitals سایتتان، به سایر آموزش‌های ما مراجعه کنید تا با روش‌های موثر بهبود عملکرد و تجربه کاربری آشنا شوید:

• نحوه رفع ارور Defer Offscreen Images
• رفع خطا Minimize Main Thread Work
• رفع خطای Avoid Large Layout Shifts

سخن پایانی

امروزه، اغلب طراحی‌های مدرن دارای یک تصویر بزرگ در قسمت بالایی صفحه هستند. اگرچه، این تصویر بزرگ بر روی دسکتاپ عالی جذاب به نظر می‌آید، اما بارگذاری آن زمان می‌برد. همچنین این به Largest Contentful Paint سایت شما در تلفن همراه آسیب می‌رساند؛ حتی می‌تواند باعث خطای Avoid Large Layout Shifts شود و به طور کلی عملکرد سایت شما را دچار مشکل کند. در این مقاله به شما یاد دادیم که برای رفع خطای Properly Size Images چگونه تاثیر تصاویر بر سئو را بهبود ببخشید. امیدواریم که از راهنمایی‌ها و تکنیک‌های این مقاله، استفاده کرده باشید. این اقدامات به طور مستقیم به رشد و موفقیت آنلاین کسب‌وکار شما کمک خواهند کرد.

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