Un paquete de Next.js para administrar bibliotecas de terceros

Houssein Djirdeh

En 2021, el equipo de Chrome Aurora presentó el módulo Script componente para mejorar la cargar el rendimiento de secuencias de comandos de terceros en Next.js Desde su lanzamiento, expandió sus capacidades para facilitar la carga de recursos de terceros más rápido para los desarrolladores.

Esta entrada de blog ofrece una descripción general de las funciones nuevas que hemos lanzado, en particular el @next/third-parties y una descripción de las iniciativas futuras en nuestra hoja de ruta.

Implicaciones en el rendimiento de las secuencias de comandos de terceros

El 41% de todas las solicitudes de terceros en los sitios de Next.js son secuencias de comandos. Desmarcar Me gusta en otro contenido los tipos de secuencias de comandos, las secuencias de comandos pueden tardar bastante tiempo en descargarse y ejecutarse lo que puede bloquear la renderización y retrasar la interactividad del usuario. Datos de Chrome El Informe sobre la experiencia del usuario (CrUX) muestra que los sitios de Next.js que cargan más las secuencias de comandos tienen una interacción con el siguiente procesamiento de imagen (INP) y el Procesamiento de imagen con contenido más grande (LCP).

.

La correlación observada en este gráfico no implica causalidad. Sin embargo, la configuración local proporcionan evidencia adicional de que las secuencias de comandos de terceros afectar el rendimiento de la página. Por ejemplo, en el siguiente gráfico se comparan varios labs métricas cuando se selecciona un contenedor de Google Tag Manager, compuesto por 18 etiquetas) se agrega a Taxonomy, un ejemplo popular de Next.js .

.

Documentación de WebPageTest proporciona detalles sobre cómo se miden estos plazos. A simple vista, que todas estas métricas del lab se ven afectadas por el contenedor de GTM. Para Ejemplo, Total Blocking Time (TBT), un lab útil que se aproxima a INP, observó un aumento de casi 20 veces.

Componente de secuencia de comandos

Cuando enviamos el componente <Script> en Next.js, nos aseguramos de presentar a través de una API fácil de usar que se parece mucho a la <script> tradicional . Al usarla, los desarrolladores pueden ubicar una secuencia de comandos de terceros en cualquier de la aplicación en su aplicación, y Next.js se encargará una secuencia de comandos después de que se cargan los recursos esenciales.

<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />

<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />

<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />

Decenas de miles de aplicaciones de Next.js, incluidos sitios populares como Patreon, Target y Noción: usa el componente <Script>. A pesar de su eficacia, algunos desarrolladores han planteado inquietudes sobre los siguientes cosas:

• Dónde colocar el componente <Script> en una app de Next.js mientras se cumple las diversas instrucciones de instalación de los distintos proveedores externos (experiencia del desarrollador).
• ¿Qué estrategia de carga es la más óptima para diferentes secuencias de comandos de terceros (experiencia del usuario).

Para abordar ambas inquietudes, lanzamos @next/third-parties, un biblioteca especializada, que ofrece un conjunto de componentes y utilidades optimizados adaptado para terceros populares.

Experiencia para desarrolladores: Facilitamos la administración de bibliotecas de terceros

Muchas secuencias de comandos de terceros se usan en un porcentaje significativo de sitios de Next.js, con Google Tag Manager es el más popular, usado por 66% de los sitios, respectivamente. @next/third-parties se basa en <Script>. principal introduciendo wrappers de nivel superior diseñados para simplificar el uso de estos casos de uso comunes.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Google Analytics, otra secuencia de comandos de terceros muy utilizada (52% de los sitios de Next.js), también tiene un componente propio dedicado.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  );
}

@next/third-parties simplifica el proceso de carga de secuencias de comandos de uso general. pero también amplía nuestra capacidad de desarrollar utilidades para otros categorías, como incorporaciones. Por ejemplo, las incorporaciones de Google Maps y YouTube se usado en Un 8% y 4% de los sitios web Next.js respectivamente y también hemos enviado componentes para que sean más fáciles de cargar.

import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";

export default function Page() {
  return (
    <>
      <GoogleMapsEmbed
        apiKey="XYZ"
        height={200}
        width="100%"
        mode="place"
        q="Brooklyn+Bridge,New+York,NY"
      />
      <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
    </>
  );
}

Experiencia del usuario: Cómo acelerar la carga de las bibliotecas de terceros

En un mundo ideal, todas las bibliotecas de terceros ampliamente adoptadas optimizado, lo que hace que las abstracciones que mejoren su rendimiento sean innecesarias. Sin embargo, hasta que esto se haga realidad, podemos tratar de mejorar experiencia cuando se integra a través de frameworks populares, como Next.js. Podemos Experimente con distintas técnicas de carga, asegúrese de que las secuencias de comandos estén secuenciadas de la manera correcta y, en última instancia, compartiremos nuestros comentarios con para fomentar los cambios ascendentes.

Tomemos como ejemplo las incorporaciones de YouTube. Algunas implementaciones alternativas un rendimiento mucho mejor que la incorporación nativa. Actualmente, el <YouTubeEmbed> componente exportado por @next/third-parties usa lite-youtube-embed, que, cuando se muestra en la página "Hello, World" Comparación de Next.js, se carga considerablemente más rápido.

.

Del mismo modo, en el caso de Google Maps, incluimos loading="lazy" como atributo predeterminado para insertar para asegurarte de que el mapa solo se cargue a cierta distancia de el viewport. Puede parecer un atributo obvio, en especial ya que Google Maps documentación lo incluye en el fragmento de código de ejemplo, El 45% de los sitios de Next.js que incorporan Google Maps utilizan loading="lazy".

Ejecución de secuencias de comandos de terceros en un trabajador web

Una técnica avanzada que estamos explorando en @next/third-parties es hacer que sea y facilitar la descarga de secuencias de comandos de terceros en un trabajador web. Popularizado por bibliotecas como Partytown, esto puede reducir el impacto de las secuencias de comandos de terceros en el rendimiento de las páginas reubicarlas por completo fuera del subproceso principal.

En el siguiente GIF animado, se muestran las variaciones en las tareas largas y el subproceso principal tiempo de bloqueo cuando se aplican diferentes estrategias de <Script> a un contenedor de GTM en un sitio de Next.js. Si bien solo alterna entre las diferentes opciones de estrategia, Retrasa el tiempo de ejecución de estas secuencias de comandos y las reubica en un trabajador web elimina por completo su tiempo en el subproceso principal.

.

En este ejemplo en particular, trasladar la ejecución del contenedor GTM y su secuencias de comandos de etiquetas asociadas a un trabajador web redujo el TBT en un 92%.

Vale la pena señalar que, si no se administra con cuidado, esta técnica puede romper muchas secuencias de comandos de terceros, lo que dificulta la depuración. En las próximas validaremos si algún componente de terceros ofrece @next/third-parties funcionan correctamente cuando se ejecutan en un trabajador web. Si es así, a fin de proporcionar a los desarrolladores una forma fácil y opcional de usar técnica.

Próximos pasos

En el proceso de desarrollo de este paquete, fue evidente que había una necesitan centralizar recomendaciones de carga de terceros para que otros frameworks también podría beneficiarse de las mismas técnicas subyacentes empleadas. Esto nos llevó a crear herramientas de Capital, una biblioteca que usa JSON para describir técnicas de carga de terceros, que actualmente y sirve como base para @next/third-parties.

En los próximos pasos, seguiremos enfocándonos en mejorar los componentes proporcionados para Next.js y también ampliaremos nuestros esfuerzos para incluir utilidades similares en otras y plataformas de CMS populares. Actualmente, estamos en colaboración con Nuxt y planean lanzar utilidades de terceros similares adaptadas a su ecosistema en un futuro cercano.

Si alguno de los terceros que usas en tu app de Next.js es compatible con @next/third-parties, instalar el paquete ¡y pruébala! Nos encantaría recibir tus comentarios sobre GitHub: