I recently relaunched my own portfolio website (read the article how I did it) with WordPress and Elementor Pro. Of course the performance of the static webpage I had before was better than the new version which I’ve built WordPress version.
This was the Google PageSpeed Score of my old static website:
desktop: 90
mobile:81
Why was the new website slower now?
A static website as it is will probably always be slightly faster than a site built identically with wordpress. This is because the static website almost always requires less code. Depending on how the theme is built or what plugins you use with wordpress, it all bloats the code and thus worsens the page load time. Likewise, I have also used the PageBuilder Elementor, which is super easy to use – but has its weaknesses in performance. Many simple elements are nested in several container elements, so that the code becomes more and more.
Optimize images
The first pagespeed measurement after completion of the website was rather sobering. What was very obvious for the slow website were the much too large images, so the first thing you should do is to reduce the size of your images. I use the service of tinyjpg.com for this. Here you can minify a certain number of photos (jpg and png) for free. This means that data is removed almost lossless (at least hardly visible on the photo) – as well as all EXIF data, which are normally needed – except maybe on a website for photographers.
I replaced the photos and lo and behold – the loading time of the website has already improved a lot – not yet optimal, but at least a bit better.
The measurement after the image optimization now showed the following result:
But the result still does not look optimal. Especially on mobile, the value of 44 and a loading time of 4.4 seconds is not acceptable. What do you do now to improve the performance?
File compression and caching
Here comes now the best plugin for performance optimization in my opinion to use: WP-Rocket
With this plugin, several optimizations can be made at once. With a few clicks, different optimization options such as page caching and compression of JavaScript and CSS files can be made.
But beware: Not every optimization will produce good results on every page. The website should be tested again and again – sometimes it happens that the plugin optimizes a little too much and thus some functions on the website no longer work or the display is incorrect. In this case, however, exceptions can be entered in WP-Rocket, so that certain parts are not compressed.
So now I had JS and CSS compressed and multiple files combined and after the initial optimization I had the following Google PageSpeed Score:
That at least looked okay. Already out of the red zone. But how do you make it into the green zone now?
What had brought another boost was the function „remove unused css“. But this is still in the beta phase and yes, unfortunately a few css files have not loaded – in my case they were popups that have not opened. Excluding the files didn’t fix the problem either – it’s still in beta. Therefore I have deactivated this optimization again.
Below the pagespeed result you can see Google’s suggestions for improvement. Here, especially the size of the DOM element – the nesting of the individual elements was a problem. I noticed an svg file that had 20 nestings. I opened it with Adobe Illustrator, merged the layers and lo and behold – there were more hidden layers in the background – but they had an effect on the code. So the svg played out again without the hidden layers and uploaded and lo and behold – the optimization suggestion was gone and the pagespeed minimally better.
Delay JavaScript Execution
The optimization option „Delay JavaScript Execution“ of WP-Rocket was the last part of the puzzle. In this case various scripts get loaded after the user interacts instead of loading all these script at the first page load.
This might be the case especially with Elementor, where a lot of scripts are loaded that are not needed at the beginning.
The final result
And lo and behold! The PageRang can be seen! Therefore, I can highly recommend the plugin WP-Rocket for WordPress.
If you still have poor pagespeed, it could also be due to the web server. Check if the server is running the latest PHP version and database version. This is also constantly being improved. Many hosting providers also offer the option of server-side caching and GZIP compression. It’s best to ask your provider about this.
Generally you have to say that the PageSpeed Score of Google fluctuates a lot. Already from one to the next measurement you will get different values.
