Cómo construir sitios web más rápidos

Feb 7, 2026

Cómo

[dieciséis]

Por delante de su charla en Generar londres El 21 de septiembre nos encontramos con Patrick Hamann , un ingeniero de rendimiento web en Rapidamente , que está en una misión para construir una web más rápida para todos.

¿Qué implica su papel en rápidamente?
Patrick Hamann: Rápidamente es una plataforma de nube de borde que sustenta algunas de las marcas más grandes del mundo. Mi función se centra predominantemente en R & AMP; D; Trabajar con equipos en rápida para utilizar las tecnologías del lado del cliente y las normas web para mejorar el rendimiento y la entrega de nuestros productos y, lo más importante, los servicios de nuestros clientes. Algunos proyectos actuales incluyen iniciativas en torno al monitoreo del rendimiento del navegador, métricas y trabajadores de servicios.

Antes de unirse rápidamente, pasó tiempo tanto en el guardián como en el Financial Times. ¿Cómo se acercaron al rendimiento web?
PH: El rendimiento ya no es un artículo de complemento o lista de verificación post-implementación. Debe ser un esfuerzo constante que cada persona en la organización considere, desde el diseño hasta la entrega. Esto es algo que estas organizaciones de noticias se dieron cuenta muy temprano, introduciendo prácticas como la construcción de infraestructura de monitoreo para medir y comparar el desempeño contra los competidores, priorizando la entrega de contenido sobre otras características y la utilización de tecnologías como los trabajadores de servicios.

¿Cuál es el mayor obstáculo para una experiencia rápida en línea en este momento?
PH: Una palabra: JavaScript. Supongo que debería elaborar esto ligeramente: la web está en la cima de una crisis de obesidad de JavaScript. La página web promedio ahora entrega alrededor de 500kb de script. Script que lleva más de un segundo para analizar, y mucho menos ejecutar: en un dispositivo de bajo consumo y más de cinco segundos para llegar a un estado que el usuario puede interactuar con la página. Por lo tanto, la única forma de mejorar la experiencia del usuario de nuestros sitios es medir, optimizar y reducir nuestro JavaScript, sobre todo.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds

¿Cuáles son sus herramientas favoritas para optimizar el rendimiento web?
PH: Soy un fuerte creyente de que no puede optimizar lo que aún no ha medido. Así que mi caja de herramientas está fuertemente ponderada a las herramientas de medición y perfiles. Para la medición sintética, siempre me alcance. WebPagetest y las herramientas del desarrollador del navegador (paneles de red y rendimiento) primero. Sin embargo, nada supera a la medición de las experiencias de los usuarios reales (R.U.M), por lo que también ayuda un buen conocimiento de las API de tiempo de rendimiento del navegador.

Has trabajado en algunas bases de código muy grandes. ¿Cuáles son los desafíos de trabajar a escala?
PH: En general, argumentaría que una gran base de código comparte la mayoría de los problemas que encontraría en uno más pequeño: eliminando el CSS no utilizado (un problema que creo que es sin resolver), el almacenamiento en caché, la estructura de activos y la versión, etc. También obtiene más 'pudrición de brittes': las mejores prácticas se convierten en anti-patrones con el tiempo. Pero personalmente he encontrado la mayoría de los desafíos a escala son los problemas de las personas, no las técnicas. Todavía estoy a trabajar en una gran organización que no se ve afectada por la Ley de Conway.

Te llamas a ti mismo un defensor progresivo de mejora. ¿Qué es eso sobre ese enfoque que resuena contigo?
PH: Contrariamente a la creencia popular, nuestros usuarios realmente usan los productos que construimos en el mundo real: una llena de condiciones de navegación no ideal y fracaso alrededor de cada esquina. La mejora progresiva nos permite crear experiencias que incluyan a todos nuestros usuarios y son resistentes a los fracasos del mundo real. Es bastante simple: simplemente comience con los conceptos básicos, no una biblioteca de 300kb Javascript que le habló su barista local. No debemos olvidar lo básico.

¿Qué estás entusiasmado en el desarrollo del frontend en este momento?
PH: La web está bajo amenaza. Los usuarios están gastando más tiempo en nativos, y, por lo tanto, las experiencias de la aplicación se alejan de la apertura de la web. Sin embargo, todavía parecemos estar construyendo sitios que tardan 20 segundos y cuestan £ 1.20 por carga en mi conexión de roaming, finalmente conduciendo a nuestros usuarios más lejos.

Afortunadamente, las tecnologías como el trabajador de servicios y las API asociadas están aquí para ayudar. No puedo esperar a que una nueva era de sitios web rápidos y resistentes que aún funcionen sin conexión, pueden sincronizar mis datos en el fondo y notificarme con las actualizaciones. Algunas personas están llamando a esta progresión 'Aplicaciones web progresivas'. Prefiero el término 'la web'.

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser

¿Qué puede esperar la gente aprender de su charla en Generar londres ?
PH: Para el forastero, servir a un sitio web parece bastante simple: envíe un poco de HTML y CSS por el cable, entonces el navegador decide qué hacer a continuación. Sin embargo, mucho está sucediendo bajo la capucha, todos vendrán a un costo para nuestros usuarios.

¿Cómo determina el navegador qué activo para solicitar a continuación? ¿Cómo podemos medir la velocidad percibida de nuestros sitios web? ¿Cómo podemos usar las características modernas de la plataforma web para influir en la prioridad y la velocidad de nuestros activos? Esperemos que mi charla responda a estas preguntas y más. Dando a la audiencia las herramientas para crear experiencias más rápidas y resilientes para sus usuarios.

Generar londres El 21/22 de septiembre presenta 15 presentaciones que cubren animaciones web, estrategia UX, prototipos, accesibilidad, componentes de CSS sensibles y mucho más. También hay cuatro talleres para elegir el día antes de la conferencia, pero los boletos son muy limitados. Reserva tu lugar ahora !

Cómo construir sitios web más rápidos

Cómo - Artículos más populares

Diseñador de afinidad: Cómo usar efectos y estilos

Comience con Adobe Dimension CC

Scatter Trees con rayos V

Cómo diseñar figuras gráficas

Master la ciencia de la optimización de la tasa de conversión

4 puntas de optimización de imágenes esenciales

Cómo mezclar una paleta de gouache

BOOST D3.JS Llama con gradientes SVG

Categorías