El rendimiento web es un aspecto fundamental del desarrollo web que se enfoca en la velocidad a la que se cargan las páginas y en su capacidad de respuesta a las entradas del usuario. Cuando optimizas tu sitio web para mejorar el rendimiento, les brindas a los usuarios una mejor experiencia. Las mejores experiencias del usuario son muy importantes para ayudarte a alcanzar los objetivos que tenías en mente para tu sitio web.
El rendimiento web puede parecer un tema de nicho, pero de hecho, es amplio y muy profundo. Dada su profundidad como área temática, es fundamental que un curso sobre rendimiento en la Web sea accesible, pero informativo. La versión inicial de este curso se centra en los aspectos básicos del rendimiento web que los principiantes deberían encontrar información.
El objetivo de cada módulo de esta serie es, siempre que sea posible, un conjunto de demostraciones que complementen el contenido de cada módulo y demuestren conceptos clave de rendimiento. Dado que este es una oferta inicial, se planea publicar más módulos adicionales en los próximos meses.
Esto es lo que cubre la oferta inicial del curso de Learn Performance:
Por qué la velocidad es importante
Antes de comenzar a aprender el rendimiento, primero debes comprender su función en la experiencia del usuario y cómo puede generar mejores resultados para los usuarios. Este curso comienza con una breve introducción a estos temas, que brinda un contexto fundamental sobre por qué es importante aprender sobre el rendimiento.
Consideraciones generales sobre el rendimiento de HTML
Cada sitio web comienza con la solicitud de un documento HTML, que desempeña un papel importante en la velocidad de carga del sitio web. En este módulo, se abarcan conceptos importantes, como el almacenamiento en caché de HTML, el bloqueo del analizador y el bloqueo de procesamiento, entre otros, para que puedas asegurarte de que la primera solicitud del HTML de tu sitio web se realice con el pie derecho.
Comprende la ruta crítica
La ruta de procesamiento crítica es un concepto del rendimiento web que se ocupa de la rapidez con la que aparece la renderización inicial de una página en el navegador. En este módulo, se aborda la teoría detrás de la ruta de procesamiento crítica y se abordan conceptos como los recursos que bloquean el procesamiento y los analizadores, y la forma en que desempeñan un rol clave en la rapidez con la que una página aparece en el navegador.
Optimizar la carga de recursos
Mientras se carga una página, se hace referencia a muchos recursos en su código HTML, que le proporcionan su apariencia y diseño mediante CSS, además de su interactividad con JavaScript. En este módulo, se presentan una serie de conceptos importantes relacionados con estos recursos y cómo afectan el tiempo de carga de una página.
Ayuda al navegador con sugerencias de recursos
Las sugerencias de recursos son un conjunto de funciones disponibles en HTML que pueden ayudar al navegador a cargar los recursos con anticipación y, posiblemente, incluso con una prioridad de recursos más alta. En este módulo, se abordan algunas sugerencias de recursos que pueden ayudar a que tus páginas se carguen aún más rápido.
Rendimiento de las imágenes
Las imágenes representan una gran parte de los datos que se transfieren hoy en muchas páginas web. En este módulo, se explica cómo optimizar imágenes y entregarlas de manera eficiente para minimizar los bytes desperdiciados, sin importar el dispositivo del usuario.
Rendimiento del video
El video es un tipo de medio que se usa con frecuencia en páginas web. Sin embargo, saber cómo publicarlos de manera eficiente es un aspecto del rendimiento que no debes pasar por alto. En este módulo, se abordan algunas técnicas clave para incorporar videos de manera que tu sitio web se mantenga rápido, además de las consideraciones de rendimiento adyacentes que pueden surgir con su uso.
Optimizar las fuentes web
Las fuentes web son un recurso de uso general en la Web, y con razón, ya que contribuyen al diseño de un sitio web de formas que otros recursos no pueden hacerlo. Aun así, las fuentes web tienen un costo de rendimiento. En este módulo, se exploran una serie de consideraciones y técnicas de rendimiento en torno a las fuentes web.
JavaScript de división de código
Algunos recursos no son cruciales para la carga inicial de una página web. JavaScript es uno de esos recursos que se puede diferir hasta el momento de la necesidad mediante una técnica conocida como división de código. De esta manera, puedes mejorar el rendimiento mediante la disminución del ancho de banda y la contención de CPU, una consideración fundamental para mejorar la velocidad de carga inicial de la página y la capacidad de respuesta de la entrada durante el inicio.
Imágenes de carga diferida y elementos <iframe>
Las imágenes y los elementos <iframe> pueden consumir un ancho de banda y un tiempo de procesamiento de CPU significativos. Sin embargo, no es necesario cargar todas las imágenes y los elementos <iframe> durante la carga inicial de la página, y es posible aplazarla para un momento posterior en el que sea más probable que el usuario los vea. Esta técnica se conoce como carga diferida. En este módulo, se explica la carga diferida de imágenes y los elementos <iframe> para que las páginas se carguen más rápido y solo consuman ancho de banda y tiempo de procesamiento solo cuando sea necesario.
Carga previa, procesamiento previo y almacenamiento previo en caché de service worker
Si bien gran parte del rendimiento se ocupa de lo que puedes hacer para optimizar y eliminar recursos innecesarios, puede parecer un poco paradójico sugerir que algunos recursos deben cargarse antes de que sean necesarios. Sin embargo, hay algunos casos en los que podría ser apropiado cargar ciertos recursos con anticipación. En este módulo, se explora este aspecto del rendimiento, como se analizan la carga previa, la renderización previa y el almacenamiento en caché previo de service worker.
Descripción general de los trabajadores web
Gran parte de lo que el usuario ve en el navegador ocurre en un solo subproceso conocido como subproceso principal. Sin embargo, existen oportunidades en las que puedes iniciar subprocesos nuevos para que realicen trabajos costosos desde el punto de vista informático, de modo que el subproceso principal se adapte a tareas importantes para el usuario. La API que hace esto se conoce como la API de Web Worker y, en este módulo, se abordan los conceptos básicos.
Un caso de uso concreto de un trabajador web
Ahora que tienes un conocimiento básico de los trabajadores web y sus capacidades y limitaciones, es hora de analizar un caso de uso concreto de un trabajador web. En esta demostración, se usa un trabajador web para recuperar un archivo JPEG, extraer sus metadatos y enviarlos de vuelta al subproceso principal de modo que el usuario pueda verlo en el navegador.
¿Todo listo para comenzar a aprender sobre el rendimiento web? Comienza con la lectura Por qué es importante la velocidad.