Thread by @1HaKr

visalist.io #performance📈
How i improved performance of Visa List from
~90
↓
~34
↓
~81

You might have seen people posting perfect💯 perf score but for big web apps its not easy at all

Perf is also important for
1. SEO
2. Conversion
3. UX

#seo #perf #ux

When you first launch your web app, you don't worry about performance that much. Visa list was ~60.

After it got traction, improved things, got it to ~90. So this was when there were hardly any features. But as you keep adding new features/libraries its becomes hard to improve.

These are the list of libraries that i have used that have contributed to the bundle size and along the way performance.
1. @nuxt_js for SSR, AMP
2. @vuetifyjs for UI
3. @LeafletJS for maps
4. @Firebase for auth, chat, notifications
5. @AdSense for ads
6. @stripe for payments

Being relatively n00b in web development, it was like someone threw me in the ocean after just one week of swimming lessons in a swimming pool. It was really overwhelming. But i improved the performance slowly step by step:

#1 Icon Font Flashing
You see this weird text instead of the font and when font loads, you see the actual icon when offloading icon fonts.
I use this library by @Google
github.com/typekit/webfon…

✨ProTip: dont use google font api, its big and its blocked in china

#2 CDN to Improve loading time I use @Cloudflare

Turn on minify and rocket loader to improve content loading.

For API and other static assets like GeoJSON, i use Page Rules to cache everything for these resources and public API's
1000ms to 100ms💥gain

# Use only specific component of libraries which otherwise can be huge. Also load them after page is fully rendered.
# @LeafletJS Leaflet can be integrated with specific components
# @Firebase's each feature can be used exclusively.
# FirebaseUI is another massive library
# Stipe

# Dynamic imports: this is something present in @vuejs, not sure about other frameworks. Always try to break down big components that is more than 250kb and load them when need. So after a page is rendered or when when there is a user interaction.

# Load ads after page is rendered:
Most of the ads, like @AdSense load directly when page is fetched. This has a huge impact on perf. I learnt it the hard way. All libraries does this eactly this. So i tweaked on loaded the library after page load. This will have a massive impact

# Caching SSR
Yes, you need to cache everything that is rendered as static file fetching is very efficient to rendering it everytime. It reduces TTFB and server response time. I used multi level caching at @expressjs level and @nuxt_js rendering level.

github.com/arash16/nuxt-s…

# Using brotli compression with Gzip:
Its been there for sometime, but many people dont know about it. It can get you around 20% improvement in loading time.

@threader_app compile