If we try to improve the site performance using a fantastic WordPress free plug-in. it is more important to understand that, how it works? These plugins create more problems like extra CSS, js, etc, but less performance.

If we test and see in the Page Speed options (https://gtmetrix.com). We can find suggestion “Combine images using CSS sprites”. In the suboption we can see the following related to the flags:

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/de.png

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/en.png

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/es.png

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/fr.png

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/it.png

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/pt.png

https://www.techsaa.com/wp-includes/images/rss.png
You may also read:-
How to speed up your WordPress Website Using .htaccess file

So what can we do to recover this problem? I searched many times on the web related to this problem but all the time, but it’s not very easy to find the solution to this problem. So here I am going to share some very easy steps to solve this problem.

Here are some steps by following you can easily solve this problem.

  1. Identify the images (which you need to combine). For example in this URL which is shown in gtmetrix.com results https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/pt.png. The file name is pt.png (as shown above with red color)
  2. Download the image files in a separate folder.
  3. Open https://spritegen.website-performance.org/
  4. Click on the clear button to clear the pre-selected files
  5. Click on Open, select all your downloaded files and click on open
  6. Click on the download button.
  7. Download as txt file.
  8. Open the download file and copy all the text.
  9. Now login to your WordPress website. Click on appearance – click on Additional CSS and past that text (sprites code) and click on Publish.

Step One

Sprites
Step 2
Example CSS Script 
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}

.sprite-0_Screen-Shot-2019-03-19-at-181953 {
width: 100px;
height: 70px;
background-position: -5px -5px;
}

.sprite-Apple-iPad {
width: 100px;
height: 70px;
background-position: -5px -85px;
}

.sprite-Huawei_s-sub-brand-Honor-is-preparing-to-Launch-with-5G-network_2 {
width: 100px;
height: 70px;
background-position: -115px -5px;
}

.sprite-Samsung-Galaxy-A90 {
width: 100px;
height: 70px;
background-position: -115px -85px;
}

.sprite-xbox-f {
width: 100px;
height: 70px;
background-position: -5px -165px;
}
Copy CSS script to Theme custom CSS field
step 3

Congratulations, your problem is solved.

Thanks for reading