[Brad GParticipant]

The theme is looking awesome, but I want to knock it out of the park as far as speed is concerned, so I’m looking to make a CSS Sprite. Now, so far, I’ve used http://spritepad.wearekiss.com/ to make a sprite. It’s a really cool looking site! So, I’ve added everything from /wp-content/themes/x/framework/img/global, made my sprite (I think), and then downloaded the css and the image. Now… what?

And, once I’m done, how can I share my tasty and beautifully coded sprite with the rest of the group?
Thanks! -Brad

[KoryKeymaster]

Hey Brad,

Thanks for writing in and for your kind words! Regarding the images int he global folder, only a couple of them are actually used as background images, and therefore would be able to be used in a sprite. All of the others are placed into the page using standard <img> tags, so there is no way to affect the loading of these by implementing them into a sprite. Since the only two images getting used are for the buttons if you’re using a circle element, we have left them separate for customizability reasons in case users would like to easily tweak the appearance of the circle themselves. Also, the CSS for these two images is added dynamically with the Customizer styles for a couple of reasons, so it’s not something you can alter directly.

All in all, this particular endeavor would help a lot more if we were using tons and tons of images throughout the theme and we needed to compress them into one request for quicker loading. However, since we already use CSS for 99.9% of all elements, along with additional elements like icon fonts, the simple fact is that we do not have many background images to load at all (only those two to be specific).

For the amount of time involved to set all of this up, it wouldn’t really be worth the time it would take to update things properly, and you truly wouldn’t see any noticeable gains from it. Bigger performance gains can be had by implementing expires headers on your content served up from your host, utilizing a CDN if possible, compressing media (i.e. images and video) as much as possible, gzipping server contents so they are compressed as they are sent, tweaking your .htaccess file as needed, and ensuring that your hosting environment is performing in tip top shape.

Again, thank you very much for writing in and for your desire to further enhance things with X! Hopefully this explanation makes sense, and don’t hesitate to let us know if you need any further clarification.

Thanks!

[Author]

Posts