Optimizing for Speed Using WP Rocket and WP Engine

On July 9, 2018, Google updated it’s ranking algorithm to include page speed on mobile.

“People want to be able to find answers to their questions as fast as possible; studies show that people really care about the speed of a page. Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.”

https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

This means that if your site loads slowly on mobile devices you will and probably already have seen a decrease in organic traffic. Essentially, Google will not rank your site as high if your site loads slower than other websites for a similar search term. While there is no guarantee of this increase, generally speaking, if Google flat out tells us that something is a ranking factor then it’s important to pay attention to it. That being said, Pagespeed is only one of many ranking factors and from the data that has been collected so far, it’s not as large a factor as many people thought it was going to be. That is not a reason to ignore it as it has many other benefits as well. Beyond the SEO benefits of a fast loading site, there are many other marketing and conversion reasons to ensure that your site is speedy. For this reason, you should always ensure that your website loads as fast as possible, and it all starts with hosting.

Hosting – WP Engine

There are many tools and best practices for WordPress to ensure your site loads fast. To ensure that you are set up to succeed, you want to start with a solid host for your website. At CreativeAK, we host all of our sites at WP Engine. I will not go into detail about all of the ways that WP Engine optimizes its servers and systems to ensure that WordPress is fast. You can read about those here if you have interested. Generally speaking, they offer the following speed-related features with their hosting:

• PHP 7
• A proprietary NGINX Caching system called Evercache
• CDN (I actually do not use this as I have found that with https//2 my sites actually load faster without the CDN enabled for the geographic area of my clients.
• Https/2

While having a good host is very important, building your website optimized for speed is just as important, if not more. If you have bloated code, bad HTML, images that are not optimized and many more mistakes your website will load very slowly if it loads at all.

Plugins for Speed Optimization

There are many best practices and WordPress Plugins that will help ensure that your site loads quickly. We have tried many of these plugins over the years and settled on the following plugins to optimize our websites for speed:

• Complete Analytics Optimization Suite (CAOS) (https://wordpress.org/plugins/host-analyticsjs-local/)
• Gonzales (https://tomasz-dobrzynski.com/wordpress-gonzales)
• Imagify (https://wordpress.org/plugins/imagify/)
• Use Any Font (https://wordpress.org/plugins/use-any-font/)
• WP Rocket (https://wp-rocket.me)

CAOS and Use Any Font may not seem like speed optimization plugins, but both speed up load time by making full use of http/2. In order to see the most benefits from http/2, you need to load as many of your resources (HTML, CSS, JS, images, etc.) from the same url. CAOS and Use Any Font allow you to load both Google Analytics and your site fonts locally (from your website’s url) as opposed to being loaded from Google’s servers.

Gonzales is a unique plugin that allows you to individually turn off CSS and JS on a per page, site-wide, or other systematic bases. The more assets you can turn off where they are not needed, the faster your site will load.

Imagify is simply an image compression plugin. There are several other solutions out there for this purpose, but we settled on this one because of its ease of use and pricing plan. The idea is that you don’t want your images to be any larger (in file size) than they have to be.

WP Rocket

After trying several other plugins we settled on WP Rocket to take care of the bulk of our websites’ speed optimizations. It does everything you would expect from a good speed optimization plugin, i.e. plenty of optimization features, an intuitive UI, and solid support. WP Rocket divides its UI into several tabs, listed and described below.

Cache

WP Rocket’s cache tab enables cache for mobile devices and sets a cache lifespan. We’ve enabled these options as they are recommended by WP Rocket. WP Engine has it’s own proprietary caching as well that works in correlation with WP Rockets caching system. Through testing, we have found that the checked options above pair well with that system. If you have a site with low traffic it may help to install WP Engine Advanced Cache since WP Engine’s caching system resets after 10 minutes.

WP Rocket’s cache tab enables cache for mobile devices and sets a cache lifespan. We’ve enabled these options as they are recommended by WP Rocket. WP Engine has it’s own proprietary caching as well that works in correlation with WP Rockets caching system. Through testing, we have found that the checked options above pair well with that system. If you have a site with low traffic it may help to install WP Engine Advanced Cache since WP Engine’s caching system resets after 10 minutes.

File Optimization

This tab deals with the layout of your page HTML, CSS, and js. Under basic settings, we want to minify HTML to ensure that the file size is as small as possible. We leave Combine Google Fonts fonts off to ensure no additional external connections have to load and to take full advantage of http/2’s multiplexing (assuming there are multiple Google fonts that the site is loading).

For CSS files we’ve actually found speed increases if we combine and minify all of the CSS files. While this goes slightly against the standard thinking with http/2, after running tests on multiple sites, we’ve found that this leads to the fastest load times. The other benefit is that for those users whose browser does not yet support http/2 will also see a distinct speed bump.

For Javascript, we have found that the same settings (for minifying and combining) also work better than leaving them disabled, even though it is recommended with http/2. Loading JS deferred is definitely the preferred option as it leads to the quickest perceived page load time. Loading the JS deferred means that the JS will load after the page is rendered for the user (that is a simplified definition, but that’s the gist of it). This definitely is a must so that the user is not waiting on JS unnecessarily when they could be viewing and interacting with the page. Safe mode for jQuery is a conditional option. If you have a slider or other element on the page that requires jQuery to load you will need to enable this option. JQuery requires a fairly large JS file to be loaded prior to any content appearing. For this reason, we prefer not to put jQuery dependent content above the fold on a website. Sometimes this cannot be helped, in which case you will need to enable this option and suffer a slight delay in page load speed.

Media

The media tab deals with how images and embedded content are loaded on your website. Lazy loading is an awesome feature that is a must for any image heavy website. It loads your images after the rest of the page is loaded. Images tend to be fairly large in relation to the page size, so enabling a feature such as this can lead to a drastic decrease in perceived site speed. Once the user scrolls down a page the images will begin to load, but not until then. In other words, if an image isn’t needed because the user will never see it, then it will never be loaded. This feature also works with iframes, which can add a lot of additional (and unnecessary if the user never scrolls to it) html, css, and js to your site.

Disabling emoji’s is another conditional option. If your site has a lot of commenters that utilize emojis, then you will most likely want to leave this option enabled. If not, it just adds additional and unnecessary kb to your webpages, so turn it off.

You can go ahead and check the Disable WordPress Embeds option. This will prevent others from embedding your content on their site causing an unnecessary strain on your site’s bandwidth.

Preload

Preloading is a unique feature that automatically loads (and therefore caches) each page on your site. This appears to work well in correlation with WP Engine’s caching system. WP Engine does not appear to cache a webpage unless it is loaded and resets it’s cache every 10 minutes. For a while, we were using a system such as Easycron to trigger each page on the site so that it was loaded (and cached). WP Rocket’s solution is a lot cleaner and appears to work well to even out page load times. This preload occurs when your page lifespan expires that we set on the Cache tab for each page in your sitemap. We use Yoast’s sitemap, but if you have another system you can simply add your sitemap url into the appropriate box.

Prefetch DNS Request is a new cool feature with http/2 that will automatically begin to find and connect with the external assets’ domain. As you can see we only have one external asset, which is our Google Analytics, so we add the referring url to this section.

Advanced Rules

Most of the options on this tab are caching exclusions for things like log-in pages and e-commerce. WP Engine handles these directly. We have found that the best approach is simply to ignore this tab and chat with a WP Engine technician whenever we need to add a cache exclusion to a page(s) or another similar rule. The one exception on this page is the Cache Query Strings sections which you will want to utilize if your site uses query strings, i.e. https://creativeak.com/product/?=productxyz, to ensure they are being cached.

Database

Your site will be faster if your database is clean and organized. This tab will help ensure your database is optimized. The Automatic Cleanup Frequency is up to you depending on how often you update pages, posts, plugins, etc. Before you enable this page you would make sure that you have a solid backup in place. With WP Engine’s automatic daily backups I do not have to worry about a database error crashing my site, for very long anyway.

CDN / Add-Ons / Tools

These last three tabs I leave untouched. CDNs can definitely help your site load speed, but in my testing, I found that the latency caused by the additional domain SSL negotiation was greater than any speed gains in my geographic location.

Conclusion

There is no getting around it, page speed is important. Google has just announced that it is a ranking factor on mobile search, it already has been a ranking factor on desktop search, and it will absolutely affect how users interact with your website (section.io wrote a good article on this). WordPress is pretty dang fast out of the box, but as we add more content and elements to our pages we need to ensure that it remains fast for each user who visits it. At CreativeAK, we use these plugins and settings to ensure that this is the case. What do you use?

Jacob Wilson

Owner of CreativeAK

Thank you for stopping by. If you would to discuss your own web project please contact me. Even if we do not end up working together I love discussing new projects and SEO. Thank you and good luck with your project.