How can you make your CSS files load faster and quickly? Cascading stylesheets are an important component of your site design and it is essential your CSS files download fast and showcase your superb design element before other site components load. But as we continue to redesign websites, CSS bloat and poor CSS practices make us forget the importance of quick CSS delivery to visitors and the need to increase site speed
So here are some quick tips to make your CSS load faster.
1. External stylesheets
Always avoid inline CSS in the HTML code to style individual elements, because it loads with each page load. Whereas external stylesheets get cached by browsers and do not need to reload every time a visitor continues to browse your site.
Call style.css in HEAD tags of your HTML like this
<link rel="stylesheet" href="https://domain.com/style.css" type="text/css" />
2. Single CSS file
Lesser the number of CSS requests the better. Always choose to load a single CSS file only on each page. Else use plugins to combine CSS into a single file so the number of HTTP requests go down.
3. First Item to Load
Insert CSS as the first line in code after HEAD tags in your HTML. This ensures your CSS starts loading the moment the page loading starts. The better idea would be however to load Critical CSS, so that only that code which actually is needed to properly display your site structure loads first, then rest is loaded later.
4. Small CSS files
The smaller the CSS file, the faster it will load and give design to your site. Use design elements only when needed. CSS3 allows you to add lots of fancy stuff like transitions, gradients etc. – but do you really need to style every element. Else use a mini CSS framework like Chota, or Skeleton CSS to load a very small file size <3kb!
5. Efficient CSS selectors
Learn CSS which enables you to join CSS codes into much smaller lines.
margin-top: 0px; margin-bottom: 0px; margin-left: 2px; margin-right:2px;
can be written as
margin: 0 2px;
6. Compress CSS files
Minify and compress the CSS code, again to reduce CSS file size so that it loads as fast as possible. While many caching and compression plugins can do this automatically, it increases server load so watch out for that if you are on shared hosting.
Remove unnecessary white-space and CSS comments. You can do online CSS Compression using YUI Compressor manually.
7. Remove unused CSS code
We use GTmetrix to identify unused CSS and remove CSS bloat easily. Why load unused CSS when it is not required. We use PurifyCSS to find unused CSS easily and use a minified CSS file without unused CSS.
8. Use a CDN
Content Delivery networks ensure your CSS is cached across the world and accessed as quickly as possible from the nearest local server for a superfast response.
We use Amazon Cloudfront and simply drop the compressed CSS file via the AWS admin interface. You can also use free CDN like Cloudflare as well, supported and well-integrated with many good Webhosting services.
9. Avoid versions
Try to keep the CSS file URL clean. Adding multiple query parameters with ? to highlight CSS file versions or add server time to force CSS refresh makes CSS caching difficult.
<link rel="stylesheet" href="https://domain.com/style.css?1368887361">
10. Learn CSS3
It is the latest version of CSS and makes styling even more efficient. Harness the power of CSS the right way. Here are some CSS books to get you started.
Try these fast CSS tips and make your site load faster. What is your speed tip?