Fix a Slow WordPress Site: Frontend Optimization Guide!

No one enjoys a sluggish website, as it not only frustrates users but also leads to significant losses. This isn’t just about losing visitors; it extends to a decline in Google rankings and a tangible hit to revenue. To underscore this point, consider the findings from an Akamai study:

A mere 100-millisecond delay in website load time can reduce conversion rates by 7 percent.

This striking statistic underscores the critical link between the speed of a site and its financial success. Ensuring swift site performance is not just about enhancing user experience, but it’s also a crucial factor in maintaining and boosting revenue.

To address the issue here is a Starter’s Guide to help improve a Slow Site, specifically crafted for WordPress Website Owners looking to delve into the realm of frontend optimization. To embark on this journey, it’s essential to begin with a foundational understanding of what constitutes a normal WordPress installation.

My philosophy behind optimization, both in my professional work and personal life, revolves around two key principles: Reduce and Reuse. In the context of WordPress, ‘reduce’ refers to a set of strategies aimed at minimizing resource usage. This involves optimizing for smaller file sizes, reducing the number of file requests, and ensuring more efficient code execution. These actions not only enhance the performance of a WordPress site but also contribute to a more streamlined and user-friendly experience.

On the other hand, ‘reuse’ in this context is about leveraging caching at various levels of our setup. This means intelligently storing and reusing data and resources instead of repeatedly generating or requesting them. Caching can occur at different layers, including browser caching, server-side caching, and caching through content delivery networks. By implementing these strategies, we can significantly improve load times and reduce server load, making the website more resilient and responsive.

So let’s get started with optimizing the site, for this article rather than theory, we have also created a site on a Single Core VPS from Linode with 2 GB of RAM where we can also explore advanced techniques later on. It is a standard WordPress install with the theme Shopay this is so that it also has a few extra plugins which can be looked into and are also a slightly heavy WooCommerce website. We have also imported its demo and installed the following commonly found plugins, here is what it looks like after importing the demo —

We will be using WP Rocket for the optimization as it has the best balance between Options and Functionality.

Step 1: Create a baseline

Before starting any optimization project we need to establish where we are and the tools we will use to do this. Here are some common websites and tools we recommend to get started with which will help us benchmark our changes –

• GTMetrix: It is an online tool that analyzes website performance. It provides reports on page load time, page size, and other key performance metrics, using Google Lighthouse and its own grading system. GTmetrix evaluates websites based on speed and efficiency, offering insights and recommendations for optimization to improve user experience and site functionality.
• Query Monitor — It is WordPress is a powerful tool for developers and site administrators. It offers a detailed analysis of database queries, PHP errors, HTTP API calls, and more, directly within the WordPress admin dashboard. This plugin is particularly useful for diagnosing performance issues, as it allows users to see which plugins, themes, or settings are impacting site performance.

• PageSpeed Insight — It is a tool provided by Google that analyzes the content of a web page and then generates suggestions to make that page faster. It provides both mobile and desktop versions of a page’s performance with a score, ranging from 0 to 100. Higher scores indicate better performance.

You may create a Google Sheet and benchmark the page you are trying to optimize using these tools and put the numbers in the Excel sheet, we will monitor it after every change.

For Test Site: Its not bad but can be made better

Step 2: Check your hosting

In a majority of cases, user sites are not the culprit, but it is the hosting they are running over. There is a lot of overselling and putting too many sites on the same server in the shared hosting industry. And sometimes your site’s load might be causing the allocated resources to run out if on a VPS / Dedicated server. Not all these tools will work but they will help you see if you need to upgrade to a better host.

• Benchmark: To do this you may use a WordPress plugin called wpbenchmark. This will quickly benchmark various parts of your hosting including CPU, Disk, and Database. It can sometimes quickly help you find out the Bottlenecks. Keeping a target of 8+ should be fine.

• Server load: You might need an SSH login to access the command line where you may run a command line top or htop. See how much load is the server reporting and which processes are using the server.

If you find that your server is overloaded or under-performing, or you see significant steal if running top. Then you should contact your host and if they are unable to resolve the load you might consider changing them.

For Test Site: Server scores a 8+ , with minimal server load and .93 seconds on Query Monitor.

Step 3: Reduce the requests

Reducing the number of HTTP requests is crucial for faster webpage loading, as each request incurs time. Fewer requests mean fewer connections and data transfers between client and server. This leads to a more efficient use of bandwidth and server resources.

We will be install WP-Rocket in this step as it has most of the features needed for the next few steps.

• Minification: Minification in WordPress optimization involves compressing CSS and JavaScript files by removing unnecessary characters, thereby reducing their size. As a next step combine these files. This process significantly decreases the number of HTTP requests and improves page load times.

• Defer and Delay JS execution: “Defer” delays the loading of JavaScript until after the HTML has fully loaded, preventing JS from blocking page rendering. “Delay JS execution”, on the other hand, loads JavaScript only when a user interacts with the page (like clicking or scrolling), reducing initial load time and improving the user’s first impression of site speed. These methods also reduce the number of requests and intial CPU load.

• Lazy loading Image: Instead of loading all images on a webpage at once, lazy loading defers the loading of images until they are about to enter the user’s viewport. This means images are loaded only when needed, as a user scrolls through the page. This approach significantly reduces initial load time, saves bandwidth for both the user and server,
• Iframes and Embeds: Loading third-party embeds can also add a significant number of requests, they can also be lazy-loaded or loaded when someone clicks on them.

For the sake of article we have disabled page caching at the moment —

Step 4: Reduce file sizes

Reducing file sizes is a key strategy in web performance optimization. It leads to quicker page load times, as smaller files require less time to download. This not only enhances the user experience by providing faster access to content but also conserves bandwidth, both for users and servers.

• Image optimizations: Common techniques include using responsive images, adopting the WebP format, and optimizing JPEG sizes. Responsive images ensure that the correct image size is served depending on the user’s device, enhancing loading times and visual quality. The WebP format offers superior compression and quality characteristics compared to traditional formats like JPEG and PNG. Optimizing JPEG size through compression algorithms reduces file size without significant loss of quality, ensuring faster load times and a better user experience.
• Compress JS and CSS: This process minimizes the size of these files, removing unnecessary characters like whitespaces, line breaks, and comments. As a result, the browser requires less time to download and parse these files, leading to faster page rendering.

• Gzip Support: It involves server-side compression of web files like HTML, CSS, and JavaScript before they are sent to the browser. This compression significantly reduces file sizes, leading to faster transmission speeds and quicker page load times.

For Test Site: Our server has gzip enabled by default. The new numbers.

Step 5: Reduce the number of plugins

Minimizing the number of plugins in WordPress enhances site speed and performance, as fewer plugins mean less code to load. It also improves security by reducing potential vulnerabilities. Streamlining plugins leads to easier website maintenance and fewer compatibility issues.

• Reduce the number of plugins: First, identify and remove plugins that are not regularly used. These often consume resources unnecessarily and can slow down your website. Where possible, replace plugin functionality with custom code; this reduces dependency on third-party code and can often be more efficient and streamlined. Additionally, consider using third-party services for functionalities previously handled by plugins.
• Per page plugins: If reducing the number of plugins is not a possibility there is an option to run pages on specific pages/user level or content type. A common plugin used for this is the Plugin Organizer plugin.
• Theme Builders vs going native: Theme builders offer greater flexibility and ease of use, ideal for users without development experience, as they allow for custom design with simple drag-and-drop interfaces. However, for more complex websites, native themes are often superior due to their optimized code, which can lead to better performance and faster loading times.

If you see the top sites running WordPress like techcrunch.com, time.com you will notice most will have native themes and run minimal number of plugins.

For Test Site: We have disabled plugins which we do not need.

Step 6: Reuse Request aka Caching

Caching in WordPress is a powerful technique that significantly enhances website performance and speed. It involves storing copies of website content, like generated pages or result of queries, to serve them faster to returning visitors. This process reduces the load on the server, as it doesn’t need to regenerate the same content with each visit.

• Page Caching: This technique bypasses the need to load and process the PHP scripts with each page load, significantly speeding up response times. As a result, it reduces server load and improves website performance, especially under heavy traffic. Some common plugins are {mention plugins}
• Object Caching: This method stores database query results, reducing the need to query the database repeatedly for frequent requests. By caching these objects, such as user data or post information, the server can quickly retrieve and serve this data without reprocessing the same queries.
• Browser Cache: This involves storing website resources like stylesheets, images, and JavaScript files locally in the user’s browser. Once these resources are downloaded on the first visit, the browser doesn’t need to reload them on subsequent visits. This significantly reduces load times and bandwidth usage for returning visitors.

For Test Site: We have enabled Page Cache with WP-Rocket, Redis Object Cache, Browser Cache is also set in headers ( helps in repeat view ). The new Numbers

Step 7: Application Level Caching

Application-level caching, using tools like Varnish, Nginx FastCGI, or LiteSpeed Cache, operates outside of WordPress and can cache entire web pages at the server level. This type of caching is highly efficient as it serves cached content directly, bypassing the need to load WordPress entirely. It’s generally faster than WordPress-specific caching plugins, which still involve some PHP and database processing.

• Application Cache: This would be in most cases will need your host to support the application which does the caching. These will always be faster than simpler WordPress Plugin based cache and can be scaled to quite a degree.
• Edge Caching: This involves storing copies of web content at geographically distributed servers, closer to users around the world. This significantly reduces the Time To First Byte (TTFB) for users who are far from the origin server, as content is served from the nearest data center. We cover this in the next section.

For Test Site: We have varnish available on our servers, and for Edge Caching we will be using Cloudflare APO ( 5$ / month ).

Step 7: Use a CDN

Using a Content Delivery Network (CDN) significantly improves website performance and speed. A CDN distributes website content across multiple global servers, ensuring users access data from the nearest location, and reducing load times. It also helps in balancing traffic loads and handling high traffic volumes, preventing server overload

• Static asset caching: By caching static assets like images, CSS, and JavaScript files on global CDN servers, these elements load faster since they are delivered from the closest server to the user. This drastically reduces the load time of these assets, particularly for users geographically distant from the original server.

For Test Site: We have moved the DNS to Cloudflare and Enabled APO for edge caching. Similar TTFB should now be available globally.

Step 8: Basic Firewall and Bots

Firewalls effectively mitigate server load by blocking irrelevant bots and crawlers, which often consume unnecessary resources. This action prevents these automated scripts from overloading the server, thereby preserving bandwidth and CPU efficiency. As a result, firewalls ensure that server capacity is dedicated to legitimate traffic, enhancing website performance and stability. This leads to an overall improved user experience, with faster access and more reliable website interactions.

• WordPress Level: A WordPress-level firewall offers a straightforward security solution for many setups, providing an easy-to-implement layer of protection against common threats. While it effectively blocks many harmful requests and attacks, it operates at the PHP level, meaning that bad agents can still consume server resources by triggering PHP processes. They offer a balance of simplicity and security, making them a popular choice for basic needs. We recommend Wordfence for this.
• Reverse proxy-based: As filter traffic before it reaches the server, blocking malicious requests at the network edge. This approach prevents bad agents from consuming server resources, as unwanted traffic never hits the PHP layer of your WordPress site. Additionally, these services provide added benefits like DDoS protection and CDN capabilities, enhancing both security and website speed. This makes them a more comprehensive and effective solution for safeguarding and optimizing websites. We recommend using Cloudflare for this as the free plan also allows sufficient protection for most sites.

Step 9: Optimizing for Core Web Vitals

Now that the basics are in place we finally optimize for core web vitals to start of you can get the plugin Disable JS for clone and make sure that your website looks the same with Javascript enabled or disabled. Next, we move to optimizing the 3 most important parameters Core Web Vitals

The three-parameter LCP, FID, and CLS should all be green to get a good score, here are a few tips to optimizing them

• Optimizing for LCP: Largest Contentful Paint (LCP) is a measure of loading performance. If you have gone through the above improvements like image optimization, webp usage, and lazy loading, in the desktop version it should be easy to score above 90. The optimizations needed for this are :
  — Improve image size and WebP based image
  — Lazy Loading of assets like images, iframes, etc
  — Reduce requests and optimize CSS and JS
• Optimizing for FID: First Input Delay (FID), measures interactivity. The optimizations needed for this are which were covered before :
  — Defer Javascript to improve how fast the Page becomes interactive
  — Avoid loading third-party scripts at the start
• Optimizing for CLS: Cumulative Layout Shift (CLS), which measures visual stability. This mainly means that the Layout does not move when the site is loading, a few quick methods to do it are to specify Image and Video Dimensions and make sure the Site looks the same with JS Disabled ( In Chrome you may use ). Some quick tips
  — Specify Dimensions for images and videos
  — Avoid Dynamic content above the fold
  — Keep space where ads and other such dynamic content will load.

I hope after following the steps you should have been able to make your site faster. If you have any other ideas and suggestions that can make significant improvements on the frontend side of things.