How to significantly increase website speed and performance

Introduction

At Exemplifi, we understand that website speed and performance are critical for success. When we took on our client's WordPress website project, we knew optimizing its performance would be essential for user experience, search engine ranking, and conversion rates. In this article, we’ll take you through the strategies we implemented to significantly enhance the speed and performance of their WordPress website. Most of the tools we used are free tools, which are accessible in the plugin library of WordPress.

‍

Benchmarking to Establish a Performance Baseline

Before making any changes, we began by benchmarking the website’s current performance. Using tools like Google PageSpeed Insights and GTmetrix, we measured critical factors, including:

• Largest Contentful Paint (LCP): LCP measures the time it takes for the largest content element visible in the viewport to load—this is typically the main content of the page, such as an image, video, or large block of text.

• Interaction to Next Paint (INP): INP tracks the time it takes for a webpage to respond visually to user interactions, such as clicks, taps, or key presses.

• Cumulative Layout Shift (CLS): CLS records how often elements on a page unexpectedly move, which can be jarring and frustrating for some users. Google recommends striving for a score of 0.1 or less. Note: CLS is a unitless measure that reflects the combined movement of all unstable elements during the page’s lifetime.

The client’s homepage had an LCP (Largest Contentful Paint) of 3.8 seconds, well above Google’s recommended 2.5 seconds. Additionally, their CLS (Cumulative Layout Shift) was 0.2, causing content to shift unexpectedly during page load. We used these metrics to identify bottlenecks and prioritize our efforts.

‍

Streamlining Plugins for Optimal Performance

 Our client’s site had over 20 active plugins, many of which were redundant or poorly optimized. This caused significant slowdowns in page loading. We performed a plugin audit using Query Monitor to pinpoint which plugins were causing delays. We deactivated and removed plugins that weren’t essential to the website’s functionality and always found overlaps and plugged those plugins with a single solution.

For example, The website had multiple security plugins, including Wordfence and Sucuri, which offered overlapping features. We consolidated these into one, reducing the number of database queries and improving load times by nearly 15%. We also replaced resource-heavy plugins with lightweight alternatives like WP Rocket for caching and Smush for image optimization. All of this made a significant difference to the overall performance of the website.

‍

Implementing Advanced Caching Solutions

Caching was a key area for improvement on the client’s site. We set up both client-side caching and server-side caching using W3 Total Cache. This drastically reduced load times for both new and returning visitors. We installed W3 Total Cache to create static versions of the website, drastically reducing the need for server resources. On the client side, we enabled browser caching so returning users wouldn’t have to download the same static assets repeatedly.

‍

Leveraging a Content Delivery Network (CDN)

Since the client had a global audience, we implemented a Content Delivery Network (CDN) to reduce latency and ensure faster load times for users across different regions. Cloudflare was integrated into the site for its robust CDN services, ensuring content was delivered from the nearest server to the user’s location. This step alone resulted in a noticeable improvement in the website’s global loading speed.

Previously, users in Europe experienced load times of up to 7 seconds because the server was located in the U.S. After implementing Cloudflare, the load time for those users dropped to around 2.5 seconds, as they were connected to the closest data center in Europe.

‍

Optimizing Images for Faster Loading

Images were one of the main performance bottlenecks on the client’s website. Large, unoptimized images were causing slow load times, especially on image-heavy pages like the product gallery. The site’s images were in traditional formats like JPEG and PNG and averaged 400KB each. We used Imagify to compress these images and converted them to WEBP, reducing the file sizes by 60% without sacrificing quality. It was important for us to get the images down to the 100 - 200 kb range, which is a benchmark we find suitable for best performance across different bandwidths of internet connections. We also enabled lazy loading to ensure that images only load as users scroll through the page.

‍

Minifying and Optimizing CSS

One of the easiest and quickest ways to clean up a clunky website. We found that the website’s CSS files were bloated and contained unused styles, contributing to slower loading times. We re-worked up the CSS and ensured it was minified and optimized for faster rendering. The website’s CSS file size was 300KB, with around 20% of the code unused due to old theme customizations. We ran a PurgeCSS tool to remove unnecessary styles and compressed the remaining code with Autoptimize, reducing the file size to 150KB.

‍Optimizing JavaScript for Better Performance

We found that the client was loading multiple third-party JavaScript libraries synchronously, blocking the rendering of other critical resources. JavaScript files can often be a major cause of delayed page rendering. The client’s website had multiple unminified JavaScript files, which were slowing down the loading process. By adding the async and defer attributes to non-critical scripts, we were able to improve the site's loading speed by 25%.We would regularly audit plugin-related JavaScript to prevent unminified files from dragging down performance.

‍

Efficient Theme Logic: How to Keep It Simple

To address performance issues caused by complex theme logic, we implemented a streamlined approach that reduces excessive conditional statements and optimizes resource usage. By simplifying the logic and eliminating unnecessary loops, we’ve improved backend efficiency, resulting in faster page load times and reduced server strain.

Additionally, we utilized WordPress’s Transients API to cache data temporarily. This allows the logic to run only once during the initial visit, with the results stored for future use. This significantly reduces memory consumption and prevents repeated database queries, providing a smoother and faster user experience.

‍

Conclusion

By implementing these strategies, we transformed our client’s WordPress site into a fast, high-performing platform. Not only were they able to meet the demands of a visitor base distributed globally, they were also able to ensure their mobile responsiveness and accessibility was at peak performance. It took us less than a week to implement the speed updations.  These changes improved user experience, increased search engine rankings, and allowed the site to handle higher traffic without performance issues.

‍

If your website could benefit from speed and performance optimization, contact us today.