حل ارور Combine images using CSS sprites در GTmetrix

حل ارور Combine images using CSS sprites در GTmetrix

هاست وردپرس

با آموزش حل ارور Combine images using CSS sprites در GTmetrix از وبلاگ آموزشی پرداز آی تی در خدمت شما هستیم و قصد داریم در ادامه آموزش های سئو سایت به کمک GTmetrix به حل ارور Combine images using CSS sprites در GTmetrix بپردازیم.

در مطلب قبلی از دسته آموزش های GTmetrix به آموزش حل خطا Put CSS in the document head در GTmetrix پرداختیم که می توانید در صورت نیاز از این مطلب نیز استفاده کنید.

ارور Combine images using CSS sprites در سایت GTmetrix از دسته خطا های مربوط به عکس ها می باشد و اولویت بالایی نیز دارد و میزان دشواری مشخص شده برای حل این خطا نیز متوسط است و میانگین درصد آن نیز ۸۹% می باشد.

در ادامه با مطلب حل ارور Combine images using CSS sprites در GTmetrix همراه پرداز IT باشید.

حل ارور Combine images using CSS sprites در GTmetrix

ابتدا قصد داریم تا توضیح دهیم که CSS sprite چیست و استفاده از آن چه مزیتی دارد.

CSS sprite چیست

یک صفحه وب یا یک صفحه سایت معمولا از موارد مختلفی مثل استایل ها ، کد های CSS و JS ، عکس ، فیلم ، متن و … تشکیل شده باشد.

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

حال هر چه تعداد عکس های حاضر در یک سایت بیشتر باشد مرورگر باید درخواست های بیشتری را برای نمایش دادن آنها به سمت سرور ارسال کند.

همچنین بخوانید :  ارور Your IP is blacklisted در دایرکت ادمین

اگر تعداد این عکس ها ۲ یا ۳ عدد باشد مشکلی نیست اما وقتی تعداد عکس ها بیشتر از این باشد مشکل به وجود می آید.

همین مورد می تواند باعث طولانی شدن زمان لود سایت شود و تاثیر مستقیمی بر روی سئوی سایت ما داشته باشد.

راه حل این مشکل ترکیب شدن عکس هایی مثل آیکن ها ، آیتم های منو ها ، پس زمینه و … است که می تواند تعداد درخواست های ارسالی مرورگر برای سرور را کاهش دهد و باعث بهبود سرعت سایت شود.

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

CSS sprites به شما این امکان را می دهد که عکس ها را با هم یکی کنید و حجم تبادل اطلاعات و دادها بین مرورگر و سرور را کاهش دهد.

حل ارور Combine images using CSS sprites در GTmetrix

ترکیب عکس ها با CSS sprites

شما می توانید ابتدا تصاویری با فرمت PNG و یا GIF ها را بدون اینکه افت کیفیت داشته باشند فشرده و کاهش حجم دهید که برای این مورد می توانید از سایت های آنلاینی مثل compresspng استفاده کنید.

همچنین همانطور که گفتیم می توانید عکس های کوچک و کم حجم مثل آیکن ها ، آیتم های منو ها و … را با هم ترکیب کنید تا برای لود شدن آنها یک بار درخواست ارسال شود.

همچنین شما می توانید تصاویری که پس از یک بار بارگذاری کش می شوند را نیز ترکیب کنید و نیازی به لود شدن دوباره این عکس ها نباشد.

همچنین بخوانید :  حل ارور Avoid a character set in the meta tag در GTmetrix

همچنین توجه داشته باشید که برای ترکیب کردن عکس ها ، حتما فضا های اضافی و خالی که می تواند به طور مثال در حاشیه عکس وجود داشته باشد را حذف کنید که می توان برای این کار از فتوشاپ استفاده کرد.

استفاده از CSS sprites

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

سایت هایی مثل spritegen و spritecow به شما این امکان را می دهند تا بتوانید عکس های مورد نظر خود را با یک دیگر ترکیب کنید.

کافی است پس از آپلود عکس هایی که تمایل به ترکیب شدن آنها با هم دارید ، خروجی که این سایت ها در اختیار شما قرار می دهند را در فایل HTML سایت خود قرار و یا قسمت مورد نظر خود قرار دهید.

استفاده CSS sprites به شما کمک می کند تا تعداد ریکوئست های HTTP کاهش یابد که این مورد را پس از انجام می توانید در سایت GTmetrix و بررسی سایت خود مشاهده کنید.

امیدواریم آموزش حل ارور Combine images using CSS sprites در GTmetrix مورد توجه شما عزیزان قرار گرفته باشد.

هاست و دامنه

اشتراک گذاری پست