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 their 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 the 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, ect.) from the same url. CAOS and Use Any Font allow you load both Google Analytics and your site fonts locally (from your website’s url) opposed to being loaded from Google?s servers.

Gonzalos is a unique plugin that allows you to individually turn off CSS and JS on a per page, site-wide, or other systematic basis. 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.

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 do not yet support http/2 will also see a distinct speed bump.

WebPagetest Combined 600x344 - Optimizing for Speed Using WP Rocket and WP Engine — CSS and JS Combined – 2.539s

WebPagetest Not Combined 600x586 - Optimizing for Speed Using WP Rocket and WP Engine — CSS and JS Not Combined -?2.601s

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 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 seems 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 in to the appropriate box.

Prefetch DNS Request is a new cool feature with http/2 that will automatically begin to find and connect with external asset’s domains. 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 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 is the case. What do you use?

In 2014, I acquired one of my first clients. It was a business called Divine?s Auto. Divine?s owns and operates a series of gas stations, auto repair shops and a towing service in Spokane, WA. In terms of Google My Business, they have 14 physical stations, plus their towing service. Despite the fact that this would be my first foray into a multi-location business web project, I was young and na?ve so, of course, I was excited to take on the project.

The Problem

Divine?s has been in business since 1956 and, in all that time, there was no consistent effort to build their online presence. Instead, over the course of 20 years or so individual store managers (or various other individuals) added Divine?s stations and services to the web in their own unique way. They was no name consistency, phone numbers had come and gone, even branding had changed multiple times. Fourteen locations being updated by countless individuals for last 20 years. Needless to say, their NAP (Name, Address, Phone number) consistency was a mess. So, I did what every good novice would do – I opened up a new Excel sheet and began, one by one, cleaning up and logging each stations NAP for each directory site across the web. Believe it or not I actually got pretty far before turning to a service for help. I now use Bright Local to track my citations, which has made my life quite a bit easier.

My process was fairly simple after their website rebuild:

Priority # 1 – consolidate and gain control of each station?s Google My Business listing
Consolidate and correct listings on the most popular directories
Set up brand and individual social media profiles.
Begins link building campaign
Begin acquiring reviews from all the primary review site (Google, Yelp, Facebook, others)

Decision # 1 ? What is the best naming convention for a business which offers multiple services depending on which physical location you go to, but falls under one brand? The main argument would be to simply go with ?Divine?s?, (like ?McDonald? instead of ?McDonald Restaurant?). But, McDonald only does one thing, it sells fast food. Divine?s has three distinct business (fuek, auto repair, and towing) and while we could list these as categories, which we actually did for a little while, we quickly realized that there were some major issues with this strategy. The first of which involved towing. Since towing was listed under specific storefronts, individuals needing a tow in the evenings would call a station only to get a message that it was closed. In reality, towing was not closed. It has a separate phone number and is open 24 hours, but people didn?t know that because it was listed as a category under a closed station. You can see why this was a problem. The second issues is it was confusing to see Divine?s Auto on Google Maps and drive there for automotive repairs only to show up and be told that while they made it to Divine?s, that station didn?t offer auto repair.

With that in mind we made the decisions to create three different primary categories for Divine?s stations based on their primary services. We felt that this naming convention maintained the branding while letting people know what service each station provides. Starting with Google My Business we implemented the following naming strategy:

Divine?s Auto Repair Shops (5 stations)
Divine?s Auto Centers (7 stations) (these are the gas stations)
Divine?s Towing (1 service area)

With this Google My Business naming convention I were able to update most of the directory sites without a problem (although yelp was not as easy). Thing were going pretty well until I hit Facebook which had three clear problems:

Divine?s had only focused on building one Facebook page called ?Divine?s Auto Centers, Towing, and Fasmarts?. This single active Facebook page did not match any stations and had a phone number and address which matches only one of the stations.
We have a plethora of duplicate and incomplete other Facebook pages displaying inconsistent and, more often than not, inaccurate NAP.
Even if we got a Facebook page up and running for each station I would never be able to find enough people willing to post to each page to keep in active and updated.

Decision # 2 ? Do we abandon the idea of a Facebook page for each individual station and only concentrate on the one brand page? Personally, I did not want to do this for a couple reasons. One, having a Facebook page helps validate a business?s NAP and legitimacy in local search. Two, Facebook will only continue to growing as a review site. Three, social media is continuing to evolve in how it is viewed by search engine and although it may not be a full-blown search ranking factor now, it may in the future.

In steps Facebook Locations. Facebook Locations is a tool which allows multi-business locations to create a ?Parent? Facebook page which will distribute post to ?child? Facebook pages. I knew that we would never be able to get each station to consistently post to their own Facebook page, but with Locations and its? trickle down posting, we can get enough content out there to keep the pages active. And, while it is no longer imperative, if I can convince stations to post to their pages it will complement our corporate level strategy.

Did we find the perfect solution? No, not really ? in order to use the Facebook Locations tool all of the locations have to have the exact same name. Unfortunately, we already discussed the confusion that using only one name for every station caused on Google My Business.

This is where I got stuck. In the end, I used work around which, while works, is not perfect. The solution was to use the same primary categories and naming convention we used with Google My Business; auto repair shops, gas stations, and towing. Using these I created three distinct ?Primary? Facebook Locations. It looks like this:

Six ?Divine?s Auto Repair Shop? Facebook Pages (1 primary, 5 locations)
Nine ?Divine?s Auto Center? Facebook Pages (1 primary, 8 locations)
One ?Divine?s Towing? Facebook page

The main issues with this set up are 1) if we want to post something to all of the Divine?s pages we have to post it to three separate pages. Sure this is easier than posting it to 14 different pages, but it is still not perfect. 2) Facebook Locations has a great feature which list all of the locations on a map, but because we?ve sectioned the company apart each map will be incomplete. i.e. if someone is just looking for a gas station they will not see the Divine?s Auto Repair Shops, even though they also carry gas.

The Verdict

The entire process, while tedious, worked out in the end and Divine?s is ranking better and better. But I am still not sold that this was the ?best? implementation and I am curious what others would have done in this situation.

Category: Blog and News

Optimizing for Speed Using WP Rocket and WP Engine