Inline CSS scripts

One method to speed up the load times of web pages is to optimize the CSS delivery by inlining CSS scripts instead of requesting them through external files. When you inline CSS scripts, it basically means you copy the code from CSS files and paste it within HTML style tags. The best place to stick these CSS scripts in is within the HTML head. The reason this speeds up your website is because the browser doesn’t have to download the CSS files first to fully render your page, instead it can instantly render your page when done right. Inlining CSS scripts also results in your web pages making fewer HTTP requests.

Test your Website

Test your URL with our website speed test to get an idea how the CSS on your website is being implemented and what you can improve.

How to inline CSS Scripts

  • Copy the script code
  • Paste the code between the <head></head> tags in the HTML of your page(s)
  • Add a <style> tag to the top of the CSS code and a </style> at the end of the code

Make sure to read about defer loading CSS scripts and optimizing CSS delivery to really benefit from inlining CSS scripts.

Minimize CSS code size

The CSS scripts found on the average website are usually not as minimized as they can be. They often contain unnecessary and repetitive scripts which aren't necessary to load the web pages in the exact same way. You can automatically remove these unneeded CSS scripts and minimize your CSS by using the CSS compressor tool. The tool will automatically compress the code to the smallest version possible. This is how you use the tool:

  • Make a back up of the CSS scripts first
  • Then stick them in the input text field
  • Tick the "Add line break after every rule" option to make sure the code is still readable after compressing it (not required).
  • Press the “Compress” button

No benefit from using cached CSS files

Although using the inline method certainly renders most pages a lot quicker, it can also have negative consequences when it comes to page speed. The biggest one is being unable to load cached .css files. When you inline CSS scripts, your browser has to download the same CSS code every single time your visitor visits another one of your web pages instead of using a cached file for this. This way you don’t make the optimal usage of caching (when you have enabled browser caching, which you should). Still, the pages that use the CSS inline method still load faster as pages that use cached CSS files, especially when the critical path CSS method of loading CSS scripts is used.

Want To Have The Maximum Page Speed Possible For Your Website?

We can help with that! We have professionally optimized the speed of thousands of websites. Because of this we know how to get the best results quickly while keeping our prices low. Get an instant price quote for our services now.