تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده


آخرین ارسال های تالار مشاهده انجمن
Google Scholar 0 پاسخ 90 بازدید افزونه پرداخت با تتر 1 پاسخ 358 بازدید درج اگهی تبلیغاتی چگونه است؟ 0 پاسخ 2 بازدید Open Journal Systems (OJS) 0 پاسخ 1081 بازدید ارز ووکامرس 2 پاسخ 725 بازدید افزونه گرافیست 1 پاسخ 587 بازدید آموزش تغییر استایل بخش مدیریت سفارشات 1 پاسخ 1189 بازدید خرابی قالب سایت اسکریپت ها 2 پاسخ 1086 بازدید لینک قالب کلینیک بهداشتی پزشکی Medizco برای وردپرس 1 پاسخ 646 بازدید چگونه این نوشته در آخرین ارسالات را ویرایش کنم؟ 1 پاسخ 627 بازدید
تبلیغات
تبلیغات تبلیغات

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

مقالات,آموزش,ترفند , سئو , وردپرس

همه ما با جی تی متریکس آشنا هستیم. با استفاده از این وب‌سایت می‌توانید سایت خود را از نظر سرعت و بهینه بودن برنامه‌نویسی تست کنید و نتیجه تست را بصورت حروف لاتین از A تا F دریافت کنید. البته A بهترین رتبه و F بدترین رتبه‌ای هست که می‌توانید دریافت کنید.

 

اما یکی از خطاهای معروف جی تی متریکس که همیشه به چشم می‌خورد، این خطاست:

  • Combine Images Using CSS Sprites
  • GTMetrix

و اما چطور باید خطای Combine Images Using CSS Sprites را حل کنیم؟! اصلا دلیل به‌وجود آمدن این خطا چیست؟

 

دلیل ارور Combine Images Using CSS Sprites

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

 

حالا فرض کنید در یک قالب از ۳۰ آیکون استفاده کرده‌اید و باید ۳۰ درخواست برای دریافت این ۳۰ آیکون کوچک به سمت سرور ارسال شود. یک فاجعه‌ی بزرگ‌تر که باید حتما حلش کنیم.

در نتیجه این خطا می‌گوید تصاویری که در قالب سایتتان از طریق CSS لود می‌شود را با یک تصویر لود کنید. مگر می‌شود؟ بله. بریم که حلش کنیم!

 

حل خطای Combine Images Using CSS Sprites

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

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

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

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

حالا دیگه نیازی نیست که ۲ درخواست به سمت سرور ارسال شود تا دو فایل داشته باشیم. برای دریافت هر دو آیکون می‌توانیم یک درخواست به سمت سرور ارسال کنیم. هرچه Requestهایی که به سمت سرور ارسال می‌کنیم کمتر باشه در نتیجه سرعت بیشتری هم خواهیم داشت.

 

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

 

اما چطور آیکون‌ها را بصورت جداگانه استفاده کنیم؟

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

 

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

 

جدا کردن بخشی از تصویر در CSS

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

width:32px;
height:32px;

حالا شروع می‌کنیم Background دادن به آن بخش. بعد از طول و عرض پس زمینه را مشخص می‌کنیم به این شکل:

background: url(social.gif) 0 2px;

دو مقدار 0 و 2 مشخص می‌کنند که در طول و ارتفاع تصویر Combine شده. (یعنی تصویری که تمام آیکون‌ها را در آن قرار دادیم.) چه مقدار به سمت x و y حرکت کنیم.

مثلا اگر آیکون شما از ۵۰ پیکسل سمت چپ تصویر Combine شده شروع به نمایش داده شدن می‌کند، پس باید مقدار 0 را به 50 تغییر دهید و همین کار را برای y هم انجام دهید.

این‌کار باید برای تمام بخش‌هایی که آيکون‌ها در آن استفاده شده اند، استفاده کنید. سپس کش سایت را خالی کنید و سایت را با استفاده از جی تی متریکس دوباره تست کنید.

نتیجه باید به این شکل باشد:

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

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

موفق باشید.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , سئو , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=44589
کلمات کلیدی پست :
مطالب مرتبط
10,120بهینه سازی افزونه فرم تماس 7 در وردپرس تاریخ : 2017/09/3
8,298فشرده سازی و افزایش سرعت وردپرس با افزونه Check and Enable GZIP compression تاریخ : 2018/03/6
23,858با افزونه Autoptimize در وردپرس تخته گاز برانید تاریخ : 2016/05/23
9,142افزایش سرعت سایت وردپرسی با افزونه Speed Up تاریخ : 2016/10/15
4,832خالی کردن خودکار زباله دان وردپرس بدون نیاز به نصب افزونه تاریخ : 2019/01/28
8,054بارگذاری تنبل تصاویر در وردپرس با افزونه Lazy Load تاریخ : 2018/02/24
14,482کاهش حجم تصاویر وردپرس با افزونه EWWW Image Optimizer تاریخ : 2017/08/26
12,407عیب یابی وردپرس با افزونه P3 تاریخ : 2018/01/21
5,128رفع خطای Leverage Browser Caching و افزایش سرعت تاریخ : 2019/03/30
5,528۴ افزونه Cache وردپرس برای افزایش سرعت در سال ۱۳۹۷ تاریخ : 2018/12/7
8,427۱۰+ کد wp-config برای افزایش سرعت وردپرس تاریخ : 2013/10/26
48,209افزونه وردپرس مرغ مگس خوار Hummingbird Pro تاریخ : 2022/11/29
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات