Webperformance in a nutshell:
🚀Images: Lazyloading, Importance, Decoding
🚀Picture tag: Proper sizes, WebP/Avif format
🚀No layout shifts, fast LCP
🚀Added preloads/prefetches
🚀Font-display:swap for fonts
🚀Optimized content-visibility
🚀Minified and self-hosted resources
@evanyou The main problem I think is the complexity and bloat of basically everything in JS ecosystem
Bundling,types,dependencies,import system, runtimes, client vs server...
Working on fully JS project feels like constant falling from hill while hitting rocks and trees on the way down
@evanyou 2/2
They are not without flaws.
But apart from the fact that you have to make a few things to work with their lifecycle and passing data between them, they actually seems "fine".
They actually can remove a lot of boilerplate because of the auto-initialization, props and etc.
@evanyou 1/2
What is your biggest problem with WC because of which you decided not to "prefer them"?
I am writting a small FW for fun for them in my own project. Using it Primarily with Symfony.
Server prerendered content + WC for attaching dynamic logic and listeners.
Tip #webperf INP:
Interaction is measured even before JS is fully loaded. If you have some buttons for example for toggling/hiding something, you might want to use:
CSS switches https://t.co/prEGLo2h49
Details element https://t.co/ijcmxNAS0s
They work without #javascript
Tip #webperf:
Have you heard about ResizeObserver?
You might want to use it instead of the 'resize' listener.
https://t.co/mjaxBG6jWe
#javascript#css#html#vuejs#reactjs
Ok, let's get this party started!
A couple weeks ago I said I was publishing the most important thing I ever wrote. I was wrong.
Documentation related to the Google Search algorithm leaked and I spent the weekend tearing it apart.
https://t.co/v71B16Ggov
✌🏾
@machal Škoda že nezměřili i INP.
S adblockem (či v Brave prohlížeči) je na každém prvku méně globálních posluchačů (primárně na klik), které brzdí události.
This can also improve the INP metric because the dom doesn't take that long to process.
You can define reusable components in modern frameworks to simplify this process.
Example with #nette latte templating engine. you can do the same in #laravel,#symfony#webperf#javascript
🔥Webperf tip:
Have a large dom?
Prerender your templates into the <template /> element and render it, when it needs to be rendered
Great for things like:
✅Dropdowns
✅Dialogs
✅Toggable things
✅Non visible content in the carousel
...
#html#javascript#react#vue#php
Tip #javascript for Mutation Observer:
For tracking added nodes, you might want to first find all "removed nodes".
During drag and drop or order change, added node is also in removed nodes
That element is not removed, neither listeners are removed
You can basically skip them
Trackers vs INP
The @brave vs the Chrome (no adblock)
Anonymous windows
4 listeners vs 12 on ONE click
Makes difference about 50-160ms on click
Use @brave or install an adblock
You will do yourself (and currently to devs) a favor
#webperf#webdev#javascript#reactjs#vuejs
🔥 Webperf tip
Global event handlers like
document.addEventListener('click', ...)
are evil.
🔥Don't use them unless it's the only solution. They can easily add 100ms+ to any interaction.
🔥Makes INP score much worse.
#webperf#webdev#javascript#reactjs#vuejs
It seems it wasn’t a bug 😡
🔥Apple may remove PWA support for European users, a feature launched by Steve Jobs in 2008.
👉It also means no Web Push.
⚠️Installed PWAs may lose their storage and will render a dialog saying “it will open from your default browser from now on”