Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Remember Space Jam?
Disney has actually kept the original Space Jam website online since 1996.
Take a look:
Gross!
Websites like that one used to be made entirely with HTML and a few images. As you can tell, websites are worlds away from that now.
What’s the problem?
Often times when I visit one of my theme user’s websites, I see 100+ files being loaded on each page. In contrast, the Space Jam website only loads 7 files and that website was made for a blockbuster movie!
So what’s going on here?
Well, modern websites load CSS files for styling, they have Javascript files to add user interaction and analytics scripts, and they tend to have way more images.
And you know what makes it worse? Plugins.
You may have five plugins each loading their own stylesheets. That means five additional CSS files to send to every visitor who comes to your site.
I’m not saying plugins are bad, but WordPress sites tend to load a ton of files because each plugin loads files independently of the others.
WordPress or not, it’s unrealistic to create a modern site that only loads seven files, but if we optimize our sites properly we can do much better then 100.
What’s the solution?
WP Rocket can help mediate these issues very effectively and is a staple of our performance optimization here at Compete Themes.
I’m going to cover the three areas where you’ll see the biggest performance gains with this plugin. I’ll share screenshots of all the menus at the end of the post too so you can review all the settings available.
Let’s start with the most important feature, caching.
Update: I made a step-by-step video tutorial that will walk you through the steps to configure WP Rocket on your website.
Subscribe to Compete Themes on Youtube
1. Caching
Once you upload and install WP Rocket, you’ll get access to its beautiful dashboard where you can begin optimizing.
WP Rocket turns on the caching the moment you activate it. You could literally activate the plugin and log out of your site forever and it would still load faster.
How does caching help?
It’s hard to appreciate the automatic caching if you’re not sure how it affects your site.
Think of caching like this:
Imagine you need a document so you find it in your file cabinet and then return it to the cabinet when you’re finished. Next time you need that document, you have to get it from the file cabinet again.
Caching is like keeping the document on your desk once you find it so you can use it again immediately. Just like getting the document from your desk is quicker than getting it from your file cabinet, caching prevents unnecessary trips to the database.
The point is, regardless of how many files your site loads or how big they are, they all load much faster with caching enabled.
Configure the caching
As mentioned, you don’t need to change any settings to get the caching working. However, there are a few changes you may want to make in the basic cache settings menu.
The settings here are mostly to tweak the cache to work best for your site. For instance, if you have a completely different mobile design from using a plugin like WPTouch, WP Rocket can cache those files separately.
You can also use the cache for logged in visitors if you have a membership site and enable caching for SSL (necessary if your site uses “https://”).
Again, there really isn’t much to do here besides activate the plugin.
2. File Optimization
The file optimization section is where you’ll reduce the number of files your site loads as well as the size of those files.
Basic settings
The first option allows you to “minify” your site’s HTML, so what does that mean?
Minification
Developers write code with lots of spacing, formatting, and comments to make it easy to read. When we load these files on our sites they don’t need to be easy to read. Minification removes all space between characters and strips out all the comment text too. This actually reduces the file size so it loads faster.
If you view the source code for any page here at Compete Themes, you’ll see how WP Rocket’s minification has affected the HTML:
Minification is awesome because you get a quick and easy performance improvement and it rarely has any impact on how your site works.
Ready to learn your next tech term?
Concatenation
The other cool feature in the basic settings is the option to combine Google Fonts files. Most WordPress themes use Google Fonts, so you’re likely loading one or two fonts from there. This process of combining files is called “concatenation.”
In general, it’s faster to load one file rather than two because you have reduced the number of HTTP requests, and we don’t need to get any more technical than that ?
To review, minification reduces the size of files and concatenation combines them. With fewer, smaller files your website will load faster. These two processes are awesome for performance and no plugin handles them better than WP Rocket.
CSS files
Remember my example of the five plugins each loading their own stylesheet? This is how you fix it.
You can minify all CSS files which will give you a small performance boost and then enable the “combine” option to concatenate them into as few files as possible. While it is possible to end up with display issues on your site when using this option, it’s usually not a problem.
The Optimize CSS Delivery can also help your site load visually sooner than without it.
JavaScript files
The exact same minification and concatenation options are available for Javascript files too.
I don’t want to scare you, but these options can sometimes break parts of your site (on the front-end not in your dashboard). The important thing is that you try these settings out and if anything stops working, you can simply turn them off. Everything is reversible.
Optimize without errors
Minifying the JS files usually isn’t an issue, but when you combine them you can sometimes end up breaking functionality on your site. Here’s what to do…
Activate the minification and concatenation options and then clear your site’s cache using WP Rocket. Then visit your site and do everything. Try the social sharing buttons, visit posts and pages, test the mobile menu, etc. If everything is working well then you’re good to go.
There is also an option to “defer” the Javascript files. This allows your site to show up visually on screen before the Javascript files finish loading. If you enable this option, make sure to test out all of your site’s features again to check for errors.
Lastly, deferring the Javascript files enables Safe Mode for jQuery. Unchecking it will give you a slight performance gain but I can almost guarantee it will break something, so I’d recommend keeping it checked.
3. Media optimization
WP Rocket has a few neat options to optimize media on your site including lazy loading which can be extremely effective.
What is lazy loading?
Imagine you have a blog and there are 10 posts on the homepage each with an image. When a visitor arrives, only the first post is visible on the screen. Here’s the question:
Why load all 10 post images if the visitor can only see one? Furthermore, why would you load all ten when most visitors might only scroll their way to the third or fourth post before clicking on one?
With lazy loading enabled, WP Rocket will keep track of how far down the page visitors have scrolled and it won’t load images until visitors are close to reaching them.
How to Lazy Load Images in WordPress (Only 1 Step)
The benefit is that your site immediately loads faster because you’re loading so many fewer images. This also reduces the bandwidth that your site uses.
Videos and iframes
You can also enable lazy loading for videos and iframes (iframes are used to embed content from other sites).
There’s also an awesome feature that allows you to display a Youtube video’s thumbnail until it finishes loading.
Drawbacks to lazy loading
Lazy loading works great for a site like Pinterest with lots of small images, but it doesn’t always work well if you have huge images. The problem is that the image doesn’t load until visitors scroll to it and if it’s a big image, they may need to wait for a second while it finishes loading. This can get annoying if it happens for every image on the page.
In fact, the only reason I don’t have this option enabled for Compete Themes is because visitors like to scroll super fast down some posts and the images aren’t ready when they get to them.
Emojis and embeds
WP Rocket also has convenient options to disable emoji support and the WordPress embed technology. Each one of these features loads one small JS file, so disabling them both will remove two more files from your site.
As you might have gathered, I like emojis so I keep them enabled ?
However, I recommend disabling the embeds because they’re more annoying than useful. If you’ve ever entered a URL into the post editor and WordPress turns it into a box sort of like an embedded Tweet – that’s the embedding you’re disabling. This option won’t effect Youtube or Vimeo embeds.
What else can you do with WP Rocket?
Those are the main steps to optimize your site with WP Rocket.
The remaining settings are for tweaking and fix any potential errors, although there are some more performance gains to be had.
As promised, here are screenshots from all the remaining menus in WP Rocket:
Speed up your site
I use WP Rocket here at Compete Themes and it’s one of the first plugins I install on every site I build.
If you’re ready to optimize your site then grab a copy of WP Rocket and speed up your site.
Click here to check out WP Rocket now
And if you haven’t considered switching hosts, I recommend checking out this review of WP Engine. A faster host can make a huge and immediate impact on your site’s load times.
Click here to find other ways to speed up your site
