In This Article
Introduction
After several months of diving into WordPress optimization, I feel like there is a never-ending list of optimizations I can make to sites I manage. How is my time best spent and are there optimizations I can skip?
That is where the idea for this Turtle to Rabbit series of articles came from. Why not blog about optimization as I’m optimizing the blog? I’ll optimize in the order that makes the most sense to me; usually I will choose what I think will result in the next biggest improvement in performance. At the end I’ll compare the results of each optimization and will use this cost/benefit information for future website optimizations.
I hope this series of articles can help others, too. I’ll show how I identify each issue, walk through how I optimize, and then analyze the results. I am targeting this series towards beginners, but this can also act as an optimization checklist for more experienced users.
If you do follow along, you can start with any article. Each article stands alone and doesn’t rely on work from earlier in the series. I will callout any relationships between articles if they do arise.
What Am I Optimizing
I am optimizing this entire website, Sherbeck.com, but more specifically I am optimizing a sample Pretend Web Design company webpage. I built this webpage to showcase many of the common issues that slow down webpages.
This website is starting with no optimizations with the exception of Gzip compression enabled on my web host, HostGator. Most hosting providers should have compression enabled by default, but you can check with WhatsMyIP or just Google “is my site compressed” and follow one of the top results.
Starting Configuration
- Web host: HostGator (Texas or Utah datacenter)
- WordPress 5.5.1
- PHP 7.3
- Theme: Neve by ThemeIsle
- Plugins
- Akismet Anti-Spam by Automattic
- Duplicator by Snap Creek
- Elementor by Elementor.com
- Elementor Pro by Elementor.com
- Enable Media Replace by ShortPixel
- Head, Footer and Post Injections by Stefano Lissa
- Maintenance by WebFactory Ltd
- Neve Pro Addon by ThemeIsle
- Orbit Fox Companion by Themeisle
- Templates Patterns Collection by ThemeIsle
- UpdraftPlus – Backup/Restore by UpdraftPlus.Com, DavidAnderson
- WP Mail SMTP by WPForms
- Yoast SEO by Team Yoast
- A security plugin
How Will I Optimize
For each article in this series, I will usually choose the optimization that I think will have the biggest impact on data size and/or speed for mobile. In some cases I may choose an optimization in order to best see its effect on performance. The optimization may apply site-wide or just to the Pretend Web Design sample page.
Guidelines
My guidelines for each optimization solution are:
- Non-breaking with updates. The solution should not break or need modifications if there is an update to WordPress, a plugin, or the theme.
- Avoid adding a plugin. If I have the choice between installing a plugin or doing something else such as adding a few lines of code, I will choose the non-plugin route. This is to reduce risk; even the most professional & popular plugins have bugs.
- Little to no cost. Yeah I’m cheap, but there really are some great solutions out there provided for free. I do donate or upgrade to the paid version when possible.
Tools I'll Use
I will use several online tools to test, track, and analyze the performance of my site.
- GTmetrix – GTmetrix is the main tool I use for analyzing my website and collecting data. I find it overall easiest to use.
- WebPageTest – WebPageTest is for performance geeks. It provides a lot of great data and I will use it later on in this series.
Other popular performance tools are Pingdom and PageSpeed Insights.
Collecting Performance Metrics
Before and after implementing each optimization, I will collect performance metrics on page timings and data size of the Pretend Web Design sample page.
Using GTmetrix PRO, I will run the following tests hourly over 24 hours and use median values (all with the Chrome browser):
- Apple iPhone 6/6S/7/8 (simulated), LTE Mobile connection (15/10 Mbps, 100 ms latency), from Dallas, TX, USA
- Desktop, unthrottled connection, from Dallas, TX, USA
- Desktop, unthrottled connection, from London, UK
I will compare from article-to-article the following metrics, though this list is subject to change if interesting patterns emerge:
- Time to first byte (TTFB) – The time it takes to start receiving data from the web server.
- First contentful paint – The time it takes to see the first content on the page. It could be an image, text, or background.
- Fully loaded – The time it takes for the whole webpage to finish loading.
- Total page size – The total size of the webpage.
- Number of requests – The number of individual requests required to load the webpage.
Performance Goals
My goal is for Pretend Web Design to load reasonably fast on an iPhone as tested through GTmetrix. I would also like to see similar results worldwide – we will see if I can achieve that.
My specific performance goals for mobile are:
- First contentful paint in 1.0 second or less
- Fully loaded in 2.0 seconds or less
- Total page size 1 MB or less
Initial Performance
Before starting with the first optimization, I need to record the first set of performance numbers.
My test page fully loads 8.7 seconds slower on mobile than my target time and is 9.8 MB bigger than my target page size. There is a lot of room for improvement.
| Test | Time To First Byte | First Contentful Paint | Fully Loaded | Total Page Size | Requests |
|---|---|---|---|---|---|
| iPhone 7, Dallas | 2056 ms | 2797 ms | 10712 ms | 10.863 MB | 68 |
| Desktop, Dallas | 1726 ms | 2359 ms | 4581 ms | 12.735 MB | 70 |
| Desktop, London | 2143 ms | 3063 ms | 6288 ms | 12.736 MB | 70 |
Tests performed with GTmetrix on URL https://www.sherbeck.com/pretend-web-design/. Median values, collected hourly over 24 hours.
Series Articles
Part 1: Put Images on a Diet
In part 1 of the Turtle to Rabbit WordPress optimization series, I show how I optimize images to reduce my mobile data by 9 MB and decrease mobile load time by 4.6 seconds.
Part 2: Server-Side Caching
In part 2 of the Turtle to Rabbit WordPress optimization series, I show how adding a server-side caching plugin reduces my mobile load time by 1.6 seconds.
Part 3: Lazy Load YouTube
In part 3 of the Turtle to Rabbit WordPress optimization series, I show how to identify third-party bloat. I then step through lazy loading YouTube to reduce my mobile data by 551 KB.
Part 4: Reduce Fonts
In part 4 of the Turtle to Rabbit WordPress optimization series, I show how I reduce fonts to save my visitors 100 KB and 5 requests.
Part 5: Remove Unused Code
In part 5 of the Turtle to Rabbit WordPress optimization series, I show how I find and remove unused code and plugins.