logo

Jak měřit Next.js Web Vitals pomocí analytického nástroje

Úvod

Web Vitals jsou klíčové metriky, které vám mohou pomoci kvantifikovat zážitek z vašeho webu/aplikace. S těmito znalostmi můžete jako vývojář podniknout několik kroků ke zlepšení svého webu/aplikace.

Next.js je framework pro reakce, který vás připraví na produkci tím, že poskytuje mnoho funkcí připravených přímo z krabice. Funkce, jako je hybridní statické a serverové vykreslování, inteligentní sdružování, předběžné načítání trasy a další, nemusíte implementovat sami.

A Next.js aplikace bude automaticky sledovat důležité metriky webu a poskytne vám zprávu. Tento přehled můžete použít k vkládání do analytických nástrojů (jako je Google Analytics), abyste o něm získali lepší přehled.

V tomto článku se naučíme, jak integrovat Next.js Přehled Web Vital s lehkou analytickou aplikací s názvem Quickmetrics .

Přehled Web Vitals

Zde je rychlý přehled webových vitalit

  • Čas do prvního bajtu (TTFB) :Vztahuje se k době mezi žádostí prohlížeče o stránku a okamžikem, kdy obdrží první bajt informací ze serveru.
  • First Contentful Paint (FCP) :Čas, kdy prohlížeč vykreslí první část obsahu.
  • Largest Contentful Paint (LCP) :Měří výkon při načítání. Pro lepší uživatelský výkon by LCP mělo dojít do 2,5 sekundy.
  • Zpoždění prvního vstupu (FID) :Měří interaktivitu. Lepší uživatelský dojem by měl mít FID stránky kratší než 100 milisekund.
  • Cumulative Layout Shift (CLS) :Měří vizuální stabilitu. Stránky by měly udržovat CLS menší než 0,1.

Přečtěte si podrobně o Web Vitals zde:https://web.dev/vitals/

Existuje nějakých Next.js také specifické viteály,

  • Next.js-hydratation :Doba, kterou stránka potřebuje, než začne a dokončí hydrataci HTML.
  • Next.js-route-change-to-render :Doba, za kterou se stránka začne vykreslovat po změně trasy.
  • Next.js-render :Doba, za kterou stránka dokončí vykreslování po změně trasy.

Přečtěte si o vlastních metrikách zde:Vlastní metriky Next.js

Nastavení nástroje Analytics:Quickmetrics

Quickmetrics je nástroj pro vlastní sběr metrik s vizualizací dat. Tento nástroj použijeme k dodávání dat web vitals z aplikace Next.js. Chcete-li začít, zaregistrujte se pomocí Quickmetrics. Vyberte si bezplatný plán, protože je pro naše použití velmi štědrý.

Po vytvoření účtu se přihlaste a poznamenejte si svůj API klíč. Tento klíč API použijeme v druhé části článku.

Je třeba poznamenat, že Vercel má vynikající analytickou podporu pro aplikace Next.js. Můžete to povolit nasazením aplikace Next.js do Vercelu. Ve výchozím nastavení bude tato možnost zakázána, ale lze ji povolit pro jednotlivé projekty přechodem na kartu analýzy. Navštivte tuto stránku, kde se o tom dozvíte více.

Krok 2:Vaše aplikace Next.js

Pokud již máte aplikaci Next.js, můžete tuto část přeskočit. V případě, že ne, připravte si věci podle těchto kroků.

Přejděte na tento projekt GitHub a použijte šablonu k vytvoření Next.js projekt pro vás.

Naklonujte nový projekt na disk vašeho počítače a změňte do něj adresář.

cd nextjs-analytics/

Ke spuštění tohoto projektu budeme potřebovat nainstalované soubory Node.js a npm. Nainstalujte závislosti pomocí npm nebo yarn.

yarn install # Or, npm install

Po úspěšné instalaci závislostí použijte tento příkaz ke spuštění aplikace

yarn dev # Or, npm run dev

V příkazovém řádku byste měli vidět zprávu potvrzující, že aplikace běží na http://localhost:3000.

Otevřete kartu/okno prohlížeče a otevřete aplikaci pomocí adresy URL http://localhost:3000. Skvělé, měli byste vidět stránku jako je tato,

Nezdá se vám, že je stránka trochu prázdná? Bylo by skvělé, kdybychom přidali nějaká jména, popisy projektů atd. Pojďme na to.

Vytvořte soubor s názvem .env.local v kořenové složce vašeho projektu s následujícím obsahem,

NEXT_PUBLIC_NAME=Tapas Adhikary
NEXT_PUBLIC_FAKE_BLOG_NAME=My Fake Blog
NEXT_PUBLIC_ORIGINAL_BLOG_NAME=GreenRoots Blog
NEXT_PUBLIC_ORIGINAL_BLOG_LINK=https://blog.greenroots.com
NEXT_PUBLIC_TWITTER_LINK=https://twitter.com/tapasadhikary

Poznámka:Můžete použít hodnoty dle vlastního výběru. Tyto hodnoty jsem použil pro účely příkladu.

Restartujte yarn dev příkaz. Obnovte stránku, abyste viděli změny.

Poznámka :Tyto podrobnosti není nutné získávat z proměnných prostředí. Udělali jsme to jen proto, abychom se seznámili se zpracováním proměnných prostředí v Next.js . Právě teď jej použijeme pro reálnější účel.

Krok 3:Povolení služby Analytics pomocí Quickmetrics

Přidejte několik dalších položek do .env.local soubor,

NEXT_PUBLIC_QUICK_METRICS_API_KEY=EDiH_ZnU0IYxMlNtqfaesB
NEXT_PUBLIC_SEND_ANALYTICS=false

NEXT_PUBLIC_QUICK_METRICS_API_KEY klíč je specifikovat API klíč, který jste si poznamenali dříve. NEXT_PUBLIC_SEND_ANALYTICS slouží pro naše pohodlí k zapnutí/vypnutí analytických přehledů.

Dobře, nyní otevřete soubor pages/_app.js soubor a přidejte tento fragment kódu.

export function reportWebVitals(metric) {
    switch (metric.name) {
      case 'FCP':
        // handle FCP results
        sendAnalytics(metric);
        break
      case 'LCP':
        sendAnalytics(metric);
        break
      case 'CLS':
        sendAnalytics(metric);
        break
      case 'FID':
        sendAnalytics(metric);
        break
      case 'TTFB':
        sendAnalytics(metric);
        break
      case 'Next.js-hydration':
        sendAnalytics(metric);
        break
      case 'Next.js-route-change-to-render':
        sendAnalytics(metric);
        break
      case 'Next.js-render':
        sendAnalytics(metric);
        break
      default:
        break
    }
  }

Nakonec přidejte sendAnalytics funkce,

const sendAnalytics = ({ name, value }) => {
    if (process.env.NEXT_PUBLIC_SEND_ANALYTICS) {
        const url = `https://qckm.io?m=${name}&v=${value}&k=${process.env.NEXT_PUBLIC_QUICK_METRICS_API_KEY}`;

        // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
        if (navigator.sendBeacon) {
            navigator.sendBeacon(url);
        } else {
        fetch(url, { method: "POST", keepalive: true });
        }
    } else {
        console.warn('The Analytcs feature is disabled');
    }
};

Zde nejprve zkontrolujeme, zda je analytika povolena. Pokud ano, vytvořte adresu URL, jak je navrženo v nastavení Quickmetrics, abyste předali název metriky, hodnotu a klíč API.

Všimněte si, že používáme Beacon Požadavek jako výchozí. Pokud to prohlížeč nepodporuje, vrátíme se k fetch . Pokud jste novým uživatelem Beacon , můžete se to naučit zde:

https://blog.greenroots.info/how-to-log-user-activities-using-the-beacon-web-api-ckgq6s7k0094do9s15udf767u

Restartujte yarn dev příkaz a několikrát aktualizujte aplikaci v prohlížeči. Měli byste být schopni sledovat tyto požadavky z ladicího nástroje

Kontrola metrik

Podívejte se na stránku s metrikami Quickmetrics, kde si ji můžete prohlédnout a provést nějakou analýzu.

Seznam shromážděných informací o metrikách

Ke každé z metrik můžete procházet podrobněji

Můžete si je přizpůsobit podle svých potřeb

Než skončíme...

Veškerý zdrojový kód použitý v článku lze nalézt zde

https://github.com/atapas/nextjs-analytics

Děkuji, že jste dočetli až sem! Pojďme se připojit. Můžete mi @me na Twitteru (@tapasadhikary) s komentáři, nebo je neváhejte sledovat.

Lajkujte/sdílejte tento článek, ať se dostane i k ostatním. Také by se vám mohlo líbit,

  • 10 méně známých webových rozhraní API, která můžete chtít použít
  • Jak protokolovat aktivity uživatelů pomocí rozhraní Beacon Web API?
  • JAMstack pro všechny:Úvod