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. Not only do fast websites provide a better user experience, but they also rank higher in search engine results and can increase conversions.

In today’s digital world, where 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.

In order to deliver a lightning-fast website, it’s important to optimize your WordPress CMS for speed. 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. The three core web vitals include:

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 measures interactivity and it’s considered good if it takes less than 100 milliseconds for a website 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 the layout of a website doesn’t change or shift during loading 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 largest 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 that are optimized for the web such as JPEG or PNG.
• Serve images in next-gen formats such as WebP or AVIF for even 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
• Smush Image Compression and Optimization

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 the loading of 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. When in reality, 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 that is slowing down your website. Once you have identified the problem areas, you can then remove them to speed up your website.

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

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

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

Query monitor will not unload the code, but it’s an important tool for you to spot the errors if you unloaded too much of the code. The website developer console is another crucial tool that can help with spotting 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 they’re needed. This speeds up your website because it reduces the amount of data that needs to be loaded. Plugins that have a lazy loading function tend to lazy load everything, which is suboptimal. You should remove the “above the fold images” from lazy loading (like a logo for example).
Another problem with lazy loading is (most) plugin’s inability to properly lazy load background images (called through CSS).
For those reasons, proper lazy loading can be quite 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 fonts that are pre-installed on your visitors’ computers. By using these fonts, you reduce 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. By using this property, you can improve the loading speed of your website.
• 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 included. If the 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 do the WordPress website speed optimization for you!

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 to fix as many of them as you can.

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 being said, your website should feel fast for a nice UX (and more visits), if you don’t have the time or knowledge for it, 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. This is something that we can help you with as well.