WordPress Speed Optimization to score 100 on Google PageSpeed Insights

Everyone loves a good user experience with fast loading WordPress Website. Furthermore, page speed has become a ranking factor. I always recommend the loading time of the website in less than 3 seconds.

How to check website speed optimization issues?

Before we start Speed Optimize, here are the few sites for you to test your website speed.

GTmetrix
Pingdom
WebPageTest
Google PageSpeed Insights

I usually use GTMetrix, always run the test at least three times to get a proper result. You may learn How to Analyze a Waterfall Chart

Please do note that these scores are suggestions to improve the website, good content always comes first.

Is it possible to Speed Optimize Elementor WordPress website to Score 100/100 on Google PageSpeed Insights?

Yes, is possible, you will need to fine-tune the design for the best results. Always remember, less is more. Below is the results of my Elementor WordPress website.

Google PageSpeed Insights Mobile 100
Google PageSpeed Insights Mobile 100
Google PageSpeed Insights Desktop 100
Google PageSpeed Insights Desktop 100
GTMetrix 100/100
GTMetrix PageSpeed Score 100 YSlow Score 100

How to Speed Optimize WordPress website to Score 100/100 on Google PageSpeed Insights + Fix Slow Elementor Tips

Here are my FREE optimization guides to Optimize your WordPress website, the results may vary depending on your skills.

Always welcome to hire me to get the dirty job done. Money-back guarantee!

Fast Hosting Provider

Shared Hosting

Get a fast and reliable hosting provider; I would suggest CloudWays + Linode. But if you are a newbie with a low budget, I’ll recommend you go for A2 Hosting or SiteGround due to their support, remember the renewal with A2 Hosting or SiteGround is way too expensive, sign up for three years if possible.

A2 Hosting Software vulnerabilities automatically fixed
A2 Hosting Software vulnerabilities automatically fixed

What I like from A2 Hosting is they include Patchman Security with their shared hosting, it helps you to Detect & Patch WordPress automatically.

If you are in Malaysian, Exabytes’s Plesk WordPress Hosting or ServerFreak is a pretty good choice. Remember, always choose the provider that is close to your target audience. There is a couple of time we faced issue to access the website that is hosted in oversea due to Submarine Cable Fault.

I DO NOT recommend GoDaddy or EIG hosting company like BlueHost, HostGator. The reason some people highly recommend BlueHost is they paid affiliate fee very well.

Cloud Server Control Panel (Self Managed)

If you have some knowledge of how to handle web server. Use Cloud Server Management Panel like RunCloud or GridPane pair with any cloud VPS provider like Digital Ocean, Vultr, Linode, or UpCloud. Their high-performance LEMP stack is super fast, way faster than any shared hosting and Cloudways. Many friends pair with Vultr High Frequency Compute due to high performance.

As for the Cloud Server Control Panel, RunCloud is cheaper with better UI/UX. GridPane is focused on WordPress and a little bit faster, but most people do not feel the difference between both.

Both feature easy WordPress installation, High-Performance LEMP stack, NGINX with FastCGI, PHP4, HTTP/2, MySQL8, Free SSL, Strong firewalls, and many more.

RunCloud provides 5 days Free trial and GridPane provide forever Free trial with one Server and up to 10 sites.

Signup Vultr with my affiliate link to get FREE USD100 credit (Limited time).
Signup Digital Ocean with my affiliate link to get FREE USD100 credit.
Signup UpCloud with my affiliate link to get FREE USD25 credit.

Please note that this is self-managed Cloud Server Control Panel service, they will help you on server related problem and you will need to deal yourself on most WordPress related issue.

Premium WordPress Managed Hosting

If you have extra budget or serious with your company website, you may consider Kinsta or WPEngine. Kinsta uses Google Cloud Platform (GCP) and WPEngine uses Amazon Web Services (AWS). Both are very well known in the Managed WordPress Hosting industry.

This website is currently hosted in WPinfy, they are using AWS and with competitive price.

Always remember, You get what you pay for. A good hosting provider is always better than a premium cache plugin, and most of them handle your CDN, GZIP / Brotli Compression, etc. If you have budget, I will suggest get a proper hosting provider.

Content Delivery Network (CDN)

If you serve your customer worldwide, Content Delivery Network (CDN) is MUST HAVE. It helps to minimize latency and maximize performance by store all your website assets to their server around the globe. So all your website visitors will get fast user experience.

I’m currently using BunnyCDN, they are very cheap at $0.01 /GB (Europe & North America) with really great performance.

BunnyCDN have 40 PoPs in their networks, across 6 continents and 27 countries. All of their servers are powered by NVMe SSD technology, it can be reached in less than 30 milliseconds in most areas around the world.

I seldom use CloudFlare FREE CDN for my client, cause experience with slower website loading for local traffic. Paid for CloudFlare Pro if you really like their services.

BunnyCDN provides Free 14-Day Trial – No credit card required. Enter this code “GET5” under billing to get $5 credit

GZIP / Brotli Compression

GZIP is a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side, and allow further compress of the size of HTML, CSS and JavaScript files. It will not compress images as it compresses in a different way. You can easily get 50% of compression with GZIP, some up to 70% of compression. This is the easiest way to optimise your WordPress site.

GZIP Compression can easily enable in cPanel, .htaccess and plugin.

Enable Gzip Compression using cPanel

If you use cPanel, may active GZIP Compression in
Software > Optimise Website > Compress Content > Compress All Content

cPanel's GZIP Compression
cPanel’s GZIP Compression

Enable gzip compression using .htaccess file for Apache

Add this scripts inside script in a .htaccess file.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Brotli Compression is an open source compression algorithm developed by Google to server even better compression than GZIP. According to certsimple, Brotli Compress faster than GZIP and produce better results.

  • 14% smaller than gzip for JavaScript
  • 21% smaller than gzip for HTML
  • 17% smaller than gzip for CSS

Brotli Compression can enable in web-server & CDN. BunnyCDN support Brotli & GZip Compression.

Enable Brotli compression using CloudFlare

If you use CloudFlare, may active Brotli Compression in
Speed > Optimization > Brotli

CloudFlare's Brotli Compression
CloudFlare’s Brotli Compression

To test your WordPress website compression, visit giftofspeed.com

Test Gzip & Brotli Compression
My GZip compression is above average at 87%.

Lightweight WordPress Theme

Use lightweight and fast theme like GeneratePress, Neve, OceanWP, Astra. For WooCommerce website, I would suggest Shoptimizer or OceanWP. If you use Elementor Pro, go for Hello Theme.

For GeneratePress user, may try out the new GenerateBlock.

I find Neve is pretty solid, getting Google PageSpeed Insights 100 with their demo with some fine-tuning. You may see the guide here.

Google Pagespeed Insights 100
Google Pagespeed Insights 100

Reduce Page Size

Few small steps make a huge difference.

Replace graphic with SVG format

  • Replace vector graphic background from Jpeg to SVG format, it saves another 105kb.
Jpeg vs PNG vs SVG File Size
Jpeg vs PNG vs SVG File Size

To use SVG Graphic in WordPress, Safe SVG gives you the ability to allow SVG uploads whilst making sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site.

If you looking for nice free vector graphic, stock photos, PSD and icons, may visit freepik.

Reduce the usage of the column – Fix Slow Elementor Tips

Avoid An Excessive Dom Size On Google Pagespeed Insights
Avoid an Excessive Dom Size On Google Pagespeed Insights

Reduce the usage of the column to Avoid an excessive DOM size on Google PageSpeed Insights

  • On Widget > Advances > Positioning to Custom width, 50% for 2 column, 33% for 3 coloumns, 25% for 4 columns, etc.
  • On Column > Horizontal Align > Center

Image Optimization

Image Optimization by ShortPixel
Image Optimization by ShortPixel

I compress all my image with ShortPixel to reduce the page size. ShortPixel does support WebP image format, which is created by Google, the file is 20% – 30% smaller than Jpeg and PNG, furthermore, it supports transparent.

Shortpixel
You can optimize up to 50 images at ShortPixel website for FREE

Reduce the Impact of Third-Party Scripts

Third-party scripts will slow down your page load and are something out of your control, just use whatever you really need. If you need to have the Google Map on your website, move it to contact page because it brings more than 10 requests.

System Font Stack

Webfont takes up some weight of a total website weight. To solve that, I use System Font Stack for my website, same as what WordPress’s dashboard using. You may implement via this CSS code:

h1, h2, h3, h4, h5, h6 { 
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
}

body, p { 
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
}

Stop Google font to load from Elementor – Fix Slow Elementor Tips

Copy this code and place into the code snippets.

//Stop Elementor's Google font
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Host Google font locally

If you can’t live without Google font, can use OMGF to host your Google Font locally.

Host font locally with Elementor Pro – Fix Slow Elementor Tips

If you are Elementor Pro user, can use custom font function to host the font locally.

DNS Prefetching

DNS prefetching resolve domain names (perform a DNS lookup in the background) before a user clicks on a link, which in turn can help improve performance. Just copy this code and place into the code snippets. If you are using CDN, remember to change “//cdn.domainname.com” to your domain.

//DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.domainname.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//apis.google.com" />
<link rel="dns-prefetch" href="//google-analytics.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ssl.google-analytics.com" />
<link rel="dns-prefetch" href="//youtube.com" />
<link rel="dns-prefetch" href="//api.pinterest.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="dns-prefetch" href="//syndication.twitter.com" />
<link rel="dns-prefetch" href="//platform.instagram.com" />
<link rel="dns-prefetch" href="//s.gravatar.com" />
<link rel="dns-prefetch" href="//s0.wp.com" />
<link rel="dns-prefetch" href="//stats.wp.com" />
<link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
<link rel="dns-prefetch" href="//use.typekit.net" />';
}
add_action('wp_head', 'dns_prefetch', 0);

Delay Third Party Scripts

Use Flying Scripts delay the execution of third party scripts like Facebook tracking scripts, chat plugins, etc.

Host Google Analytics Locally

Use CAOS or Flying Analytics to host analytics.js/gtag.js/ga.js locally and keep it updated using WordPress’ built-in Cron-schedule. Fully automatic!

FontAwesome

Replace font awesome icon to SVG format. You may find a lot of nice design icon at flaticon. Use vecta.io/nano to further compress your SVG Graphic.

Stop FontAwesome from Elementor to load – Fix Slow Elementor Tips

Copy this code and place in the code snippets.

//Stop Elementor's FontAwesome
add_action( 'elementor/frontend/after_register_styles',function() { foreach( [ 'solid', 'regular', 'brands' ] as $style ) { wp_deregister_style( 'elementor-icons-fa-' . $style ); } }, 20 );

Note: By default, Font Awesome icons will only load on the pages where you’ve used them, so FA won’t load on pages that aren’t using any Font Awesome icons. This brings faster performance and faster page speed to your site, which can benefit your SEO and your users’ experience. Only the CSS and fonts of the icon family you actually use are loaded. So only dequeue Font Awesome if you truly plan to not use any Font Awesome icons at all. If you dequeue Font Awesome, the icons will no longer show on any of your pages. 

Stop Elementor Icon to load – Fix Slow Elementor Tips

Copy this code and place into the code snippets.

//Stop Elementor's Icon
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}

* Please beware that Elementor use font-awesome icon on Search widget icon and close icon. And Elementor builder icon, hamburger menu or close icon will NOT shows. Thanks for point up Kishorchand Thangjam

If you looking for SVG icon, may visit flaticon. It have large database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.

Optimize WordPress Database

There are few ways helps to optimize the WordPress Database by clean up database by deleting orphaned items such as old revisions, spam comments, database by uninstalling plugins…

Optimize WordPress Database with WordPress Plugin

You can use cache plugin like WP Rocket, Swift Performance Pro, WP-Optimize, or Use database cleaner plugin like Advanced Database Cleaner, WP-Sweep, Garbage Collector.

After some testing and usage, I prefer Advanced Database Cleaner. Because of it works really well and the easy and clean interface.

Advanced Database Cleaner Pro
Advanced Database Cleaner scanning to check the tables belonging to which plugin.
Advanced Database Cleaner Pro Table
Details of database table, so you wouldn’t mass up the database while optimize.

Last years I removed 700MB of the database from a client website that is caused by Contact Form 7.

Limit WordPress Revisions

WordPress Revisions can easily take the entries in the database, and is very common to have 50+ revisions on a single page. Imagine if you have 100 pages and post s and each has 50+ revisions, it will end up 50,000+ of entries in the database.

What I do is simply add this code to wp-config.php. You may change to number to suite your needs.

define( 'WP_POST_REVISIONS', 3 );

Or you can completely Disable the WordPress Post Revisions with this code

define('WP_POST_REVISIONS', false );

Remember the code below needs to be placed above the ‘ABSPATH’ otherwise it won’t work.

Spam Protection

Un managed WordPress Problem
Problem of unmanage WordPress website

If you need the comment function, I’ll suggest you use a plugin like Akismet, Antispam Bee or add Google reCaptcha in comment form with Advanced noCaptcha & invisible Captcha.

Use Caching Plugin

Swift Performance Pro / WP Rocket / LiteSpeed Cache

On most case, I will use premium plugin like Swift Performance Pro or WP-Rocket for optimization. The auto-setup works well and very easy to configure.

If you use LiteSpeed web server, may use their official plugin LiteSpeed Cache, I found (2019) the Swift Performance Pro works better in A2 Turbo Shared Hosting.

Replacing or Reducing Plugin Usage

There are few plugins will slow down your website. Replace them if you use one of them.

Replace Really Simple SSL with the correct WordPress setup, as SSL is not a function of WordPress and must be set up correctly on the server. If you have had problems with mixed content, use Better Search Replace to replace all http://* to https://*

Replace Contact Form 7 with WP Fluent Forms. The entries stored in the database and accumulate quickly.

Replace Yoast with SEOPress, they are few who use complaints where they felt that their website loads Yoast Premium even slower

Replace WordFence with Malcare. WordFence creates 21 of database table, and increas the database size from day to day.

Replace Updraft Plus with Malcare.

Malcare + Blogvault is the best combination I have used in a long time, they have Web Application Firewall, Backup, Staging, WordPress / theme / plugin management, reporting, uptime monitor etc, everything comes under one roof. It works way better than ManageWP.

Blogvault's dashboard
Malcare + BlogVault’s dashboard

Get rid of all Slider plugin, even Google suggest not to use in at 2012.

Always make use of Code Snippets to handle some PHP functions, coz sometimes you don’t need a plugin.

WordPress Speed Optimization Guide with FREE Plugin

If you prefer FREE plugin, follow these steps:

How to setup Cache Enabler + Autoptimize + Async Javascript

  1. Install and active Cache Enabler, no setting required.
  2. Active Autoptimize first and the setting require after Async Javascript setup.

Async Javascript Setting

Async Javascript > Settings > Enable Async JavaScript

Async Javascript Setting
Async Javascript Setting

On Quick Setting, either Apply Async or Apply Defer, it depends on the website. After this, go to Autoptimize > Setting > JS, CSS & HTML

Autoptimize Setting

Autoptimize Setting - JavaScript
Autoptimize Setting – JavaScript
Autoptimize Setting - CSS
Autoptimize Setting – CSS

How to Eliminate render-blocking resources

  1. Go to https://pegasaas.com/critical-path-css-generator/ and paste your URL to generate critical path CSS.
  2. Copy the Critical Path CSS code.
  3. Go to Autoptimize Setting – CSS > Inline and Defer CSS and paste the Critical Path CSS code from the generator.
Autoptimize Setting 3
Autoptimize Setting HTML, CDN & Misc

If you use CDN, please place your CDN URL under the CDN options. Bunny CDN is pretty good choice.

Autoptimize Setting Image
Autoptimize Setting Images

Autoptimize is integrated with ShortPixel, If you subscribed to ShortPixel‘s CDN, please tick Optimize Images.

Autoptimize Extra
Autoptimize Extra

If you prefer code snippets, here are Preconnect to 3rd party domain, Remove emojis and Remove Query Strings from static resources.

* Please note that all these settings may break your website. Always keep testing an debug for best results.

The Final Results: Google PageSpeed Insights 100

Google Pagespeed Insights 100
Google Pagespeed Insights 100

Optimize Further

Disable WordPress Comments

By default WordPress allows comments on all posts. However, most of the business website does not need the comment function. What I do is to disable everything Discuss Settings when setting up WordPress.

Disable WordPress Comment
Disable WordPress Comment

Below is some code snippet to optimize further, just copy and place into the code snippets *

Remove jQuery.js from WordPress frontend and replace with Google CDN

Remember update the jQuery library time to time by replace the number “3.5.1” to latest version.

// Remove the WordPress default jquery
wp_deregister_script( 'jquery' );

// using a local file
wp_enqueue_script(
  'jquery', get_template_directory_uri() . '/lib/jquery-3.5.1.min.js','', '3.5.1', true
);

// using Google CDN
wp_enqueue_script(
    'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', '', '3.5.1', true
);

Please note that some plugin like Elementor will not work; what I’m doing is disable the snippet on Code Snippets when I need to use Elementor and enable again when I’m done with Elementor.

Diable comment-reply.min.js

If you are not using the WordPress comment function.

// Disable comment-reply.min.js
function clean_header(){ wp_deregister_script( 'comment-reply' ); } add_action('init','clean_header');

Diable Emoji JS

// Disable Emoji JS
function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param    array  $plugins  
 * @return   array             Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

Remove Query Strings from Static Resources

// Remove Query Strings From Static Resources
function _remove_script_version( $src ){ 
$parts = explode( '?', $src ); 
return $parts[0]; 
} 
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); 

Reduce WordPress Heartbeat

Reduce WordPress Heartbeat with Heartbeat Control

Or Stop Heartbeat completely *

// Stop Heartbeat
add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}

* Please make sure you understand the consequences before you implement.

Idiot Proof to get GOOD PageSpeed Insights Score

If you find it very difficult to get high score on Google PageSpeed Insights? Try Nitro Pack, the speed optimization tool focused on Google PageSpeed.

What is NitroPack (Google PageSpeed focused speed optimization tool)?

NitroPack is a powerful performance optimization service designed to improve the loading speed of your websites. NitroPack was developed to meet the ever-improving page speed requirements of the modern web. You can install and connect NitroPack in less than 2 minutes.

NitroPack Google PageSpeed focused speed optimization tool
You can see the results is very impressive!

Remember when signup NitroPack with our Promo code “UELEMENT10OFF” to get 10% discount on first billing, save more on the annual subscription.

Content is KING

After spending hours to follow all the steps to get the score to 100, have you even check what is Google’s PageSpeed Score?

Google Slow Pagespeed
Google Slow Pagespeed
Google Slow Gtmetrix Scaled
Google Slow Gtmetrix Scaled

Google scores 23 for its Google Store and loads 10.5sec. I guess most of you score better.

Always remember, CONTENT is KING, good content is one of the most important rank factors, no point having a fast loading website with zero content.

What Google PageSpeed Score gives you is suggestions to improve your website UI/UX, just like doctor ask you to spends some times to work up daily.

Provide good content is the easiest way to get traffic to your website. Example my previous post on How to rebuild from WPBakery Visual Composer to Elementor is been feature by Google as featured snippets.

Featured Snippets
Featured Snippets

Ending Thoughts

I hope this tutorial will help you to solve your WordPress Speed Optimization problem. Buy me a coffee or post the results in the comment box if this tutorial really helps.

And if you have any question please give me a shout to my comment box. I’ll try to help you accordingly.  If you need WordPress Speed Optimization service, hire me to get the dirty job done. Money-back guarantee!

My Favourite Place to Learn Speed Optimization:

10 thoughts on “WordPress Speed Optimization to score 100 on Google PageSpeed Insights”

    • If you are using Elementor Pro, I will suggest stick with Hello Theme, because it doesn’t load additional assets from others.

      In general, GeneratePress is one of the best WordPress theme I had used.

      Reply

Leave a Comment

Are you in need of consulting or project estimate for

WordPress Website?

Let's Talk