How to Improve CSS Performance

There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why:

When there is CSS available for a page, whether it’s inline or an external stylesheet, the browser delays rendering


The post How to Improve CSS Performance appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why:

When there is CSS available for a page, whether it’s inline or an external stylesheet, the browser delays rendering until the CSS is parsed. This is because pages without CSS are often unusable.

The browser has to wait until the CSS is both downloaded and parsed to show us that first rendering of the page, otherwise browsing the web would be a terribly visually jerky to browse. We’d probably write JavaScript to delay page rendering on purpose if that’s how the native web worked.

So how do you improve it? The classics like caching, minification, and compression help. But also, shipping less of it, and only loading the bit you need and the rest after the first render.

It’s entirely about how and how much CSS you load, and has very little to do with the contents of the the CSS.

Direct Link to ArticlePermalink


The post How to Improve CSS Performance appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-04-19T21:33:57+00:00) How to Improve CSS Performance. Retrieved from https://www.scien.cx/2021/04/19/how-to-improve-css-performance/

MLA
" » How to Improve CSS Performance." Chris Coyier | Sciencx - Monday April 19, 2021, https://www.scien.cx/2021/04/19/how-to-improve-css-performance/
HARVARD
Chris Coyier | Sciencx Monday April 19, 2021 » How to Improve CSS Performance., viewed ,<https://www.scien.cx/2021/04/19/how-to-improve-css-performance/>
VANCOUVER
Chris Coyier | Sciencx - » How to Improve CSS Performance. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/19/how-to-improve-css-performance/
CHICAGO
" » How to Improve CSS Performance." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/04/19/how-to-improve-css-performance/
IEEE
" » How to Improve CSS Performance." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/04/19/how-to-improve-css-performance/. [Accessed: ]
rf:citation
» How to Improve CSS Performance | Chris Coyier | Sciencx | https://www.scien.cx/2021/04/19/how-to-improve-css-performance/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.