Last updated - July 26, 2021
A website’s performance is affected by a long list of direct and indirect factors. From image dimensions to caching settings, each factor contributes to the core user’s experience.
Analyzing the impact of each of these factors is hard, and striking a balance between them even harder. But thankfully, we can use online tools to eliminate the guesswork in what really goes on behind the scenes on our WordPress website and take targeted, effective steps to improve its performance.
In this article, you’ll learn about the various advanced tips you can follow to improve WordPress website performance.
Tools for WordPress Website Performance
When a website owner or administrator wants to conduct a performance audit of their WordPress website, the biggest challenge is detecting where the entire system is lagging behind. Afterall, going over every single plugin, theme, WordPress setting, and piece of code with a performance-lens can be time-taking and ineffective.
And when you don’t know what to fix, you don’t know how to fix it.
- Using just a URL, these tools analyze all the factors that contribute to a website’s performance and assign a score or grade.
- Both of these tools test your WordPress website performance on 3 main aspects (or core web vitals):
- Largest Contentful Paint – measures the loading performance by reporting the render time of the largest image or text block visible within a viewport. This should ideally occur within the first 2.5 seconds.
- First Input Delay – measures the interactivity by measuring the time between the user’s first interaction and the browser’s first event handler processing. This metric should be ideally less than 100 milliseconds.
- Cumulative Layout Shift – measures the visual stability by accounting for unexpected layout shifts that occur during the lifespan of the page. Your page should strive for a CLS score of less than 0.1.
- The three core web vitals are further directly and indirectly affected by several factors. So the tool also suggests the factors that you can focus on to improve your website’s performance.
Of course, these suggestions vary from one website to another. But you’ll always notice a few frequently appearing factors that have a high impact on a website’s performance. Let’s take a look at them.
Preload Key Requests
Preload is a system that gives web browsers hints about the resources or files that will soon become necessary to load the webpage. By preloading key requests, these files and resources are simultaneously downloaded while the browser is doing something else.
This is done by adding the rel=”preload” attribute to the <link> elements in the page header. Plugins like Pre* Party Resource Hints make it easy to preload key requests.
On the PageSpeed Insights reports page, expand the “Preload key requests” suggestion. Then, copy the link to the resource provided.
Next, head to Pre* Party > Insert Hints in your WordPress dashboard. Paste the copied link in the URL field and enable the “Preload” option. Then, click Insert Resource Hint.
Repeat the process for all the resources that popped up in the PageSpeed Insights report.
- Remove unused CSS – Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.
- Minify CSS – Minifying CSS files can reduce network payload sizes.
- Eliminate render-blocking resources – Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
Reduce Initial Server Response Time
When users head to a URL in their browser, a network request is sent from the browser to fetch that content. Your server receives the request and returns the page content.
At this stage, the server may need to perform many time taking functions to be able to return a page with all of the requested content. One way to reduce the time users spend waiting for pages to load is to optimize the server such that this process is completed as quickly as possible.
PageSpeed Insights suggests the following:
- Using optimized themes like Astra and GeneratePress.
- Using optimized plugins like W3 Total Cache.
- Upgrading your server.
Images contribute to over half the page weight of an average WordPress page. Moreover, hundreds of unoptimized images spread across posts and pages can really slow your website down.
You can manipulate various image attributes like its size, dimensions, serving location, and format to make sure that images have the least negative effect on your WordPress website performance. And, you can either make some of these changes before uploading the image, or use plugins to automate the process.
You can use some of the image optimization techniques as listed below:
- Image compression – Decrease the file size without affecting quality by removing unnecessary information like camera details and metadata.
- Resizing of images – Reduce the image resolution to what’s required on the webpage.
- Image CDN – Serve images faster by closing the server-user gap.
- Optimum image formats – Choose PNG for transparent background, opacity, and for logos and icons. Use JPEG for everything else.
You can read our in-depth image optimization article on the topic for more information.
After installing the plugin, head to its settings page. Here, you need to enable the option for Browser Cache. Next, head to the browser cache settings from the sidebar. And make sure to enable the expires header, cache control header, and set e-tag options.
Save the settings if you’ve made any changes.
Check out our article on WordPress browser caching to learn more about the topic.
Apart from these, your website’s PageSpeed Insights report might have many other suggestions for improvements. However, you can simply expand the suggestions on the report page to learn more about implementing them. If you still have questions, feel free to reach out to us in the comments below.
If you prefer a video version, please check out the video below: