Optimización de Sitios con Static Site Generation

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:51

Optimización de Sitios con Static Site Generation

Curso de Optimización Web

Clase 30 de 38

Clase 30 / 38

Recursos

¿Qué es el server-side rendering y cómo afecta el rendimiento web?

El Server-Side Rendering (SSR) es un proceso en el que el servidor genera todas las páginas web para cada solicitud del usuario. Cada vez que un usuario se conecta, el servidor procesa la solicitud y obtiene la información de una API. Esto significa que por cada nueva conexión, se realiza un llamado a las API que estamos utilizando. Si dos usuarios se conectan, se hacen dos solicitudes; si son cien conexiones, se realizan cien solicitudes. Este modelo plantea un desafío potencial de escalabilidad y eficiencia en proyectos donde la información no cambia tan frecuentemente, como una lista de animes más populares.

¿Cuándo utilizar static site generation?

El Static Site Generation (SSG) se presenta como una alternativa eficiente al SSR cuando la información de un sitio no cambia frecuentemente. En lugar de regenerar las páginas con cada solicitud, el SSG procesa todo una sola vez durante la etapa de construcción del proyecto, almacenando el contenido en el servidor para luego distribuir la misma respuesta a todas las conexiones. Esto reduce la carga del servidor y las solicitudes a la API.

¿Cómo implementar static site generation en tu proyecto?

Pasar de SSR a SSG en un proyecto implica ciertos cambios clave en la estructura y el flujo del proceso. A continuación, algunos pasos básicos para implementar SSG:

Identificar el contenido estático: Determina qué partes de tu sitio no requieren ser actualizadas constantemente.
Generar el contenido durante la construcción: Utiliza herramientas para obtener el contenido API durante la build del proyecto y almacénalo estáticamente.
Configurar el servidor para contenidos estáticos: Modifica el servidor para que sirva la versión pre-renderizada del HTML, CSS y JavaScript.

Refinando el SSG con herramientas y librerías

En el ejemplo del curso, se hace uso de la librería HyperScript para ayudar en la generación del HTML estático. Además, el script export.js facilita la creación del archivo index.html con todos los componentes renderizados. El uso de JavaScript junto con las APIs nos permite estructurar nuestro sitio bajo el popular enfoque JAMStack, que privilegia los rendimientos y la escala.

// Ejemplo básico de cómo usar JavaScript para generar HTML estático
// Se reutiliza la función render previamente utilizada en SSR

const render = require('./render');

const createStaticSite = () => {
  const htmlContent = render();  // Obtener el contenido completo con render
  saveToFile('index.html', htmlContent);  // Guardar el HTML generado en un archivo
};

const saveToFile = (filename, content) => {
  // Función para escribir el contenido en un archivo
  fs.writeFileSync(filename, content);
};

createStaticSite();  // Ejecutar la creación del sitio estático

Beneficios del static site generation

El SSG trae consigo numerosos beneficios, especialmente en términos de rendimiento:

Eficiencia en cargas: Las páginas estáticas cargan más rápido ya que no dependen de cálculos dinámicos con cada solicitud del usuario.
Apoyo de servidores universales: Los sitios generados estáticamente pueden subirse a cualquier servidor convencional, ya que solo necesitan soportar HTML, CSS y JavaScript.
Seguridad mejorada: Menos solicitudes al servidor significa menos exposición a vulnerabilidades directas o ataques potenciales.

Estos beneficios facilitan que los desarrolladores creen sitios altamente optimizados, aunque no todas las aplicaciones son adecuadas para el SSG. Entornos como dashboards de datos en tiempo real o analíticas dependen de información dinámica actualizada constantemente y no son candidatos ideales para prerenderización.

Desafíos finales y consideración de optimización

Aunque el static site generation puede llevar una página al máximo nivel de optimización, siempre debe evaluarse la naturaleza y las necesidades del proyecto. Los desarrolladores deben analizar qué partes del sitio pueden beneficiarse de esta metodología y cuáles requieren permanecer dinámicas. Además, en futuras clases, se estudiarán aspectos como la implementación de cachés y redes de entrega de contenido (CDN) para mejorar aún más la eficiencia y rendimiento del sitio.

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Optimización de Sitios con Static Site Generation