Rendimiento front-end 2021: ganancias rápidas

Publicado: 2022-03-10
Resumen rápido ↬ ¡Hagamos el 2021... rápido! Una lista de verificación anual de rendimiento de front-end con todo lo que necesita saber para crear experiencias rápidas en la web hoy, desde métricas hasta herramientas y técnicas de front-end. Actualizado desde 2016.

Tabla de contenido

  1. Preparándose: planificación y métricas
  2. Establecer metas realistas
  3. Definición del entorno
  4. Optimizaciones de activos
  5. Optimizaciones de compilación
  6. Optimizaciones de entrega
  7. Redes, HTTP/2, HTTP/3
  8. Pruebas y monitoreo
  9. Triunfos rápidos
  10. Todo en una página
  11. Descargar la lista de verificación (PDF, Apple Pages, MS Word)
  12. Todo en una página
  13. Descargar la lista de verificación (PDF, Apple Pages, MS Word)
  14. Suscríbase a nuestro boletín de correo electrónico para no perderse las próximas guías.

Triunfos rápidos

Esta lista es bastante completa y completar todas las optimizaciones puede llevar bastante tiempo. Entonces, si tuviera solo 1 hora para obtener mejoras significativas, ¿qué haría? Reduzcamos todo a 17 frutas maduras . Obviamente, antes de comenzar y una vez que termine, mida los resultados, incluida la pintura con contenido más grande y el tiempo para interactuar en una conexión 3G y por cable.

  1. Mida la experiencia del mundo real y establezca metas apropiadas. Trate de ser al menos un 20% más rápido que su competidor más rápido. Manténgase dentro de la pintura con contenido más grande < 2,5 s, un retraso de la primera entrada < 100 ms, tiempo para interactuar < 5 s en 3G lento, para visitas repetidas, TTI < 2 s. Optimice al menos para First Contentful Paint y Time To Interactive.
  2. Optimice imágenes con Squoosh, mozjpeg, guetzli, pingo y SVGOMG, y sirva AVIF/WebP con una imagen CDN.
  3. Prepare CSS crítico para sus plantillas principales e inclínelo en el <head> de cada plantilla. Para CSS/JS, opere dentro de un presupuesto de tamaño de archivo crítico de máx. 170 KB en gzip (0,7 MB descomprimidos).
  4. Recorte, optimice, aplace y cargue de forma diferida los scripts. Invierta en la configuración de su paquete para eliminar redundancias y verifique alternativas ligeras.
  5. Aloja siempre tus activos estáticos y prefiere alojar siempre activos de terceros. Limite el impacto de los scripts de terceros. Use fachadas, cargue widgets en la interacción y tenga cuidado con los fragmentos antiparpadeo.
  6. Sea selectivo al elegir un marco. Para las aplicaciones de una sola página, identifique las páginas críticas y sírvalas de forma estática, o al menos prerenderícelas, y use la hidratación progresiva en el nivel de componente y los módulos de importación en la interacción.
  7. La representación del lado del cliente por sí sola no es una buena opción para el rendimiento. Realice una representación previa si sus páginas no cambian mucho y, si puede, posponga el inicio de los marcos. Si es posible, use la representación del lado del servidor de transmisión.
  8. Sirva código heredado solo para navegadores heredados con <script type="module"> y patrón de módulo/no módulo.
  9. Experimente reagrupando sus reglas de CSS y pruebe el CSS en el cuerpo.
  10. Agregue sugerencias de recursos para acelerar la entrega con dns-lookup , preconnect , prefetch , preload y prerender más rápidos.
  11. Crea subconjuntos de fuentes web y cárgalas de forma asíncrona, y utiliza font-display en CSS para una primera representación rápida.
  12. Verifique que los encabezados de caché HTTP y los encabezados de seguridad estén configurados correctamente.
  13. Habilite la compresión Brotli en el servidor. (Si eso no es posible, al menos asegúrese de que la compresión Gzip esté habilitada).
  14. Habilite la congestión de TCP BBR siempre que su servidor se ejecute en el kernel de Linux versión 4.9+.
  15. Habilite el grapado OCSP e IPv6 si es posible. Sirva siempre un certificado DV grapado de OCSP.
  16. Habilite la compresión HPACK para HTTP/2 y cambie a HTTP/3 si está disponible.
  17. Caché de activos como fuentes, estilos, JavaScript e imágenes en una caché de trabajador de servicio.

Descargar la lista de verificación (PDF, páginas de Apple)

Con esta lista de verificación en mente, debe estar preparado para cualquier tipo de proyecto de rendimiento frontal. No dude en descargar el PDF listo para imprimir de la lista de verificación, así como un documento editable de Apple Pages para personalizar la lista de verificación según sus necesidades:

  • Descargue la lista de verificación PDF (PDF, 166 KB)
  • Descargue la lista de verificación en Apple Pages (.pages, 275 KB)
  • Descargue la lista de verificación en MS Word (.docx, 151 KB)

Si necesita alternativas, también puede consultar la lista de verificación de front-end de Dan Rublic, la "Lista de verificación de rendimiento web del diseñador" de Jon Yablonski y la FrontendChecklist.

¡Nos vamos!

Algunas de las optimizaciones pueden estar más allá del alcance de su trabajo o presupuesto o pueden ser exageradas dado el código heredado con el que tiene que lidiar. ¡Esta bien! Use esta lista de verificación como una guía general (y, con suerte, completa) y cree su propia lista de problemas que se aplican a su contexto. Pero lo más importante, pruebe y mida sus propios proyectos para identificar problemas antes de optimizarlos. ¡Felices resultados de rendimiento en 2021 para todos!

Tabla de contenido

  1. Preparándose: planificación y métricas
  2. Establecer metas realistas
  3. Definición del entorno
  4. Optimizaciones de activos
  5. Optimizaciones de compilación
  6. Optimizaciones de entrega
  7. Redes, HTTP/2, HTTP/3
  8. Pruebas y monitoreo
  9. Triunfos rápidos
  10. Todo en una página
  11. Descargar la lista de verificación (PDF, Apple Pages, MS Word)
  12. Todo en una página
  13. Descargar la lista de verificación (PDF, Apple Pages, MS Word)
  14. Suscríbase a nuestro boletín de correo electrónico para no perderse las próximas guías.

Muchas gracias a Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov y Rodney Rehm por revisar este artículo, así como a nuestra fantástica comunidad que ha compartido técnicas y lecciones aprendidas de su trabajo en la optimización del rendimiento para que todos las utilicen. . ¡Estás realmente destrozando!