NextJS Core Web Vitals - ret tredjepartsscripts

Ret tredjepartsscripts i NextJS

Tredjepartsscripts er scripts, der tilføjer tredjepartsfunktionalitet til dine websites. Ofte er disse scripts hostet af en tredjepart, selvom dette normalt ikke er strengt nødvendigt (du kan f.eks. selv hoste analytics JavaScript-filen). Tredjepartsscripts tilbyder en bred vifte af nyttig funktionalitet, der gør nettet mere dynamisk, interaktivt og sammenkoblet. Disse scripts kan være afgørende for dit websites funktionalitet eller indtægtsstrøm. Men tredjepartsscripts medfører også mange risici, der bør tages i betragtning for at minimere deres påvirkning og samtidig levere værdi.

Forestil dig: Du er den stolte ejer af et optimeret Next.js-site. Du har optimeret al din kode, implementeret en form for statisk generering, optimeret alle dine billeder, implementeret Critical CSS, men dit site består stadig ikke Core Web Vitals. Hvad sker der?

Det kan skyldes tredjepartsscripts som annoncer, analytics, sociale medie-knapper, widgets, A/B testing scripts, videoafspillere og så videre.

Hvordan tredjepartsscripts påvirker Core Web Vitals

Tredjepartsscripts kan ødelægge dine Core Web Vitals på flere måder, end du sandsynligvis kan forestille dig. Her er nogle af de problemer, jeg er stødt på på live websites.

• Bremse netværket. Tredjepartsscripts kan sende flere forespørgsler til flere servere, downloade store uoptimerede filer som billeder og videoer, downloade frameworks og biblioteker flere gange.
• Tredjeparts JavaScript kan blokere DOM'en på ethvert tidspunkt (eller endda flere gange under et sidebesøg), forsinke hvor hurtigt sider kan rendere og bruge for meget CPU-tid, hvilket kan forsinke brugerinteraktion og forårsage batteridræn.
• Renderblokerende tredjepartsscripts kan være et single-point of failure (SPOF)
• Tredjepartsscripts kan forårsage netværksproblemer på grund af dårligt konfigureret HTTP caching, manglende tilstrækkelig serverkomprimering og langsomme/gamle HTTP-protokoller
• Skade user experience på mange andre måder som at skjule indhold, blokere browserhændelser (som window load-hændelsen) eller bruge forældede API'er som document.write

Ret tredjepartsscripts og Core Web Vitals i Next.js

Ideelt set vil du sikre, at tredjepartsscripts ikke påvirker den kritiske renderingssti. Din foretrukne løsning ville være at bruge defer- eller async-attributten. Desværre er dette tidsmæssigt ikke en god mulighed for de fleste Next.js-sites. Et Next.js-site er stærkt afhængigt af JavaScript for at hydrere siden.

Det betyder, at så snart Next.js-bundlerne er downloadet, vil browseren køre det JavaScript. Dette tager tid og ressourcer. Denne proces vil bremse, når browseren er for travl med at kompilere og køre tredjeparts JavaScripts.

Introduktion til Next.js Script-komponenten

Next.js Script-komponenten, next/script, er en udvidelse af HTML <script>-elementet. Den giver udviklere mulighed for at indstille indlæsningsprioriteten for tredjepartsscripts hvor som helst i deres applikation, uden for next/head, hvilket sparer udviklertid og samtidig forbedrer indlæsningsydelsen.

For at tilføje et tredjepartsscript til din applikation skal du importere next/script-komponenten:

import Script from 'next/script'

Strategi

Med next/script bestemmer du, hvornår dit tredjepartsscript skal indlæses ved hjælp af strategy-egenskaben:

Der er tre forskellige indlæsningsstrategier, der kan bruges:

• beforeInteractive: Indlæs et script, før siden er interaktiv
• afterInteractive: Indlæs et script umiddelbart efter, at siden bliver interaktiv
• lazyOnload: Indlæs et script i inaktiv tid
• worker: Indlæs et script i en web worker

beforeInteractive-strategi

Scripts, der indlæses med beforeInteractive-strategien, injiceres i den indledende HTML fra serveren med defer-attributten aktiveret og kører, før selv-bundlet JavaScript udføres.

Fra et Core Web Vitals-perspektiv er dette præcis den type adfærd, vi gerne vil undgå! beforeInteractive-strategien bør kun bruges på scripts, der er absolut kritiske for siden. Tredjepartsscripts bør aldrig være kritiske!

<Script
  id="bootstrap-cdn"
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  strategy="beforeInteractive"
 />

I dette tilfælde tilføjes bootstrap JavaScript-biblioteket til den genererede HTML med defer-attributten lige før next.js-bundlerne. Det betyder, at browseren sandsynligvis vil hente og udføre bootstrap-biblioteket før next.js-bundlen. Dette vil forsinke next.js-hydreringen og sandsynligvis blokere hovedtråden, når browseren burde downloade og køre next.js-chunks. For Core Web Vitals betyder dette, at First Input Delay sandsynligvis vil blive påvirket.

afterInteractive-strategi

Scripts, der bruger afterInteractive-strategien, injiceres på klientsiden og vil downloade og køre, efter Next.js hydrerer siden.

Fra et Core Web Vitals-perspektiv er dette et meget bedre (men endnu ikke perfekt) sted at injicere tredjepartsscripts. Denne strategi bør bruges til scripts, der ikke behøver at indlæses så hurtigt som muligt og kan hentes og udføres umiddelbart efter, at siden er interaktiv.

<Script
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-XXXXXX');
  `,
  }}
/>

lazyOnload-strategi

Med lazyOnload-strategien begynder tingene endelig at blive interessante! Min måde at tænke på tredjepartsscripts er simpel: 'de bør ikke være kritiske for en side'. Hvis du ikke kan leve uden et bestemt tredjepartsscript, bør du nok ikke stole på en tredjepart.

Scripts, der bruger lazyOnload-strategien, indlæses sent, efter alle ressourcer er hentet og i inaktiv tid. Det betyder, at tredjepartsscriptet ikke vil interferere med next.js-chunks og vil minimere den påvirkning, dette script har på First Input Delay (FID)

<Script
  id="some-chat-script"
  src="https://example.com/chatscript.js"
  strategy="lazyOnload"
 />

worker-strategi