Last updated - May 26, 2022
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.
Which is why you should consider using online tools like Google’s PageSpeed Insights and GTmetrix to gather reliable and useful data about your website’s performance. Here’s how they work:
- 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.
Optimize JavaScript and CSS
JavaScript and CSS make up a significant part of a webpage’s structure. So as much as they’re required to render a webpage, they can also contribute to slowing it down. Therefore, it’s important that you optimize their usage as much as possible.
You’ll commonly see the following 4 JavaScript and CSS optimization suggestions in PageSpeed Insights:
- Remove unused JavaScript – Remove unused JavaScript to reduce bytes consumed by network activity.
- 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 JavaScript – Minifying JavaScript files can reduce payload sizes and script parse time.
- 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.
You can tackle these issues using the Asset Cleanup plugin easily. After installing it, head to Asset Cleanup > CSS/JS Manager section. Here, you can choose to remove specific CSS and JavaScript files from a particular page or the whole website. The plugin lets you optimize scripts from individual themes, plugins, the WordPress core, and third-party sources.
In the “Settings” section, you’ll find further options to minify CSS and JavaScript. Plus, you can just scroll down to enable inline and defer options, which help eliminate render-blocking resources.
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.
Image Optimization
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.
Browser Caching
Browser caching can help reduce server load by reducing the number of requests per page. So cacheable resources like images, CSS, JavaScript, and others don’t have to be downloaded every single time. You can use a browser caching plugin like W3 Total Cache to leverage browser caching on your WordPress website.
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.
Conclusion
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:
Another rather important point on acceleration is optimization and compression of images on the site. You may manually optimize each picture (through Photoshop for example), or automatically (through special services). Here is an interesting article about it: https://optipic.io/en/blog/how-and-why-to-optimize-iamges-on-the-site/
Hi Alex,
Thanks for your suggestion.