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

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

Когда маркетологи хотят всё: сырые данные в GA4, запись сессий в Метрике, хитмапы в Clarity и при этом «Lighthouse 100» в PageSpeed Insights — приходится изобретать. Расскажу, как мы это сделали на...

Хабр
dave stewart & the spiritual cowboys - party town

YouTube
Boost your website performance with Partytown.js! Learn how to load scripts like Google Tag Manager and Analytics without slowing down your site. #WebPerformance #Partytown #JavaScriptOptimization
https://stevenroland.com/posts/how-to-use-partytownjs-to-load-common-scripts-like-google-tag-manager-or-google-analytics
How to Use Partytown.js to Load Common Scripts Like Google Tag Manager or Google Analytics

Discover how Partytown.js can optimize your website by offloading Google Tag Manager and Analytics scripts to web workers, improving performance and speed.

Steven Roland

@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? 😅