WordPress is designed to be fast. We’ll describe deadly mistakes that break it, and features that will help to improve the speed. These 9 practical tips will help you speed up your WordPress website.
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 WordPress speed optimization, and we promise that we won’t lie. We aren’t going to tell you that any existing WordPress website that is super slow, regardless of a number of issues, can be optimized to the 100% using some magic plugin or tool.
Speed is a topic that should be considered 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. PageSpeed Insights tool
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 in detail on the official website from Google.
There are two ways to use the tool:
a) Via the website
Here is a tool website, 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 may be preferred.
2. Developer tools panel
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 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 wplake.org 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
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 are attractive for 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 official website of the visual page builder with a big team of developers, that already used all tricks 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, which 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. These things are predicted by a theme, and can’t be changed easily. They can use some bones or frameworks to decrease developing time, but it won’t decrease performance.
In case you don’t have this opportunity and have to choose something from ready WordPress themes, then 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.
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 are placed 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 won’t be 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 SEO robots are placed in different locations, 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 means disks on servers are SSD, 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, SSD hosting still will make a change. WordPress website consists not only of images and styles: it’s a lot of PHP files that are included within every request. It’s hundreds of requests to the Database (which is also a file btw) and many other operations with files.
It’s not a paid article, we’ve no advertising here, so I’m 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 it’s being generated by WordPress from a scratch. It means hundreds of requests to the Database and many PHP operations. 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, that 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.
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 in ahead, so it all happens in the background and unnoticable 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 are added 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.
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 regarding working with DOM. It means 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. Prety 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 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 is expensive about resources.
Minification
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. 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 won't have any 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, so 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 that allow keep 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 powerful way to improve user experience and many PageSpeed Insights metrics, like FCP and CLS. It means that all CSS that is critical should be added 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 shouldn’t spend time loading the file, with it parsing and applying CSS rules beginning 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.
Conclusions
We’ve reviewed all the main items that you must know in order to optimize WordPress speed.
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.
We’ve considered speed optimization, but security is also an important topic. Read 5 Pro Tips to secure WordPress from hacking.
Top comments (0)