WPLake > Blog > 9 tips for WordPress speed optimization

9 tips for WordPress speed optimization

Time to read: 12 mins


Updated Feb 28, 2023


General Tutorials
WordPress is designed to be fast. Learn best practices and deadly mistakes which kill performance. 9 practical tips for WordPress speed optimization.

Loading time is less than a second and a permanent place in the green area of the PageSpeed Insights tool isn't a miracle for a WordPress website, but a reachable goal. In this article, we'll share practical tips about speed optimization. We promise that we won't lie. We aren't going to tell you that it's possible to optimize any super slow WordPress website, with a large number of issues, to 100% using some magic plugin or tool.

Speed is a topic that you should consider from the first day of creating a website. Our tips will definitely help you to improve the speed of your website, but how good results will you achieve, will depend on your WordPress theme.

Developers can learn best practices to build a theme with great performance. In case you're a website owner and your website is already ready, don't worry - some tips below will work for all WordPress websites.

How to measure the speed of a website

Note: this chapter is for beginners, feel free to skip it in case you already know it.

First of all, let's clarify how usually we measure the speed of a website. In this area, we can't rely on our personal feelings, that say to us was this or that website loaded fast. We use special tools and metrics that show special numbers and reports to us. There are many tools, but we'll review the most popular.

1. How to use the PageSpeed Insights tool for speed optimization of your WordPress

It's a tool from Google that is available for everyone for free. The tool uses a row of factors, like LCP (First Contentful Paint), TTI (Time To Interactive), TTFB (Time to First Byte), and others. You can read more about them on the official tool website.

So, there are two ways to use the tool:

a) Via the website

Here is the tool page, you just need to paste any url and press the Analyze button, and after some time the tool will provide a report. The main score will be in a range from 1 to 100 and will consist of many factors. It's a very useful tool, as besides the score the report will also contain specific tips for this url, that will help to improve the score.

b) Via Chrome/Brave browser

These browsers have a 'Lighthouse' tab in the Developer tools, and you can test any website in the same manner. When you have to make a row of tests this way is preferred. See the official video below for a detailed guide.

2. How to use the Developer tools panel for speed optimization of your WordPress

Every browser has its own Developer tools panel, you can open this panel by pressing F12 on your keyboard (your browser must be open of course at this time). I mean here first of all a Network tab. If we talk about estimation, this way will give you only a couple of numbers (DOMContentLoaded and Load), but it'll be enough for a primary estimation.

This way shows its full power when you need to debug speed issues in detail, as only this way allows easily to get a list of all page resources by categories (fonts, JS, CSS) and their personal load time. So, developers usually use both of these tools, PageSpeed Insights, and Developer tools together.

Why you can trust us

Before we'll go with the tips, we have to confirm our expertise, so you'll trust our words and advice. The best confirmation of our expertise in speed optimization in our view will be not portfolio jobs or screenshots, but something that is easy to see and check. It's the current website - wplake.org. It's a WordPress website and his pages (including the current article) have a loading time of less than a second and a permanent place in the greed area of the PageSpeed Insights tool.

100% score for mobile
Loading time is 278MS (a quarter of a second)

I've shared screenshots for our blog overview page, you can easily check the results yourself using DevTools of your browser or the PageSpeed Insights tool. All pages of the WPLake agency have such results, but of course, the final numbers will be a little varied depending on the server loading and the quality of your internet connection.

Tips for WordPress speed optimization

1. Don't use visual page builders

Like Elementor or any others. There are no visual page builders for WordPress, that allow the building of pages with good performance. It's the nasty truth, but we promised to tell the truth only. These visual builders attract beginners in development or website owners, as give an easy way to build beautiful pages. But everything has a price in this world, and in this case, the price is performance and page loading time.

Pages built by visual page builders have a lot of heavy JavaScript, dirty and overloaded HTML markup and your users will never receive good UX. You can use builders only if you're ready to sacrifice SEO and user experience to receive easy editing.

Don't trust their sweet stories that exactly their visual builder is optimized and your website will be fast. Trust yourself and check yourself. It's so easy to open the PageSpeed Insights tool, paste a url of their official website and check the report. For example, I've checked elementor.com for you and sharing the result:

I think no extra comments are needed. If the WordPress website of the visual page builder with a big team of developers, that already used all tricks for speed optimization to improve the score, isn't able to get good results, do you think your website will?

Just look at the markup of their website:

How many classes every element has, this markup is unreadable and stretches the page length, which is harmful to page speed and SEO.

2. Choose the right theme

As we mentioned above, exactly your theme will predict the maximum score your website will have. The perfect case is when a theme is custom and built by professional WordPress developers. In this case, they'll able to use best practices, like using pure JS and avoiding unused CSS/JS code on pages.

With the right theme, the speed optimization process of your WordPress will include only external items. Like hosting or CDN. But all the internal items will be built-in from the begin. Much better, isn't?

Your theme predicts these things, and they can't be changed easily down the line. They can use some bones or frameworks to decrease developing time, but it won't decrease performance. Furthermore, your theme has a big impact on the security level of your website.

In case you don't have this opportunity and have to choose something from ready WordPress themes, then we give the same advice. Don't trust promises, trust yourself and check yourself. Check their website via the PageSpeed Insights tool, find and check famous websites that were built using that theme, and only after that purchase and use that theme. It's not a problem, as usual, themes highlight their top clients.

Theme isn't a glove, in most cases you won't be able to change it on a fly. Every theme has its own unique settings and style, that can't be migrated to a new one automatically. You you're a developer, read what must a good WordPress developer know to check and improve your knowledge. If you want to create a good theme you must have strong knowledge of many aspects of WordPress development.

3. Use CDN for static assets

Content Delivery Network, CDN - is the most simple and cheap way to decrease page loading time. By default, static assets, like images, scripts and styles exist only on a server of your hosting vendor. It's a specific place, which means users from other countries, especially those that are away from this location, will have a big loading time of these assets.

CDN vendors offer a solution, a worldwide network of their own servers, that stores copies of your assets. In this way, a user that requests your website will receive assets from the nearest server, which decreases page loading time significantly.

This solution isn't very useful in case your website reflects a local business. In this case, your visitors always visit your website only from one region. CDN still will be helpful for SEO, as search engines locate their robots in different countries, and consider page loading time. But your users won't see a big difference.

For our website we use Cloudflare. It's one of the most famous CDN vendors, furthermore, it has a free tariff which will be enough for most websites.

4. Use SSD hosting

Chose a good SSD hosting vendor. SSD hosting it's hosting that uses SSD disks for their servers, not HDD. It will significantly reduce delays in all operations with files and will decrease page loading time.

Even in case you use some CDN, SSH hosting is still a very important item in the WordPress speed optimization list. Just because WordPress website consists not only of images and styles. It's a lot of PHP files that WordPress includes within every request. It's hundreds of requests to the Database (which is also a file btw) and many other operations with files.

We don't have advertising here. That's why we not going to promote any hosting vendors. Just try to search 'SSD hosting' and choose the best, or make sure that your hosting vendor uses SSD disks.

5. Use server cache

By default, when a user requests some page on your website WordPress generates it from a scratch. It means hundreds of requests to the Database and many PHP operations. The time that came since a user requested some page to the moment when his browser received an HTML code is pretty big. This delay slow downs your website and is harmful to SEO.

You can decrease this time by using the server cache. It means the page generation process happens only once, and then users receive ready HTML without the execution of expensive PHP code.

The are many good cache plugins for WordPress. They take care of everything and make the server cache feature for you the same easy as enabling a plugin. For our website, we use WPSuperCache, which is free.

But pay attention, that cache plugins may affect your WordPress Cron tasks. Due to the fact, that PHP execution is skipped for visitors, Cron will be called only when admins visit the website. Which may happen rarely and make your tasks outdated. If your Cron tasks are important, e.g. have a relation to API, see how to combine System and WordPress Cron to avoid this behavior.

6. Use lazy loading for images

It's another very efficient and simple way to decrease page loading time. By default browser parses the HTML of your page and loads all found images immediately. It forces users to wait more and makes a website slower.

Lazy loading says to a browser that images on a page must be loaded only when a user is near them and scrolling a page. In this way downloading images that are at the bottom and invisible delays, and makes loading time better. Then, when a user scrolls, a browser loads images step by step, but ahead, so it all happens in the background and is unnoticeable to the user.

Before developers had to write their own JS code to implement lazy loading, but now all major browsers support it. You can use the loading="lazy" attribute for images. Read more about the attribute here.

WordPress since 5.4 has it by default for all images that you add to a page via the Gutenberg editor. But it also depends on your theme, many images can be out of the Gutenberg content and have no lazy loading. You need to check if the loading="lazy" attribute is presented for all of the images, and in case it isn't, then you've to amend your theme or ask your developer.

7. Use pure JavaScript

Under pure JavaScript and I mean avoiding using any big libraries, like jQuery. Using TypeScript is still a good idea, as it makes your JS code better, and after compiling turns it into plain JavaScript.

There are so many libraries and tools that use jQuery, so many sliders, tables, and data charts. Forget about them. Do not use jQuery, use only pure JavaScript and libraries that don't require jQuery. It's important for your WordPress website not only about speed optimization but also regarding User Experience.

Using jQuery on a front will slow down your website, as the library contains hundreds of functions. From them you'll use only a few on a page, others will just waste precious loading time. Furthermore, jQuery code isn't optimized for working with DOM. That's why this library can't provide a good and smooth experience for users.

It may sound complex and difficult to forget about jQuery, but believe us, you'll get used to pure JS very quickly. Pretty soon you'll ask yourself: why did I use it before? After some time you'll have your own list of pure-js libraries that will help you in solving different tasks.

We can suggest using the @splidejs/splide package to create sliders and carousels, this package is written on pure JS and helps to create sliders very easily, is also flexible, and has a lot of settings. You can read more about the package on the official website.

Open to yourself WebComponents. This feature is supported by all major browsers and allows you to work with HTML elements easily. You can read more about it here. On our website we use Catalyst. It's a tiny TypeScript library that makes working with WebComponents super easy.

8. Use minification and avoid unused CSS and JS

Unused CSS and JS

A large amount of unused CSS rules and JS code is one of the main reasons that make your website slow. Usually, it happens when you've global styles and scripts for a whole website or for many different templates.

In this case the story with jQuery repeats. A certain page uses only a bit of a CSS or JS file, but a browser has to load all the file. Precious time is spent, as CSS and JS files require not only loading but also parsing and executing, which are expensive for resources.


Your CSS and JS code is written by humans. It means variable names must be pretty long there (to be clear), and formatting (spaces, tabs) is used to make code readable. But any browser is software and doesn't require it. Empty spaces and tabs can take more than half of the size of a not minified file. Minification is a process that removes all spaces from human-written code and replaces variable names with shorter ones. For example, var screenSize=1920; will be replaced with var o=1920;. Do you see how shorter it is? Programmers can't use such short names, as this code isn't readable for humans. But a browser has no issues with such code.

The solution

The solution for both is creating template-specific CSS and JS bundles. Bundle is a file that contains a row of small CSS/JS modules. It can be done only within a theme. Unfortunately, if you're a website owner without coding skills then you can't change it for an already existing theme.

In case you're a developer, consider Webpack or alternative solutions. They allow keeping CSS and JS in modules and provide an automatic minification process.

In this way for example homepage and contact page will have different CSS and JS files, that will contain rules only for presented elements. Don't worry, you still can have common elements, as modules can be imported many times, so you won't need to write the same code multiple times.

On our website, we use LaravelMix, a Webpack extension that takes care of all settings of Webpack and provides a super easy way to work with Webpack.

9. Inline critical CSS

This is a very powerful item in the WordPress speed optimization list. It allows to improve user experience and many PageSpeed Insights metrics, like FCP and CLS. It means you need to add all the critical CSS right to the head tag of the HTML code of a page, instead of the ordinary way including it as a separate file via the link element.

In this way, a browser doesn't spend time loading the file, and begins parsing and applying CSS rules much earlier, which reduces page loading time.

To reach it you've to use a custom theme, and the developer of the theme must implement this feature. You can read more about critical CSS here.

On our website we have page specific bandles, and inline all the CSS code from a bandle, without splitting into critical and not critical. It saves a lot of time. The main thing in this approach is that you must have a clear and simple design. Otherwise, a number of CSS rules will be too big and it'll stretch the size of an HTML document, which will increase page loading time.


We've reviewed all the main items that you must know and apply in your WordPress speed optimization process.

Some of them require programming skills and can't be done by website owners, those items are for developers, please consider them while creating a new theme.

But some of the items don't require programming skills at all, in case you're an owner of a slow website and want to speed up your WordPress, then it's easy to set up CDN yourself or install a cache plugin. Those items will help you even in case you don't know how to modify a theme code.

About the Author
Maxim Akimov

Certificated WordPress expert from Ukraine with over 7 years of experience.
Advocate of the BEM methodology and the overall modular approach.
Loves sporting activities, enjoys gyming and plays table tennis regularly.

Table of contents

Got it