Vladimír Macháček

✨ Webdev & Webperf Consultancy
🏝️ Frontend @slevomat
🎨 @stylifycss
➡️ @signalizejs
🏢

[Vladimír Macháček @8machy]

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

[Vladimír Macháček @8machy]

@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

[Vladimír Macháček @8machy]

@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.

[Vladimír Macháček @8machy]

@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.

[Vladimír Macháček @8machy]

Want to make your web app pages loading effect smooth?🚀
Add this into your head tag and just sit and watch.

#css #html #javascript #WordPress #php #laravel #symfony

[Vladimír Macháček @8machy]

Tip #webperf:

Do not animate LCP elements. Even through CSS. It's going to make the score worse.

https://t.co/9jUW6qsru9

#html #css #javascript #webdevelopment

[Vladimír Macháček @8machy]

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

[Signalize @signalizejs]

✨Hello World! ✨

First version of the SignalizeJS have been released!
👉 https://t.co/42p33jVVMh

#signalizejs #html #css #javascript #webdevelopment #web #webdev

[Vladimír Macháček @8machy]

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

[Mic King @VeryWellVersed]

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

✌🏾

[Vladimír Macháček @8machy]

@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.

[Vladimír Macháček @8machy]

@jarredsumner This way Bun can have almost 1:1 compatibility but also allow features (if wanted/needed) that Node doesn't have without "compromises".

[Vladimír Macháček @8machy]

@jarredsumner Wouldn't be better to have some "feature toggle" config for Bun for this and similar things? By default switched off if not standard.

[Vladimír Macháček @8machy]

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

[Vladimír Macháček @8machy]

🔥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

[Vladimír Macháček @8machy]

If you add new event listeners to such element, they are going to be added/triggered twice.

#javascript

[Vladimír Macháček @8machy]

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

[Vladimír Macháček @8machy]

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

[Vladimír Macháček @8machy]

🔥 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

[Vladimír Macháček @8machy]

🔥 Webperf tips - Case Study

✅How to fix blocking head tag
✅How to improve INP
✅Carousel (like slick) loading tips
✅Modern dialog libraries alternative
✅Others

https://t.co/3m7ZMxCczl

#webperf #webperformance #javascript #html #css #php #reactjs #laravel #vuejs #webdev

[Maximiliano Firtman @firt]

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”