How To Improve Page Speed Score to 100

In this article I will show you step-by-step how i improved a WordPress landing page of mine, from a page speed score of 53/58 to a perfect 100/100

Why do you need a FAST web page ?

My Starting PointScore=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.

Enable gzip compressionScore=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)

Leverage browser cachingScore=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)

Optimize imagesScore=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).

Page-Speed-Results-After-Images

Improve the score by Embedding VideoScore=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.

Page-Speed-Results-After-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).

Improve the score by Disable Parent ThemeScore=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.

Minify JS, CSS, HTML and Remove query strings from static resourcesScore=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.

Use Cookie-Free DomainsScore=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.

Improve the score by Disabling Google FontsScore=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.

Improve the score by Hosting Google Analytics LocallyScore=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.

Minify JavaScript and CSSScore=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.

Improve Loading TimeScore=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

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

More Speed Testing & Speed Improvements:
In the near future, I am going to compare various tools/plugins/services so we can see real results of performance tests.
I intend to compare between 

  1. CDNs
  2. Hosting
  3. Caching plugins
  4. WordPress drag & drop editors

and many more.

Don’t forget to sign in so you get notified when I publish the articles.
I will not share or trade online information that you provide me.

Have a great day.
Shay

Get the exclusive tips and tricks of speed optimization in your inbox.