An Obsession With Site Speed

About two months ago I was hired on as the lead developer for MyGreenFills.com. We are an amazing company creating quality, eco-friendly, subscription based household goods including: laundry soaps and detergents, softeners etc. My first project coming in was to evaluate our website and find solutions to page speed issues.

Here’s the site set up we were running as a reference:

  • WordPress
  • Thrive Themes
  • Thrive Page Builder
  • Yotpo Reviews Embed
  • Typeform Embeds
  • Wistia Embeds
  • Lots and Lots of tracking scripts

To start any site speed project like this, I start by running a report through GTmetrix and evaluate from there. The first and most common things I look for are page load times, optimizing images, loading js in the footer when possible, caching, minifying and amount of requests a page makes.

In our case, we were scoring an F with a page load time of 8.5 seconds, page size of 3.95mb and over 130 requests. In my view these numbers were way to high. So now comes the fun part, how do I fix these.

Step One

Our first step was to evaluate our theme. I love Thrive Themes, don’t get me wrong but what most people don’t realize is the overhead that these huge themes and page builders come with. So, the decision was made to build a custom theme that was lean and mean.

Step Two

How do we fix all the requests from embed codes? Since loading in iframes brings in all of that pages requests, adding to the page load, we needed to rethink our approach.

Yotpo is a great solution for housing customer reviews but embedding an iframe was not the way to go. Luckily, Yotpo has a fairly robust REST API. So instead of embedding the reviews, we made an API, processed it with some PHP, and sprinkled some HTML and CSS to make things look nice.

To fix the Typeform embed issue, we had to look at the experience. In our case, we always allowed Typeform to open full screen. If we allowed our forms to open in a new window, customers would have the same experience but we no longer had to load the forms. So we linked to the forms instead of embedding them.

To solve our Wistia video embed issues we chose to use the Wistia pop ups as opposed to the embed codes. This solution reduced our page load and give customers a pop video experience versus viewing a small video in a box.

Tracking scripts are tough issue sometimes. One that is not easily solved, in most cases you cannot cache these scripts, so you will take a hit on your page score but it is minimal. Some scripts we were able to remove and others had to stay. Such is life.

Step Three

Image optimization is huge when it come to page speed. If your not compressing your images you need to be. If your not keeping tabs on your image sizes a page size can grow very quickly. On our site we had a header image that was 3mb on every page. Converting it to a jpg and optimizing took it down to under 100kb. All theme images were then optimized ensuring our theme base was as fast as possible. To compress our images in the media library I enlisted TinyPNG. I created an account, got my api key and downloaded the plugin. TinyPNG allow you to choose which image sizes get crunched, so i chose my size and let it run through the library. Now, anytime we upload an image, they get compressed, stored and served in the smallest way possible.

Step Four – The Geek Stuff

Now it was time to get on the geek side. We already were using Cloudflare but it was never configured in a way that was optimal. I updated the settings to combine all of our js scripts and then serve them as one script. Now we have js file to download. I set the same for our css styles. I am also allowing our HTML to be minified also. I also configured our server caching to be better also. The next step was to use PHP7 instead of PHP5.6. This is something you have to ask your host about but our host gives us the option of which PHP version to run. PHP7 is significantly faster than previous versions, so if you have the ability to use it, I would.

Random Stuff

The new theme was built on Bootstrap 3, but we used the old design as a base for the build, trying to recreate closely but not completely. Now that we didn’t have Thrive’s page builder I needed to create a new one so our marketing team could quickly build posts, pages and products quickly. Using Advanced Custom Fields PRO, I built a new page builder with styles for each piece so there was uniformity across the website.

We are not really playing the organic search game but realized it was still an important piece. We added YOAST SEO and built out nice titles and meta descriptions for each page. I used the SCHEMA plugin to add microdata to pages, posts and build out business information. We also added markup for our products and reviews. This important so Google and other search engines can know what your products are and details about them.

Wrapping up

I’m sure there is more that was done than this but I was able to bring our GTmetrix score from an F to an A. Dropping page load times by two thirds and page request by more than that.

I have a huge passion for building fast sites because faster sites lead to more conversions. If you also have the passion for a faster WordPress site contact me. I would love to give your customers the best WP experience possible.