I wanted to check if it is possible to get a perfect score of 100/100 on Google PageSpeed Insights with a website built with WordPress, the page builder Elementor and the Astra theme.
I decided to build my own website https://davidloor.com/ using WordPress with Elementor and following the recommendations that I will describe below, my website is getting 100/100 as you can see in the following screenshot.
This tutorial assumes that you have a WordPress site up and running.
Create a Free account on Cloudflare
"Cloudflare is one of the biggest networks operating on the Internet. People use Cloudflare services for the purposes of increasing the security and performance of their websites and services." It has a Free version which is the one that I am using for my website.
You can create a free account from here: https://dash.cloudflare.com/sign-up
For more detail about Cloudflare, you can visit their own documentation at https://www.cloudflare.com/learning/what-is-cloudflare/
Once you have completed the account registration, go to https://dash.cloudflare.com/profile/api-tokens, in the Global API Key, click on View, enter your password and copy the Key that we will use in the following steps.
Install Free WordPress plugins
We need to install two plugins on our WordPress site. If you don't know how to install a plugin in WordPress, please visit this Link and get the know-how.
1. Autoptimize
The plugin can be downloaded from this Link.
On this page, https://YOUR-SITE/wp-admin/options-general.php?page=autoptimize enable all the options enabled, but keep the following ones disabled:
- Also optimize for logged in editors/ administrators?
- Keep HTML comments?
On this page, https://YOUR-SITE/wp-admin/options-general.php?page=autoptimize_imgopt enable all the options.
On this page, https://YOUR-SITE/wp-admin/options-general.php?page=autoptimize_extra enable all the checkboxes, and if you are not using Google fonts, select the Remove Google Fonts option and click save.
2. WP Cloudflare Super Page Cache
The plugin can be downloaded from this Link.
On this page, http://YOUR-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index enter the email that you used to create the Cloudflare account and the API key that you got as explained above.
On this page, https://YOUR-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index make sure that the Enable fallback page cache option is enabled, so in case the page cannot be cached in Cloudflare, the cache from the disk can be used.
3. Disable the default fonts from the Astra Theme and the Elementor plugin
Place the following filters in the functions.php file of your theme.
/**
* Disable default astra fonts.
*/
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
* Disable astra google fonts.
*/
add_filter('astra_google_fonts_selected', function($fonts) {
return [];
});
/**
* Disable google fonts from elementor.
*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Update on 02/12/2022
I switched from the astra theme to the hello elementor theme, https://elementor.com/hello-theme/, and it helped to get 100/100 on mobile too.
Top comments (3)
Another interesting plugin for image optimization: wordpress.org/plugins/optipic/ Its automatic convert image to Webp (for webp-supported browsers) and compressed/optimized png/jpeg (for webp-unsupported browsers).
Thanks for sharing. Will give it a try. I have been using imagify imagify.io/ for that matter.
Good advice, it is doubtful that Elementor itself will slow down the site :) There are dozens of different reasons why a website may perform poorly. Among them, there are basic and most common ones that you should pay attention to first. Feel free to check out this article for more information: crocoblock.com/blog/speed-up-your-...