Read on Twitter
CSS Performance and Website Speed:
If used improperly CSS can become a stumbling block for your website's performance from the outset.
Here are some tips for improving CSS performance:
If used improperly CSS can become a stumbling block for your website's performance from the outset.
Here are some tips for improving CSS performance:
1. Don't inline everything
Do not bother inlining everything as this increases the HTML doc size and takes longer for the TTFB ( time to first byte ). It is the time between the HTTP request made and when the first byte was received by the browser.
Do not bother inlining everything as this increases the HTML doc size and takes longer for the TTFB ( time to first byte ). It is the time between the HTTP request made and when the first byte was received by the browser.
2. Concatenate and minify
Concatenating your style sheets into one file and sending out a minified version can drastically reduce the size of your CSS.
Concatenating your style sheets into one file and sending out a minified version can drastically reduce the size of your CSS.
3. Avoid @ import
Never use @ import directive to include external style sheets because it blocks parallel downloads. It is an archaic practice. If you are used to sass, try @ use instead which the Sass team recommends. Otherwise, stick to link tags.
Never use @ import directive to include external style sheets because it blocks parallel downloads. It is an archaic practice. If you are used to sass, try @ use instead which the Sass team recommends. Otherwise, stick to link tags.
4. Be selective of your selectors
Speaking of selectors, some selectors like descendant selector ( ul (whitespace) li ) scan the whole document to apply styles. Moreover, universal selectors are also slower. It is preferred to use a mix of classes and ids for better performance.
Speaking of selectors, some selectors like descendant selector ( ul (whitespace) li ) scan the whole document to apply styles. Moreover, universal selectors are also slower. It is preferred to use a mix of classes and ids for better performance.
5. Use preload and HTTP/2 push
The preload resource tells browsers to fetch resources earlier. To give your CSS a head start, set it as a link tag in your document like this:
The preload resource tells browsers to fetch resources earlier. To give your CSS a head start, set it as a link tag in your document like this:
