1-877-837-1267

WordPress Optimization: The Definitive Guide 2020

by Raymond
Updated May 7, 2020

This is complete guide to WordPress optimization.

In this in-depth guide you will learn:

  • Myths surrounding website speed optimization
  • WordPress speed optimization best practices

So if you're ready to dive "all-in" with optimizing your site, this guide is for you.

Let's dive right in.

WordPress Speed Optimization Myth

1. Chasing the Perfect Webpagetest/GTMetrix Score

I constantly see many questions regarding how to improve your score on GTMetrix, but this should not be your primary concern. Instead, you should focus on the user experience on your website rather than chasing rainbows of the perfect score.

After years of learning and optimizing websites, these are the few important keypoints of a good website:

  • TTFB (Time to First Byte)
  • First Contentful Paint

TTFB (Time to First Byte)

What is TTFB? In layman terms, TTFB means how fast does your webserver respond whenever a request is made to your website.

Generally, a good TTFB benchmark is around 200-300ms. That is why it's always recommended to host your server as close to your target audience.

For example, AutoVacBot.com is hosted in Singapore and has a TTFB of 231ms. Imagine if our server is hosted in Dallas, USA or in Netherlands. The TTFB will definitely be higher as most of our customers are from Malaysia and Singapore.

User experience will fall, and we will definitely lose conversions (Sales!)

First Contentful Paint

Do note that First Paint and First Contentful Paint are very different. By definition on GTMetrix:

First Paint: triggered when a render – any render – is detected in the browser. This could be something as subtle and uninformative as a change in background colour.

First Contentful Paint: triggered when any content is painted – i.e. something defined in the DOM (Document Object Model). This could be text, an image or canvas render.

Therefore, a more accurate benchmark to use would be the first contentful paint.

What about Fully Loaded Time?

Fully loaded time is important but not as significant as the first two I mentioned.

First of all, you need to check what is your time for Document Complete.
For example:

https://webpagetest.org/result/191007_G6_08819ee45e80b0dde96be6a16a7013c8/

My Document Complete time is 2.638s
But my Fully Loaded time is 14.584s

Based on the test above, it means that my webpage is usable in 2.638s and the remaining requests are made from tracking scripts such as Facebook, Google Adwords, Hotjar, Drift etc (3rd party services that i use).

All of the requests are made asynchronously (loads in the background without interfering with user on the frontend).

2. High Number of Plugins == SLOW

If you search for wordpress optimization tips, MOST of them will probably suggest that you cut down on the number of plugins. While this is true to a certain extent, but it is NOT ENTIRELY TRUE.

The main reason why it's always suggested is because most end users like us know nuts about development/programming and usually resort to shortcuts by installing plugins. You can literally find any features/functions you want in the wordpress repository. Just install and voila! Problem solved!

But not all plugins are designed with speed in mind. Most of them just throw out a bunch of features to get plugins installed and hopefully you will upgrade into a paid customer or through ad revenue. They don't care about your website performance.

The #2 reason would be to reduce the potential of plugin conflicts and maintenance. When you use many plugins, you put yourself in a higher risk of conflicts.

For example, i used AeroCheckout to customize my Checkout experience to mimic Shopify Checkout Experience. After setting up my checkout page, it all looks good and I thought it's good to go. But after 2 days, I did not receive any orders through Credit Card, and I had to test checkout to see what is the issue.

Little did I know that there's a conflict with the Braintree plugin I used for accepting credit card payments. I had to get in touch with the developer and thankfully it was sorted out within hours.

But if you are able to choose a good and reputable plugin developer, there's no limit on how many plugins you could or should run on your website.

On our site, we are currently using about 62 plugins, and I think the speed is still acceptable, above average.

3. Reduce the number of requests

You should always reduce the number of requests made from within your website that affects the user experience on your website.

Requests that does not affect user experience should be loaded in the background asynchronously. Such requests will be mainly tracking scripts such as analytics, retargeting cookies, enrichment data and such.

Back to my example above, AutoVac Bot has a total of 215 request fully loaded. I could cut down all of my background tracking scripts and easily reduce 120 requests or so. But would I? I wouldn't as the requests are not interfering with my users and I value the information I obtained from such tracking for marketing purposes.

WordPress Optimization Fundamentals

Building a website with strong fundamentals enables the business owner to scale faster and easier in the future.

Think of it like building a high rise tower from the beginning. A strong foundation (ie the piling) enables the tower to withstand medium catastrophe.

Below I will list down a few fundamentals that I'm currently practicing.

Good Server and Solid Server Stack

I can't stress that many people overlook this very basic fundamental. Server. Your server is everything. It's like your storefront. A good server should be located as close to your target audience and have above average performance.

For starters, I would recommend getting Linode, Vultr, or Digital Ocean. The most basic plan starts from $5/mo. Vultr has a plan starting from $2.50/mo thou.

And for the server stack, you should always choose LEMP stack over LAMP stack.

LEMP: Linux-EngineX-MySQL-PHP
LAMP: Linux-Apache-MySQL-PHP

Most shared hosting that provides CPanel is running on the LAMP stack which is significantly slower.

For LEMP Stack, there's only a handful of control panel to choose from.

  • Gridpane --> My preferred one
  • Runcloud
  • Easyengine (Free but requires CMD knowledge)
  • SpinupWP

I came from Easyengine, but as I'm not that techie, I find myself constantly messing with CMD and find it to be a hassle. I later on moved to Gridpane as they pride themselves to be solely focusing on the WordPress platform only compared to others like Runcloud which you can use it to install Joomla etc.

Only downside with any of these LEMP control panel is that you don't have a mail sending capability in the box. You have to run your mailboxes using other 3rd party services like Gsuite, Microsoft Office, MXRoute etc.

With these panels, it will be very easy to change PHP versions, enable/disable SSL/caching/WAF. Staging sites are included as well. Easy peasy.

One thing the paid control panel excels over EasyEngine I would say is the centralize management of servers. With EasyEngine, I had to install EE on every single server that I deploy. But with Gridpane, I only need a single dashboard to view all of my servers and sites.

Ultimately, I would still prefer Gridpane anytime of the day due to their superb support thus far.

Managed Hosting

For those who wants more hands off approach, managed hosting is the way to go.

Managed hosting is suitable for those who doesn't want to get dirty with server management. A good managed hosting provides you with 247 support, 1-click staging sites, and the server is all preconfigured.

If you face any issues, simply just raise a ticket and a support team would usually resolve for you ASAP.

For beginners, Cloudways is a pretty good start but can get quite expensive once you start growing.

Other notable managed hosting:

  • Kinsta
  • Pagely
  • Pantheon

Optimized Bloatfree Themes/Plugins

Remember earlier on I mentioned that website development is like building a tower with good foundation?

This is it.

There are thousands and thousands of themes and plugins available out there. Codecanyon, Themeforest,

But you have to handpick each theme and plugins that you use carefully.

Example of Bloated Themes:

  • AVADA
  • The7, BeTheme
  • Jupiter X Theme

Example of Clean Themes:

  • GeneratePress
  • Genesis Framework
  • Astra
  • OceanWP

*note that the list above are non exhaustive. It's just a list of names that I remember.

Basically a clean and fast theme comes with minimal features out of the box, so that you ONLY ADD features that you need.

Feature-packed themes never care about it and they load every single library for you. It may look awesome initially, as there's so little for you to do, but at some point later, you will regret the decision. *only if your site grows*

Example of bloated Plugins:

  • SliderRevolution
  • Jetpack
  • Any security plugins (Wordfence, Sucuri, iThemes, etc)
  • Ubermenu
  • Updraftplus
  • Elementor/Divi
  • WPML
  • Really Simple SSL

Example of clean coded plugins:

  • Oxygen Builder
  • Advanced Custom Fields
  • Gutenberg
  • Shortpixel Image Optimizer
  • All in One WordPress Migration
  • Polylang
  • Multilingualpress

Security starts from the first layer which is CDN and server. Your WordPress site should not require any "so-called" security plugins if you did your first homework in Step 1

As I'm using Gridpane, GP has configured all the necessary firewall rules the moment I deploy the server. If i wanted further security, I could turn on 6G Firewall options within GP.

If there's too many brute force attempt on your WP-login, you can follow this guide on how to use Cloudflare Firewall rules to block attacks.

As long as you have done this 2, you should not be needing any security plugins. FYI, you cannot and never will be able to defend every single attack tried on you. So there is no point to install every single security plugins or being too paranoid about it.

Combining and Minification of CSS/JS Assets

With the introduction of HTTP2, combining and minification of css/js assets has become obsolete. There will be no benefits or improvement using this method anymore. In fact it causes way more problems every time you add or remove plugins as you would have to rebuild the combine css and js files.

Image Optimization

Unless you are running an art/photo gallery, anything that requires images to be in high-resolution, all images on your site should be optimized.

It's important for you to know that there is 2 ways to optimize your images.

  • Lossy Compression
  • Lossless Compression

Lossy compression reduces the image size significantly but if done too much, you will notice quality degradation or images being pixelated.

Lossless compression on the other hand, reduces the image size lesser (when compared relatively to lossy compression) but the image quality is pretty much retained.

You have to experiment and decide which compression method you want to use for your site.
And the best image optimization plugin that I have used so far is Shortpixel.

I found an equally good image optimization service from OptiPic.io

Example:

Before Image Optimization
https://webpagetest.org/result/191105_P2_4e9a4a6d6f60e692bf0ab489176d08cd/

Content Delivery Network (CDN)

A content delivery network (CDN) is a system of distributed servers that deliver pages and other web content to a user, based on the geographic locations of the user, from the nearest server to the user.

Again, not all CDN provides the same equal performance. You can compare performance benchmarks of each CDN provider on CDNPerf.

The top CDN providers are:

  • Google CDN
  • Akamai CDN
  • Azure CDN
  • AWS Cloudfront

The CDN providers above are mostly paid plans, usually meant for enterprise customers.

The best CDN that comes with a free plan is definitely Cloudflare. The speed difference between Cloudflare and the other paid CDNs are around 2-5ms which I think is pretty reasonable.

Caching

Just to be clear. caching should be the last thing you do after every other optimization is done. If your site is slow from the beginning, utilizing caching will yes improve your site performance but ultimately it's just a band-aid solution. Your foundation is wrong, you're not fixing the root issue of your slow website speed, and I tell you, your site will not go far.

BUT, if you have taken care of all other optimization aspects mentioned above, you will definitely benefit much from the usage of caching.

There are 2 types of caching:

  1. Server Level Caching
  2. Caching via 3rd Party Plugins

Server Level Caching

Server level caching basically means that your hosting provider or panel has already done the caching for you. In my use case, Gridpane has already provided me with Object Cache and also Page Cache.

I have further caching done at the CDN layer as well.

What this means is that I do not need to install any caching plugins on my site at all.

But I do have Nginx Helper and Redis Object Cache plugin installed to flush the cache from the dashboard every now and then.

So what if your hosting provider doesn't provide you with the necessary caching feature?

Actually I would recommend you to change hosting provider. But if you insist to stick with your provider....

You will need...

Caching via 3rd Party Plugins

Based on my experience, below are the few caching plugins you can use:

  • Swift Performance (i never had good results from it but others swear by it)
  • WP-Rocket (pretty solid caching plugin)
  • W3 Total Cache

Importance of Caching:

Without caching: https://webpagetest.org/result/191110_ZP_6269c50fd1360f38798509f2f75975bc/
With caching on: https://webpagetest.org/result/191110_XY_9ba7e1820ca287cc89b2580bb372f683/

Lazy Loading

Personally I find lazy loading unnecessary. If your site is fast enough, there shouldn't be any need for lazy loading.

Disable Scripts and Styles on Pages

This is a method that I constantly use to increase my page speed.

The most common performance issues are caused by plugins. Why?
Because most plugin tries to load scripts and/or styles on every single page when you don't exactly need them to be loaded on every page.

For example, you don't need a contact form styles or scripts to run on your homepage. Or you don't even need a payment plugin assets running on your homepage.

The assets from the contact form plugin should run only on your contact page. And same applies to the assets from the payment plugin. The assets should be run at the cart or checkout page only.

So how do we disable scripts and/or styles from specific pages? There are a few plugins that can help you with this

  • Asset Cleanup Pro
  • Perfmatters
  • Swift Performance Pro
  • Plugin Organizer (free but messy)

Personally I'm using Perfmatters as I find the plugin most lightweight for my site and has the easiest UI for me to get started.

Disable Google Fonts (Use System Font!)

After disabling Google Fonts, add this into your CSS:

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
Before system font: https://webpagetest.org/result/191110_XY_9ba7e1820ca287cc89b2580bb372f683/
After system font: https://webpagetest.org/result/191110_1Q_60367dd076bbb275175b1633777250f8/

How to Check Your Site for Performance Issues

After you have build your WordPress site, how do you check your site performance? ie: any plugin or scripts that are causing slow queries or bottlenecks?

There is 3 ways that I know of:

  1. Query Monitor plugin (free)
  2. WP-CLI
  3. New Relic (paid)

Query Monitor

After installing and activating query monitor, just navigate to any page on your site, and it should be able to tell you if there's any errors or plugins that are causing issues.

You could also enabled a cookie, so that you can monitor the page performance without being logged in.

WP-CLI

There are few commands that you can use to identify slow plugins and their response time.

New Relic

Premium server monitoring. I dont have experience with it, so I cant comment much about it.

What Should You Do With Slow Plugins?

Okay, now that you have done all the steps above, what happens if you notice the plugins that you are using are causing the slowness? There are few ways to approach this issue.

1. Contact Developer of the Plugin/Theme

This should be the first step. You contact the developer of the said plugin or theme either via email or the support forum on WordPress.org and let them know the issues that you have with it. ie: slow queries, etc.

Provide as much details as you could, such as your server configuration etc. Sometimes you might need to provide them with access to your site. Give them a chance to troubleshoot, sometimes it could be a simple misconfiguration.

If the issue is from their end, most likely you should get an update from them soon.

But what if after all the troubleshooting and the developer doesn't do anything to fix the performance issue?

2. Replace the plugin with alternative

If the developer doesn't take any action to rectify the performance issues, this is the path that I usually take. I would find an alternative plugin, try it, and if it suits me, I will then deactivate and delete the problem plugin.

BUT the plugin I'm using is the most suitable one I found. How?

Then we have this as last resort...

3. Hire a Developer to fix it

You could always hire a developer and then fix whatever error code from the plugin, or optimize the table used by the table.

But generally, this is not the recommended path I would take, as you expect constant updates from plugin/theme developer.

Tools to Check Your Website Performance

Conclusion

In the end, please remember that any score or results you get from GTMetrix or WebpageTest is just a score. It's a good reference for you to identify if there's any issues with your site or not.

How great is your score in GTMetrix or how great is your design does not matter at all.

What matters most is that your site converts. Nothing else matters if your super AAAA fast site doesn't convert at all.

shares
No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

RAYMOND SIM

Next-level SEO training and link building strategies

Connect

twitterfacebookyoutube-playinstagramwhatsapp linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram