#partytown — Public Fediverse posts

Lighthouse 100 / 100: как мы повесили GTM, GA4, Яндекс.Метрику и Clarity на статический сайт — и не уронили скорость

Когда маркетологи хотят всё: сырые данные в GA4, запись сессий в Метрике, хитмапы в Clarity и при этом «Lighthouse 100» в PageSpeed Insights — приходится изобретать. Расскажу, как мы это сделали на небольшом проекте и во что это обошлось по времени и нервам. Проект — нишевый агрегатор российских хостинг-провайдеров. Более 120 страниц в sitemap, 31 статья, десятки категорий услуг, живые цены, сравнения. Стек: Astro 6 + Strapi 5 + Tailwind 4, плюс Partytown, PostgreSQL, Nginx и обычный VPS на Ubuntu. Сайт собирается в статику во время билда, никакого SSR в рантайме нет. На desktop — Lighthouse 100 / 100 / 100 / 100. На mobile с жёстким throttling (4x slow CPU) — 99 / 100 / 100 / 100. В реальных условиях и по Chrome UX Report — 100 везде. LCP на desktop — 0,5 секунды, на mobile throttled — 1,7 секунды. CLS — ноль. TBT — 10 ms на мобильном и 0 ms на десктопе.

https://habr.com/ru/articles/1042228/

#Astro #Strapi #Tailwind_CSS #Partytown #Lighthouse #Core_Web_Vitals #Web_Worker #GTM #performance #SSG

Dave Stewart & The Spiritual Cowboys - Party Town

https://www.youtube.com/watch?v=QBCQtAv2E70

#DaveStewart #TheSpiritualCowboys #PartyTown
#Flatliners #Music

@westbrook Maybe? That reminds me of #PartyTown and seems to be mirroring the entire set of #DOM APIs into a worker. IIRC #AMP doesn't actually have user #JavaScript at all.

I'm more thinking something like:

// my-component.js
function MyComponent() {
return <div>Hello, World!</div>;
}

Where the framework pushes this automatically into a web worker and then its rendering process would transfer the result to the main thread before rendering it.

// framework.js
const worker = new Worker('./my-component.js');
worker.postMessage('render');
worker.addEventListener('rendered', (evt) => {
const vdom = evt.detail.vdom;
diffAndApply(vdom, document.documentElement);
});

Where the framework forces all user code into the worker and handles the marshaling between the two, hiding the DOM altogether from user code.

Yo, there are so many modern #JavaScript frameworks and workflows!! 😅

I'm extremely fond of @preact, which makes me really excited to use #Fresh and @deno_land (especially now that #Deno supports NPM).

I'm trying my best to keep-up with all the ongoings, but I just learned about #Qwik today and I finally grokked what #Vite and #PartyTown do. 🤪

How does anyone keep all this JavaScript stuff straight? What's current, legacy, upcoming? 😅