Streaming live at 10am (PST)

CSS Image Sprites?


#1

I am trying to create an image sprite for an icon heavy section of our homepage, since other ways to improve our abysmal page speed (serving scaled images, render blocking javascript,etc.) The most recent “walkthough” is a post from 2014 - and although I followed the directions on that post, I am still not able / do not understand how to get them to work and it seems tutorials on the web and instructions provided by online sprite makers are not applicable to webflow. I’ve tried pasting the sprite code in the custom code section of the page and using the background:url as a custom div attribute and still nothing is showing up.
Any help would be greatly appreciated.
Site Link:
https://preview.webflow.com/preview/pivotal-it?preview=06cc96718c14c579fb7089680bf9ba91
The icons/section I am speaking of is the “industries” section of the homepage, but I am working on the sprites on a “blank” page.

Beth


#2

*Bump, Bump, Bump, Bump, - Anyone?


#3

Hi @Rowananye, I took a look at the site, and currently it has a pagespeed score of 94.

This rating could probably be improved a slight bit, if the scripts it complained about could be removed from the header, but at the moment this is not yet possible in Webflow. The ability to do that is on the Wishlist.

I took a look in Pingdom for some insights:

I took a look at the other factors on the site for page performance, and the biggest item is the video, accounting for 62% of the download.

The images were only 17.9% with a total load of 146kb, which is pretty low already, not sure if you would need to optimize too much further on those, if you had already added those on the home page.

Also any custom code you use on the site that makes calls to other third party services can affect page performance, and while there is some script running on the page, about 15.6%, it is not a super the page too adversely.

I would experiment by removing the video, that alone should boost the over all page load time which loaded in 995ms, so not bad for a site that is loading all the google analytics code as well.

If you still plan to try to use css image sprites, I would probably recommend using some SVG files, which are pretty low in size.

I hope this helps.


#4

Thanks @cyberdave
If I decided to go with SVG’s - speed-wise is it better to use them as an image or embed them?


#5

There shouldn’t be any difference (or negligible).


#6

I know this is an old post but maybe it will help someone who searches like I did.

If you’re using icons I recommend creating a custom font using icommon.io. Throw everything in it (social icons, fun icons, etc.) and even upload your own custom icons as svg files and they work like a charm. They’re crisp, tiny and can be assigned colors and sizes as fonts. Better than sprites and reduces calls to server.