How To Improve Page Speed Score to 100

My Starting Point:Score=53/58

This is my starting point.
You can see it took 2.7 seconds to fully load.
The page size is very heavy (2.91MB)
And it took 51 requests to generate the page.
Page-Speed-Results-Initial

Enable gzip compression:Score=82/68

Enable gzip compression is probably the most important issue when improving speed and page speed score.
Most hosting servers already enable this for you,
but if you still see a warning about gzip in GTmetrix,
just add the code from this link to your .HTACCESS file: enable-gzip-compression (opens in a new window)

Click the link if you need help How to add lines to .htaccess file (opens in a new window)

after Enable gzip compression

Leverage browser caching:Score=82/70

Leverage browser caching generally means that you can specify how long web browsers should keep images, CSS and JS stored locally. That way the user’s browser will download less data while navigating through your pages, which will improve the loading speed of your website.

Add the code from this link to your .HTACCESS file: leverage-browser-caching​ (opens in a new window)

Click the link if you need help How to add lines to .htaccess file (opens in a new window)

after Leverage browser caching

Optimize images:Score=91/70

Every image you have on your site should be compressed!
It can be done manually using imaging software, but it is much easier to install a WordPress plugin that can compress every image you have, and it will compress every image you upload to your site from now on.

I recommend using the following free plugins: ImagifyShortPixel
(I am testing on a shared server, so the page loading time is a slightly higher than the previous test, as various factors can influence this value).

after optimize images

Improve the score by Embedding Video:Score=93/75

Instead of uploading video to our page, resulting with a much higher page size and a few more calls to external servers, you can do a video LazyLoad – meaning you will put an image of a video, and when the user clicks the image to watch the video, only then will it loaded to your page and automatically start playing.

This option is very useful, unless you want the video to start auto-play as soon as the page is loaded.

If you use Elementor page builder you can use their Video Widget to do video LazyLoad.

If you use other page builders, you can use a free plugin like WP YouTube LyteIf you have videos from YouTube or Vimeo,
or if you have 
Wistia videos, you will need to purchase the ARVE Pro plugin.

after Embedding Video

Use a Content Delivery Network (CDN):Score=93/78

I connected to a free account of CloudFlare so I can use their CDN (Content Delivery Network – a geographically distributed group of servers which work together to provide fast delivery of Internet content).

after CDN

Improve the score by Disable Parent Theme:Score=93/79

I created my landing page using Thrive Architect (highly recommended for building landing pages).
A few calls were made from the parent theme, and I didn’t use them, so by disabling the following option, I saved a few calls.

after Disable Parent Theme

Minify JS, CSS, HTML and Remove query strings from static resources:Score=98/89

By installing a highly recommended free plugin named Autoptimize, I handled FOUR very important warnings at once:

  • Minify JavaScript
  • Minify CSS
  • Minify HTML
  • Remove query strings from static resources

Be careful with the CSS minification, because it might break your site, so check every option separately.

after minify

Use Cookie-Free Domains:Score=98/90

When the browser makes a request for a static content (images) and sends cookies along with the request, the server has no use for those cookies, so they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests.
Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies.

If you don’t use www subdomain, you will need to buy a new and different domain.

If your domain is using www subdomain (for example www.example.com), you can create a different subdomain (for example static.example.com) and host all your static components there.
I installed a free plugin named W3 Total Cache so that all my images come from the static subdomain.

CloudFlare Problem – CloudFlare does NOT support cookie free subdomain.
So our options are :

  • Not to use CloudFlare at all (we can disable the proxy)
  • Work with a different CDN (it will cost money)
  • Ignore this recommendation, and lose 1-2 points in the YSlow speed test.
In this site you are in right now, i chose to lose these points, and have a site that loads in 0.5 sec.

after cookie free domain

Improve the score by Disabling Google Fonts:Score=98/97

Using Google fonts causes extra calls, resulting in higher loading time.

You need to decide if you want to use google fonts, so your site looks better, or use web safe fonts and get better speed & score.

If you decide to disable Google fonts, check the option “Remove Google Fonts” in the Autoptimize plugin which we installed in a previous step “Minify JS, CSS, HTML…”.
If you still see calls to web.googlefonts.com, you should install the free plugin Disable Google Fonts.

If you still want to use Google fonts, and you don’t want to pay in performance, you can use the free plugin CAOS for Webfonts to host those fonts locally.

after google fonts

Improve the score by Hosting Google Analytics Locally:Score=99/99

Using Google Analytics causes extra calls, and speed tests will show you a warning regarding leverage browser cache, because Google has set the cache expiry time to 2 hours.

Using the free plugin CAOS for Google Analytics allows you to host analytics.js locally and keep it updated automatically.
Check the next step if you intend to install this plugin.

after google analytics

Minify JavaScript and CSS:Score=100/100

The CAOS for Analytics plugin we installed in the previous step caused a warning that we should minify the JavaScript we used.

So i took the code that the plugin gave me, and I minified it using the free online service in https://www.minifier.org, so I used the minified version of the script.

after minify

Improve Loading Time:Score=100/100

Even after we have the perfect score, we can still improve the loading time.
In the W3 Total Cache (W3TC) plugin that we installed in the cookie-free domains step, I activated the following settings –

  • Page Cache in Disk:Enhanced
  • Database Cache in Disk
  • Object Cache in Disk

Page-Speed-Results-final

My configuration:
Hosting : BlueHost.com with Basic account (not a hosting I recommend as you can read in my articles)
Platform: WordPress 5.0.3
Testing with: GTmetrix.com (PageSpeed & YSlow) & webpagetest.org

Did I use premium (paid) plugins or other paid tools to get the perfect score ?
For most of the improvements, I used free plugins or free tools.
Obviously, you need to have a website hosting, so I used the cheapest hosting available – BlueHost (only $2.75/m).
Due to the fact- that my landing page includes a video from Wistia (and not from YouTube) I needed to purchase a plugin to improve my score and speed by embedding video.
But if you don’t have Wistia videos, then you can use only free plugins!

More speed improvements:
You can improve your performance even better using a paid CDN (content delivery network – a geographically distributed group of servers which work together to provide fast delivery of Internet content) like stackpath (formally MaxCDN)KeyCDNBunnyCDN and more… 
Cloudflare (which has a free account), is also a CDN I recommend (specially if your site is just a static site like a blog).

Why do you need a FAST web page?

FREE page speed recommendations for YOUR site

Send me your site URL, and I will personally check your site and give you a few recommendations for free.