آموزش های Gtmetrixعمومی

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

حل ارور Combine images using CSS sprites در GTmetrix
حل ارور 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 از دسته خطا های مربوط به عکس ها می باشد و اولویت بالایی نیز دارد و میزان دشواری مشخص شده برای حل این خطا نیز متوسط است و میانگین درصد آن نیز 89% می باشد.

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

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

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

CSS sprite چیست

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

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

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

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

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

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

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

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

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

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

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

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

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

استفاده از CSS sprites

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

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

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

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

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



رفع خطای Combine images using CSS
رفع خطای Combine images using CSS sprites در جی تی متریکس


Combine images using CSS sprites
رفع خطای Combine images using CSS sprites - روش CSS sprite یعنی چه


خطا Combine images using CSS sprites
رفع خطا Combine images using CSS sprites در Gtmetrix - نت آرام


Combine images using CSS sprites
رفع خطای Combine images using CSS sprites در Gtmetrix - سرور ایران


آموزش رفع خطاهای سایت در GTmetrix - جی تی متریکس - وبلاگ
02.10.2018 خطای Combine images using CSS sprites در سایت GTmetrix خطای Optimize images در سایت GTmetrix یکی از معمول ترین مشکلات سایت ها بهینه نبودن حجم تصاویر است. اما Gtmetrix برای حل این مشکل کار را بسیار ساده کرده است. شما با کلیک بر روی Optimize image لیستی از عکس


Combine images using CSS sprites
آموزش رفع خطای Combine images using CSS sprites در سایت gtmetrix


رفع خطای Combine images using CSS sprites افزایش سرعت
در جلسه قبل درباره ارور Avoid Landing Page Redirects صحبت کردیم در این جلسه قصد داریم درباره مشکل Combine images using CSSsprites صحبت کنیم و ببینیم چطور میتوانیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا css sprites


خطا Combine images using CSS sprites
رفع خطا Combine images using CSS sprites در Gtmetrix - مرکز توزیع


رفع خطای Combine Images Using CSS Sprites در جی تی متریکس
حل خطای Combine Images Using CSS Sprites. برای حل این خطا باید تصاویر استفاده شده در سی اس اس قالب سایتمان را از یک منبع لود کنیم. یعنی همه تصاویر را در یک فایل کنار هم قرار دهیم. مثلا اگر دو آیکون به این شکل


رفع خطای Combine images using CSS sprites - سئوراز
18.11.2018 در این مقاله قصد داریم درباره مشکل Combine images using CSS sprites صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا css sprites برای بهینه سازی عکسهای ما لازم و ضروری است چطور css sprite کنیم.

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

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

8 − 4 =

دکمه بازگشت به بالا