Lo que aprendí al asistir a la conferencia #PerfMatters

Notas de una conferencia de rendimiento web front-end

Esta semana tuve el privilegio de asistir a #PerfMatters, una conferencia centrada en el rendimiento web front-end. Nunca antes había estado en una conferencia, pero estaba emocionado de asistir porque prometía una increíble lista de oradores y temas.

Comencé a profundizar en el rendimiento web hace aproximadamente un año, por lo que pensé que sería una gran oportunidad para profundizar en mis conocimientos y conocer a otras personas de la comunidad.

Esta publicación consta de tres partes:

(1) mi experiencia asistiendo a la conferencia,

(2) algunas de las cosas que aprendí en la conferencia, y

(3) pensamientos de despedida.

Reflexiones sobre la experiencia de la conferencia

Todos son tan amables y accesibles.

Fui solo y fue una experiencia bastante intimidante, ya que generalmente soy una persona tímida y puedo tomar un tiempo para calentarme. Pero, hice una regla de no sentarme solo durante el almuerzo y tratar de hablar con al menos 2 personas cada día. Me alegro de haberlo hecho porque todos los que conocí fueron agradables y divertidos para hablar.

Terminé conociendo a mucha gente, hablando de cosas que van desde el patrón PRPL, experimentando con los trabajadores de Cloudflare para brindar un mejor servicio a los usuarios en Australia (desde servidores en los EE. UU.), La creciente prevalencia de la programación funcional en el desarrollo web front-end y cómo Empiece con el snowboard (no relacionado con el rendimiento, en caso de que se lo pregunte).

Las charlas fueron absolutamente increíbles

Todos los ponentes tenían algo relacionado con el rendimiento web de una forma u otra de qué hablar, y era obvio que se esforzaron mucho en sus presentaciones. La charla de Jenna Zeigen cubrió una larga lista de trucos de interpretación y cada uno de sus puntos tenía una letra de canción que los acompañaba, lo cual fue muy entretenido e informativo. Me dijo que le tomó unos 15 minutos para cada canción y que hay más de 30 allí.

Los videos de las conversaciones deberían anunciarse pronto en @perfmattersconf, pero algunas de las diapositivas ya se han publicado con #perfmattersconf.

Las charlas cubren las múltiples facetas del trabajo en rendimiento web.

Mejorar el rendimiento de una página web no es solo una auditoría única, solucionar los problemas que hacen que esa página sea lenta y luego seguir adelante. Se necesita un esfuerzo concertado de todas las partes interesadas ( negocios, diseño, ingeniería, marketing, producto) en una organización para obtener y mantenerse rápido.

Las charlas no se centraron solo en cómo podríamos mejorar los TTI o los tiempos de carga, que son importantes. Pero también cubrieron las otras partes importantes para hacer que la web sea accesible y utilizable para tantas personas como sea posible . Desde cómo las personas perciben el desempeño hasta empoderar una cultura de desempeño, y desde cómo el privilegio define el desempeño hasta la intersección del desempeño y la accesibilidad.

Una lista no exhaustiva de consejos y trucos de rendimiento aprendidos

Algunos, si no todos, podrían ser de conocimiento común, pero muchos eran nuevos para mí.

Cultura del rendimiento

  • Capacite a los desarrolladores con herramientas para permitir un mejor rendimiento. Además, haga que el rendimiento sea parte del proceso de desarrollo.
  • Compare su sitio con el de sus competidores para obtener la participación ejecutiva en el desempeño de la conducción. Utilice la comparación de video en paralelo de WebPagetest de su página web con el viaje de carga de un competidor para explicar su punto de manera sucinta.
  • Mida las ganancias de ingresos anuales potenciales al aumentar la velocidad del sitio con la herramienta Test My Site de Google.

Rendimiento en la Web

  • La latencia tiene un impacto enorme sobre el ancho de banda en las solicitudes de red.
  • Las animaciones SVG son excelentes para animar cargadores debido a sus tamaños (relativamente) más pequeños.
  • Exprima su página en 14 KB si es posible, para evitar múltiples viajes de ida y vuelta debido al inicio lento de TCP.
  • No todas las CDN realizan la priorización HTTP / 2 como se esperaba.
  • Si tiene que usar fuentes web , Zach Leatherman escribió una excelente guía sobre cómo cargarlas bien.
  • El desempeño percibido está influenciado por la duración ( duración real que toma un proceso, denominado "desempeño"), la capacidad de respuesta , la fluidez (suavidad percibida de un proceso) y la tolerancia (cuánto tiempo espera el usuario que tome un proceso). Diapositivas de la charla de Gemma Petrie y Heather McGaw sobre la medición del rendimiento percibido para priorizar el trabajo del producto .

Algunas herramientas ordenadas

  • La herramienta de cobertura de código de Chrome es útil para determinar dónde y cuándo dividir el código. Interactúe un poco con la página para ver cómo cambian los números y, según Tim Kaldec, alrededor del 45% del código no utilizado es normal y las ganancias marginales disminuirán para optimizar sobre eso.
  • La función de anulación de recursos de red de Chrome permite a los desarrolladores devolver un archivo guardado localmente, lo que es útil para depurar algo sobre la marcha.
  • Hoja de cálculo de Google Docs para realizar auditorías masivas de WebPagetest .
  • Explorador AST de JavaScript en línea (está bien, este no está exactamente relacionado con el rendimiento web, pero lo descubrí durante la conferencia y no puedo dejar de jugar con él).
  • Request Map crea un gráfico de red desde una página web y es útil para visualizar solicitudes de terceros.

Pensamientos de despedida

Si hay un tema general que obtuve de la conferencia, es que para ser bueno en el rendimiento de la web, es crucial para entender cómo el navegador obras (cosas como la forma en que ocurre la representación y el camino crítico de representación). Pero el rendimiento no se limita solo a las ganancias técnicas .

Obtener la aceptación de todas las partes interesadas, no solo de la ingeniería, es crucial para mejorar y mantener el rendimiento porque el rendimiento web va más allá de cargar una página lo más rápido posible.

También hay que considerar el rendimiento percibido y luego determinar si las mejoras adicionales en el rendimiento crean mejoras adicionales significativas para el negocio o el usuario . Es importante tener en cuenta que el rendimiento es solo una parte de la experiencia del usuario .

No tomé demasiadas fotos durante la conferencia (tenga en cuenta que definitivamente tomaré más fotos la próxima vez), pero logré tomar esta.

Si está interesado en el rendimiento web o simplemente en el desarrollo web en general, ¡esta es una conferencia increíble y está programada para el próximo año también! También hay un programa de becas para aquellos que no pueden asistir sin ayuda financiera. ¡Espero verte allí el próximo año!

Gracias a Hui Yi, Jingwen Chen y Yao Hui Chua por leer un borrador anterior y compartir sus comentarios.