21 ways to optimise your CSS and speed up your site

Speed up your sites with optimised CSS

CSS must pass through a relatively complex pipeline, just like HTML and JavaScript. The browser must download the files from the server and then proceed to parsing and applying them to the DOM. Due to extreme levels of optimisation, this process is usually pretty fast – for smaller web projects not based on frameworks, CSS usually makes up just a small part of total resource consumption.

Frameworks upset this equilibrium. Include a JavaScript GUI stack like jQuery UI, and watch CSS, JS and HTML sizes skyrocket. Often, developers usually feel the pinch last – when seated behind a powerful eight-core workstation with T3 internet, no one cares about speed. This changes as latencies or CPU-constrained devices come to play.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tam Hanna is a software consultant who specialises in the management of carrier and device manufacturer relationships, mobile application distribution and development, design and prototyping of process computers and sensors. He was a regular contributor to Web Designer magazine in previous years, and now occupies his time as the owner of Tamoggemon Software and Computer Software.

Latest in CSS
css secrets
11 CSS secrets you need to know in 2020
12 tips for amazing CSS animation
CSS Houdini
CSS Houdini: All you need to know about the hottest APIs
State of the art CSS
8 state-of-the-art CSS features (and how to use them)
Bulma
Get started with Bulma
The best CSS frameworks
10 best CSS frameworks in 2020
Latest in How to
Ivan Mironenko ZBrush character tutorial
Craft a game-ready character asset using ZBrush and Substance 3D Painter
Whiskytree battle damage effects tutorial
Create gnarly battle damage for vehicles using a mix of Maya and Nuke
After Effects lightning tutorial
How to use Adobe After Effects to create a lightning effect the easy way
Venusaur art
How to paint Pokémon's Venusaur in Photoshop
Babiru DaVinci Resolve colour tips; a red creature in armour, it has a large toothy grin, in the background is a cyberpunk style city
How to achieve a bold cinematic look in animation, using DaVinci Resolve and Fusion Studio
Making Babiru, DaVinci Resolve and Unreal Engine; A tense and visually striking digital scene showcases a character poised with a glowing knife just before a dramatic confrontation, evoking themes of danger and anticipation in a cyberpunk environment.
Colour grading advice: how DaVinci Resolve Studio and Fusion Studio were harnessed for Babiru