Tutorial: How to optimized WordPress for Speed and Performance at A2 Hosting

HOSTING

Tutorial: How to optimized WordPress for Speed and Performance at A2 Hosting

A detailed guide to how A2 Hosting utilizes the latest technologies, along with customized W3 Total Cache Settings, LiteSpeed and CloudFlare to create one of the fastest WordPress Installations on Shared Web Hosting.

We take a detailed look at all the advanced performance-related features offered by A2 Hosting and walk you through their implementation to ensure you take full advantage of them.

This tutorial will take you through all the steps required to get you up and running with a fresh installation, as well as how you would implement the optimizations on an existing install.

For this tutorial we will not deal with migration of existing WordPress installs to A2 Hosting as, if need be, you can ask A2 Hosting to do this for you free of charge.

#Step 1 Sign Up to A2 Hosting's Turbo Plan

A2 Hosting has three different plans, each with varying features and resources. This tutorial requires the "A2 Optimized Accelerator" and all the features that come with the High-Speed SwiftServer. We will discuss the specifics of the features as we come across them in the tutorial.

To sign up, first visit the A2 Hosting website here (you should see an offer for 51 percent off), click through to the shared web hosting page, and then sign up to the Turbo Plan as shown below:

A2 hosting plans

You can see the full order process shown here (coming soon), but we will just provide a quick note on some of the options:

  • Billing cycle — We recommend signing up for 24 months to take advantage of the initial discount. Don't worry; they have a money-back guarantee, 
  • Dedicated IP — You no longer need a dedicated IP for SSL certificates.
  • Priority Support — At the time of this tutorial we have only submitted one ticket, and the response came within 36 minutes with a full response that satisfied our query. We have also initiated several chat support requests on minor queries, and again the responses were very thorough thanks to their excellent FAQ \ support guides. The live-chat was answered within 20-30 seconds on each time. Suffice to say, at least on first glance we believe that you do NOT need their priority support. However, should you wish to choose this, the initial sign-up discount does apply to this fee as well.
  • Server location — If you have a worldwide audience we recommend choosing the USA location, otherwise choose the location close to where your audience is located as this will make a significant difference to page load times.
  • Performance Plus — You get extra resources with the Turbo plan in any event. If you have a very busy website or a large e-commerce based website, then you may wish to consider this. During our testing, we did not use this. At $3 for double CPU and an extra 1GB RAM this is very good value, and even if you do not require it now, just remember that this is an option if your website becomes very busy later.
  • Barracuda Spam Firewall — This is an email Spam filter. If you have problems with SPAM, you can always add this later.
  • SSL Certificate — A2 Hosting offer free Let's Encrypt certificates which should be sufficient for most websites. The only real difference is that the free certificate does not offer compensation \ warranty. We will demonstrate implementing HTTPS in this tutorial without signing up for a paid SSL certificate.
  • Auto-Install Application — For the purpose of this tutorial we will be installing WordPress from within the admin. area, so select "None" for now.
  • CloudFlare Plan Plus Monthly — For just $8 you get mobile and image optimization. We use these features ourself, and can highly recommend it. For this tutorial, we will not be utilizing this. This is paid monthly, so feel free to try it for a month. These features cost $20 per month when signing up directly with CloudFlare.

If you have used our special deal, then this should cost you $11.16 per month when signing up for two years. For what you get, this is astounding value.

#Step 2 — Log into your cPanel Control Panel

After signing up with A2 Hosting log into your client area. This will list all your services, domains, tickets and invoices. At the top of the page, you will find a section called "cPanel Quick Login."

Click the green "Login" button to be taken to the cPanel Hosting control panel:

A2 hosting client area

The control panel will look like this:

cpanel main

#Step 3 — Configure SSL with Let's Encrypt + HTTP/2 Implementation

If you wish to get a Google Ranking Boost and be able to use HTTP/2 for increased page load time then you will need to use HTTPS. Before we install WordPress we will need to configure an SSL certificate. Fortunately, A2 Hosting now offers free Let's Encrypt SSL certificates so you can do this at no extra cost.

To set up Let's Encrypt, simply open a support ticket with the following:

Please install Let's Encrypt certificate on my domain: yourdomain.com

When we first tried to configure Let's Encrypt it was a little confusing. We had expected an icon or something within the cPanel to configure this. A very short live chat conversation explained they would just open a ticket to get this configured, and just a few minutes later we received a ticket response confirming that it had been done:

let's encrypt a2 hostingIt was extremely easy, as unlike other hosting providers where you have to click a few things (still very easy with Let's Encrypt), A2 Hosting did it all for us.

Once you have an SSL certificate successfully installed, it should use HTTP/2 protocol automatically. You can read more about HTTP/2 and its significant speed benefits here.

Editor's note: While not within the scope of this tutorial, you should remember to add the new HTTPS version of your website to the Search Console in Google Webmaster Tools, and resubmit the HTTPS version of your sitemap if you are migrating an existing installation to HTTPS.

#Step 4 — Install A2 Optimized WordPress Via Softaculous

A2 Optimized software installations come preconfigured with performance and security optimizations, and we will take full advantage of these in this tutorial.

A2 Hosting has setup optimized installations of WordPress and other software (Drupal, Joomla!, Magento, OpenCart, and PrestaShop) which can be installed via the Softaculous installer, which you can access from the cPanel control panel as shown below:

wordpress softaculousOn the next screen, click the blue "Install button":

Wordpress a2 hosting softaculousYou will then be asked for basic details about the installation including the Domain name, website Name, and Admin Account details. You should particularly note the following:

wordpress installation settings

Once you are happy with the settings, click the blue "Install" button. It will then go through the installation process, which may take a few minutes:

check wordpress installation

Once it has finished installing you will receive a message confirming it is complete, along with the URL installed to, and the location of your admin. area:

Installation details

Make a note of the details, and then return to the cPanel control panel by clicking the CP icon in the top right-hand corner as shown below:

back to cpanel

A note about the A2 Optimized WordPress Installation

This installer will automatically configure your WordPress website with several speed and security optimizations:

  • Page caching
  • Database caching
  • CSS/JS/HTML minification
  • Compress pages with gzip
  • reCAPTCHA on comment and login forms
  • Move the login page
  • Image compression

It does this by utilizing a variety of existing plugins, such as W3 Total Cache. However, the W3 Total Cache plugin has been modified, and while you have access to all the settings should you wish to customize the settings, it comes fully installed and configured by default to work with A2 Hosting.

If you want to review the W3 Total Cache Settings, please check out our more in-depth article here. If your website rarely changes you may want to increase the time for which pages are cached. That being said, we will also use server-side caching for even faster response times later in this tutorial.

We also take a brief look at some of the W3 Total Cache Settings implemented by A2 Optimized in #Step 7 below, and discuss one or two changes you may wish to make.

#Step 5 — Setup and Configure CloudFlare

By now you should have a working WordPress installation that has some basic optimizations via the A2 Optimized. We now want to configure CloudFlare to add a Content Delivery Network and other performance optimizations. Here is a summary of the features we plan to add:

  • Globally load balanced content delivery network (CDN)
  • Automatic static content caching
  • Always Online™
  • Rocket Loader
  • Mirage Image optimization (CloudFlare Plus Only)
  • Polish Image optimization (CloudFlare Plus Only)
  • Mobile optimization (CloudFlare Plus Only)
  • SPDY (CloudFlare Plus only)
  • Railgun Optimizer (Up To 143% Faster HTML Load Times!)

It should be noted that CloudFlare Plus is a limited version of the paid CloudFlare Pro plan that you can purchase directly from CloudFlare. It contains no Web Application Firewall (WAF). That being said, it costs $8 per month instead of $20 per month. We would recommend signing up with CloudFlare directly and implementing the WAF if you have the budget to do so. To enable CloudFlare, click the CloudFlare icon in the cPanel control panel as shown below:

CloudflareOn the next screen, you will need to sign up for a CloudFlare account. After doing so, you will be presented with a choice:

  • Provision Domain with CNAME Setup — A CNAME setup doesn't need any change of your DNS provider. It simply requires pointing any subdomain to CloudFlare using a CNAME record. As such this is the simpler method to use and allows you to upgrade to CloudFlare Plus via A2 Hosting at $8 per month.
  • Provision Domain with Full Zone Setup — Full DNS setup requires an update of the existing DNS provider to Cloudflare's DNS, where CloudFlare becomes your authoritative DNS. Any upgrades must be made with CloudFlare directly. As a result, the cheaper $8 per month more limited upgrade is not available.

For the purpose of this tutorial, we will be using the CNAME Setup option. As such select that option as shown below:

cname cloudflareOnce selected your domain will be configured to work with CloudFlare. This should only take around 30 seconds or so. You will then see the following screen showing that it has been configured correctly:

cpanel setup complete

You will see that CloudFlare has been turned on for both the www and non-www version of your domain.

The next stage is to fully configure CloudFlare to maximize your website's performance by activating some of the more advanced features. At the top of the page, you will see the "Home" and "Settings" links that take you through to some settings. While you find it convenient to manage CloudFlare via the A2 Hosting Control Panel you should be aware that the full range of settings is not available via these pages.

To fully and properly configure CloudFlare, please log into the account you made early at CloudFlare.com.

Configuring CloudFlare

You will see at the top of the screen the following menu items:

Cloudflare settings menuWe will go through each of these in turn, but you should note that only a few of the sections need to be modified for this tutorial:

Overview:

This screen provides details of the status of your CloudFlare account. If you are working on your WordPress theme, some changes may not show up because of the caching. To resolve this, you may wish to turn on development mode in the "Quick Actions" section.

Analytics:

On the Free plan, your Analytics will update every 24 hours. The analytics graphs are more detailed when viewed directly via CloudFlare, although you can see some basic statistics via the A2 Hosting control panel.

DNS:

If you have setup CloudFlare using a CNAME, then you cannot modify any DNS settings here.

Crypto:

There are various options for the SSL configuration:

  • Flexible — This only encrypts traffic between CloudFlare and your Visitor, but not CloudFlare and your server. This is not suitable for those encrypting confidential information.
  • Full SSL — This encrypts traffic between CloudFlare and your Visitor, AND CloudFlare and your server. It doesn't check the validity of the SSL certificate installed on your Server.
  • Full SSL (strict) — This is similar to the Full SSL, but it does check for the validity of the SSL on your server. This is the best option.

Because we have already arranged for a Let's Encrypt certificate to be installed on your server you can select Full (strict):

cloudflare full strict ssl

There are a couple of other settings you should consider:

  • Authenticated Origin Pulls — This ensures any web requests to your server come via CloudFlare. For a standard WordPress installation, this should be enabled. You can read more about it here.
  • TLS 1.3 — This provides additional security and performance. It should be enabled by default to "Enabled+0RTT" which is good.
  • Automatic HTTPS Rewrites — Sometimes when implementing HTTPS on a website you may receive "Mixed Content" warnings. This can help overcome those by automatically rewriting URLS to use HTTPS. We recommend turning this on.

We also recommend adding a Page Rule (we will cover this shortly) to ensure the webpage is always served using HTTPS. Please see the Page Rules section below for instructions.

Firewall:

The default settings can be used.

  • Security Level & Challenge Passage — The Security level can be left at "Medium" which only "Challenges both moderate threat visitors and the most threatening visitors." The Challenge period is set to 30 minutes.
  • Web Application Firewall — You can set IP Blocks should you need under this section, but unless you sign up with CloudFlare directly on a Paid Plan you will not have access to the Web Application Firewall. If you are serious about security, you should do this.
  • Browser Integrity Check — Keep the Browser Integrity Check "On," as this "looks for requests with HTTP headers commonly used by spammers, bots, and crawlers such as requests with a missing or nonstandard user agent." You can read more about it here.

Speed

This is one of the sections where you have more options to configure when signing into CloudFlare directly, rather than setting it via the A2 Hosting control panel.

As a word of warning, some of the options in this section such as "Auto Minify" JavaScript and Rocket Loader may be incompatible with your WordPress theme. Our experience is that Rocket Loader, for instance, will not work in around 25-40 percent of cases without some modification of the theme files to exclude specific JavaScript files from being optimized. As such you should test all the functionality of your website after implementation and if you find issues then turning off this feature should resolve the problem.

Let's go through each of the settings in turn:

  • Auto Minify — This removes unnecessary characters from your source code (like whitespace, comments, etc.) without changing its functionality to reduce the size of the webpage, and thus increasing the load time. You should select all of these options:
    cloudflare auto-minify
  • Polish — You will need the "Plus Plan" if A2 Hosting is managing the CloudFlare account, or "Pro Plan" if you signed up directly with CloudFlare. This setting optimizes the images on your domain, and can significantly speed up the load time of your website. Large images are also converted to Progressive Images, which you can read more about here.
  • Railgun — This accelerates and secures delivery of dynamic content, through compression and WAN network optimization of communication between CloudFlare data centers and your web server, speeding up requests that cannot be cached (i.e. HTML).

    Editor's Note: We had some issues initially with Railgun working properly with HTTPS. If you find that the website is not loading correctly (i.e. mixed content, or some CSS or js files not loading) when Railgun is enabled, please leave a note in the comment. Then see my comments about this in #Step 6 below.

    You should turn on Railgun:
    railgunIt does this by:
    • Compressing content by tracking differences between page versions (down to the byte), only sending the parts that have changed.
    • Maintaining a single persistent connection for multiple simultaneous requests, eliminating network connection latency.
    • Caching dynamic content that changes frequently or is personalized.
  • Enable Accelerated Mobile Links — This allows mobile users to open outgoing AMP links from your website in AMP. You can read more about AMP here. While AMP pages are faster, they can be very basic, especially if using the default styling from a WordPress Plugin. As such you will need to balance usability of functionality vs. speed. Unless you know what you are doing, we suggest leaving this turned off.
  • Mirage — This is another "Plus Plan" feature and will improve load time for images on slow mobile network connections by using image virtualizing (uses low-resolution placeholders while the page is loading) and request streamlining (combines multiple requests for images into a single request). This is a great feature that we use ourselves.
  • Rocket Loader — This is one of the best things about CloudFlare. It improves load times for pages that include JavaScript by combining JavaScript files including third-party resources and asynchronously loads them to prevent them from blocking the page from loading until they, themselves are loaded. 

    There are various settings for Rocket Loader including "Off," "Automatic" and "Manual." You should first try "Automatic" and test the results. It is quite common for Rocket Loader to break some of the functionality of your website, so it will not work for everyone. If it does not work, you can speak to your developer to have some files excluded from being bundled and served via the Rocket Loader on the "Manual Settings."

    In summary, set Rocket Loader to "Automatic" and test:
    Rocket Loader A2 Hosting
  • Mobile Redirect — If you use a separate mobile version of your website rather than a responsive design that adapts to all screen sizes then you can configure it here.

Caching

  • Purge Cache — This is where you manage the cache (stored copies) files served by CloudFlare. You can "Purge Individual Files" or "Purge Everything" if you have changed any files or pages that may have been previously cached.
  • Caching Level — You can set whether CloudFlare should cache query strings (i.e. the part of the URL after "?" (if any)). If you have a simple WordPress website then "Standard" will be most suitable:
    Caching Level
  • Browser Cache Expiration — This instructs browsers to store copies of your static files for a set period, significantly speeding up subsequent page loads, or when the user revisits the website. We would recommend setting a fairly long cache time of 8 days. However, you could easily extend this for longer. Eight days, though, is a good middle ground:
    Browser cache
  • Always Online — This should be turned on by default. This will serve your most popular pages from cache even if your server goes down. We recommend keeping this turned on.

Page Rules

Free accounts only have three page rules available. If you signed up for CloudFlare directly, you could add additional page rules for a small fee, or you can upgrade to a paid plan to receive more page rules.

You can do some very powerful things with Page Rules, although that it not within the scope of this tutorial.

As we implemented HTTPS earlier in this tutorial, we will now configure a page rule to ensure all visitors use the HTTPS URL. In essence, we will be redirecting all traffic to the HTTPS version of your website

To do this, click on the blue "Create Page Rule" button, and configure it as follows (replacing the domain shown with your own):

page rules

Network

You do not need to change any settings here. The HTTP/2 element is the most important, and that is turned on by default.

Traffic

This will reveal any Firewall events triggered by your IP Firewall. If you have a Premium Plan, it will also show events triggered by your Web Application Firewall.

Customize

If you have a premium plan, you can customize all your error pages here. 

Apps

This section allows you to install apps to work with your website easily. 

Scrape Shield

The default settings here are fine. Please note the following:

  • Email Address Obfuscation — This will hide your email address from bots and spammers, thus reducing the amount of spam emails you might receive.
  • Server-side Excludes — This allows you to wrap certain parts of your website text in a special code that will hide it from suspicious visitors. This may be useful for contact details etc.
  • Hotlink Protection — You should keep this turned off, as it will prevent your images displaying on sites such as Google Images, or Pinterest.

#Step 6 — Configure WordPress via A2 Optimized Admin

To access the A2 Optimize control panel scroll down the control panel, and click on the "A2 Optimized" icon under the Advanced section:

A2 optimized

On the next screen, you will be introduced to the A2 Optimized control panel, where you can choose the installation you wish to optimized, which in our case is called "My Blog":

a2 optimizedThere are a couple of tasks we need to do here:

Enable TurboCache

On the screenshot above you will see a green "Enable" button. Click this to enable TurboCache. You will then see the following options:

turbocacheYou should make the following settings:

  • Time To Live — This is the time that you wish to cache your pages for. The automatic W3 Total Cache Page Cache settings allow for one hour, so for this tutorial we will duplicate that and set it to one hour. However, we do discuss changing the cache time settings for both W3 Total Cache and TurboCache in #Step 7 below.
  • Do Not Cache URLS — These are URLS you do not wish to Cache. The default settings should suffice for a standard WordPress installation.
  • Do Not Cache Cookies — These are pages where specific cookies are set. The default settings should suffice for a standard WordPress installation.

One you have configured your settings, click the green "Save Settings" button.

Configure Memcached

W3 Total Cache can utilize a memory-based caching called Memcached for the Database Cache and Object Cache. A2 Optimized will set Memcached and change your W3 Total Cache settings with a single click.

To do this:

  • Click your installed application on the left-hand side of the screen. In our example this is "My Blog," but it will be what you called your website.
  • The status of your settings should appear, with "Optimized" and "TurboCache" showing green (You may need to refresh the screen for TurboCache to show green, as you set this in the last step), and "Memcached" showing Red. Click Configure next to Memcached as shown below:
    Configure memcached
  • On the next screen click the green "Enable" button. A pop-up box should appear stating "Enabling Memcached for WordPress will automatically install and/or configure W3 Total Cache". Click OK.
    enable memcached
  • You should now see some stats including hit rate and memory used. You can clear the cached from within the W3 Total Cache admin. area in your WordPress install.

#Step 7 — Consider Adjusting Cache Times in W3 Total Cache & TurboCache

The automatic settings created by A2 Optimize cache your website pages for one hour only. You may find visitors are not served cached pages if you do not get much traffic, and thus negating the effect of caching. If your website does not undergo many changes each day, then you may wish to extend this to 8 hours or even 24 hours. 

To do this:

  • Log into your WordPress administration dashboard
  • Click the Performance tab in the left-hand menu and choose Browser Cache. Scroll down the page to the section HTML & XML which looks like the following:
    Browser cache
  • Change the "Expires header lifetime" to set the page cache time in W3 Total Cache. 
    • 8 hours = 28,800 seconds
    • 24 hours = 86,400 seconds.

You may wish to change the TurboCache in the A2 Hosting Control panel to match, or even have it slightly less than the Page Cache settings in W3 Total Cache. The choice is yours, and you may wish to play around with it for a few days. Ultimately, it depends on how much your content changes as to what you should choose. If you require some advice, please feel free to ask in the comments.

To give you an example, we cache posts here for a week, with some older posts even cached for a month. This is particularly effective when using Disqus as your commenting system, as the comments are then not cached.

#Step 8 — Configure PHP 7 and OpCache

The default configuration for your hosting account uses PHP 5.5. PHP 7 is significantly faster, as you can see from these benchmarks, and as such the next step is to activate PHP 7 from within the cPanel control panel. To do this, click the "Select PHP Version" icon in your control panel as shown below:
Select PHPOn the next screen select PHP 7.0 and click "Set as current":

php 7

OpCache is enabled by default. OPcache is a core component built into PHP that improves PHP performance by storing precompiled script bytecode in shared memory, thereby removing the need for PHP to load and parse scripts on each request.

#Step 9 — Check the results

The final step is to check the results. A default installation configured as above loads as follows:

speed testFor further information on how to test your website speed, check our detailed guide.

Related tags
Exclusive: Get 51% off A2 Hosting today.
Limited Time offer for this amazing hosting provider.
Exclusive: Get 51% off A2 Hosting today.