“The max loading time a website visitor is prepared to wait is 2 seconds. By 3 seconds the user will start ticking on his desk. The fourth second the user is gone. And might never come back.”
During our WP Meetup in September Marcel Bootsman from Kinsta highlighted 5 steps to improve speed and performance on our WordPress websites.
Slides:
A faster WordPress site in five steps – by Marcel Bootsman
Why speed up your website
Before sharing his 5 steps, Marcel refreshed our memory with why we need to have a fast loading website. A few important reasons:
- Visitors will leave if your site is slow
- Search engines use speed as a ranking factor
- Slow speed impacts our conversions and sales. When visitors need to wait for the next step in their buying process, they go somewhere else.
How to measure your website speed
He then showed us some useful tips on how to measure our website’s performance:
- Use one tool if you’re optimizing because each tool has different parameters. You can’t compare the outcomes of different tools because they don’t measure things in the same way.
- Test for multiple locations. In The Netherlands we might have fast internet, but in other parts of the world the connection could be a lot slower.
- There are some handy tools out there that give you all kinds of recommendations to improve your website performance:
GT metrix
Pagespeed insights
Pingdom website speed test
Lighthouse: integrated browser tool with pagespeed insights
Marcel’s 5 steps to make your website faster
Although there is a lot more to website performance than these 5 steps, you can already make a significant improvement in page speed and performance with changing just these 5 things.
1. Choose the best hosting
Which means the best hosting the available budget of your agency or company can buy.
To find out which hosting company is the best for you: test! And you do that by looking for different websites that are using that hosting. And then you measure how they perform.
Also check for reviews. Keep in mind that you never know what kind of websites people have on a specific hosting. Which means you don’t know if it will be a fit for yours. So try to figure that out. You can find reviews on websites like Hostingvergelijker and other hosting comparitors.
Other tips on finding the best hosting:
- Talk to your peers and industry leaders.
- Test the hosting with complex websites.
- Check if the hosting integrates with your your current workflow and processes e.g. staging, testing and migration.
2. Use caching
There are 2 kinds of caching: server caching and plugin caching. In the end they mostly do the same, but server caching could be slightly better, because its integrated overall. The disadvantage is that your hosting is probably more expensive.
Server caching:
Some hosting company do server caching and some don’t. Check the specs of your hoster.
Plugin caching:
For Plugin Caching you obviously new a plugin. There are a lot of good ones out there, for example:
- Wp rocket
- Cache enabler
- W3 total cache
3. Optimize images
Images can have a heavy impact on the size of your website. And size matters. Its therefore important to find a balance between size and quality. You optimize till your images weigh the least, but still look pixel perfect. Marcel explains how explains how to do this step by step.
- Choose the right file (png/jpeg/webp). Illustrations have less information in them than photos, therefore you can best use .jpg for photos and .png for illustrations. .Svg images are also great for illustration, logo, icons, etc. Webp is also a good option, but it’s going to take a few more years to become a standard, some browsers don’t even support it yet.
- Look for lossless compression instead of lossy compression when optimizing images . Lossy compression takes out information in your picture and thus, loses a lot of quality. Lossless compression only compresses till it can’t compress any further without taking away any of the information. The quality therefore stays the same.
- Don’t use images for decoration only.
And he mentions some handy plugins for images:
- Imagify: does the compression on their own server and then sends the compressed file back. It doesn’t hit your performance and is integrated in wp library.
- Wp smush: does the same as Imagify.
- Imsanity: restricts uploading to heavy images onto your site by letting you set a maximum file size.
4. Use a CDN
A CDN takes your static files, puts them on another server, and when a user visits your site, it chooses the location closest by to load the files. This will save you a lot of bandwith.
If you have a lot of static (javascript, css, etc) content, then a CDN is definitely recommended. But even if you don’t have a lot of static files, it will probably save you on speed. Remember that CDN doesn’t replace your host. And by combining CDN and caching plugins, your website will perform even better.
5. Find slow plugins
According to Marcel, there is no such thing as having too many plugins. Its a myth that your website sucks if you have 40 plugins on there. But there is such a thing as ‘bad plugins’. Plugins can come in very handy. But they do require server processing. So it is important to check your plugins regularly.
He suggests two plugins to find slow plugins on your wordpress website:
- Use an APM tool like New Relic of kinsta APM
- Use a query monitor wordpress plugin
You can find the slides of Marcel’s presentation here:
A faster WordPress site in five steps – by Marcel Bootsman
Our recap of this meetup:
Recap: WP Meetup Amsterdam Sept 2022
Meetup Summary on website Kinsta:
https://kinsta.com/nl/blog/wordpress-meetup-amsterdam/
