DEV Community

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

Posted on • Updated on • Originally published at srclogix.com

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

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.

There is another kind of PSI. Google's Page Speed Insights. https://developers.google.com/speed/pagespeed/insights

Pagespeed Insights gives you valuable observations on your site's performance, across desktop and mobile devices.

Google's PSI tool internally leverages Google LightHouse API.

alt text

Pagespeed drives:

  • Excellent user experience.
  • Reduced bounce rates.
  • Improved SEO.

Improving PageSpeed

alt text

Upping speed is time-consuming & frustrating, even for the smartest devs.

SourceLogix got a perfect score. πŸš€πŸΎπŸŽ‰πŸŽŠπŸŽˆ

  • Performance - 100/100
  • Accessibility - 100/100
  • Best Practices - 100/100
  • SEO - 100/100
  • Progressive Web App - 100/100

Hard to believe? Run Google LightHouse from Dev Tools.

***Disclaimer: Mileage may vary depending on network conditions, browser extensions and several other factors.

Ten tips to boost PageSpeed:

1. Serve WebPπŸ™πŸŒ…

WebP is a fantastic image format for high-quality images, on a diet. Serve WebP with fallback to JPG format, for browsers that do not support WebP (come on Safari!).

2. Use SVG 🏎

Whenever you can! SVGs have excellent processing speed, work on all browsers, and so beautiful to look at without pixelation.

3. Minify 🎁

Minify everything - as much as you can. HTML/ CSS/ JS/ SVG - everything. Tightly packed code is a good thing.

4. View ViewPortπŸ“Ί

First impressions matter the most. The viewport is the first visible area - the original content that gets loaded in the top-fold of the page. Be minimalistic. Less is more - both for page speed and for users to get a clear understanding of your product's position & pitch. Remember - you say more with whitespace than with words!

5. Get started on PWA. πŸ“±

Progressive web apps (PWA) are the best thing that happened after sliced, apps! Use service workers βš™οΈ βš™οΈ. You can cache most of your content & load pages blazingly fast. It even works even in offline mode, enables push notificationsβ€”tons of coolness.

6. Use async & defer. 😴

Procrastination is a good thing - for a change πŸ˜€. Make Async and Defer as your best buddies. Understand their similarities and differences. Use these JS constructs effectively.

7. Use Static-Site-Generator.

Fall in πŸ’— with Eleventy or 11ty. Funny name, serious site. We found this open-source static file generator to be the most intuitive and fast. Heck, even Google's page web.dev is built on 11ty. πŸ‘

8. Play hard.πŸ€½β€β™€οΈπŸ€Ύβ€β™‚οΈ

Conduct tons of tests, but DON'T PLAY IN PRODUCTIONπŸ›‘. Make a copy of your site & stage them on another domain. We like FreeNom. Get a .tk domain for free for your dev/ test instance. Make sure you do not have sitemaps and SEO related things on dev. Call us, and we can share more strategies to bypass Pixel Trackers.

9. Learn. πŸ“šπŸ€“

Learn from CoreWebVitals, PSI & LightHouse recommendations. Check out GTMetrix, WebPageTest.org. They all tell you what's slowing you down & why. Most importantly, how to fix it. Do not obsess over the score, obsess on their feedback. Follow #webperf engineers in Google. They hang out on Twitter or busy YouTubing with teleprompter-talks & awkward laughs. All in all, they are the geekiest and best engineers!πŸ€—πŸ‘

10. Hosting & CDN. πŸ–₯πŸ‘¨β€πŸ’»

Last but not least. Stay as far away from possible from GoDaddy and WordPress. They are notoriously slow and have tons of security issues. In 2020 - you must be crazy to pay πŸ’΅ for hosting. Our top free picks are Google FireBase, Netlify, AWS LightSail, or AWS S3. Cloudflare is the best with CDN. Oh yes - make sure your site uses Brotli compression.

Achieving perfection takes time, needs creativity & pushes patience. Want a faster track? Call us πŸ€™. We will be happy to give you free advice & build beautiful and blazingly fast web apps.

πŸ™πŸΎ πŸ™Œ πŸ‘‹πŸΏ

Discussion (15)

Collapse
steveblue profile image
Steve Belovarich • Edited on

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 Author

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 Author

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 Author • Edited on

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 Author

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 Author

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 Author

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.