رفع خطای Combine images using CSS sprites برای بهبود سئو سایت

خطای Combine images using CSS sprites در جی تی متریکس یعنی اینکه باید با استفاده از تکنیک CSS sprites عکس های سایتتون رو ترکیب کنید.

ممکنه اسمش یکم عجیب به نظر برسه، اما ترکیب تصاویر با استفاده از CSS sprites یه تکنیک معروف هستش که وب مسترها برای افزایش سرعت سایتشون انجام میدن.

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

وقتی عکسای سایتتون رو ترکیب میکنید، درخواست های HTTP ارسالی به سرور برای بارگذاری عکس ها کاهش پیدا میکنه. هر چی درخواست کمتر باشه، بارِ کمتری روی سرور قرار میگیره، بنابراین سرعت پاسخگویش هم سریعتر میشه.

این کار به یکم کدنویسی نیاز داره، اما میتونید از ابزار CSS Sprite Generator استفاده کنید تا کدها رو براتون بنویسه.

تو این مقاله، در مورد اینکه CSS sprites چیه و چه زمانی باید ازش تو سایت وردپرسی خود استفاده کنید، توضیح میدم. سپس، نحوه ترکیب تصاویر با استفاده از CSS sprites در وردپرس رو کامل بهتون آموزش میدم تا خطای Combine images using CSS sprites در جی تی متریکس برطرف بشه. پس تا آخر این مقاله با من همراه باشید.

---

فهرست:

• Combine images using CSS sprites یعنی چه؟
• چه زمانی باید تصاویر را با استفاده از CSS Sprites در وردپرس ترکیب کنید؟
• CSS Sprites چگونه کار می کند؟
• چگونه تصاویر را با استفاده از CSS Sprites در وردپرس ترکیب کنیم؟
  • اول: تصاویر را با استفاده از CSS Sprite Generator ترکیب کنید
  • دوم: تصویر ترکیبی را در کتابخانه رسانه وردپرس خود آپلود کنید
  • سوم: کد CSS را به سایت وردپرس خود اضافه کنید
  • چهارم: از کد HTML برای نمایش تصاویر استفاده کنید
• جمع بندی

---

Combine images using CSS sprites یعنی چه؟

بدون CSS sprites، هر تصویری که تو سایتِ وردپرس دارید، یه فایل جداگانه هستش.

وقتی که شخصی از وب سایت شما بازدید میکنه، مرورگرِ اون شخص برای هر عکس، درخواست HTTP جداگانه به سرور سایتتون ارسال میکنه. پس اگه پنج تا عکس تو اون صفحه داشته باشید، پنج تا درخواست HTTP به سرور ارسال میشه؛ هر عکس = یک درخواست

هر چی تعداد درخواست ها بیشتر باشه سرعت پاسخگویی هم به تبع کاهش پیدا میکنه. در نتیجه، سایت دیرتر توی مرورگرِ کاربر نشون داده میشه.

وقتی از سایتتون توی GTMatrix تست میگیرید، معمولا این خطا رو بهتون نشون میده.

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

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

تو بخش فرانتِ سایت، کاربرها متوجه این تغییر نمیشن. اما تو بک، مرورگرهای بازدیدکنندگان فقط نیاز به دانلود یه فایل تصویری دارند که این سرعت بارگذاری سایت رو خیلی میبره بالا.

---

چه زمانی باید تصاویر را با استفاده از CSS Sprites در وردپرس ترکیب کنید؟

اگرچه CSS sprites میتونه زمان بارگذاری صفحه شما رو سریعتر کنه، اما نباید تمام تصاویر رو با استفاده از CSS sprites ترکیب کنید چون برای سئو سایت مشکلاتی به بار میاره.

با ترکیبِ تصاویر دیگه نمیتونید ALT یا همون متن جایگزین و عنوان برای هر عکس داشته باشید:

✖تو سئو سایت تاثیر منفی میذاره، به خصوص اگه میخواید تصاویرتون تو جستجوی گوگل نشون داده بشن (که با CSS sprites امکان پذیر نیست زیرا یک فایل تصویری واحد است).

✖به دسترسی سایت شما لطمه میزنه زیرا افرادی که از صفحه خوان استفاده می کنند نمی تونند بفهمند که هر تصویر قرار است چه چیزی رو نشان بده زیرا همه آنها از یک فایل میان.

به این دلایل، فقط باید تصاویر تزیینی سایت خودتون رو با استفاده از CSS sprites ترکیب بکنید.

این عکس ها رو میتونید با استفاده از CSS sprites ترکیب کنید:

• آیکون های تزئینی در صفحه اصلی
• لوگوها/تصاویر مشتریان یا افرادی که براتون کامنت گذاشتند.
• آیکون های اشتراک گذاری رسانه های اجتماعی

به طور معمول، تصاویری که در صفحه اصلی قرار دارند رو میتونید ترکیب کنید.

اما تصاویر بلاگ تون رو به هیچ وجه نباید ترکیب کنید.

مثلا، این تصاویر در صفحه اصلی سایت پارس اوستا میتونند کاندیدای خوبی برای CSS sprites باشند چونکه:

✔برای سئو سایت مهم نیستند
✔از دست دادن قابلیت افزودن متن جایگزین (ALT) تأثیر منفی روی دسترسی به صفحه نخواهد داشت

---

CSS Sprites چگونه کار می کند؟

ترکیب تصاویر با استفاده از sprites CSS دو مرحله داره:

1. از یه ابزار CSS sprite generator برای ترکیب چند تصویر تو یه فایل استفاده کنید.
2. از CSS و HTMLی که ابزار sprite generator ارائه میده استفاده کنید تا هر قسمت از فایل تصویری ترکیب شده را در مکان خودش نمایش دهید.

فرض کنید میخواید دو تصویر جداگانه رو تو صفحه اصلی خودتون نمایش بدید:

1. پرچم ایران
2. پرچم چین

اول از همه از CSS sprite generator استفاده میکنیم تا این دو تا تصویر رو تو یه تصویر واحد ادغام کنیم. تصویر ترکیبی میشه این شکلی:

بعدش، CSSی که ابزار ارائه میده رو به سایت خود اضافه می کنید و سپس هر تصویر را با افزودن یه <div> یا <span> با آن کلاس CSS در محتواتون نمایش میدید.

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

---

چگونه تصاویر را با استفاده از CSS Sprites در وردپرس ترکیب کنیم؟

حالا باید این پروسه رو به طور خاص برای ترکیب تصاویر با استفاده از CSS sprites در وردپرس اعمال کنیم.

بیایید با مثال پرچم ادامه دهیم و پرچم سوم هم بهش اضافه کنیم؛ پرچم روسیه.

بدون sprites CSS صفحه این شکلی هستش. هر تصویر یه فایل تصویر جداگانه است، بنابراین در کل سه تصویر و سه درخواست HTTP برای تصاویر وجود داره:

همونطوری که میبینید، سه بلوک تصویر داریم.

حال، بیایید آن تصاویر را با استفاده از sprites CSS ترکیب کنیم!

---

اول: تصاویر را با استفاده از CSS Sprite Generator ترکیب کنید

برای شروع، باید از یه ابزار CSS sprite Generator برای ترکیب فایل های تصویری استفاده کنید.

قبل از اینکه تصاویر خودتون رو تو ابزار آپلود کنید، مطمئن بشید که سایزشون مناسبه. بعداً انجام این کار بسیار دشوارتر میشه چون باید اون ها رو با CSS دستکاری کنید. اگر با CSS آشنایی ندارید تغییر سایز تصاویر براتون خیلی سخت میشه.

ابزارهای زیادی برای این کار وجود داره، اما من CSS Sprites Tool رو بهتون پیشنهاد میکنم.

تنها کاری که باید انجام بدید اینه که تصاویر آپلود کنید. سپس، روی دکمه Generate CSS Sprite کلیک کنید. تنظیمات دیگه‌اش رو همون پیش فرض بگذارید مشکلی نداره:

وقتی که عکسارو آپلود کردید و گزینه “Generate CSS Sprite” رو زدید، سه تا خروجی بهتون میده:

• کد CSS
• کد HTML
• فایل تصویر ترکیبی

فایل تصویر ترکیبی CSS sprite رو دانلود کنید و این صفحه را در دسترس نگه دارید چون در مراحل بعدی به کدها نیاز خواهید داشت.

---

دوم: تصویر ترکیبی را در کتابخانه رسانه وردپرس خود آپلود کنید

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

سوم: کد CSS را به سایت وردپرس خود اضافه کنید

برای افزودن کد CSS به سایت وردپرس خود، به قسمت ظاهر ← سفارشی سازی ← CSS اضافی بروید.

سپس، کد CSSی رو که از ابزار CSS sprite Generator در مرحله ۱ گرفتید اینجا بارگذاری کنید. همانطور که این کار رو انجام میدید، فیلد background:url رو با نشانی پرونده فایل تصویر در کتابخانه رسانه وردپرس جایگزین کنید.

چهارم: از کد HTML برای نمایش تصاویر استفاده کنید

در نهایت هم باید کد HTML رو برای هر تصویر در مکانی که می‌خواید اون تصویر خاص در محتوای شما نمایش داده شود، اضافه کنید.

اگر با ویرایشگر بلاک وردپرس کار می کنید، به جای استفاده از بلوک تصویر برای نمایش هر تصویر، از یه بلوک HTML سفارشی استفاده کنید. این شکلی:

یادتون باشه که می تونید این کد HTML رو از CSS Sprite Generator در مرحله ۱ دریافت کنید.

اکنون عکس ترکیبی شما در سایت قرار گرفته و سر جای خودش نمایش داده میشه.

---

جمع بندی

CSS sprites با ترکیب چندین فایل تصویری تو یه فایل باعث میشه سرعت سایتتون بره بالا.

نباید از CSS sprites برای همه تصاویر خود استفاده کنید زیرا برای سئو سایتتون خوب نیست.

اما برای تصاویر تزئینی، مثل تصاویر صفحه اصلی، CSS sprites یه تکنیک هوشمند بهینه سازی محسوب میشه.

برای ترکیب تصاویر با استفاده از CSS sprites در وردپرس، می تونید:

• از ابزار sprite CSS برای ترکیب چندین تصویر تو یه تصویر استفاده کنید.
• فایل تصویر ترکیبی رو تو سایت خودتون آپلود کنید.
• کد CSS رو به سایت وردپرس خود اضافه کنید.
• HTML ارائه شده را در جایی که می خواهید هر تصویر نمایش داده شود اضافه کنید.

در این مقاله در مورد رفع خطای Combine images using CSS sprites برای بهبود سئو سایت صحبت کردیم. ممنون که تا انتهای مقاله همراه من بودید در صورتی که حس میکنید مطلبی هست که گفته نشده حتما در قسمت نظرات با ما به اشتراک بگذارید. در صورت داشتن هرگونه سوال با تیم پشتیبانی پارس اوستا در ارتباط باشید.