How To Improve Page Speed Score to 100

In this article i will show you the process, step-by-step, how i improved a landing page of mine, created on WordPress, from a

Page-Speed-Results-Initial
Page-Speed-Results-After-Speed

Why do you need a FAST web page ?

Page Speed Score Of This Article

There are websites that write about website performance testing, but if you check their performance, you will be disappointed.
My website speed test gets top score. These are the results for this article you are reading right now – 

Improve Website Speed Steps (click each one for details)

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 compression is probably the most important issue when improving speed and page speed score.
Most hosting servers already enable this for you (BlueHost enable it by default), but if you still see a warning about gzip in GTmetrix, just add the following lines to your .HTACCESS file.
Click the following link if you need help How to add lines to .htaccess file (will open in a new window)

# BEGIN Gzip
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
# END Gzip

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 following lines to your .HTACCESS file.
Click the following link if you need help How to add lines to .htaccess file (will open in a new window)

# BEGIN EXPIRES CACHING

ExpiresActive On
ExpiresByType text/html “access 1 month”
ExpiresByType text/css “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType text/javascript “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/xhtml+xml “access 1 month”
ExpiresByType application/pdf “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/svg+xml “access 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType image/ico “access 1 year”
ExpiresDefault “access 1 month”

# Cache the following content for 1 month (4 Weeks)
<FilesMatch “\.(jpg|jpeg|png|gif|ico)$”>
Header set Cache-Control “max-age=31536000, public”

# END EXPIRES CACHING

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 will 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 little higher than the previous test, it’s minor, and various factors can influence this value)

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 click on the image (to see the video), only then the video will be loaded to your page and it will 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 Lyte If you have videos from YouTube or Vimeo,
or if you have 
Wistia videos, you will need to purchase the ARVE Pro plugin.

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

Only later i discovered that the free account is useless, it can even hurt the performance.
So i don’t recommend it, see more details in the Cookie-Free Domain section.

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 used them, so by disable the following option, i saved a few calls.

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.

When the browser makes a request for a static content (images) and sends cookies together with the request, the server doesn’t have any 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 all my images will come from the static subdomain.

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

  • Not use CloudFlare at all (we can disable the proxy)
  • Work with a different CDN (it will cost money) 
  • Ignore this recommendation, and lose 2 points in the YSlow speed test.

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

You need to decide if you want to use google fonts, so your site will 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.

Using Google Analytics causes extra calls, and speed tests will show you 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.

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 minify it using the free online service in https://www.minifier.org, so i used the minified version of the script.

Even after we have the perfect score, we can still improve the loading time.
In the W3 Total Cache (W3TC) plugin 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

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

My configuration:
Hosting : BlueHost.com with Basic account
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… 
Unfortunatly, Cloudflare (which has a free account), is not a CDN i recommend (you can see details in Cookie-Free Domain section)

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 write a comparision between 

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

and many more.

Don’t forget to sign in, to 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.