Chapter
16

Super Charge Your WordPress Site Speed With Easy Website Optimization Tips


Is your WordPress site slow? Have you read numerous WordPress speed optimization articles, but wondering where to start or whether you can do it yourself?

We will demystify some of the WordPress speed optimization related concepts and provide you with simple but effective website optimization tips you can implement on your site.

Why is Website Speed Critical?

“2 seconds is the threshhold for ecommerce website acceptability. At Google, we aim for under half a second.” Maile Ohye, Google

A slow website can be very frustrating for a visitor and make them exit early. Apart from ruining the website experience for a visitor, speed is vital for ranking and SEO. WordPress speed optimization, therefore, can have a direct impact on your marketing goals.

Understanding Website Speed Optimization Terms

With the proliferation of website performance testing tools and the amount of data they generate, it can be hard to make sense of the website performance reports. We’ve explained the most commonly seen and used terms in the performance reports below.

  1. Page Speed is a measure of how fast a page loads. It can be measured using “page load time” or TTFB.
  2. Site Speed is a measure of the page speed of a few pages on the website.
  3. Page Load Time is the time taken for a page to load on your screen. It’s best measured as an average of 3 attempts.
  4. TTFB (Time to first byte) metric is a sign of the responsiveness of the server. It measures the time taken between the first request made by the browser and the first byte received by the browser from the server.
  5. FCP (First Contentful Paint) is a measure of time from when the page starts loading to when the first piece of content on the page loads.
  6. LCP (Largest Contentful Paint)  measures how long it takes a page to load from the point of view of an actual user.  LCP should occur within 2.5 seconds of when the page first starts loading.
  7. FID (First Input Delay) measures interactivity. When a user clicks on something, a button, how fast can the browser start to process that and produce a result? Pages should have an FID of less than 100 milliseconds to provide a good user experience.
  8. CLS (Cumulative Layout Shift) measures visual stability. It depicts how stable a page is as it loads. Pages should maintain a CLS of less than 0.1 to provide a good user experience.
    Note: LCP, FID and CLS are the part of Core Web Vitals. These are a set of specific factors that Google considers important in a webpage’s overall user experience.
  9. CDN (Content Delivery Network) is a network of servers that helps provides better performance and availability for your website by distributing the content spatially across the world.
  10. PageSpeed Score is a metric on a scale of 100 used by Google PageSpeed Insights tool to indicate the overall performance of a web page. A score of above 90 is considered good while a score between 50 and 90 is moderate and anything below 50 is tagged as slow.
  11. YSlow is a web page performance metric based on 34 rules that were created by a Yahoo team.
  12. Waterfall is a visual timeline representation of the page assets from the start till the entire page is loaded. It lets you see the order in which assets are loaded, identify waiting times between assets and if any particular asset is creating a bottleneck.
  13. Async and defer are attributes of <script> tag that ensures the script is executed asynchronously while the page is loading or defer the script until the entire page is loaded. This ensures the script execution does not cause additional wait times for assets on the page to load.
  14. Cache is a hardware or software component that stores frequently accessed data temporarily for faster retrieval when needed. There are different types of cache that impact the performance of a website.
    • Browser Cache is a caching mechanism present in all the modern browsers like Chrome, Firefox, IE etc. This cache works at the user (client) end. It stores a specific amount of data on your hard disk and when you load a recently visited page, it loads from the local source thereby speeding up the loading time. Using browser cache reduces the number of HTTP requests, boosting the page performance.
    • Proxy level Cache sits between the client (browser) and the server. It serves a larger set of users by caching page content. Some servers can send data to the proxy cache with a request to cache it. This reduces the load on the main server(s).
    • Server Cache refers to caching at the server-side. If the browser cache is managed at the user’s end, the server cache is fully managed at the server without the involvement of the user or the browser. There are different types of caching here as well for the database and PHP to optimize data retrieval or queries respectively.
  15. HTTP Requests is a web standard protocol used to send and receive data between the server and the client (browser). Each request made by the user through the browser is sent as an HTTP Request. Each request performs a sequence of operations to send and receive responses.
  16. Minification is the process of removing unnecessary data from the code (HTML, CSS and JS files). This is generally automated with the help of tools making the codebase smaller and more efficient for compilers to parse and render them.
  17. Gzip Compression is a file compression method used in Unix and applicable to all Linux based servers allowing them to serve smaller file sizes that can load faster.
  18. TTI (Time to Interactive) is a metric used by Google Lighthouse to measure the time taken for the website to be ready for user interaction. A page might show content, measured by FCP, but it could take longer to be useful to the user.
  19. Server Location is important for reducing the TTFB and improving the page load time of your website.
  20. Scripts are JavaScript files and functions that are executed to perform interactivity and tracking operations. You can host the library on your server (referred to as hosting it locally) or include a function which calls an external script, as in the case of most tracking scripts like Google Analytics.
  21. Render Blocking Render means converting code into viewable content. So if there is anything that is blocking the rendering process, it is considered to be render-blocking and highlighted in the performance report of most tools.

Is a WordPress Site Slow?

There is a common misconception that WordPress websites are slow. If you consider an average WordPress website, you will find that it runs slow. But this “average WordPress website” is also one that has been setup without performance in mind, so you will see large images, lots of plugins and a slow server response time.

WordPress by itself is not slow. However, it must be said that WordPress is also not the fastest system out of the box. It uses PHP at its core which can slow things down, relatively speaking. However, with the latest versions of WordPress and PHP, there has been a significant performance improvement as seen from this study by Kinsta.

WordPress 5.0 PHP benchmarks - Upgrading PHP is one of the website optimization tips
Source: Kinsta PHP Benchmarks

If you follow the WordPress speed optimization best practices, there is no reason why your marketing website should be slow.

A Case Study

A furnishings company launched their new website but got constant feedback that their website was too slow to load. They ran a check with the WordPress Checkup and identified that their images were too heavy and slowing down the site. Since the website was heavily dependent on images, they could not remove any images. Also over time, they would have to add more. Hence they optimised the images as a first step. After which they scanned through all their plugins and removed ones they could do without. These two fixes helped them improve their speed considerably.

Factors that Impact WordPress Performance

With a basic understanding of the website performance metrics, we can now look at some of the major factors that influence performance and what you can do about it.

  1. Hosting – We’ve spoken about hosting in detail in our first chapter because of how it impacts the security and performance of a website. Choose a host with a server closest to you or your audience. The host should also support the latest versions of PHP, support CDN integration and provide a low TTFB.
  2. Images – One of the major contributing factors to performance load and also the easiest to fix.
  3. Theme code – If you followed our guidelines for picking a WordPress theme for marketing, you will avoid theme bloat.
  4. Plugins – Every plugin adds a certain amount of load to your website. So it is important to balance your needs for quickly adding new functionality and website performance.
  5. Cache – Using cache effectively can provide a significant boost to your website performance. However, most of the cache configuration is done by your host, so it’s imperative you choose a high-quality host.

WPRocket: Our Recommended WordPress Performance Plugin

We’ve tried a bunch of plugins and combination of plugins in our projects over the years. WPRocket is the best all-round performance optimization plugin for WordPress

How to Check and Test Website Performance

Here are a few tools you can use to measure the speed of your website:

  • Google Page Speed Insights is the most popular tool for checking the performance of your website.
  • WebPage Test is a free website performance testing tool with lots of options to choose from.
  • Pingdom a simple and useful tool that gives you a performance grade, page load time, page size and the number of requests.
  • YSlow (included in GTMetrix)
  • GTMetrix is our preferred tool to check performance from different locations. Premium account gives you the option to schedule performance tests and track the data.
  • UpTrends uses the Google Lighthouse data but presents it differently
  • Google Lighthouse is part of Chrom Dev tools and is built into your browser. This extension allows you to access it easily and export the data.

You should now be able to read and make sense of these reports better than before with the knowledge of the technical terms we discussed above.

Here is our list of recommendations on how to use website performance tools:

  1. Test your website across multiple tools.
  2. Repeat the test 3 times and take an average.
  3. Choose the testing server location that is closest to your website host’s server.
  4. Use the data from these tools as a reference point and not the ultimate truth.
  5. Study the waterfall to spot the bottlenecks

Sometimes it is not possible to fix every suggestion given by the performance testing tools. The suggestions are made without the context of your website and constraints. So keep that in mind while you draw up a checklist of optimizations to be done on your website. For example, one of the recommendations commonly seen are to do with scripts. But if you’re using an external script like Google Analytics’ analytics.js, other than removing it completely, there is nothing else you can do.

Acceptable Website Performance: Not all Websites are Made Equal

You often hear of eCommerce websites that need to load faster than 3 seconds to avoid losses in conversion. Plenty of simple text-based, minimalist websites load in less than a second. Sometimes the performance results of these websites are touted as the benchmark for every website.

While every website must aspire to load faster than they currently do and 3 seconds is a good target to aim at, not all websites are made equal. In particular, if you look at a marketing website that has tracking scripts added to it, the scripts themselves in most cases add 2-3 seconds of load time to the website. So no matter what you do, the page load time never goes lower than 4-5 seconds in such cases.

We’ve seen lots of marketers lose sleep over this and can’t seem to reconcile the 3 seconds advice found on every other optimization article and their need to track analytics on multiple platforms. The only way to solve this problem is to cut down on the number of external scripts added to the site, assuming you’ve done everything else.

So our recommendation to marketers is to strike a balance between performance and the number of external scripts you want to simultaneously have on the website. When you’re not running a Quora ads campaign, for example, remove the script. Google Tag Manager is a great way to add and remove scripts easily without having to touch the website.

Website Optimization Tips

Image Optimization

Images are some of the most massive files on a website. Not compressing or optimizing then can significantly slow down your website.

Ideal Image formats – JPEG files take significantly less space than PNG files and is a great option.

Image Size – The “ideal” image size depends on your website theme and the kind of images you use. However, resizing images before uploading is good practice. This can be done quickly in your WordPress Media Library.

Image Compression Plugins – By now, it is apparent that there is a WordPress plugin for almost everything. It is no surprise several plugins make optimization simple. Short Pixel, Compress JPEG and PNG, EWWW image optimizer, and reSmush.it are a few of the popular ones

Lazy Loading Images – Choosing to lazy load your images can also improve speed. What this does is images load only when a reader scrolls up to that section. There are several plugins available for lazy loading as well. BJ lazy load, a3 Lazy Load, and Crazy Lazy are some popular options.


Image Optimization Guide

Learn about image formats and the latest methods of optimizing images on the website


Content Delivery Networks

You can choose to use a content delivery network popularly known as CDN to optimize your website. CDNs can minimize images by as much as 40 – 80-%. How this is different from other optimization plugins is that CDNs relay the image from the closest server. KeyCDN is one of the options available. If you are a large business, you can also choose to opt for a third-party CDN service provider like Akamai or Cloudinary.

Code Minification

Apart from images, even the size of your code can have an impact on the speed of your website. Code minification is the process of removing extra and unwanted characters that are not required by browsers. This process does not in any way impact the way the code functions. Autoptimise and Fast Velocity Minify are a couple of popular plugins. While Merge + Minify + Refresh is a free tool.

Plugin Rationalization

We have been talking extensively about the various benefits plugins can bring to your website. However, having too many plugins can slow down your website. As mentioned earlier, take some time to go through the features that each plugin offers. Avoid installing multiple plugins that have overlapping functions. It is also a good practice to do a periodic stocktaking of your plugins and removing unused ones.

Server Optimization

In the earlier chapters, we spoke about the importance of choosing the right hosting plan. So it’s no surprise that your host’s server speed can impact your website’s speed. Hence it is of paramount importance that you choose the right host vendor. This is all the more critical if your site has high traffic.

WordPress Database Optimization

If your website is on WordPress, you should periodically optimize the database. As mentioned in previous chapters, WordPress functions are dependant on a database. Over time as you install plugins and add more content to your site, it can slow down the database and your website. Here are a few plugins you can use to optimize your database and ensure your speed is up to mark

X



Schedule a call