How to build a WordPress Site for Speed? A case study.

How to build a WordPress Site for Speed? A case study.

August 7, 2018 By Jake

How do I build a WordPress site to be fast?

We have the technology.

There are all types of tools and technologies available to web developers today.  These include and are not limited to:

  • Efficient and flexible server operating systems in both LAMP and LEMP stacks. Variations of the LAMP stack.
  • PHP-FM and PHP version 7.x
  • HTTP/2
  • ModPagespeed
  • Memcache, Varnish, Redis
  • CDNs
  • Cloud Hosting
  • WordPress Theme Frameworks

So when you are building that new website, plan and decide what technologies you are going to use or plan to integrate at a later time.

How does server-side optimization different from client-side optimization?

With client-side, the optimizations happen in the surfer’s browser.  With server-side, the code is optimized before it is sent to the surfer’s browser. When it comes to a choice of which to use, server-side wins each time.  This is where you make your site load blazing fast.

If you are building a new WordPress site, one of your top objectives should be for proper optimization of the site from the beginning.

So these optimizations can only be done to new WordPress sites?

Of course not, but that depends on the server you are currently using and what type of hosting package you have.

When I say “new”, I mean a newly built WordPress site using newer technologies.  If it is done correctly, you should be able to easily port your existing site data to the new site.

What type of hosting do I need to make my WordPress site load fast?

Cheap hosting is just that, cheap hosting.  An important part of optimizing for speed is the host and hosting package you are using.

Plan to spend at least $25 a month for hosting in the beginning.  Some will start to argue with me here, but let them.  If you decide to use a cheap package and spend only $5 per month (usually the price increases after the first contract period is up) you may end up spending more than $25 a month.

You see people on shared accounts spending $45 to $200 to have their sites optimized for speed, to find out it was a waste of money and has to be re-done and re-configured about every 6 months.

Others will purchase premium or pro optimization plugins that can cost upward to $75-$100 a year. Plugins used to optimize sites will never deliver the speed that server-side optimizations will, especially to the first-time visitor.

Beware of those that tell you it will. More on this here.  When I talk fast load times, I am referring to first-time visitors. Where the website makes the first impression on the user. This is when we convert the user to a customer.

Add to that the revenue lost due to a slow loading site and you are spending more than $25 a month in total cost on a shared server.

Personally, I love Google Cloud. They offer a $300 credit that basically gives you your first year of hosting free. But there is no free 24/7 support, you pay for phone support.

If you need that phone support, there are resellers of Google Cloud that do offer it, but you will pay more.

You will need at least a VPS server, and one with adequate services and 24/7 support will also run you $25 a month.

THE CASE STUDY – CaliforniaFlyer.com

Jen, a customer I first did support for when I had a Joomla agency (over 9 years ago), contacted me about building a new WordPress site for her aviation firm.

Jen is the type of customer developers dream about. She understands the industry need for speed and new technology.  She is open to suggestions and willing to change.  She understands it less expensive in the long run to do it right the first time.

I explained to her that ProWeb.Agency had just written a WordPress theme based on the Timber/Twig framework.  That it was essentially a blank canvas to create clean, efficient, and flexible code. It is fast!

I informed her of Google’s special and the benefits of cloud hosting.  The go-ahead was authorized and the site was built.

The Hurdles

There is always some hurdles when developing a website, especially when trying to achieve blazing fast page load times.

The first was the home page. A parallax was chosen for the home page.  Some developers tell clients that parallax cannot be used on a mobile-first website. We did it and it added very little overhead.

The website also needed an Ad Rotation component.  These are usually installed via a plugin.  They are very resource intensive plugins and can add enough resource usage to add 2-4 seconds to a website.

The decision was made to write the Ad Rotation to the template, using custom post types and fields. This way the overhead would be minimal and use the same compiled javascript files and minified CSS as the rest of the site.

What server configurations do I use to get fast load times?

The server was built on the Google Cloud platform.  A virtual machine was built with 1.75G memory, 1 CPU, and a 20G Solid State Hard Drive.

As for the stack, Bitnami Lamp stack was used and the Bitnami WordPress module was installed. (Actually, 3 of them: 1 for the production site, 1 for the staging site, and the last one is for a future site.)

HTTP/2 is turned on in Apache, and ModPagedpeed is also.

The configuration is exactly the same as what was used in my 3 part article WordPressing the Cloud.

What optimizations do I use for my static assets when building a fast loading site?

It is important to optimize your static assets as building the website.  This will help keep the load times down to a minimum and negate the need for plugins to it for you.  This will keep the site lean and partially pre-optimized.

  • I use Laravel-Mix to combine and minify all of my Bootstrap CSS and javascript.
  • I properly enqueue the CSS files into the template’s functions.php file in the proper loading order.
  • I properly enqueue the javascript files and their dependencies to be loaded in the footer section (deferred) into the template’s functions.php file in the proper loading order.
  • I optimize the images before uploading them to media manager in WordPress.
  • I turn the free storage bucket that is included with the Google Cloud account to serve all of my static assets. This essentially makes it the CDN for the website.
  • I turn on gzip compression at the server level.
  • I set the proper headers on the assets to leverage the user’s browser cache at the server level.

What type of server-side cache do I use?

The important thing here is I use 2 caches on this site. The first is the built-in cache from Timber/Twig.  It is just set for 600 seconds (10) minutes.  This is enough time for the code to be analyzed by ModPagespeed, optimized, and then stored in the ModPagespeed cache to serve to the visitor’s browser.

The beauty here is that the Timber cache will rebuild an object’s cache if the data changes.  ModPagespeed detects the change and rebuilds just the part of the cache for the affected URLs.

As the site grows, adjustments can be made to the server to add Memcache, enable the Varnish cache, add load balancing, separate the MySQL server and run it separately, increase the resources instantly, and many more options the cloud offers.

How do I configure WordPress to use ModPagespeed with HTTP/2?

This has been one of the most time-consuming tasks in the development process, but I think we have it down now at ProWeb.Agency.  The final configuration of ModPagespeed depends on the final configuration of the serving of the static assets.

Certain filters are turned off in ModPagespeed because HTTP/2 does it better. Image sprites, combine CSS and combine javascript are turned off and are actually counterproductive to HTTP/2.

I do let ModPagespeed re-compress or optimize any images it can. But when debugging is turned on, I usually see the image was skipped because it is already optimized properly. On occasion, it does optimize an image.

Making sure I preload optimized images and minify the CSS and javascript before uploading to the server, saves ModPagespeed from doing the task and that saves resources.

I do let ModPagespeed defer javascript, prioritize javascript and CSS, and control the lazy load of images.  So essentially I let it control optimizing the above the fold area of the website.

This configuration, allows the site to be delivered to first-time visitors with blazing speed.  Putting the optimizations at the server level is the key.  As ModPagespeed continues to run it continues to optimize new and old assets at an object level. So the server cache is always there and being updated at an object level rather than using a plugin the rebuilds it all at once.

What were the final speed test results?

Test Results from Dev Tools in Chrome

Desktop first visit – Fully loaded 0.941 seconds
Perceived as fully loaded and functional to User 0.691 seconds

Desktop return visit – 0.554 seconds

Mobile 3G first visit – 5.27 seconds
Perceived as fully loaded and functional to User 4 seconds

Mobile 3G return visit – 1.07 seconds

Test Results from GTmetrix

Desktop 1st visit – 1.9 seconds


Mobile 1st visit – 3.5 seconds

Google Mobile Speed Test – 4 seconds

 

As you can see, the results can really vary.  This is why I rely on the Dev Tools in Google Chrome.  I want to know what is the perceived load time for the first-time user. This is what I have control over.

In this case, it is from 1 second on a desktop to 4 seconds on a mobile 3G network.  But load the site on your mobile device and give me your perceived load time, that is what really counts.