DEV Community

loading...

How to get 100/100 on Google PageSpeed Insights with a WordPress site and the page builder Elementor

David Loor
・2 min read

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.
Alt Text

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:

  1. Also optimize for logged in editors/ administrators?
  2. 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' );
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
alexbeglov1989 profile image
alexbeglov1989

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).

Collapse
davo20019 profile image
David Loor Author

Thanks for sharing. Will give it a try. I have been using imagify imagify.io/ for that matter.

Collapse
lana_miro profile image
Lana Miro • Edited

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-...