Inlining all CSS can improve performance for sites with a low pageviews/ visitor-rate, but may slow down performance otherwise.
Benefits to inline CSS and JS for WordPress
- Preloaded within the HTML
- No rendering issues
- No additional file required
- No loading order issues
- Fewer web page file requests
- No Flash of Unstyled Content
However, by having everything inline, this does make the initial page file larger, and makes future updates harder – such as global changes.
When is it right to work on inlining?
We would mostly recommend Inline CSS and JS for WordPress only when the first fold of content is slow to load – and then, focussing on making only what appears within that screen be inlined. This is the concept of Critical CSS but taken a step further. It means that nothing will load until the entire ‘above the fold’ will be visible – which may sound like it’s slower, but if you’re following along with all our other posts, the entire top page load should be counted in milliseconds, not seconds.
How can I take my external files and make them inline?
There isn’t a shortcut – it is required to manually go through and edit the page/s, adding the code into the HTML as you go.
A halfway approach can be found within this plugin.
We can help.
Having trouble fine tuning your pages? Let us take a look with and help improve your page loading user experience.