Intermediate WordPress User

0 of 37 lessons complete (0%)

Optimization

Website optimization

This is a preview lesson

Register or sign in to take this lesson.

Transcript

Introduction

Numerous research and case studies have shown that the longer a site takes to respond, the more visitors will abandon it. No matter your site’s focus, providing the best experience for your visitors is the main goal, so optimizing it for speed is critical.

In this lesson, you will learn what website optimization means, which elements can impact performance, how to test your site’s speed, and how to improve it.

Web performance pertains to the user experience of load time and runtime. As a practice, web performance involves measurable factors, such as a page’s loading time and the time it takes to become interactive, as well as the user’s perception of how long it took.

What affects performance

Multiple components determine a site’s speed—software, network conditions, hardware—each calculated by standard metric. The way to achieve high performance scores is to optimize each of these moving parts.

Let’s start with software, which covers code and content.

WordPress themes define the pages’ content structure. Some design elements, like colors, have no effect on performance, whereas others—from fonts and graphic assets to carousels and popups—could tank your site’s speed.

Selecting newer, more performant file formats is a good practice when dealing with media and fonts. Images, especially, play a key role in website optimization. We will thoroughly cover the topic in another lesson dedicated to image optimization strategies.

While minimizing the number of assets is useful, how they’re loaded is just as important. From this perspective, a well-coded theme makes all the difference.

Themes and plugins

Bloated themes that load too many assets are among the biggest culprits of poor performance scores. 

Similarly, the quality of the plugins you use influences how fast your site will perform, both objectively and perceivably. Plugins that perform excessive requests to external services, load multiple assets, and constantly perform database queries will bog down even the best-configured server.

Embedded content and third-party elements

Ads, analytics, social media widgets, alternative comments plugins, and externally hosted assets delay loading, slow down response times, hog bandwidth, and may trigger higher bounce rates.

Think twice before adding them to your site, and be vigilant about the performance cost.

How performance is measured

You can measure performance in two ways: synthetic and real user monitoring (RUM).

Both happen in the browser but synthetic means running tests “in the lab”—under predefined conditions and preset variables, while RUM renders findings generated “in the field”, collecting data from actual site visitors.

In either case, the tests would likely be based on a set of three metrics outlined by Google and adopted across the industry as “quality signals that are essential to delivering a great user experience on the web.”

They’re known as Core Web Vitals:

  • Largest Contentful Paint (LCP) measures when the largest element on the page becomes visible.
  • Cumulative Layout Shift (CLS) measures how much the elements on the page shift while the page is loading.
  • Interaction to Next Paint (INP) a new addition to the list that measures how long it takes for the page to respond to user interactions (clicks, taps, and keyboard inputs).

How to test your site

Testing helps you identify performance bottlenecks. You can do that using various tools, including PageSpeed Insights (opens in a new tab) and WebPageTest (opens in a new tab) .

Maintained by Google, PageSpeed Insights presents synthetic results alongside the company’s version of RUM—the Chrome User Experience Report (CrUX). It tests the page on mobile and desktop devices and provides suggestions for improvements.

WebPageTest is a more elaborate testing platform. It adds a bunch of helpful features on top of Google’s metrics, including an environmental impact report, image analysis, a detailed breakdown of optimization opportunities, and an option to select different locations, browsers, and connection speeds.

Running WebPageTest for the first time might be daunting, but it’s an invaluable tool for testing and analyzing your site’s overall performance.

When testing, you’ll encounter other software-driven metrics, including

  • First Contentful Paint (FCP): when the browser displays the first bit of content.
  • Total Blocking Time (TBT): the time elapsed after FCP and before visitors can interact with the site.

These are influenced by a combination of loading too many assets and elements and failing to do so properly.

ℹ️ Performance Lab is a community plugin developed by the WordPress Performance Team that might be able to mitigate some of the problems. This plugin combines six standalone plugins, each designed to tackle a specific performance feature using the latest browser technology. Once activated, the plugin automatically begins optimizing your website. There’s no need for manual configuration or adjustments.

The importance of hosting

The other factors affecting your WordPress site’s speed are network infrastructure, server hardware, and database operations.

The metric that covers these is the Time to First Byte (TTFB), which measures the time it takes until the browser receives the first byte. This depends on connection time—the visitor’s and the server’s.

The faster the connection is established, the faster the bytes are sent, and the faster your site will load.

Several factors determine the resource delivery speed, including geographical location, network conditions, hardware configuration, and backend processes. In other words, hosting matters.

As slow server response times can result from network or hardware issues (CPU, memory, and storage speed), it’s worth carefully considering every aspect of your hosting solution—not just the price listed.

Plugins

Finally, Plugins. Performance plugins won’t be able to reduce CPU load time on the server or update back-end software, but they can take care of things like CDNs, caching, compression, modification, database optimization and sometimes even security.

So even when opting for more affordable shared hosting, it’s a good idea to offset common challenges with the help of a trusted plugin that lets you use a CDN to minimize the client’s server round trip times, apply caching to reduce the number of requests, and enable compression and modification to send the smallest amount of data.

The WordPress Plugin Directory features hundreds of performance and optimization plugins. Here are a few popular solutions:

  • WP-Optimize
  • W3 Total Cache
  • WP Super Cache
  • Jetpack Boost
  • LiteSpeed Cache

Conclusion

WordPress contributors have been working hard on improving speed and performance. Some features are included in Core, but others require users and developers to enable them.

Make sure you’re using the latest version of WordPress to benefit from the latest performance-boosting techniques.