This was originally posted on my personal blog at https://omarsinan.com/blog/increasing-my-pagespeed-score-from-92-to-100-using-css-only
In this b...
For further actions, you may consider blocking this person and/or reporting abuse
Your icons could be svg, probably A LOT smaller than whatever sprite you got there. ;)
And it would be much crisper, than this blurry png/webp ;)
PS. For some reason on my firefox its not working at all on your site, but i have aggressive adblock so that might be my fault.
This. SVGs are pretty much the standard these days for icons. Simple Icons has tons of social media icons.
Hmmm very interesting thanks for the feedback I’ll look into it! 🙌
If you have your icons as plain divs with background images like this, you lose the semantic html that allows screen readers to pick them up, and for users to tab and click them via keyboard 🤔
Oh, i didn’t know this! Would using the img tag be better?
Yep, the problem is
divdoesn't have any semantic value, and isn't focusable by keyboard by default either.Usually for this use case you would have a link with an
imginside with meaningful alt text.There's a nice article on this by W3: w3.org/WAI/tutorials/images/functi...
Ah that’s so interesting, I’ll check it out. Thank you for sharing! 🙌
Notably, sprites are becoming less useful with H2 and with Google increasingly checking for unused image space. If you're not actually using every sprite element on first load, this method may instead cause a penalty rather than a gain!
So for other people, I'll also echo using SVG here, as well as very closely checking what is penalizing your pagespeed score!
I appreciate this article, as these are definitely performance best practices in the past, but with HTTP/2 capability on the server and in the browser this is now an anti-pattern.
The best solution (easier to create & maintain, faster to send to browsers, and better at caching) is to utilize HTTP/2. Whatever server you're using should support it. If it doesn't, or if you can't use it, consider serving your domain with Cloudflare, which has supported HTTP/2 for a few years.
Totally! With HTTP/2 it can be done the way it was intended without the sprite hack and it means altering one image won't ruin the cache of others let alone techniques like lazy loading of images. Never forget that tools like PageSpeed Insights are there to give you insights not for you to serve them.
Is it still worth it, though? 🤔
That's the question I've been asking myself now, these days. For it's time, this was a pretty revolutionary idea. The technique has been around for many years now, really catching on by the late 2000's. These days, however, with HTTP/2 and HTTP/3, the overall benefit of bundling images together into one (to reduce HTTP overhead due to TCP/IP latency + protocol overhead) it's becoming theoretically less important. This is assuming your server is using those new protocols and the connecting clients support it as well (most modern browsers support HTTP/2 right out of the box). I say "theoretically" because we need benchmarking to be more certain.
I ended up stepping back and asking myself this question thanks to the fact that a 5yr-6yr old
gruntworkflow we already had setup was becoming cumbersome to manage, beginning to fail due to legacy module/node reasons (especially sincephantomjsis is now a... ghost). I personally still see a huge value in "spriting" single color SVG's into a font (due to the flexibility of being able to easily colorize) but I've begun to wonder if it's still worthwhile for PNG/GIF (bitmaps) and colorized SVG's (vectors), considering the benefits of the alternative, i.e.: Lower maintenance (reduced legacy support), the ability to inline SVG into an alreadygzip'd orbrotli'd page and better caching (by keeping them separate), as noted elsewhere.Aside from the obvious comments about using SVG instead of background image hacks, why do you need 1 pixel gaps and then to use sub-pixel sizing for the sizing? Sub-pixel sizing will create blurred pixelmaps which really isn't so useful
Nice article.
I would preffer to use font icons instead of image sprite.
You can use service like ICOMOON to convert your svg's and create your own font icons to get better performance.
Yeah 2 popular opinions I’m seeing are font icons and SVGs. I found it very interesting, will certainly look into both to see how the performance improves. Thanks for sharing 🙌
Good article.
As a Hunt: If these are mono-color, you can try to make a font from them. Or if multicolor you can use svg, it decrease size a lot in compare to png.
Awesome I will check also I loved you landing page
Thank you! Means a lot 🙌
The comments mentioning svg make me think of base64. Has anyone tested if background-image was a sprite in base64? It would mean one request for CSS AND for icons which is pretty neat.
Since base64 image urls are just that - urls - it should work. That said, you wouldn't want a sprite in there (unless used as a custom property). You'd just want individual images. That said, reusability, readability, and effort to change the icons later can make this more tedious than it's worth for pagespeed.