رفع خطای Combine Images Using CSS Sprites

هشدار Combine Images Using CSS Sprites یعنی چند تصویر کوچک سایتتون با درخواست‌های جدا از سرور گرفته می‌شن. با قرار دادن این تصاویر داخل یک فایل، می‌تونید تعداد درخواست‌ها رو کمتر کنید. البته این روش بیشتر برای سایت‌های قدیمی‌تر یا سرورهای HTTP/1.1 به کار میاد و روی HTTP/2 همیشه تفاوت محسوسی به وجود نمیاره.

توی این آموزش اول می‌بینید این هشدار کجای گزارش جدید جی‌تی‌متریکس قرار گرفته. بعد بدون نصب افزونه یک CSS Sprite می‌سازید و با CSS فقط قسمت دلخواه تصویر رو نمایش می‌دید. در پایان هم نتیجه رو دوباره آزمایش می‌کنیم و سراغ SVG Sprite و انتخاب بهتر برای آیکون‌های امروزی می‌ریم.

گزارش جدید جی‌تی‌متریکس چطور کار می‌کنه

جی‌تی‌متریکس از سال ۲۰۲۰ گزارش اصلی خودش رو بر پایه Lighthouse ارائه می‌کنه. توی گزارش فعلی، در کنار رتبه A تا F، بخش‌های Performance، Structure و Web Vitals رو هم می‌بینید. Performance سرعتی رو بررسی می‌کنه که کاربر موقع باز شدن صفحه حس می‌کنه. Structure هم به شیوه ساخت و بهینه بودن صفحه امتیاز می‌ده.

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

Combine Images Using CSS Sprites

GTmetrix

دلیل نمایش خطای Combine Images Using CSS Sprites

مرورگر برای گرفتن هر فایل تصویری، یک درخواست به سرور می‌فرسته. مثلاً اگه قالب سایتتون ۳۰ آیکون کوچک رو از ۳۰ فایل جدا بگیره، تعداد درخواست‌ها بیشتر می‌شه. CSS Sprite یعنی این آیکون‌ها رو کنار هم داخل یک تصویر بزرگ‌تر بذارید و با CSS فقط بخش لازم رو نشون بدید.

دیدن این هشدار به‌تنهایی به این معنی نیست که سایتتون کند یا خراب شده. تأثیر تعداد درخواست‌ها به نوع اتصال، اندازه فایل‌ها، تنظیمات کش، سرور و فاصله کاربر تا سرور بستگی داره. پس نمی‌شه برای همه سایت‌ها یک عدد ثابت، مثل سه ثانیه افزایش سرعت، در نظر گرفت.

آیا هنوز به CSS Sprite نیاز دارید

اگه سایتتون از HTTP/1.1 استفاده می‌کنه و تعداد زیادی تصویر کوچک CSS داره، ساخت Sprite می‌تونه به کارتون بیاد. HTTP/1.1 برای مدیریت تعداد زیادی درخواست هم‌زمان محدودیت بیشتری داره؛ پس کمتر کردن درخواست‌ها ممکنه زمان بارگیری رو بهتر کنه.

در HTTP/2 چند درخواست می‌تونن هم‌زمان از یک اتصال رد بشن. به همین خاطر، ترکیب کردن همه آیکون‌ها همیشه نتیجه بهتری نمی‌ده. حتی ممکنه فقط یک آیکون رو تغییر بدید، ولی مرورگر مجبور بشه کل فایل بزرگ Sprite رو دوباره بگیره.

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

آیا وردپرس خودش CSS Sprite می‌سازه

وردپرس تصاویر قالب یا افزونه‌ها رو خودکار به CSS Sprite تبدیل نمی‌کنه. برای این کار باید فایل تصویر و کد CSS قالب رو تغییر بدید. توی این آموزش هم قرار نیست هیچ افزونه‌ای نصب کنید.

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

حل خطای Combine Images Using CSS Sprites

فرض کنید دو آیکون دارید که هرکدوم از یک فایل جدا بارگیری می‌شن:

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

برای این نمونه فرض می‌کنیم هر آیکون ۳۲ در ۳۲ پیکسله و آیکون دوم از پیکسل ۳۲ در سمت راست فایل شروع می‌شه. فایل نهایی رو با نام social.webp ذخیره کنید و اون رو داخل پوشه تصاویر چایلد تم بذارید.

نمایش آیکون اول با CSS

اول یک کلاس مشترک برای آیکون‌ها بسازید. عرض و ارتفاع این کلاس باید با اندازه هر آیکون یکی باشه:

.social-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("images/social.webp");
    background-repeat: no-repeat;
}

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

.social-icon--first {
    background-position: 0 0;
}

نمایش آیکون دوم با مختصات منفی

ویژگی background-position مشخص می‌کنه کدوم قسمت تصویر داخل کادر دیده بشه. برای نمایش آیکون دوم باید تصویر پس‌زمینه رو ۳۲ پیکسل به چپ ببرید. پس مقدار محور افقی منفی می‌شه:

.social-icon--second {
    background-position: -32px 0;
}

اگه آیکون موردنظرتون ۵۰ پیکسل بعد از لبه چپ Sprite شروع می‌شه، مقدار افقی معمولاً -50px هست، نه 50px. عدد مثبت تصویر رو به جهت مخالف می‌بره و ممکنه به‌جای آیکون درست، یک بخش خالی یا آیکون دیگه‌ای دیده بشه.

استفاده از کلاس‌ها در HTML

بعد از اضافه کردن CSS، کلاس پایه و کلاس مربوط به جای هر آیکون رو کنار هم قرار بدید:

<span class="social-icon social-icon--first" aria-hidden="true"></span>
<span class="social-icon social-icon--second" aria-hidden="true"></span>

ویژگی aria-hidden="true" به ابزارهای صفحه‌خوان می‌گه این تصویر فقط جنبه تزئینی داره. اگه آیکون نقش دکمه یا لینک رو بازی می‌کنه، باید یک متن قابل‌فهم یا برچسب مناسب هم براش بذارید تا کاربران صفحه‌خوان متوجه کاربردش بشن.

مسیر فایل داخل url() نسبت به محل فایل CSS حساب می‌شه. اگه تصویر نمایش داده نشد، اول مسیر فایل و حروف بزرگ و کوچک اسم اون رو بررسی کنید. بعد هم بخش Console مرورگر رو ببینید تا اگه خطایی ثبت شده، پیداش کنید.

بعد از تغییرات چطور نتیجه رو آزمایش کنید

1. کش افزونه، سرور و شبکه توزیع محتوا رو خالی کنید.
2. صفحه رو در پنجره ناشناس مرورگر باز کنید و مطمئن بشید همه آیکون‌ها درست دیده می‌شن.
3. همون صفحه رو با تنظیمات آزمایش قبلی در جی‌تی‌متریکس دوباره آزمایش کنید.
4. تعداد درخواست‌ها، حجم داده منتقل‌شده، Performance، Structure و Web Vitals رو با نتیجه قبلی مقایسه کنید.
5. صفحه رو در موبایل و دسکتاپ ببینید تا مطمئن بشید هیچ آیکونی بریده یا جابه‌جا نشده.

گزارش جدید ممکنه ظاهری شبیه نمونه زیر داشته باشه، ولی یادتون نره که عددها برای هر سایت فرق دارن:

چه زمانی SVG انتخاب بهتریه

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

SVG درون‌خطی تغییر رنگ و اندازه آیکون با CSS رو راحت‌تر می‌کنه. SVG Sprite هم چند نماد رو داخل یک فایل نگه می‌داره. بااین‌حال، بهتر نیست همه تصاویر سایت رو خودکار به SVG تبدیل کنید. عکس‌ها و تصاویر واقعی بهتره با فرمت‌هایی مثل WebP یا AVIF باقی بمونن.

وردپرس به‌صورت پیش‌فرض برای آیکون‌های قالبتون SVG Sprite خودکار نمی‌سازه. آپلود SVG هم به بررسی امنیتی نیاز داره، چون این فایل می‌تونه کد داخل خودش داشته باشه. پس فقط سراغ فایل‌های مطمئن برید و تا وقتی شناخت کافی ندارید، آپلود عمومی SVG رو فعال نکنید.

جمع‌بندی

برای رفع خطای Combine Images Using CSS Sprites لازم نیست افزونه‌ای نصب کنید. اگه سایتتون تعداد زیادی تصویر کوچک CSS داره و روی HTTP/1.1 کار می‌کنه، ساخت Sprite می‌تونه تعداد درخواست‌ها رو کمتر کنه. ولی روی HTTP/2 بهتره اول نتیجه واقعی آزمایش رو ببینید و فقط برای پاک کردن یک هشدار، ساختار سالم سایتتون رو پیچیده نکنید.

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

سؤالات پرتکرار

تیم تولید محتوا

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