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.
Pagespeed drives:
- Excellent user experience.
- Reduced bounce rates.
- Improved SEO.
Improving PageSpeed
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.
ππΎ π ππΏ
Top comments (14)
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
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!
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.
Lighthouse is giving me a 70 for your performance:
Reasons:
You also have some failing accessibility audits. The logos in the footer of your website have really poor contrast:
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.
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
I'm using the Lighthouse built into Chrome dev tools, not the extension.
Ya the built in is kindof extension added in chrome, and Ramesh told that test the site in incognito mode.
Yup, I always test in incognito. Otherwise my extensions slow down Lighthouse.
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! ππ
This seems for interestingπ³ππππ
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.
Hmm?
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.