DEV Community

Cover image for 7 CSS optimization tips to speed up page loading + List of css tools

7 CSS optimization tips to speed up page loading + List of css tools

manish srivastava on June 02, 2020

On the modern web, site page load time is one of the most important metrics. Even milliseconds can have a huge impact on your bottom line and slow ...
Collapse
 
jamesthomson profile image
James Thomson • Edited

Regarding "5. Use gradients and SVGs instead of images". In a sense this can slow down performance because it requires more effort for the browser to render these, especially gradients. I'm not saying don't use these, because I certainly use them and am a big fan of SVGs, but technically (at least for the rendering process) they are more browser intensive than images. Of course there is the tradeoff that images need to be downloaded and are therefore perceptively take longer to load.

Collapse
 
manishfoodtechs profile image
manish srivastava

+1

Collapse
 
seanolad profile image
Sean

I'll reference this to some of my beginner friends

Collapse
 
manishfoodtechs profile image
manish srivastava
Collapse
 
seanolad profile image
Sean

Alrighty, thanks.

Collapse
 
damsalem profile image
Dani Amsalem

Thanks for the article manish. Can you provide more information on #4 Use the tag instead of the rule @import? I'm struggling to understand it.

Unfortunately, I think the typos and random line breaks magnified my misunderstanding.

Collapse
 
bayuangora profile image
Bayu Angora • Edited

I don't use FontAwesome anymore to avoid bloated requests.

Collapse
 
manishfoodtechs profile image
manish srivastava

+1

Collapse
 
growthfyi profile image
Ankit

The first image deserve as credit as the image is owned by KeyCDN and not open-source too.

Collapse
 
leob profile image
leob

Replacing "float" with flexbox for layout is a winner, probably one of the first things you should do.

Collapse
 
manishfoodtechs profile image
manish srivastava

+1 leob

Collapse
 
seanolad profile image
Sean

nice