Optimize CSS & JS Loading

You would be hard pressed in this day to find a site that doesn't have (plenty of) CSS for styling and JS for some sort of extra functionality. But all this shiny stuff comes at a cost! The page can't be displayed until all the CSS is downloaded, and the same often applies for JS resources. So what can we do?

With SWIS, we can make all of our CSS/JS load "asynchronously". That means the browser won't wait for JS/CSS to load before displaying the page. SWIS will still tell the browser to prioritize any CSS from your theme, so that it gets loaded as quickly as possible.

Now, what could go wrong?

With CSS loading asynchronously, you will likely see a FOUC, or a Flash of Unstyled Content. In other words, your page will "look funny" until the CSS is loaded. For that, we have the Critical CSS option, which we'll get to in a moment.

For async JS, scripts often depend on other scripts, and need to be run in a certain order. SWIS preserves the order of JS to avoid most issues, but if you have "inline" JS that depends on an external script, it might still break. You can add one of the aforementioned exclusions for that particular script, or exclude all 'inline-scripts'. Sometimes these things are page-specific, so you can even use the front-end Manage JS/CSS panel to customize where to apply JS defer exclusions.

Critical CSS

Like we said, your page will likely look a bit odd if it doesn't have any CSS yet (see above regarding FOUC), so we give you the ability to add critical CSS into SWIS. What the heck is "critical CSS"??

Well, I'm glad you asked! Critical CSS is all the styling needed to display "above the fold" content. Or in other words, it makes sure everything looks normal when the page first loads, and the visitor hasn't started scrolling yet.

The Critical CSS feature makes sure you can keep the initial page load looking normal while the rest of your CSS is downloaded in the background. There are a variety of online tools to help you generate critical CSS for "above the fold" content. In the future, we plan to integrate directly with CriticalCSS.com.

Reporting Errors

If you find any JavaScript that needs to excluded from async loading, let us know! Every report you make has the potential to save headaches for other folks in the future, and we'd love to hear from you anyway :)