ديدگاه

رفع خطا Combine images using CSS sprites در Gtmetrix

در اين مقاله قصد داريم تا در مورد رفع خطا Combine images using CSS sprites به شما كاربران عزيز آموزش بدهيم ، اگر شما كاربر عزيز در حال افزايش سرعت وب سايت خود هستيد و با اين خطا مواجه شده ايد ، با مطالعه اين مقاله مي توانيد با كمي تلاش اين خطا را نيز رفع كنيد ، تاثير انجام اين مقاله بر سرعت وب شما بسيار زياد است و باعث مي شود تعداد بسيار زيادي از درخواست هاي http شما كم شود ، ما قبلا در مورد كاهش تعداد درخواست HTTP در نت آرام مقاله ارسال كرديم ، لطفا ادامه اين مقاله را مطالعه نماييد.

منظور از CSS sprites چيست ؟

معمولا در هر صفحه وب از تعدادي عكس استفاده شده است ، براي دريافت هر عكس مرورگر مجبور است يك درخواست به سمت سرور ارسال كند ، رد و بدل اين درخواست ها توسط مرورگر و سرور نياز به زمان زيادي دارد ، در سال هاي گذشته براي رفع اين مشكل از روش CSS sprites استفاده شده است ، در اين روش با تركيب تمام تصاوير در يك عكس و درج مختصات آن در قسمت هاي مختلف با X و Y قسمت مورد نياز خود را در مكان خود قرار مي دهند ، در اين روش تنها يك درخواست براي يك تصوير به سرور ارسال مي شود و با انجام اين روش سرعت وب سايت بسيار بيشتر مي شود. به تصوير زير دقت كنيد :

خطا Combine images using CSS sprites در Gtmetrix

ما در تصوير بالا حدود 50 تصوير را در يك عكس تركيب كرديم ، با در نظر گرفتن تعداد تصاوير تركيب شده ما بيشتر از 49 درخواست از وب سايت خود كم كرده ايم ، اين تعداد تاثير بسيار زيادي در سرعت سايت دارد.

چگونگي رفع خطا Combine images using CSS sprites در وردپرس :

متاسفانه در وردپرس هنوز افزونه خاصي براي sprite كردن css وجود ندارد ، در حال حاضر مطمئن ترين روش اعمال تغييرات در كد نويسي هاي وب سايت است ، بنابراين اگر آشنايي با html و css نداريد ، شايد بهتر باشد از طراح وب سايت خود درخواست كنيد تا اين تغييرات را براي شما انجام بدهد.

اگر تغييرات در css و درج مختصات براي شما دشوار است ، در ادامه بنده چندين ابزار آنلاين به شما معرفي مي كنم تا بتوانيد آنلاين عكس ها را با هم تركيب و خودكار كد هاي css آن را دريافت كنيد.

    http://spritegen.website-performance.org/
    http://css.spritegen.com/
    https://instantsprite.com/
    https://www.giftofspeed.com/sprite-generator/

همچنين اگر شما تمايل داريد CSS sprites را به صورت responsive ايجاد كنيد مي توانيد از لينك زير استفاده نماييد :

http://responsive-css.spritegen.com/

اميدواريم اين مقاله براي شما كاربر عزيز مفيد بوده باشد ، در صورتي كه سوال يا مشكلي در اين مورد داريد آن را در قسمت ديدگاه هاي اين سايت ارسال نماييد.
منابع: نت آرام netaram .com و مركز طراحي سايت طلا گستر talagostar. com