2

After Testing my wordpress website speed using GTmetrix, I got the following recommendations over YSlow: enter image description here

*Combine images using CSS sprites The following images served from wamakity.com should be combined into as few images as possible using CSS sprites. enter image description here

*Add Expires headers There are 9 static components without a far-future expiration date. enter image description here

*Make fewer HTTP requests This page has 16 external Javascript scripts. Try combining them into one.

This page has 14 external stylesheets. Try combining them into one.

This page has 15 external background images. Try combining them with CSS sprites.

Can anybody help? I'm new to wordpress and I can't seem to find any other way to solve this problem except from here. Thanks!

Drickuss Merguez
  • 49
  • 1
  • 1
  • 8
  • That recommendation almost certainly doesn't apply to your situation. CSS sprites are a (dated) technique for combining icon images into a single file. If you're interested Google "css sprites", you'll find tons of resources such as this article: https://css-tricks.com/css-sprites/ – Jonathan Nicol Nov 20 '17 at 09:14

1 Answers1

1

My favourite sprites generator is https://spritegen.website-performance.org/ All you need is to drag and drop small images to the window, download spritesheet.png, stylesheet.css and then change background-image and background-position properties of this images in your style.css

pauline.korkina
  • 11
  • 1
  • Thank your for your quick response! I have tried it but the main title of the CSS output are not inside my "style.css" as many tutorials are saying. I see something like the following .sprite { background-image: url(spritesheet.png); background-repeat: no-repeat; display: block; } .sprite-12-2 { width: 20px; height: 20px; background-position: -5px -5px; } .sprite-2468fa3XXXX84 { width: 51px; height: 51px; background-position: -35px -5px; } .... – Drickuss Merguez Nov 20 '17 at 12:36