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.

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

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

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

WordPress with Avada theme and text + 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:

WordPress with Avada theme and text + image + 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.

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

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

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

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!

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

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.

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.

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:

• For Apache, I recommend the WPRocket plugin
• For LiteSpeed WebServer I recommend the LiteSpeed Cache plugin

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}

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

Cloudflare also has an “auto minify option”:

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:

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/

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:

• WP Rocket
• WP Super Cache

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

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 

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

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:

• WebP express
• EWWW
• Shortpixel Image Optimizer
• Smush
• WebP converter for media

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.

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

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

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:

• wp_actionscheduler_actions & wp_actionscheduler_logs tables
• User already has more than ‘max_user_connections’ active connections
• Adding high-performance keys to MySQL tables to speed up WordPress

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:

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.

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.

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.

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.

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

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)