Getting Started with SWIS Performance
SWIS Performance contains all the options I use to make my sites faster. No extra bloat, no options that "may or may not" make any difference to your site speed. Just more speed.
A note about Exclusions - we want SWIS to work "out of the box" for as many sites as possible. We already know there are cases where certain features shouldn't be used, and SWIS comes with built-in exclusions. If you've found yourself adding any exclusions, we want to know! This helps us improve the plugin for more folks, and it's possible we can even find a fix where an exclusion won't be required anymore.
Now, let's get on to the good stuff!
GZIP, Cache Control, Prefetch and more!
Right out of the box, SWIS adds GZIP compression to make every file on your site as small as possible. Additionally, it makes sure proper caching headers are added to take advantage of browser caching.
And as if that wasn't enough, SWIS automatically scans your page and adds DNS Prefetch and Preconnect hints to make third-party resources load quicker!
WordPress, being built with PHP and using a database, comes with some inherent overhead. Requesting data from the database takes time, plugin code adds a bit more time, and so does your theme. Before you know it, a site can be taking 5-10 seconds before it can even return a response (this is the plain HTML code), not to mention all the CSS, JS, images and fonts your page might need AFTER the browser gets the initial HTML from the page. In addition to that, if you can't afford quality hosting, your server might be overloaded from sharing resources with 200-300 other sites, and the overhead from all the PHP and database queries gets even worse!
Page Caching takes the HTML that is built for any particular page, and saves it to disk. Then, when the next person comes along and requests that particular page, the HTML that is pre-built gets delivered in record time, birds start singing, the sun starts shining, and all is right with the world once more... Well, a chap can dream, right? You might not get instant sunshine, but you WILL get faster page loads!
Images are the #1 reason for slow sites. Naturally, that's where my site optimization journey began many years ago, with the release of the EWWW Image Optimizer and the incredible journey that has followed. We've included the Lazy Load feature from the EWWW Image Optimizer, which not only prevents off-screen images from loading, but it helps deliver better-sized versions of your images to your visitors when your site is using srcset/responsive image code.
Lazy loading your images is also often the quickest way to make your images faster, but of course, if you want something more comprehensive and don't have the free EWWW IO plugin already, what are you waiting for?
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 generally goes 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 can break terribly. SWIS already attempts to detect any inline jQuery, but you can exclude any other scripts that have inline JS depending on them.
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 so that you can keep the initial page load looking normal while the rest of your CSS is download in the background. There are a variety of online tools to help you generate critical CSS for "above the fold" content. We are checking various options to bundle with the plugin, but if you have a favorite, let us know!
Minify CSS & JS
SWIS can remove excess white-space, comments, etc. from any CSS & JS on your site. While many developers are diligent about making sure the CSS & JS they include is minified, you can easily find some that are not very efficient (maybe even your own style.css if you use a child theme).
As an example, the default Twenty Twenty theme includes a stylesheet that is 121kb. When we apply SWIS Minify to the stylesheet, it cuts it down to 89kb, which saves us 26% on just one file! Of course, SWIS will also apply GZIP compression on top of that, which takes an 89kb stylesheet down to 18kb. You're welcome :)
Optimize Google Fonts
We've talked about images, and JS, and CSS, but do you use web fonts? No? Then skip this section! For all of you using Google Fonts, SWIS can help you make your fonts load faster.
- First, SWIS finds all the Google Font code in your page, combines it into one chunk of CSS.
- Then, the plugin inlines the Google Font code, which eliminates an HTTP request (more if you have several plugins/themes using Google Fonts), and also eliminates a DNS lookup.
- It applies the "font-display: swap" rule to all the fonts, so that your text can display immediately without waiting for the fonts to load.
- For bonus points, SWIS issues a "preconnect" directive, so that the browser will load the fonts as quick as possible and not get stalled out by waiting for the connection to fonts.gstatic.com.
Once you enable this option, load any page on your site, and SWIS will automatically scan your site for Google Fonts. Refresh the settings page, and you'll be able to see the font CSS that has been generated, as well as the CSS "handles" that will be dequeued, as they are no longer needed. You can edit any of the auto-detected CSS if you need to, or add more later. To re-run the auto-detection routine, simply clear out the Google Fonts CSS field, and visit one of your pages again.
Put simply, a CDN is a global network of super-fast servers that are designed for a single purpose: delivering assets, and doing it ultra-fast. "Assets" meaning any JS, CSS, images, fonts, and what not else that your page loads. If you have a super fast server already, and your audience is mostly in one location, you probably don't need a CDN. But for the average site, a CDN can be a nice speed boost, and they are super cheap these days. We use and recommend BunnyCDN or our Easy IO service which is built on top of BunnyCDN.
Wait, where's the bit about removing unused JS/CSS??? This is it, I call it SLIM, because that's what it does to your pages. Though this feature isn't automatic, it's super powerful. Let's give you an example, shall we?
On ewww.io, the theme I use loads 17 JS and CSS files. Yeah, I'm not proud of that, but there it is, and it's not pretty. Six of those are for features we don't use on ewww.io, but with SLIM, we can tell them not to load anywhere on the site.
First, you can check out all the JS/CSS loaded on any given page by clicking Show JS/CSS Resources on the admin bar--top of your screen, yup, there it is! SLIM groups the resources by type and sorts them by plugin too.
You'll find example rules there, but in our case, we find the "handle" for a file that isn't being used and we just add it to the Eliminate Unused JS/CSS field:
How do I know if a resource isn't being used? I try it out! Disable a CSS or JS file in the settings, see if the site is still okay. If the home page looks good, I click around on a few others and make sure everything looks normal.
Now some will be a bit more obvious. For example, you might have a forms plugin that you only use on 1 or 2 pages. Well, you certainly don't need the JS & CSS from the forms plugin loading on every page! So you can disable it everywhere except that page, with a rule like this:
If you break something, never fear, the settings page will be fine, because SLIM only works on the front-end. Go in and remove the problematic rule, and things will be back to normal. Of course, make sure to clear any caches (including the SWIS cache), or you'll be running around in circles wondering why it's still broken.
Well, that's it! I hope SWIS makes your life easier and your site faster. But if you run into any snags, send us a note, and we'll be glad to lend a hand.