Next.js — La Arquitectura Híbrida (SSG/SSR) para la Modernización y Escalado de React para Desarrolladores Web

Hola a todos, muchas gracias por acompañarme hoy. Y estoy realmente emocionado de hablar sobre cómo los Core Web Vitals impactarán en las clasificaciones de Google en 2021. Mi nombre es Lee, y soy un Arquitecto de Soluciones en Vercel, y lidero DevRel para Next.js. Si no has oído hablar de Vercel, está totalmente bien. Vercel es una plataforma para desarrolladores, y les permite construir grandes sitios web. Si no lo has probado, te recomiendo ir a deploy.new y desplegar una aplicación en cuestión de minutos.

Pero de lo que vamos a hablar hoy es un poco sobre estas cosas llamadas Core Web Vitals. Comenzaremos con algunos antecedentes e introducción. Profundizaré en estos Core Web Vitals y cómo impactarán en tu motor de búsqueda optimización o SEO. Daré algunas estrategias prácticas para mejorar el rendimiento. Y finalmente, después de implementar esas estrategias, medir ese rendimiento y ver los cambios que has hecho. Pero antes de que podamos hacer todo eso, retrocedamos y hagamos una introducción de antecedentes sobre por qué deberías preocuparte por el rendimiento web.

Entonces, volviendo a 2009, Amazon descubrió que por cada 100 milisegundos de latencia extra, veían un 1% menos de ventas. Así que pudieron vincular el rendimiento directamente a un impacto comercial en sus ventas. Y sólo para reiterar este punto, si miramos unos años más tarde, Walmart, cuando vieron, cuando redujeron la latencia en 100 milisegundos, esto condujo a un 1% más de ingresos, y esto fue en 2012. Así que idea similar, resultados similares aquí. La conclusión es que un mejor rendimiento conduce a un mejor SEO, y tiene un impacto directo en tu negocio.

Me encanta esta captura de pantalla del fundador de Nomad List diciendo, ¿Google search hizo alguna actualización de algoritmo? Porque me desperté hoy y por alguna razón, sabes, mi, mi SEO estaba por las nubes. Estaba obteniendo muchos más clics en Google Search Console, viendo la tasa de conversión de personas que venían de Google. Entonces, cuando tienes un mejor rendimiento como lo hacen en Nomad List, finalmente va a llevar a un mejor SEO, especialmente ahora con la introducción de Core Web Vitals.

Entonces, ¿cómo podemos medir esta verdadera experiencia de usuario de las personas que utilizan nuestro sitio? Google se ha preocupado por el rendimiento durante mucho tiempo, y nos ha dado muchas herramientas diferentes para medir ese rendimiento. Pero cuando hay tantas herramientas diferentes, puede ser difícil entender cuáles son las cosas más importantes en las que necesito centrarme, y cuáles son las medidas cuantitativas para entender qué es bueno y qué es malo? Realmente se hizo un avance cuando el grupo de trabajo de rendimiento web trabajó con Google para introducir estas métricas de Core Web Vitals. Vamos a hablar de ellas aquí en un segundo, pero realmente, te ayudan a entender qué tan buena es tu verdadera experiencia de usuario centrándose en el resultado final del usuario, cómo están percibiendo realmente tu sitio. Entonces, qué tan rápido llega frente a sus ojos, si las cosas saltan o no, qué tan rápido reacciona a la entrada, y estamos optimizando para la calidad de la experiencia.

Entonces, Google y el grupo de trabajo de rendimiento web hicieron esta investigación, y citaron otras investigaciones que analizan la interacción humano-computadora, para entender cuáles son las métricas más importantes a considerar, y eso es core web vitals. Primero, tenemos Largest Contentful Paint. Así que esta es la velocidad de carga percibida de tu página, básicamente el punto en el que el elemento más grande entra, normalmente algo como una imagen o un video, así que cuando tienes un LCP rápido, ayuda a asegurar que tu página es útil. Está pintando en la pantalla o poniendo contenido en la pantalla rápidamente. Y como mencioné antes, estos core web vitals, no sólo nos dicen el qué, sino que nos dan algunas orientaciones sobre qué es bueno, qué es más o menos, y luego qué es no muy bueno. Así que queremos apuntar a un LCP de menos de 2.5 segundos idealmente, y hay más información en la parte inferior derecha de estas diapositivas si quieres aprender más y profundizar más.

Así que un ejemplo de esto sólo para mostrar realmente cómo se ve esto es para Google search. Digamos que estoy cargando una página que está buscando a Larry Page. Ves que tengo mi primer Contentful paint, la primera cosa que veo en la pantalla, y luego el largest Contentful paint entra poco después de eso. Hay muchos más ejemplos de esto en la página web dev también. Lo siguiente es el primer retraso de entrada. Esto mide la cantidad de tiempo desde que un usuario interactúa por primera vez con la página. Así que hacer clic en un enlace, hacer clic en un botón o usar algún tipo de control personalizado alimentado por JavaScript así que el tiempo entre cuando realmente hacen clic y cuando el navegador comienza a procesar esos manejadores de eventos. Y creo que todos hemos visto un mal ejemplo de esto. Haces clic en un elemento y nada sucede cuando haces clic. Te frustras y haces clic muchas más veces. Simplemente no es genial. Queremos apuntar a menos de 100 milisegundos idealmente para tener esos elementos interactivos. Para mostrar esta imagen, vinculándola con FCP, sé que hay mucho que pasa aquí. Entonces, a la izquierda, navegamos a una página esencialmente, y esto está progresando de izquierda a derecha cronológicamente. Navegamos a una página, esa navegación comienza. Tenemos algo de pintura en la pantalla, y nuestro navegador es capaz de interpretar eso y entender eso. Y luego ves en el medio, hay un punto donde el navegador recibe esa primera entrada de usuario.

Entonces, el tiempo entre allí y cuando realmente puede responder es el primer retraso de entrada. La otra métrica en la parte superior es una resumen de todo esto, que es TTI o tiempo hasta la interactividad. El siguiente de los que hablar, el último de los que hablar, es el desplazamiento acumulativo del diseño o estabilidad visual.

Estoy seguro de que has estado en un sitio web en algún lugar, y estás leyendo algo y de repente el contenido cambia frente a ti. Hay algún tipo de cambio, tal vez pierdes tu lugar o haces clic accidentalmente en algo. Esta puede ser una experiencia realmente frustrante, y queremos apuntar a tener tan poco cambio de diseño como sea posible en nuestros sitios web.

Entonces, para un ejemplo de esto, este es un ejemplo realmente malo, estás tratando de volver pero cambia en tu diseño y haces tu pedido accidentalmente. Esta es una experiencia realmente frustrante. No queremos esto. Esto es lo que queremos evitar. Una idea de cómo podrías reducir el CLS sería, como en este ejemplo que muestra el tablero de Vercel notarás que cuando se recarga, hay esqueletos de carga para todo el contenido, Y esto significa que el diseño no salta en absoluto cuando el contenido realmente termina resolviendo desde alguna API. Así que esos son los tres core web vitals, LCP, FID, y CLS. Estas son herramientas que nos permitirán medir, entender y luego mejorar el performance de nuestros sitios, y a su vez, tener un mejor SEO en nuestros sitios.

Entonces, entendemos cuáles son las métricas. ¿Cómo mejoramos realmente el performance de nuestro sitio web, mejoramos estas core web vitals? ¿Cuáles son algunas estrategias prácticas? Todo lo que voy a hablar hoy es agnóstico a cualquier framework o elección de tooling que quieras hacer, pero específicamente voy a hablar de Next.js porque te permite implementar algunas de estas suggestions de manera más fácil.

Si no has oído hablar de Next.js, está bien. Es un framework encima de React que muchas empresas, algunas de las cuales probablemente has oído hablar, desde Apple hasta Nike, DoorDash, TikTok, Netflix, muchas empresas impresionantes, utilizan Next.js para ejecutar React en producción. Están usando Next.js porque les está ayudando a simplificar la obtención de un mejor performance y mejor SEO.

El primero de los que quiero hablar es la pre-renderización de contenido. Cuando digo esto, me refiero a generar algo de HTML por adelantado en cada página desde el servidor. En lugar de hacer algún cálculo en el lado del cliente, la solicitud inicial que viene con el servidor incluye el marcado en la página. Para cualquiera que haya estado haciendo web development durante mucho tiempo, no estamos reinventando la rueda aquí. Así es como nació la web sirviendo ese contenido desde los servidores. También hemos explorado en los últimos años hacer cosas con la renderización del lado del cliente también cuando las aplicaciones de una sola página se volvieron más prevalentes. La ventaja de pre-renderizar contenido es que puede ser indexado inmediatamente por Google, los bots de Google, los rastreadores en tus sitios web. No solo la pre-renderización es buena para que ese contenido aparezca en la pantalla más rápido, mejores métricas web, también es mejor para el SEO. Ya sea que estés haciendo esto a través de la generación estática, podrías haber oído hablar de la generación de sitios estáticos. en el pasado y luego incluso a soluciones más modernas hoy en día como Next.js, o si estás haciendo renderización del lado del servidor que es otra cosa que Next.js puede manejar. Otra característica genial que Next.js te da se llama optimización estática automática, que esencialmente significa que si no estoy haciendo ninguna bloqueo de data desde mi página, podemos optimizar automáticamente eso a HTML. Si quieres aprender más, hay un enlace en la parte inferior derecha para un tutorial interactivo.

A continuación, puedes optimizar las imágenes en tu página. Así que hay un montón de imágenes en la web y queremos asegurarnos de que estamos sirviendo estas en los tamaños correctos y basados en el dispositivo que el usuario está utilizando. Así que primero, queremos usar los atributos de ancho y altura en una imagen para prevenir el cambio de diseño. Le estamos diciendo al navegador, oye, aquí está cuánto espacio necesitas para asignar a esta imagen. En segundo lugar, queremos cargar estas imágenes de manera perezosa a medida que entran en el viewport. Así que cuando aterrizamos en una página, no queremos cargar todas las imágenes de abajo. Mostraré una demostración de esto en un segundo. Queremos usar formatos de imagen modernos como WebP y AVIF, misma calidad, pero menor tamaño de archivo. Queremos servir imágenes de tamaño correcto usando conjunto de fuentes. Así que el conjunto de fuentes es solo parte de la especificación HTML para imágenes, y te permite servir diferentes variaciones dependiendo del dispositivo y viewport que tu usuario está viendo. Y también, queremos proporcionar marcadores de posición BlurUp para hacer que la experiencia de carga sea un poco más agradable. Así que un ejemplo de esto es, si te fijas cuando me desplazo hacia abajo, ves estas solicitudes que vienen en la pestaña de red, y estoy cargando las imágenes. Las estoy cargando de manera perezosa a medida que me desplazo.

Y también notarás que el tipo de estas imágenes es WebP. Entonces, cuando usas este componente de imagen de Next.js que está incluido de serie con Next.js, obtienes esta funcionalidad de forma gratuita e incluida. Así que vamos a profundizar un poco en esto y ver un ejemplo rápido. Básicamente importas este componente de imagen, dices, oye, aquí tienes una fuente, ya sea una imagen local o una imagen remota, le das una etiqueta Alt, le dices cuánto espacio asignar o usas una prop de diseño para que sea responsive, y ya está. Pero ahora quiero profundizar un poco más, porque esto no es algo personalizado magia de JavaScript aquí. Realmente se basa en HTML. Así que hay tres cosas que quiero destacar. Número uno, notarás que hay un par de envoltorios alrededor de la etiqueta de imagen. Así que no es un reemplazo directo para la imagen, está haciendo un par de cosas extra por ti. Lo está haciendo automáticamente responsive y manteniendo la relación de aspecto. Eso es, y eso es el número uno. En el número dos, notarás que tenemos esta URL de imagen de barra inclinada de subrayado para la fuente. De serie, el componente de imagen de Next te va a dar una optimización automática de imágenes. Así que, independientemente de dónde despliegues tu aplicación, siempre que estés haciendo Next Start, que inicia un servidor de Node.js, estamos haciendo una optimización de imagen basada en WebAssembly de serie. Eso está en la última versión de Next.js. Número tres, está el conjunto de fuentes del que ya hablamos que sirve estas diferentes versiones de nuestra imagen basadas en el viewport. Mencioné que puedes obtener imágenes localmente o de forma remota, y la salsa especial aquí es lo que llamamos cargadores personalizados a través de una prop de cargador o a través de los cargadores personalizados que ya hemos definido. Así que en este ejemplo, ves que tenemos una prop de cargador y puedes cambiar básicamente cualquier servicio que quieras para ser el optimizador de tus imágenes. Quizás sea Cloudinary o un servicio similar basado en la nube. Puedes usar esos en conjunto con el componente de imagen de Next sin tener que cambiar nada.

Bueno, eso son las imágenes. A continuación, quiero hablar sobre la optimización de las fuentes. El 82% de las páginas web en escritorio utilizan fuentes web. Probablemente vas a usar fuentes web. Probablemente sea difícil evitarlas usando solo la pila de fuentes del sistema. Así que cuando lo hagas, realmente querrás asegurarte de que lo estás haciendo de una manera eficiente para que tengas buenos Core Web Vitals en tu sitio web.

Entonces, uno, queremos usar la fuente variable. Va a tener un tamaño de archivo más pequeño. Queremos precargar nuestros archivos de fuente para decirle a nuestro navegador que queremos cargar esto antes En el ciclo de renderizado, queremos alojar nosotros mismos en lugar de usar Google Fonts. Queremos usar la visualización de fuente opcional para evitar el desplazamiento del diseño. Así que vamos a profundizar un poco más en estos temas. Como mencioné, podemos poner una etiqueta de enlace en la cabeza de nuestro documento para precargar esta fuente archivo. Y como dije, básicamente estamos diciendo a nuestro navegador que esto es importante y que deberíamos buscarlo antes. También, en algún lugar de nuestro CSS, estamos definiendo una cara de fuente. En este caso, estoy usando la fuente Enter y notamos que tenemos un peso de fuente que es de 100 a 900. Así que tenemos una gama de diferentes fuentes aquí porque tenemos una fuente variable. Tenemos una visualización de fuente opcional, que le está diciendo al navegador, no queremos tener CLS. Así que si no puedes resolver esta solicitud para buscar esta fuente, entonces muestra la fuente de reserva. Así que idealmente aquí, tienes una fuente de reserva que se parece lo más posible a la fuente web que quieres. En este caso, San Francisco es una buena reserva para Enter. Así que esas son algunas estrategias prácticas para cómo puedes mejorar el rendimiento, pero digamos que haces todo eso, también necesitas medir ese rendimiento para saber que has realmente mejorado las cosas para los usuarios reales de tu sitio y también mejorar tu SEO.

La mayoría de nosotros probablemente está familiarizado con una herramienta llamada Google Lighthouse. Hay algunas variaciones de esta página, velocidades, insights web.dev slash measure lighthousemetrics.com. Estas son herramientas que nos permiten hacer simulaciones en el laboratorio, por así decirlo, de nuestro sitio y obtener métricas sobre la velocidad. Así que cuando digo simulado, por ejemplo, creo que estamos mirando como un dispositivo móvil 3G en este ejemplo, así es como ese dispositivo se comporta en el laboratorio. Estas son grandes herramientas que nos ayudan a entender no sólo los core Web vitals que se muestran en la parte superior, sino en el caso de Lighthouse 2, profundizando en accesibilidad y aplicaciones web progresivas y todo tipo de otra información. Queremos usar estas herramientas, pero luego también dar un paso más allá. Así que una solución que hemos creado en Vercel que realmente nos gusta, hay otras soluciones en el campo, también, se basa en el concepto de monitoreo de usuarios reales. Así que Vercel Analytics, que funciona con Next.js, Gatsby y Nuxt.js te permite capturar core Web vitals y otras métricas de rendimiento de usuarios reales que están usando tu

Ahora, en la parte inferior, notarás que también tenemos un desglose por el Vital Web Core individual. También podemos llevar esto aún más lejos y desglosarlo a nivel de URL individual o como en este ejemplo con Next.js a nivel de nombre de página. Así que mirando incluso rutas dinámicas aquí para las rutas de Next.js. Esto es algo que nos ha emocionado mucho. Uno de nuestros clientes en Vercel, HashiCorp, de los que somos grandes fans, saludos a HashiCorp. Ellos usan Vercel Analytics para rastrear el performance de todos sus sitios. Y realmente les ha ayudado no solo a mejorar ese performance sino también el SEO de sus sitios también.

Entonces, en resumen, al mejorar el performance de tu sitio web con los nuevos cambios en el algoritmo de búsqueda de Google en mayo, no solo tendrás un mejor performance para tus usuarios finales, sino que también tendrás un mejor SEO. Mi nombre es Lee. Gracias por sintonizar y unirte. No dudes en enviarme un DM en Twitter si tienes alguna pregunta.

Gracias. Esa fue una charla increíble. Muchas gracias, Lee. Discutamos los resultados de tu encuesta. Parece que es prácticamente 50-50 en este momento o exactamente 50-50. Sí, siempre me parece increíble ver estas encuestas y recibir comentarios sobre las suposiciones que podemos o no tener. Creo que probablemente más personas han oído hablar de los vitales web de lo que pensaba, pero aún hay tantas personas que no lo han hecho, por lo que hay mucho espacio para la oportunidad de educar a otros y ayudarles a entender estos cambios de Google. Sí, seguro, seguro. Enseño una masterclass de blogging bastante a menudo y la hago como una charla de conferencia, y siempre estoy como prueba de lighthouse, prueba de lighthouse, prueba de lighthouse. Así que total récord, récord allí. Realmente gran charla. Oh, espera. Ahora está en 54-46. Esta encuesta es demasiado divertida. OK.

Genial, genial. Y definitivamente tiene una increíble developer experience también. Solo quiero mencionar eso. Entonces, ¿qué es lo que más te emociona de lo que se ha lanzado recientemente para Next.js?

Sí, los últimos seis meses de Next.js han sido realmente acelerados. Ha sido genial. Bueno, supongo que ahora es más de seis meses. Pero en octubre pasado, lanzamos Next.js 10.0, que tenía algunas cosas realmente emocionantes. Algunas de las cosas de las que hablé hoy, y algunas de las cosas de las que vamos a hablar hoy, como el componente de imagen y la optimización automática de imágenes, tratando de ayudar a poner valores por defecto de alto rendimiento dentro del framework así como analíticas y algunas otras cosas. Y luego, hace unas pocas semanas, lanzamos la 10.1, que realmente el enfoque de Next.js en el pasado, digamos, tres a cuatro meses ha sido en performance y security y reducir el tamaño del paquete, reducir el número de dependencias, tratando de hacerlo lo más optimizado posible. Y 10.1 vino con algunas mejoras realmente increíbles para hacerlo más rápido de instalar, menos dependencias, lo cual es genial. Todos queremos menos módulos de node. Hace del mundo un lugar mejor. Y en general, obteniendo soporte para cosas como M1, Max, y tratando de construir una plataforma para aún más características donde realmente estamos tratando de iterar en la experiencia de desarrollo local. Y lo que quiero decir con eso es que queremos hacerlo sentir tan en tiempo real y tan performante como sea posible. Con 10.1, ahora es tres veces más rápido cuando estás haciendo recarga de módulos en caliente o React fast refresh para React localmente. Y estamos trabajando para llevarlo hasta 20 veces más rápido aquí muy pronto. Así que estoy súper, súper emocionado por esto. Creo que realmente va a ayudar a la developer experience trabajando con Next localmente.

Tenemos una pregunta de Darren Reed, y es, ¿cuál es un buen punto de partida o referencia para Next.js? En mi opinión, el mejor punto de partida para Next.js es nextjs.org.com slash learn. La forma en que la documentation está estructurada es que intenta ser lo más al punto posible y servir como referencia. Y luego slash learn es realmente más del curso de masterclass o la introducción para principiantes, y te llevará desde esencialmente cero a tener tu propio blog construido con Next.js. Y mientras haces eso, entendiendo algunos de los conceptos básicos del framework. Y la forma en que lo construimos fue que añadimos algunas preguntas al final para hacerlo un poco interactivo, como un cuestionario, para que básicamente puedas reafirmar ese conocimiento y entender que lo estás aprendiendo. Estoy muy emocionado porque ahora en nextjs.org slash learn, solo hay realmente un curso, pero vamos a añadir un montón más aquí pronto, lo cual va a ser increíble. Así que yo lo revisaría.

Oh, eso es genial. Eso es genial. La guía del sargento de aprendizaje es realmente genial. Me encantan las preguntas interactivas. Me recuerda a los checks de comprensión, que es como un concepto de enseñanza.

Otra pregunta es, Niz se pregunta si tienen un sitio de e-commerce con Magento. ¿Deberían cambiar a Vercel y Next.js? Eso es algo de lo que en realidad no hablé con Next.js 10, pero nosotros, para un poco de historia aquí, vemos a un montón de gente en el espacio de e-commerce adoptando Next.js. Y debido a eso, el pasado octubre, lanzamos algo llamado Next.js Commerce. Así que Next.js.org slash commerce, que es un, intenta ser un kit de inicio todo en uno para construir un kit de e-commerce de alta calidad y alto performance. Actualmente tiene soporte para BigCommerce y Shopify, con soporte para Magento próximamente también. O otros, ya sabes, otros backends que podemos conectar allí. Está básicamente diseñado de una manera donde puedes usar cualquier comercio headless que quieras y conectarlo a un frontend agnóstico que tiene estos hooks de data. Así que mi recomendación, sin saber más, sería, realmente depende. Nunca me gustaría recomendar simplemente dejar todo y cambiar porque eso podría no ser en el mejor interés de tu empresa, pero vale la pena echarle un vistazo. Quizás te guste. Sí, esa es una gran respuesta.

Siento que siempre, depende. Pregunta de Rosen Moon. ¿Cómo miden las experiencias reales de los usuarios en Vercel? Sí, tenemos un pequeño algoritmo, que probablemente sea demasiado elegante para decir una fórmula que básicamente toma todos los diferentes core web vitals y les asigna pesos y clasificaciones. Si vas a vercel.com slash docs slash analytics, puedo poner un enlace en el Discord, pero desglosa exactamente lo que hay dentro de esta fórmula. Es en realidad nuestra guía para tratar de darte un solo número que compone esta puntuación de experiencia real. Así que intenta darte solo un pulso general o health de tal manera que cuando entras allí y si bajó de 95 a 90, puedes mirar el commit y decir, OK, creo que sé qué pudo haber introducido esto. Hicimos algunos cambios importantes en la página de inicio o algo así.