The practice of “”inlining”” CSS and JavaScript is a time-tested WPO technique. It can significantly cut load times by minimizing the number of individual assets on a website (thereby reducing the number of trips that must be made from the client to the server and back to load the page). Inlining JS and CSS can now be instantly applied across your entire website with Yottaa Site Optimizer.

How it Works

Inlining JavaScript and CSS is conceptually simple.  Wherever there’s a script that is executed via a function tag (that is, an “”external”” script) a developer can rewrite the script directly into the HTML file, making it an “”inline”” script.  This doesn’t cut down the overall weight (# of bytes) of the file — it simply transfers those bytes to the HTML file — but it improves performance by eliminating the round trip from client to server and back. This time savings compounded over several JavaScript files and CSS files can have a substantial effect on overall page load time.

But What About The Cache?

Experienced frontend developers know that there’s a tradeoff with inlining: the ability to leverage the browser’s local cache. Since HTML files are not typically cached, any JavaScript or CSS files inlined there will likewise not be stored locally in a user’s browser. For pages that typically see multiple visits from a single user within the span of a few days or weeks, leveraging the cache is a great way to boost performance. But leveraging the cache still means that first-time visits will perform worse than if inlining was used extensively, and since first impressions are important on the web, a balance should be struck.

Find Balance With Site Optimizer

Yottaa Site Optimizer makes it easy to configure and set exceptions, so you don’t have to make an all-or-nothing decision with regard to inlining.  With the inlining feature set to “”On””, you have several options:

• Set a maximum size for scripts/stylesheets to be inlined. Leveraging the cache is most useful for large files, so a good way to balance performance is to set a weight threshold under which all files will be inlined.

• Set page exceptions. Perhaps the home page of your eCommerce site sees lots of repeat visits, but individual category pages do not.  You can set an exception to the inlining rule for just the home page, so repeat visitors there can leverage the cache.

• Set device or browser exceptions. Inlining is even more useful for mobile visitors, because requests take longer to travel over cell networks.  If a site gets a lot of mobile traffic, you can set inlining aggressively, but make exceptions based on the user agent so that desktop browsers don’t inline.