CSS accounts for 7 HTTP requests and 70Kb of code on the average web page. It’s not the worst cause of woeful website performance (I’m looking at you, JavaScript), but there are specific CSS challenges. The following 30 tips will help you optimize CSS to improve actual and perceived response times.
Table of contents
1. Use CSS performance analysis tools2. Make quick indirect CSS improvements3. Preload stylesheets4. Remove unused styles and files5. Remove CSS hacks and fallbacks6. Use OS fonts7. Remove unnecessary fonts8. Host font files locally9. Use HTML <link> instead of CSS @import10. Bundle and minify your stylesheets11. Use modern CSS layouts12. Replace images with CSS effects13. Never embed base64-encoded bitmaps14. Use SVGs when possible15. Style SVGs with CSSOpen Source Session Replay16. Be wary of CSS frameworks17. Be wary of preprocessor code generation18. Simplify your selectors19. Avoid expensive properties20. Use CSS transitions and animations21. Use will-change when necessary22. Handle the HTTP Save-Data Header23. Consider critical inlined CSS24. Create device-targeted stylesheets25. Consider CSS Containment26. Try progressive rendering27. Adopt web components28. Use good-practice development techniques29. Embrace the cascade30. Learn to love CSSSort: