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 جی تی متریکس و page speed insight  می پردازیم.

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

تأثیر رفع خطای Properly size images بر روی سرعت

ابزارهای تست سرعتی مانند Lighthouse و page speed insight و GTMetrix در قدم اول، اندازه تصویر رندر شده را با اندازه تصویر واقعی مقایسه می‌کنند. اگر اندازه تصویر رندر شده حداقل 4 کیلوبایت کوچک‌تر از اندازه واقعی باشد، شما با خطای Properly size images مواجه خواهید شد.

رفع مشکل Properly size images جی تی متریکس و دیگر ابزار‌های تست سرعت، می تواند چالش برانگیز باشد. این مسئله عاملی کلیدی در حفظ بازدیدکنندگان سایت و کاهش نرخ پرش است. درصد بالایی از صفحات وب‌سایت‌ها را تصاویر در بر می‌گیرند و استفاده از فایل‌های تصویری بزرگ در ابعاد و اندازه‌های نامناسب، تنها باعث اتلاف بیت و سرعت بارگذاری داده‌های می‌شود. شاید برای شما پیش‌آمده باشد که دسکتاپ سایت شما در سایت page speed insight، امتیاز بالایی کسب کرده؛ اما در حالت موبایل امتیاز پایینتری دارد. این موضوع می‌تواند به عوامل مختلفی ربط داشته باشد و یکی از آن‌ها، تصاویر بالای صفحه است که برای مشاهده تلفن همراه بهینه نشده است.

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

6 روش رفع خطای Properly size images

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

روش اول: اندازه تصاویر را به ابعاد صحیح تغییر دهید

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

• compressnow
• JPEGmini
• compressor
• imagerecycle
• TinyPN

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

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

روش سوم: از عکس‌های وکتور استفاده کنید

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

روش چهارم: از پلاگین‌های وردپرسی استفاده کنید

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

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

روش پنجم: برای هر نقطه شکست یک عکس متفاوت بارگذاری کنید

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

روش ششم: استفاده از تگ 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
• رفع ارور Eliminate render-blocking resources
• رفع خطا minimize main thread work
• رفع خطای avoid large layout shifts

سخن پایانی

امروزه، اغلب طراحی‌های مدرن دارای یک تصویر بزرگ در قسمت بالایی صفحه هستند. اگرچه، این تصویر بزرگ بر روی دسکتاپ عالی جذاب به نظر می‌آید، اما بارگذاری آن زمان می‌برد. همچنین این به largest contentful paint سایت شما در تلفن همراه آسیب می‌رساند؛ حتی می‌تواند باعث خطای avoid large layout shifts می‌شود و به‌طورکلی عملکرد سایت شما را دچار مشکل می‌کند. در این مقاله به شما یاد دادیم که برای رفع خطای Properly size images چگونه تاثیر تصاویر بر سئو را بهبود ببخشید. امیدواریم که از راهنمایی‌ها و تکنیک‌های این مقاله، استفاده کرده باشید. این اقدامات به‌طور مستقیم به رشد و موفقیت آنلاین کسب‌وکار شما کمک خواهد کرد.

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