DEV Community

Cover image for Perfecting PageSpeed βš‘οΈπŸš€

Perfecting PageSpeed βš‘οΈπŸš€

Ramesh Elaiyavalli on August 02, 2020

PSI - pounds per square inch? You are thinking about tire pressure, aren't you?πƒπŸ˜€ We all know how important that is for running your vehicle. Ther...
Collapse
 
steveblue profile image
Stephen Belovarich • Edited

Scored 98 on my personal site using the cheapest option for hosting via DigitalOcean. I’m convinced if I paid a little more for a better droplet I’d score 100. localhost scores 100, so I’ll settle for less than perfect for now. Host does matter!

stephenbelovarich.com

Collapse
 
ramesh profile image
Ramesh Elaiyavalli

Hey Steve - absolutely! Hosting matters a lot. Digital Ocean is great. So is Linode.

So weird that free static file hosting sites perform way better than paid ones such as GoDaddy. Price is inversely proportional to performance πŸ€” Figure that.

BTW - love your site! Simple, fast, and to the point. Good luck on your book!

Collapse
 
ramesh profile image
Ramesh Elaiyavalli

Koray - Google tools - PSI, LightHouse are suggestive - not 100% accurate. This is why you have to use other tools such as GTMetrix and WebPageSpeed test. You will get a better picture of speed on your site.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Lighthouse is giving me a 70 for your performance:

Reasons:

  • Enormous network payload (9.3 MB)
  • Minimize main thread work (18.1 s)

You also have some failing accessibility audits. The logos in the footer of your website have really poor contrast:

Collapse
 
ramesh profile image
Ramesh Elaiyavalli • Edited

Thanks for your inputs Aleksandr.

1) Run LightHouse a few times. It is possible that my site is not loaded into the CDN cache close to where you are. We use CloudFlare and like the speed and performance in the USA. Google Firebase also seems to be excellent. One of the reasons to use CloudFlare is to protect from DoS attacks and to enable Brotli compression. We have seen that on some occasions they add a small overhead. Nothing is perfect - they all come with their pros and cons.

2) Enormous network payload - is a side effect of installing service workers to make our site a Progressive web app. The main page loads very quickly, the network will still be busy fetching the rest of the assets for all other pages - hence the larger payload.

3) Minimize main thread work - This is an inevitable side effect of loading inline SVG images. Still beats loading bulky PNG's.

4) Contrasting needs to be improved - especially in dark mode. Agree.

We will keep improving. Thanks, again.

Collapse
 
hemant profile image
Hemant Joshi

Use lighthouse.com to test the chrome based extension differs due to your system, I use grammaly extension due to which lighthouse shows my page 26/100 and actually the true value is 89..

Idk why but this happens with lighthouse extension

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

I'm using the Lighthouse built into Chrome dev tools, not the extension.

Thread Thread
 
hemant profile image
Hemant Joshi

Ya the built in is kindof extension added in chrome, and Ramesh told that test the site in incognito mode.

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Yup, I always test in incognito. Otherwise my extensions slow down Lighthouse.

Thread Thread
 
ramesh profile image
Ramesh Elaiyavalli

Great! Another thing that worked for us - to use #test filters. This will help test with and without service workers.

In the Chrome dev tools, go to the Application tab, and service workers. Unregister sw.js. Then launch srclogix.com/#test - you will run this without the service worker. The network payload will become a lot less - LightHouse will stop complaining as there is no PWA cache. I will explain the #test idea in another post.

Lots of fun things we built behind the scenes! πŸ˜€πŸ‘

Thread Thread
 
hemant profile image
Hemant Joshi

This seems for interestingπŸ˜³πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰

Collapse
 
ramesh profile image
Ramesh Elaiyavalli

Hi Hemant - Always test on Incognito or Private mode and make sure there are no browser extensions active. This will give you a clean test.

Collapse
 
hxii profile image
Paul (hxii) Glushak

Hmm?
Hmm

Collapse
 
ramesh profile image
Ramesh Elaiyavalli

Paul - Intriguing ha πŸ˜€

TestFilters are to allow internal testing on live sites without polluting Google Analytics. There is a lot to explain here. Will create a separate post on that.