wp-admin Β» How to Score 100% on Google PageSpeed Insights with WordPress πŸ’― πŸ”₯

How to Score 100% on Google PageSpeed Insights with WordPress πŸ’― πŸ”₯

Google’s PageSpeed Insights tool gives you a score between 0-100, with 100 being the fastest loading time. Slow websites rank lower in Google, have lower conversion rates, and generate less revenue with higher expenses.

image 1 1024x514 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

In this guide We will first check what is actually showing down a WordPress website by running a test for a number of scenarios:

WordPress with Avada themeGoogle PageSpeed Score for MobileGoogle PageSpeed Score for Desktop
text only7090
text + images50 ▼90 ▼
text + images + youtube video30 ▼85 ▼
text + images + youtube video + google&fb tracking codes25 ▼80 ▼
text + images + youtube video + google&fb tracking codes + WPRocket plugin85 ▲95 ▲
text + images + youtube video + google&fb tracking codes + WPRocket plugin + Cloudflare CDN87 ▲100 ▲

In the end, We will have a clear picture and answers to all the important questions about website speed:

  • Does hosting matter? – Yes, LiteSpeed is faster.
  • Should I use a WordPress caching plugin? – Yes, static content will load faster.
  • Do I need CDN? – Yes, Cloudflare is free, use it!
  • Does a WP theme matter for speed? Yes, well-optimized themes such as Avada and GeneratePress will help you achieve a perfect 100% score on Google PageSpeed.

First, let’s talk hosting, I choose a small shared hosting Cpanel plan at 40€/year.

The hosting specs:

Number Of Processes: max 100
Entry Processes: max 20
Physical Memory Usage: max 2 GB
IOPS: max 1024
I/O usage: 5 MB/s

Let’s begin testing!


WordPress with Avada theme and text only

HostingWordPressThemeContent
Apache 2.46.0.2Avada 7.8.2Text only

On a shared Webhosting with Cpanel, I Installed WordPress, then installed Avada and activated it without adding any content or importing a demo.

image 2 1024x515 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
Avada WordPress theme with text only

WordPress with Avada theme and text + image

HostingWordPressThemeContent
Apache 2.46.0.2Avada 7.8.2Text
image

I’ve added a simple image (99.7KB screenshot.png) to the same page and re-run the tests. Google PageSpeed score dropped 30% for mobile but stayed pretty much the same for desktop view:

image 3 1024x514 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
Avada WordPress theme with text + image

WordPress with Avada theme and text + image + video

HostingWordPressThemeContent
Apache 2.46.0.2Avada 7.8.2Text
image
youtube video

To the same page I’ve added youtube video (iframe) so that now the page is showing text, image and a video. Score dropped to 20-25 for mobile and 75-85 on desktop.

image 5 1024x515 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
Avada theme with text + images + youtube video

WordPress with Avada theme and text + image + video + google/fb

HostingWordPressThemeContentPlugins
Apache 2.46.0.2Avada 7.8.2Text
image
youtube video
Facebook for WordPress
Site Kit by Google

Added Google Analytics and Facebook Pixel tracking codes to the site by installing plugins: Facebook for WordPress and Site Kit by Google.

image 4 1024x515 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
Avada theme with text + images + youtube video + google&fb tracking codes

WordPress with Avada theme and text + image + video + google/fb + caching plugin

HostingWordPressThemeContentPlugins
Apache 2.46.0.2Avada 7.8.2Text
image
youtube video
Facebook for WordPress
Site Kit by Google
WP Rocket

Added WPRocket Caching plugin to the above website (WordPress with Avada theme and text + image + video + google/fb). All available options are enabled and re-run the test.

The score improved by a lot!

image 6 1024x515 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
Avada theme with text + images + youtube video + google&fb tracking codes + WPRocket

WordPress with Avada theme and text + image + video + google/fb + caching plugin + Cloudflare CDN

HostingWordPressThemeContentPluginsCDN
Apache 2.46.0.2Avada 7.8.2Text
image
youtube video
Facebook for WordPress
Site Kit by Google
WP Rocket
Cloudflare

Added the domain to Cloudflare, set Caching, and connected the account to the WPRocket Cloudflare addon.

Pagespeed didn’t improve by much, but it is still noticeable.

chrome qThPyAvnb3 1024x516 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
Avada theme with text + images + youtube video + google&fb tracking codes + WPRocket + Cloudflare

These tests are done with minimum content, 1 paragraph, 1 image, 1 youtube video, and 3 WordPress plugins only. Real websites have a lot more content than that, and once you add actual content and plugins, those page speed scores go down really fast. This is where Google PageSpeed suggestions actually come in handy.

❗ For further testing, I will install demo content on the Avada theme: Avada Classic.

How to Use PageSpeed Insights Tool

After checking your website in Google pageSpeed insights tool, below the score and metrics sections, you will see OPPORTUNITIES and DIAGNOSTICS.

image 10 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Here you can see suggestions specific to your website, that will help you optimize WordPress for speed. When clicking on each suggestion you will see a brief description of what needs to be optimized. In the following part of this guide We will go through each suggestion and show ways on optimizing them specifically on WordPress sites.

In the examples bellow I will mention two scenarios depending on the webserver that your hosting is using:


Properly size images

Media files such as images can lower your site’s performance. For example, if you have a profile image that is defined by the theme to be displayed in a maximum of 300x149px, and you’ve uploaded a 2400x1350px image, then CSS is used to resize the image.

The user must first download the entire image (2.5MB), which their browser then resizes to the required dimensions. Because this is done from the user’s side (via the browser), due to improper image sizing, the user downloaded 2.2MB more of content just for one image.

In WordPress, most plugins and themes do the resizing for you, by creating a copy of each image in different sizes that are actually used on the website. For example in Elementor, you can manually select the image size for each image that you add and the image will be cropped to those dimensions.


Defer offscreen images

Deferring offscreen images is more commonly referred to as “lazy loading,” where each picture is loaded in the browser only when it comes into the user’s viewpoint (above-the-fold). The user’s browser will only download the images required for the visible top portion of the page, and it will only load the rest (bellow-the-fold) when the user scrolls to those areas.

There are several WordPress plugins made specifically for lazy loading, including a3 Lazy Load and Lazy Load by WP Rocket


Minify CSS

Minify-ing code simply means to make the size smaller by removing space, new lines, and comments from the code. For example, this code is 145 B in size:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

and by removing the new lines and spaces the size is reduced to 79 B:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px}
work - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Both LiteSpeed Cache and WPRocket plugins have a CSS Minify option:

image 12 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
wprocket activate minify - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Cloudflare also has an “auto minify option”:

image 13 1024x393 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Minify JavaScript

Minify JavaScript code is exactly the same as minify CSS: remove comments, spaces, and new lines from the code to save some space.

LiteSpeed Cache and WPRocket plugins, as well as Cloudflare, all support Javascript Minify:

minify js lscache plugin - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
minify js - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Enable text compression

Text compression uses “GZIP compression” – a method of compressing website files on the server, and if a browser supports GZIP, it will download these compressed files and extract them when opening the website.

To test if your website already has GZIP enabled, use this tool: https://www.giftofspeed.com/gzip-test/

image 14 1024x519 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Please note that Brotli is a newer and better alternative to GZIP and should be used instead for better performance.

GZIP has to be enabled on server level and if it is already enabled you can add it to WordPress manually via .htaccess file or by using a caching plugin such as:


All text remains visible during webfont loads

If you use a custom font that is not available by default on all systems, then some browsers will not displays the text before downloading that font from the web, causing a flash of invisible text (FOIT).

See also  How to Identify if My WordPress Website is Hacked?

To get around this issue, you can specify a default font that should be used instead to display the text while the custom font Is loaded. Then when the custom font is loaded, simply replace the text style.

In CSS this is achieved by specifying font-display: swap; and a number of local fonts to use as a fallback, for example:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

LiteSpeed Cache plugin has an option to set font-display: swap; available from Page Optimization > CSS Settings 

image 15 1024x198 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

and WPRocket plugin adds font-display: swap; descriptor to fonts if the “Remove Unused CSS” option is enabled:

Remove Unused CSS option Source WP Rocket - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Image elements do not have explicit width and height

This basically means that images don’t have the size defined, for example:

You have an image that you add to the page, the image dimensions are 1500x1500px and the image is added this way:

<img src="example.jpg" alt="Just a demo">

the browser will try to determine the optimal image size and this might cause large layout shifts as your page loads.

But If you specify the exact size that the image has to be, then the browser will display the image in that size, and even before the image is loaded that empty space will be reserved for the image.

<img src="example.jpg" width="640" height="360" alt="Just a demo">

These days, the majority of plugins, themes, and the WordPress core all adhere to the same standards and automatically specify the image dimensions so you don’t have to. If you still get this suggestion in Google pageSpeed, identify which element has this issue and define dimensions manually. Here is an example for the GeneratePress theme: [Fix] Image Elements do not have explicit width and height in GeneratePress

Also WP Rocket’s media optimization features are enough to keep you covered.


Serve images in next-gen formats

For decades We have been using images in the .png and .jpg formats, but now next-gen image formats are available that offer superior compression and quality. There are two main next-gen formats you can use for your images on WordPress, namely: WebP (developed by Google) and AVIF (developed by Alliance for Open Media). What’s the difference?

  • WebP is supported by the majority of browsers so I suggest using .webp for WordPress.
  • AVIF offers better compression but is behind in browser support as a young file format. 

Why serve images in next-gen formats?

WebP images are about 30% smaller in size compared to PNG and JPEG images.

For WordPress there are number of plugins that allow you to automatically convert all existing images to webp:

You can also enable webp images manually without any plugin, simply by adding this snippet to your .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
  # Vary: Accept for all the requests to jpeg, png and gif
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Eliminate render-blocking resources

Using WPRocket and LiteSpeed plugins you can eliminate render-blocking resources. This is achieved by Caching plugins automatically by adding appropriate defer or async attributes to <script> and/or <link> tags in the code.

The “Load JavaScript deferred” feature in WP Rocket eliminates the render-blocking JS on your website by adding the “defer” tag in each script tag.

wprocket eleminate renderblovking resources 1024x335 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

And in the LiteSpeed Cache plugin you can use “Load CSS Asynchronously” for avoiding render-blocking resources.

critical css updated - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Reduce initial server response time

“Reduce initial server response time” recommendation means that users are waiting for more than they should for the page to load, and this is caused either by high traffic, low server performance, or DNS issues (response time or network latency).

First check if your hosting is not causing problems, use tool such as https://tools.keycdn.com/performance

image 16 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

If TTFB is less than 100ms you are good, and the problem is not that server is unreachable or has bad routing, but just takes a lot of time to respond, most likely due to not optimized code, huge database tables or network traffic.

For more information make sure to read:

So the solution to reducing initial server response time is to use fast hosting and CDN, set caching plugins, GZIP compression, and optimize the database.

Both WPRocket and LiteSpeed Cache plugins have basic Database optimization features:

WP Rocket Database Tab - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥
chrome 8W24t55zSf 1024x660 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Serve static assets with an efficient cache policy 

When a user navigates to your website, his browser must download all of your page’s resources, including HTML, CSS, JavaScript, and images, each time it loads a page. By caching these files locally in the user’s browser, you can reduce page load times on return visits.

To set up an efficient cache policy, use a caching plugin:

  • To enable browser caching with WP Rocket, all you have to do is to install and activate it.
  • For LiteSpeed: LiteSpeed Cache Settings > Browser and Enable browser cache.
image 17 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

You can also manually add this code to your .htaccess file:

<IfModule mod_expires.c>
  ExpiresActive On

 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  # Others
  ExpiresByType application/pdf "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Reduce unused CSS

Unused CSS are stylesheets completely useless for rendering and loading the page — yet, they’re included in the page’s code. These include files needed for the wp-admin dashboard, or contact form plugin assets that are loaded on each page, even tho you don’t have a contact page everywhere, etc.

WPRocket has a feature to remove automatically unused CSS:

All CSS files should be minified, and you can also reduce the number of fonts in them, and store them on your server and not at Google fonts.

RUCSS 3 11 1024x423 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

Please note that for this WPRocket feature to work you need also to whitelist IPs.


Reduce unused JavaScript

Unused JavaScript unnecessarily increases browser execution time, slowing down your page load. Unused JavaScript can be divided into Non-critical which is not used on that particular page, and dead javascript which isn’t used anywhere on the website at all.

For example, If your theme has features to create popups but you don’t have them created, it will nevertheless load all those dead javascript codes.

remove unused js - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

To reduce unused javascript code developers use code-splitting, where individual .js files are used for separate functions, and only loaded where needed. GeneratePress is a great theme that utilizes this method.

Inside LiteSpeed Cache plugin you can enable JS minify.

image 18 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

And WPRocket has a feature to delay loading JavaScript files execution:

delay js execution 3 9 2 - How to Score 100% on Google PageSpeed Insights with WordPress 💯 🔥

You can also use a plugin such as Asset CleanUp to remove unused files from pages.


Avoid an excessive DOM size

When a web page is loaded, the browser creates a Document Object Model (DOM) of the page, which is basically a tree of Objects:

The more content (text, links, images..) you add to the page, the DOM size increases. Why is DOM size important? Browsers have to use visitor’s device memory (RAM) to generate the content, and the largest the DOM tree – the more time is needed for the page to render.

Unfortunately, neither WP Rocket, LiteSpeed Cache nor any other caching plugin can help to reduce the number of DOM elements, this can be only addressed directly by reducing the amount of content displayed on each page. 

  • Limit the number of posts/products displayed on a page
  • Reduce the number of sections of the page.
  • Switch to a simpler WordPress theme.

that’s it!


WordPress plugins to Score 100% on Google PageSpeed Insights

For Apache web servers I recommend using WPRocket + Cloudflare CDN; For LiteSpeed servers, I recommend using LiteSpeed Cache plugin and QUIC.cloud or Cloudflare for CDN.

Here is a great tutorial by Tom Dupuis on The Ideal LiteSpeed Cache Settings (With QUIC.cloud CDN Setup Instructions)

Was this post helpful?

Leave a Comment

I enjoy constructive responses and professional comments to my posts, and invite anyone to comment or link to my site.

Recommended