How did I improve a WordPress webpage speed from 44 to 97?
With a plugin. A free one.
I know the answer may not go down well with most people who believe plugins don’t exactly fall into the group of, well, real work. But as someone who isn’t a developer and doesn’t have access to one, plugins are the next best thing.
So, if you’re still here, I’ll break down the speed issues I noticed on the site and the configurations I made on the plugin to solve them.
- Diagnosing Speed Issues On a Website
- Understanding Common Page Speed Issues & their Solutions
- Optimizing Website Speed With Litespeed Cache Plugin
Diagnosing Speed Issues On a Website
When I first started working on this website (it’s a friend’s site), I noticed that the pages took ages to load. Images on the site were the worst—they couldn’t load properly in some cases.
To assess the speed performance and issues of the website’s homepage, I ran the URL on Google’s Page Speed Insights to check the performance score.
PageSpeed Insights scores pages based on a grouped figure ranging from 0 to 100, with the latter being the highest.
In case you aren’t familiar with PageSpeed Insights, here’s what each score means:
- 0 to 49 (Poor): This means you need to make significant fixes to improve your page speed.
- 50 to 89 (Needs improvement): A webpage with a site score that falls on the higher side of this group isn’t bad. In fact, most websites I’ve randomly checked were around that score. But this score means you can do better with a few fixes.
- 90 to 100 (Good): A page speed score of 90+ means you’re good to go. There might still be some unoptimized elements, but they aren’t a priority.
These scores are a weighted average of the page speed performance metrics. Simply put, the more optimized the metrics are, the better your page speed score. Here’s what each metric weighs and the ideal score.
The speed performance score of the URL I audited was 44. It was clear that the site had speed issues.
My goal was to improve the page speed score to 80s or higher. Why? The search competitors’ pages were around the 70s. Topping them won’t directly help us rank better, but it’ll help us deliver a better experience to our users.
Understanding Common Page Speed Issues & their Solutions
First, using a plugin for fixes is more than configuring a few things. You need to understand the issues, why it’s an issue (metrics it affects), and if it’s worth fixing. Feel free to skip this section if you know what each speed issue entails.
With that in mind, below are the opportunities highlighted on the PageSpeed Insights report I ran, what they mean, and their solutions.
➤ Eliminate Render Blocking Resources
Render-blocking resources are elements that interrupt the critical rendering path. The browser must fetch, parse, compile and execute these elements before moving on to other resources that make up that page.
When this happens, critical elements like texts (or important scripts) needed above the fold wouldn’t load as fast as they should.
The culprit of render-blocking resources is JavaScript and CSS files. On the PageSpeed insights report, you’ll see a list of URLs for scripts & stylesheets blocking your critical rendering path.
Page Speed Metrics affected: The speed metrics this issue affects are the First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
Solution:
- Identify which JS and CSS files are critical, non-critical, and unused. You can find this in the code coverage report in Chrome Dev Tools.
- Inline critical JS & CSS, defer the less critical ones, and remove unused files.
- Minify your CSS and JS to reduce bytes.
➤ Reduce Unused JavaScript & CSS
Most times, unused JS & CSS issues come from irrelevant scripts in plugins or a theme. As I mentioned earlier, reducing these unused resources allows you to decrease unimportant bytes and improve your page load speed.
Page Speed Metric Affected: LCP
Solution:
- Check the URLs listed in the PageSpeed Insights report to see the plugins or theme responsible.
- Open the URL and check the coverage to identify plugins with high unused resources (indicated with a red line). (URLs).
- If the scripts on those plugins aren’t used on that page, defer or remove them.
➤ Defer Offscreen Images
Offscreen Images are those that are out of the visitor’s viewport (the area that’s currently visible on your screen).
You should defer these images and only load them after the browser has loaded critical resources within the viewport to improve your page load speed.
Page Speed Metrics Affected: Time to Interactive (TTI)
Solution:
- Implement lazy loading to defer offscreen images until all critical resources load.
➤ Use Video Formats for Animated Content
You’ll likely see this notice if you saved your animated content in GIF format. This is an issue because large GIFs take up much space and network bytes. Instead, use video formats such as MPEG4/WebM videos, as they’re smaller.
Page Speed Metrics Affected: Overall
Solution:
- Convert your GIF files to MPEG4/WebM formats using software like Ezgif, Adobe Express, and Cloud Convert.
- If the videos already exist on your website, use an image CDN that supports video optimization.
➤ Serve Images in Next-gen Formats
On websites such as photography sites, eCommerce stores, and creative portfolio websites that rely heavily on images, unoptimized pictures, especially in jpeg and PNG formats, can quickly take up a lot of space. This contributes to slow page loading.
Page Speed Metrics Affected: Overall
Solution:
- One way to solve this issue is to compress your images. But in most cases, PNGs can still retain a significant size after compression. That’s why the PageSpeed Insights report recommends using modern formats like WebP and AVIF rather than JPEG and PNG. These newer formats are smaller, load faster, and consume less data.
- Use a caching plugin or CDN that automatically delivers images in the most optimal format for each browser.
➤ Reduce Initial Server Response Time
A common reason your site is slow is because of low-quality hosting services. If you’re using a shared hosting service or an unreliable one, your users may wait for a long time to get responses for any request they make on your website.
Besides poor hosting, themes and plugins contribute to longer server response time. The more optimized these elements are, the faster your website will load, and vice versa.
Page Speed Metrics Affected: FCP, LCP, Time to First Byte.
Solution:
- Upgrade your server
- Choose a more optimized theme with less bulky scripts.
- Choose a caching or optimization plugin to reduce the load on your hosting server, save your user’s bandwidth, and improve your website speed.
- Use only the necessary plugins on your website.
➤ Efficiently Encode Images
You’ll likely see this suggestion if you have image files that aren’t compressed. While generating the report, your images will be test-set to a compression level of 85. If the potential saving is 4 Kibibytes (KiB) and above, those images will be added to the list of images to optimize.
Page Speed Metrics Affected: Overall
Solution:
- Compress your images using optimization tools like ImageOptim, TinyPNG, and Egzif to decrease file size and improve page load.
- Ensure you follow other image optimization best practices, like lazy loading images, serving responsive images, and using image content delivery networks.
➤ Minify JavaScript
When you have white spaces or unnecessary codes, you’ll get a recommendation to minify JavaScript. Removing these unnecessary elements can help you create a smaller but still valid code file.
Page Speed Metrics Affected: Overall
Solution:
- Use a plugin or JavaScript compression tool to minify your scripts.
Optimizing Website Speed With LiteSpeed Cache Plugin
Before making any of these changes, I STRONGLY recommend testing them in a staging environment or backing up your website.
Back to how I fixed the page load issue…
I focused on four configuration tabs on LiteSpeed Cache. The cache, CDN, Image Optimization, and Page Optimization.
Cache Tab Settings
- Cache
LiteSpeed Cache>Cache>Cache
Caching site resources and pages helps to reduce server requests and load. As the important resources were already turned on, I left everything on default settings.
- Purge
LiteSpeed Cache>Cache>Purge
Left on default. The ‘Purge All On Upgrade’ option that’s enabled ensures that the cache auto-purges when there are changes to a theme, plugin, or other core files.
- ESI
LiteSpeed Cache>Cache>ESI
I turned on ‘Enable ESI’ to serve cached public pages to logged-in users
- Browser Cache
LiteSpeed Cache>Cache>Browser
I turned on ‘Browser Cache’ to cache the site’s static content such as images, logos, videos, and fonts on the user’s browser. Serving these cached elements allows you to reduce server requests and ensure faster page speed.
- TTL, Purge, Excludes, and Advanced
I left everything in these sections on the default settings.
CDN Tab Settings
LiteSpeed Cache>CDN>CDN Settings
Turned on ‘QUIC.cloud CDN’. Enabling this setting allows you to cache nearly everything on a website. This includes images, CSS, JavaScript, and the dynamic HTML page. It also gives you access to make other images and page optimization we’ll see in the next sections.
Image Optimization Tab Settings
- Image Optimization Summary
LiteSpeed Cache>Image Optimization Summary
The ‘Gather Image Data’ button allows you to optimize your JPG and PNG images. Once the image data is fully gathered, this button changes to ‘Send Optimization Request’, which allows for the main optimization process. LiteSpeed Cache allows for image optimization in batches of up to 200 images subsequently.
- Image Optimization Settings
LiteSpeed Cache>Image Optimization Settings
Turned on ‘Auto Request Cron’ to automate the image optimization process. I also turned on ‘Image WebP Replacement’, & ‘WebP For Extra srcset’ and turned off the following: ‘Preserve EXIF/XMP data’ & ‘Optimize Losslessly’.
Page Optimization Tab Settings
- CSS Settings
LiteSpeed Cache>Page Optimization>CSS Settings
To minify CSS and inline critical files, I turned on: ‘CSS Minify’, ‘CSS Combine’, ‘Generate UCSS’, ‘UCSS Inline, ‘Load CSS Asynchronously’, ‘CCSS Per URL’.
It’s important to see if anything in your site breaks after each of these changes (particularly after enabling ‘CSS combine’) before you proceed with the next step.
- JS Settings
LiteSpeed Cache>Page Optimization>JS Settings
I did the same for JS by turning on ‘JS Minify’ and ‘JS Combine’. I also set the ‘Load JS Deferred’ to ‘Deferred’.
As I mentioned in the CSS section, these changes can cause JS errors on your site. So, it’s important to check that everything is working as it should and undo any configuration that causes an error.
- HTML Settings
LiteSpeed Cache>Page Optimization>HTML Settings
Next, I enabled: ‘HTML Minify’, ‘DNS Prefetch Control’, and ‘Load Google Fonts Asynchronously’ to remove unnecessary line characters, and prefetch resources to reduce network latency for page visitors.
- Media Settings Tab
LiteSpeed Cache>Page Optimization>Media Settings
And finally, I enabled ‘Lazy Load Images’, ‘Responsive Placeholder’ (to reduce layout shifts in images that have width and height attributes), ‘Lazy Load Iframes’, and ‘Add Missing Sizes’ (to set an explicit width and height for images that don’t have any specified attribute). These settings help to reduce loading time and improve CLS.
- Media Excludes, Localization, and Turning Tabs
I left everything in these sections on default.
After making these configurations, I ran the URL again through PageSpeed Insights and got a 97! I made those changes in April and till now; the score is always in the 90s each time I audit it. So, yeah, it works!