دو هدر http وجود دارد که cache validate را تعیین می کنند یکی last-modified و دیگری etag . این دو هدر مشخص می کنند که فایل کش شده برای چه تارخی و ورژنی هستند ، و توجه داشته باشید که شما فایل هایی که در سرور تان هستند را می توانید رفع خطا کنید ، پس اگرفایلی در سایت شما از طریق یک سرور دیگر لود می شود دلیل آن دسترسشی نداشتن به آن سرور و فایل است و نمی توانید کاری انجام دهید.این دو درخواست را به عنوان درخواست شرطی می شناسیم .که براساس یک سری شروط باید وضعیت کش صفحات را مشخص کنند.
آموزش رفع خطای specify a cache validator در gtmetrix
آگوست 28, 2020
خطای avoid css @importاین پارامتر برای کدهای استایل است که به صورت import@ تعیین شده اند.درصورت ایجاد خطا کافیست استایلی که آدرس داده است را بررسی کنید و اگر کد به صورت import شده بود آن را اصلاح کنید.
آموزش رفع خطای avoid css @import در gtmetix
آگوست 28, 2020

آموزش رفع خطای combine images using css sprites در gtmetrix

آموزش رفع خطای combine images using css sprites در gtmetrix

یکی از خطاهایی که هنگام تست سرعت سایت با  Gtmetrix با آن مواجه می شویم به نام خطای combine images using css sprites که از سری خطاهای page speed است.

 

combine images using css sprites چیست ؟

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

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

مزایای css sprites چیست ؟

  • افزایش سرعت بارگذاری سایت (سرعت سایت یک موضوع بسیار مهم است )
  • باعث افزایش ux سایت می شود
  • افزایش رتبه سایت درگوگل و موتورهای جستجو

 

حال چگونه خطای combine images using css sprites را رفع کنیم ؟

روش اول : استفاده از فتوشاپ برای css sprites  

 

دراین روش باید تصاویر خود را با تناسب درست کنارهم قراردهیم.مانند تصویر بالا کافیست که آیکون هایی که به صورت تصویری هستند و برای نمایش شبک های اجتماعی از آن ها استفاده شده است را با تناسب  و فاصله درست در کنارهم بچینید و یک خروجی در قالب تصویر از آن بگیرید.سپس این تصویر را در هست خود آپلود کنید وبرای نمایش هرکدام از آن آیکون ها کافیست با css موقعیت عکس را تعریف کنیم.

رفع خطای combine images using css sprites

دراین روش باید تصاویر خود را با تناسب درست کنارهم قراردهیم.مانند تصویر بالا کافیست که آیکون هایی که به صورت تصویری هستند و برای نمایش شبک های اجتماعی از آن ها استفاده شده است را با تناسب  و فاصله درست در کنارهم بچینید و یک خروجی در قالب تصویر از آن بگیرید.سپس این تصویر را در هست خود آپلود کنید وبرای نمایش هرکدام از آن آیکون ها کافیست با css موقعیت عکس را تعریف کنیم.

این مقاله رو هم بخونید
آموزش رفع خطای compress componets with gzip درgtmetrix
روش دوم : استفاده از ابزارهای آنلاین css sprites 

دراین روش نیازی به ویرایش عکس وکد نویسی css ندارید.کافیست تصاویر خود را در ابزارهای آنلاین آپلود کنید.این ابزارهای آنلاین خروجی css را به شما می دهند تا در سایت خود از آن ها استفاده کنید.

لیست ابزارهای آنلاین برای css sprites :

Spritepad.wearekiss.com

Spritegen.website-performance.org

Css.spritegen.com

www.spritecow.com

نکته : برای css sprites کردن عکس ها بهتر است فرمت عکس های کوچک png باشد و بک گراند آن شفاف باشد.

مطالب قبلی :

آموزش رفع خطای specify a cache validator در gtmetrix

آموزش رفع خطای serve resources from a consistent url در gtmetrix

آموزش رفع خطای put css in the document head در gtmetrix

آموزش رفع خطای Enable gzip compression در GTmetrix

آموزش رفع خطای leverage browser caching در GTmetrix

 

Aida Parvaresh
Aida Parvaresh
آیداپرورش هستم،علاقمند به تکنولوژی و تولید محتوا،مدتیه که با تیم خوب هفت وب همکاری دارم.

1 Comment

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *