Website optimization: 10 page speed tricks for WordPress 🚀
We have accepted the challenge: Before website optimization, our Startup Force website only scored a sad 44 out of 100 😱 in the Google PageSpeed Insights test. We’ll show you how your website can also achieve 90 points 🥳 on mobile devices*
*The value can fluctuate and is usually between 85 and 95
Why you should do a page speed website optimization
Mobile First Indexing has been standard at Google since March 2021. In simple terms, this means that Google will only index websites with crawlers that imitate mobile devices such as smartphones. Until then, different crawlers were used to index your website. If your website scored well in the Google Speed Test on desktop devices, this also had a positive impact on your search engine ranking (on desktop).
Good scores on desktop devices such as laptops are quite easy to achieve. On mobile devices it is much more difficult. Several factors are responsible for this. In many cases, the internet connection on mobile devices is slower. Smartphone processors are not as powerful. And so on.
How well your website ranks in search engines therefore depends heavily on website optimization on mobile devices. This directly affects your SEO ranking. However, this is not the most important reason for page speed optimizations. The UX design (user experience) should come first. The user experience suffers massively from slow websites. As I’m sure we all know.
You can find out whether your website has already been optimized for mobile devices with this tool from Google. The tool checks your website for responsive design, but it does not check the loading times. You can test the page speed of your website with this tool.
Page builders such as Divi or Elementor are often used for WordPress websites. In addition to the enormous possibilities and advantages that these tools offer when designing websites, they unfortunately also make websites somewhat slower.
Find out how you can still achieve excellent performance on mobile devices.
We’ve all seen them, the tempting offers from providers. Who doesn’t like paying just € 3.70 for website hosting? Often the email server is already included. This is usually so-called shared hosting. This means that your website shares the performance of a server with other websites. This is the only way for providers to offer such low-cost packages. Unfortunately, these packages are not well suited for fast WordPress websites.
Dedicated servers were previously offered as an alternative. These offered the advantage of faster response times, as your website only has access to reserved resources (server performance). While these offers are considerably more expensive, they unfortunately have a massive disadvantage: you are responsible for the security of the server yourself. Keeping WordPress and all plug-ins up to date is often a challenge in itself. Who wants to worry about the security of the server on top of that?
Managed cloud hosting combines the performance benefits of a dedicated server with the security benefits of shared hosting offers. You get maximum performance without having to worry about the server. This has enabled us to massively increase the initial response times and general performance of our website.
The costs are manageable: from around € 10 per month , you’re in. If you have a lot of hits, you can buy more performance at any time without having to change provider or server. You can choose a server location in Europe (Amsterdam, Paris, Frankfurt, etc.), which is also important for compliance with GDPR requirements in the EU.
Conclusion: Hosting is a central and particularly important measure in website optimization. Even the best on-page website optimization is of little help if a slow server is the bottleneck.
Performance settings
We love working with Divi for our WordPress websites. The page builder offers enormous technical and creative possibilities when designing websites. However, if page builders such as Divi or Elementor are not configured correctly, they tend to make websites slower.
The good news: Divi has invested heavily in optimizing the pagebuilder in 2021. Functions such as CSS and JavaScript minifying, intelligent loading of resources and much more are used as standard.
Our tip: Activate all settings under Divi ➝ General ➝ Performance activated. But be careful: Activating all performance settings can drastically reduce loading times, but can also lead to errors on the website.
Activate caching
Intelligent caching is essential if you want to make your website faster. Your website and the resources (pages, images, CSS, JavaScript, fonts, …) are cached on the server and in your visitors’ browsers. This allows them to be provided more quickly.
There are a number of plug-ins for WordPress such as W3 Total Cache or WP Rocket that help with website optimization. We have had excellent experience with WP Rocket and can recommend this plug-in. The plug-in requires some configuration and costs around €44 per year.
However, if, like us(see first tip), you opt for managed cloud hosting, you will often benefit from cache plugins optimized for WordPress. These plug-ins are usually optimized for the provider and deliver considerable page speed increases for your website with little configuration effort.
Activate Content Delivery Network (CDN)
A content delivery network hosts your website on several servers distributed around the world, in addition to many other functions. This allows websites to load faster, as the closest server always delivers the website.
CDNs also offer security features that protect your website from DDoS attacks, among other things. Or fully automatically optimizes, compresses and converts your images into modern formats such as WebP.
Most managed cloud hosting providers already offer CDN options. These are often already part of many packages.
Limited CDN functions from Cloudflare can also be used free of charge.
Host Google Fonts locally
Hardly any website can do without them anymore: Google Fonts. The selection of fonts is enormous and enriches every design. In most cases, the fonts are integrated directly via powerful Google servers. The disadvantage: several external requests are necessary for this, which block the structure of the page and therefore slow it down. You can find out more about this in the section“Identifying render blocking resources“.
Integrating Google Fonts via their servers is also not GDPR-compliant because Google also collects and stores user data in this way.
The good news: you don’t have to do without Google Fonts!
Find out which fonts and variants you use. Fount can help you with this. You save Fount as a bookmark in your browser. You will then receive detailed information on the fonts used on any website.
There are special plug-ins for integrating Google Fonts locally. We recommend manual integration via the caching plug-in or a child theme in WordPress. Once you have your list of Google Fonts ready, you can download them using the Google Web Fonts Helper. This will provide you with further information on how to integrate the fonts into your website using CSS. To do this, create your own CSS file. Only include the fonts in .woff2 and .woff format. Most modern browsers can cope with this and you will reduce additional loading times.
Then integrate the new CSS file directly via the functions.php of your child theme. Or even better: store the stylesheet in your caching plug-in.
Optimize images: Formats, size and compression
If you use the Enterprise CDN add-on package from Cloudflare, a large part of the optimization of your images is done automatically. This includes automatic conversion to the new WebP format.
Nevertheless, you should bear several points in mind when using images:
- Always use only the image size that is actually necessary
- Use suitable image sections
- Use JPG formats for photos
- Use PNG formats for monochrome or multicolored graphics
- Compress JPG images (e.g. with a quality of 60 %)
- Define your own additional image sizes in the functions.php of your child theme so that WordPress generates them automatically when uploading images
- You can then select the appropriate format directly when inserting images in Divi Pagebuilder
- Optimize images before uploading them to WordPress using your own software such as ImageOptim to remove metadata
Check and clean out WordPress plug-ins
Subject your installed plug-ins to a strict check under Plugins ➝ Installed plug-ins. Too many or perhaps unused plugins have a negative impact on the loading times of your website. If in doubt, it is best to test: deactivate a questionable plug-in, delete the caches of your browser and your website and carry out a page speed test. If the loading times have improved, you can now weigh up whether the performance increase is worth doing without a plug-in. If you have not activated plug-ins, you should uninstall them. Some plug-ins persistently slow down websites, even when they are deactivated.
Conclusion: But you don’t always have to do without them. Although some plug-ins slow down websites, they are essential for the operation of the website. In the next section, we explain how you can still optimize loading times.
Identify render blocking resources
You will most likely receive a recommendation in the Google PageSpeed Insights test to remove resources that are blocking rendering. But what is this actually about? Your website and the plug-ins you’re using integrate either local or external resources such as CSS and JS files. Put simply, if such a resource needs to be loaded, the browser must first load the file and then process it. In the worst-case scenario, this blocks the construction of the website and users see a blank screen.
There are several ways to solve this problem. Your caching plug-in can help by loading resources that are not immediately required for viewing the website later. These settings must be made in the configuration of Breeze, WP Rocket or other caching plug-ins.
However, such adjustments can also lead to problems in the display of the website and errors on the website. Sometimes it is even necessary to check and optimize each individual plug-in. Sometimes additional tools such as AssetCleanUp, Async JavaScript or Perfmatters are required for this.
Our recommendation: Let the professionals do it.
Reduce animations
Animation on websites can enhance the user experience and design. However, when optimizing a website in terms of loading times, their use should be well thought out and limited in a sensible way.
- Which animations are really necessary and helpful for visitors?
- Which animations can be dispensed with as they do not represent any particular added value for users?
- Which animations require a lot of resources?
- Are there any animations that may even require additional jQuery plug-ins and therefore reduce loading times?
Optimize database
You should pay some attention to your WordPress database from time to time. For example, if you have activated revisions (automatic backups of your pages and posts), then data records are constantly being written to the database that are not needed for the actual operation of the website.
Frequently asked questions (FAQs)
What is website optimization?
Website optimization is when measures are taken to improve the loading times of websites, among other things. This involves making both technical and content-related adjustments to a website. However, websites can also be optimized in other areas. For example, if websites are to be found better in search engines, this is referred to as search engine optimization (SEO).
How can I optimize my website?
To optimize the loading times of a website, it is advisable to carry out a page speed test first. This will provide you with valuable recommendations. Often several areas of a website need to be optimized in order to improve loading times.
What does website optimization cost?
The costs and effort involved in optimizing a website depend on several factors: Hosting, technology and use of frameworks and plug-ins. The effort required to achieve success on simple WordPress websites is usually limited. More complex websites usually require more effort. A serious estimate is usually only possible on an individual basis after a website has been assessed. The costs and effort also depend on the desired goals and expectations.
What is the Mobile First Index?
In 2021, Google switched the entire indexing of websites to the so-called mobile-first index. This means that websites will only be visited by mobile Google crawlers before they appear in Google search results. Until then, websites were indexed by both desktop and mobile crawlers. Good loading times on mobile devices are not only important for people, but also for your rankings on Google.
