[Frontend][Perf] Potential huge optimization
pavelloz opened this issue · comments
I have noticed that the 178KB script is loaded couple of times on homepage ( https://www.zoomhub.net/ )
Ive run diff on them from curiosity and it looks like the difference is less than 1KB.
Because all files have different file names, they are not cached and are parsed, executed couple of times. This probably hurt performance a lot. [1]
I would recommend loading the vendor script once, and extracting this 1 KB difference into their own javascripts and then loading only the difference. Or even inlining the difference - its small enough to benefit from http requests reduction.
Additionally, enabling gzip compression would make it much more bearable - if you use S3/CF for serving assets it should be pretty easy to do.
@pavelloz This is great feedback — dziękuję bardzo!
Thanks for digging deeper and finding the root cause. While I haven’t had a chance to run Lighthouse on ZoomHub yet, I was partially aware of the issue. These scripts are a way of dogfooding ZoomHub embeds which indeed bundle the OpenSeadragon viewer (170kb+) with a bit of metadata on what image to load. However, as you point out, the homepage should do better than that. I’m planning to rework the homepage and will take this into account.
BTW, how did you stumble upon ZoomHub? I’m always curious to learn more how people use it 😄
P.S. I’m considering using Tailwind CSS for the homepage and saw you wrote a few articles on it. What are your thoughts?
Nie ma za co :)
I think I read something you wrote on the internet, "inspected" you on github, inspected ZoomHub which seemed like a good idea after fiddling with it for a while (Im actually trying to take photos, including high-res panoramas as hobby), so by force of habit, I opened network tab :D
As for TailwindCSS:
- Great for performance - having only classes you use, rest is "purged", no framework bloat
- Great for teams - no global CSS, which means a lot of people can work on the project at the same time)
- Excellent tutorials & docs from authors
- Good extensions in editors, so not everything has to be remembered
- A lot of components available for free to download on the internet, which can speed up development (ie. https://tailblocks.cc/ )
- Paid components from the author which i can recommend as well https://tailwindui.com/
- Build step can be very easy - quoting my latest project dev:
TAILWIND_MODE=watch npx postcss-cli -w ./src/css/app.css -o ./app/assets/css/app.cssand prod:npx postcss-cli ./src/css/app.css -o ./app/assets/css/app.css
I think for project teams of 3+ frontend devs it should be a nobrainer. If you are tired of commenting out bootstrap and fighting with SASS related errors, its a very refreshing experience to have a stack that "just works", and does it very fast.
I noticed that it goes well with Alpine.js which helps me do simple pages quickly and minimizing rituals around build process.
BTW. If you dont want to waste time on configuring TailwindCSS i can put a working (and very simple) config in the repo so you will only customize it further.
Good job :) I left 2 comments in the code and I can leave one thought here too:
It looks like your tailwind build is not minified - i dont know how you build it, but with tailwindcss cli its as easy as adding --minify read more, in postcss you need to bring your own minifier (ie cssnano).
Which reminds me! You can also add some resource hints to start downloading critical JS earlier. It can (and probably will) speed up rendering of the background, which in this case is very important :)
Preload in the head should help with that:
<link rel="preload" href="https://example.com/script.js" as="script" crossorigin>
The homepage has been redesigned with a single image and Tailwind, so I’ll close this.
Nice! 🎉
Very cool! 7KB of CSS is a great result!
BTW. Since we have each other on the line, i found it difficult to scroll down the homepage, because sometimes scroll event is hijacked by the background image -- i think it should be deactivated until I "Try Demo". I would record a video, but its pretty hard to demonstrate, but very easy to reproduce. Im using firefox but i assume its present in all the browsers, as it seems like visual overlap issue.
I would personally add pointer-events: none to the demo image (or, since you are on the good side of the force now: https://tailwindcss.com/docs/pointer-events ) until try demo is activated :)