Speed Optimization for WordPress websites

If you’re a blogger or run an e-commerce store, you know how important it is to have a website that loads quickly and smoothly. This is why we recommend speed optimization for WordPress websites as a first step in improving your UX and SEO.
Fast websites provide a better user experience, yield bigger revenues (check our Speed Loss Calculator), and rank higher in search engine results.

Today, average attention spans are short, and patience is thin. Website speed can make or break your online presence. According to recent studies, 47% of consumers expect a web page to load in 2 seconds or less, and 40% will abandon a website that takes longer than 3 seconds to load.

Optimizing your WordPress website for speed is essential to deliver a lightning-fast website. In this article, we’ll dive into the importance of website speed optimization and how to improve your website’s core web vitals, including image optimization, CSS and JS code optimization, unloading unnecessary code, font optimization, and lazy loading.

Core Web Vitals: What You Need to Know

Google uses Core Web Vitals as a ranking factor, prioritizing websites with exceptional user experience. Core Web Vitals are a set of metrics that measure real-world user experiences when accessing a website. They include loading speed, interactivity, and visual stability.

These metrics are critical to the success of your website and directly impact user satisfaction, search engine rankings, and conversions. Here are the three core web vitals as an example:

1. Largest Contentful Paint (LCP) – measures loading performance and how fast the main content of a page loads. This metric measures loading performance, and it’s considered good if it takes less than 2.5 seconds for the largest image or text block to load.
2. First Input Delay (FID) – measures interactivity and how quickly the page becomes responsive to user input. This metric is considered good if a website takes less than 100 milliseconds to respond to user interaction.
3. Cumulative Layout Shift (CLS) – measures visual stability and how much the page layout shifts while loading. The less, the better. If a website’s layout doesn’t change or shift during loading, it is better for the UX.

Image Optimization: the most common improvement opportunity

One of the biggest hurdles, and usually the first place to start with regarding speed optimization for WordPress websites, is image optimization.

Images are one of the most significant contributors to slow website load times. And here’s how Lighthouse calculates it on their tests:

Lighthouse collects all the JPEG or BMP images on the page, sets each image’s compression level to 85, and then compares the original version with the compressed version. If the potential savings are 4KiB or greater, Lighthouse flags the image as optimizable.

Optimizing your images can significantly improve your website’s performance and core web vitals. To optimize your images, consider the following best practices:

• Compress images to reduce their file size without sacrificing quality.
• Use image formats optimized for the web, such as JPEG or PNG.
• Serve images in next-gen formats such as WebP or AVIF for faster performance.
• Resize images to fit the dimensions they will be displayed on your website.

The following plugins can help you optimize your images for a faster website:

• EWWW Image Optimizer
• ShortPixel Image Optimizer
• Imagify

If you’d like to read more, here’s The 3 Best Image Optimization Plugins For WordPress article that goes deeper.

CSS and JS Code Optimization

CSS and JS code can also significantly impact your website’s load time. To optimize your code, consider the following best practices:

• Minimize CSS and JS code to reduce their file size.
• Defer or delay loading non-critical CSS and JS code until after the page has loaded.
• Unload unnecessary CSS and JS code, such as plugins and themes you no longer use.

The following plugins can help you optimize your CSS and JS code for a faster website:

• Autoptimize
• WP Fastest Cache

Unloading Unnecessary Code

For most of my clients, this part of speed Optimization for WordPress websites is the most abstract one. However, it does not have to be unreachable for an average WP user.

Unloading unnecessary code, such as unused plugins and themes, can significantly improve your website’s performance. To unload unnecessary code, consider the following best practices:

• Remove plugins and themes that are no longer in use.
• Deactivate plugins that are not needed on all pages of your website.

To unload unnecessary code, you can use the Query Monitor plugin. This plugin helps you identify slow-loading plugins and code slowing down your website. Once you have identified the problem areas, you can remove them to speed up your website.

Another excellent plugin for unloading unnecessary code is the WP-Optimize plugin. This plugin helps you optimize your database, clean your website, and remove unneeded code.

The following plugins can help you unload unnecessary code for a faster website:

• Perfmatters
• Asset Cleanup
• Query Monitor (as a diagnostic tool)

The Query monitor does not unload the code, but it’s essential for spotting errors if you unload too much of it. The website developer console is another crucial tool that can help spot errors, but as it’s not a plugin, it didn’t make the list.

Proper Lazy Loading

Lazy loading is a technique that loads images and other media only when needed. This speeds up your website because it reduces the amount of data that needs to be loaded. Plugins with a lazy loading function tend to lazy load everything, which is suboptimal. You should remove the “above-the-fold images” (like a logo) from lazy loading.
Another problem with lazy loading is (most) plugin’s inability to correctly lazy load background images (called through CSS).
For those reasons, proper lazy loading can be pretty tricky.

Fonts Optimization

Fonts can also slow down your website. This is because each font you use on your website has to be loaded from a server. The more fonts you use, the slower your website will be. To optimize your fonts for speed, you can use the following tips:

• Use system fonts: System fonts are pre-installed on your visitors’ computers. Using these fonts reduces the number of fonts that need to be loaded from a server, which speeds up your website.
• Use font-display: Font-display is a CSS property that allows you to specify how font files should be loaded and displayed. This property can improve your website’s loading speed.
• Use a font management plugin: A font management plugin allows you to manage your fonts in one place, reducing the number of font files that need to be loaded. Some popular font management plugins for WordPress include Easy Google Fonts and Typekit.

Conclusion – make it fast

Website speed optimization is crucial for all websites, bloggers, and e-commerce shops. If your website loads too slowly, you’ll lose traffic. Don’t leave money on the table—fix it! You can contact us for help or hire us to conduct the WordPress website speed optimization!

By unloading unnecessary code, optimizing your fonts, and implementing proper lazy loading, you can significantly improve the speed of your WordPress website. Use the Query Monitor plugin to detect the problems, use Google page speed insights to point out the opportunities (ignore the grades), and try fixing as many of them as possible.

Don’t obsess about the test website’s grades too much; I’ve seen lightning-fast websites with a 60 grade on Google PSI for a mobile test. A higher grade might help you with a slightly better SERP, but as CWV is only one of many ranking algorithms, don’t sweat about it too much.

That said, your website should feel fast for an excellent UX (and more visits); if you don’t have the time or knowledge, you can always contact us for a free WordPress website speed analysis. We’ll gladly help you.

Once your website is fast, you’ll have to maintain it regularly to keep it that way. We can also help you with this.