WordPress Speed Optimization to score 100 on Google PageSpeed Insights

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

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 low budget, I’ll suggest 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 3 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 with Digital Ocean, Linode, UpCloud. Their high-performance LEMP stack is super fast, way faster than shared hosting and Cloudways.

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 provide 5 days Free trial and GridPane provide forever Free trial with one Server and up to 10 sites.

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, may try Kinsta or WPEngine. Kinsta use Google Cloud Platform (GCP) and WPEngine use Amazon Web Services (AWS). Both are very well known in the Managed WordPress Hosting industry.

Always remember, You get what you pay for. A good hosting provider is always better than a premium cache plugin. 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 visitor will get fast user experience.

I’m currently using BunnyCDN, they are very cheap at $0.01 /GB (Europe & North America) with 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 don’t use CloudFlare FREE CDN, coz experience with even slower website loading. Paid for CloudFlare Pro if you really like their services.

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 25kb.
Graphic Jpeg Svg Format
Replace the background image from Jpeg to SVG format

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 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 WP-Sweep, Garbage Collector. Recently I find myself prefer Advanced Database Cleaner.

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 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 the Swift Performance Pro works better in A2 Turbo Shared Hosting.

Replace or Cut Down the usage of Plugin

There are few plugins will slow down your website, replace these if you are using one of them.

Replace Really Simple SSL with proper WordPress setup, because SSL is not a WordPress function, and it needs to proper setup in server. If you faced mixed content issue, 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 using complaints they felt their website loads even slower with Yoast Premium.

Replace WordFence with Malcare. WordFence will create 21 of database table, and increasing the database size day by day.

Replace Updraft Plus with Malcare.

Malcare + Blogvault is the best combo I had used in a while, 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.

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

Install and active Cache Enabler, no setting required.

Active Autoptimize first and the setting require after Async Javascript

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.

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 end results: Google PageSpeed Insights 100

Google Pagespeed Insights 100
Google Pagespeed Insights 100

Optimize Further

Disable WordPress Comments

By defaults, WordPress enables comments to all posts. But most of the business website does not require the comment function. What I do is I’ll untick everything in Discuss Settings when the WordPress setup.

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

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 hard to get high score on Google PageSpeed Insights? Try Nitro Pack, Google-PageSpeed-focused speed optimization tool.

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

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

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:

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

Leave a Comment

Need help and support with your

WordPress Website?

Let's Talk