DEV Community

David Loor
David Loor

Posted on • Edited on • Originally published at davidloor.com

11 4

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

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

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (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

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more