La optimización del hosting para aplicaciones web basadas en el contenido implica varias estrategias destinadas a mejorar el rendimiento y la experiencia del usuario. Los enfoques clave incluyen usar CDN para una entrega de contenido eficiente, almacenar en caché el contenido que incluye elementos estáticos, optimizar la seguridad, supervisar, considerar las opciones de escalabilidad y minimizar la latencia. Las opciones de búsqueda eficientes y las integraciones de seguridad mejoran aún más el hosting. El perfeccionamiento continuo de los esfuerzos basados en el rendimiento es esencial para satisfacer las demandas cambiantes de los usuarios.
Aloja recursos estáticos
Los elementos estáticos son archivos que el servidor no genera de forma dinámica para cada solicitud. Los recursos estáticos permanecen sin cambios o se actualizan con poca frecuencia y, por lo general, se entregan al navegador del usuario sin renderización del servidor.
| Tipos de archivos estáticos | |
|---|---|
| Imágenes | Las imágenes, como fotos, íconos, ilustraciones, gráficos y logotipos son archivos estáticos. Algunos formatos de ejemplo incluyen JPEG, PNG, WebP, GIF o SVG. |
| Hojas de estilo | Las hojas de estilo (CSS) controlan el diseño, la fuente, los colores y los aspectos visuales de la interfaz de usuario. Por lo general, son estáticos y se aplican al contenido HTML en el navegador. |
| Audio y video | Los archivos de audio y video son elementos estáticos que se pueden incorporar en tu aplicación o entregar mediante reproductores multimedia. |
| JavaScript | Los archivos estáticos de JavaScript (JS) incluyen código del cliente que contribuye a la interactividad de la aplicación. Estas secuencias de comandos se ejecutan en el navegador del usuario y controlan la validación de formularios y la carga de contenido dinámico. Las bibliotecas de JavaScript de terceros, como jQuery y los complementos se incluyen como archivos estáticos cuando mejoran la funcionalidad de tu aplicación web. |
| WASM | WebAssembly (WASM) son archivos que ejecutan una VM basada en una pila en el navegador con un rendimiento similar al del hardware y se pueden compilar desde una variedad de idiomas. |
Por lo general, los recursos estáticos se almacenan en el servidor web o se entregan a través de CDN. Los desarrolladores pueden usar técnicas como la optimización, reducción y compresión de recursos para disminuir el tamaño de archivo de los recursos estáticos, lo que mejora el rendimiento de la página. También debes incorporar estrategias de almacenamiento en caché adecuadas para reducir la necesidad de realizar descargas repetidas cuando los usuarios vuelven a visitar los sitios web.
Obtén más información sobre CSS y HTML en web.dev.
Recursos y datos en caché
El almacenamiento en caché de una aplicación web basada en contenido incluye el almacenamiento y la reutilización de datos y recursos obtenidos o generados previamente. Es una técnica de optimización importante que ayuda a entregar contenido a los usuarios con rapidez, en especial para datos y recursos estáticos a los que se accede con frecuencia. El almacenamiento en caché mejora el rendimiento, reduce la carga del servidor y minimiza la latencia para las aplicaciones web basadas en contenido.
La tabla proporciona descripciones de los distintos tipos de almacenamiento en caché.
| Tipos | |
|---|---|
| Almacenamiento en caché del navegador | El navegador del usuario puede almacenar en caché elementos estáticos, como imágenes, hojas de estilo y archivos JavaScript. Cuando el usuario regresa al mismo sitio web, estos recursos se pueden cargar desde la caché local. |
| Almacenamiento en caché del servidor | Es común que las aplicaciones basadas en el contenido usen mecanismos de almacenamiento en caché del servidor para almacenar contenido estático, resultados de consultas de bases de datos o incluso páginas web completas. Los métodos comunes de almacenamiento en caché del servidor incluyen proxies inversos (Nginx, Varnish), cachés en memoria (Redis, Memcached) y almacenamiento en caché de resultados de consultas de bases de datos. |
| Almacenamiento en caché de CDN | Las CDN pueden almacenar en caché y distribuir recursos estáticos a servidores perimetrales cercanos a los usuarios, lo que mejora la velocidad de entrega. |
| Almacenamiento en caché de consultas de base de datos | El almacenamiento en caché de las consultas de la base de datos almacena los resultados de las consultas frecuentes de la base de datos en la memoria o en un almacén de caché. Este tipo mejora el rendimiento de la base de datos, ya que reduce la necesidad de volver a ejecutar las mismas consultas para solicitudes similares. |
| Almacenamiento en caché de Service Worker | El almacenamiento en caché del service worker permite que las aplicaciones web almacenen en caché y administren recursos como archivos HTML, CSS o JavaScript, independientemente del subproceso de ejecución principal de la página web. Se ejecutan en segundo plano y actúan como intermediarios entre la aplicación y la red. Los beneficios incluyen capacidades sin conexión y uso reducido del ancho de banda. |
Cómo almacenar elementos en caché
Es importante equilibrar el almacenamiento en caché y las actualizaciones oportunas para que los usuarios reciban el contenido más reciente y continúen teniendo una experiencia positiva cuando accedan a tu aplicación web. Recuerda que no todos los elementos deben almacenarse en caché. No es necesario almacenar en caché contenido dinámico, como páginas HTML que generó una secuencia de comandos del servidor. Los recursos estáticos se pueden almacenar en caché durante un período específico o hasta que se actualicen en el servidor. El plan de implementación de tu estrategia de almacenamiento en caché depende del tipo de almacenamiento en caché que elijas realizar. Por ejemplo, puedes implementar el almacenamiento en caché del navegador mediante el encabezado de control de caché en tus respuestas HTTP o implementar el almacenamiento en caché activo del servicio con la API de caché.
Se recomienda usar un sistema de control de versiones para los elementos almacenados en caché, lo que te permite actualizar los elementos almacenados en caché sin invalidarlos. Asegúrate de supervisar el uso de la caché y de realizar los ajustes necesarios. Puedes obtener más información sobre el almacenamiento en caché en web.dev.
Escalamiento
El escalamiento de una aplicación web basada en el contenido implica la implementación de un plan estratégico para controlar el aumento de tráfico y datos, a la vez que se preserva la eficiencia y la confiabilidad de la aplicación. El proceso de escalamiento requiere planificación, supervisión y flexibilidad para administrar patrones de tráfico fluctuantes y volúmenes de datos. Cuando escalas tu aplicación web, debes equilibrar la optimización del rendimiento y la administración de los costos de infraestructura.
Un balanceador de cargas distribuye el tráfico entre diferentes servidores. Esto garantiza que tu aplicación pueda manejar el aumento de tráfico de manera eficaz. Puedes reducir la carga en tus servidores mediante la implementación de mecanismos de almacenamiento en caché. Las CDN también pueden ser valiosas para almacenar en caché elementos estáticos y distribuir contenido, lo que reduce la latencia. También puedes usar escaladores automáticos para aumentar o disminuir la escala de tu aplicación de forma automática según sea necesario. Los escaladores automáticos pueden garantizar que tu aplicación tenga los recursos necesarios para controlar el nivel actual de tráfico. Tu enfoque y estrategia de escalamiento requieren una supervisión y un ajuste del rendimiento eficaces. Asegúrate de analizar con regularidad los datos de rendimiento y realizar ajustes según sea necesario en tu infraestructura y código.
Latencia
La latencia es el retraso que se produce cuando un usuario interactúa con tus aplicaciones web. Es el tiempo que tarda la solicitud web en viajar desde el navegador o dispositivo del usuario hasta el servidor web y la respuesta en regresar al dispositivo del usuario. Por lo general, se mide en milisegundos (ms). La latencia tiene un gran impacto en la experiencia del usuario, ya que puede frustrarlos y decepcionarlos.
Los factores que afectan la latencia incluyen los siguientes:
| Factores | |
|---|---|
| Latencia de red | La distancia entre el usuario de la aplicación web y el servidor, el enrutamiento de datos y la calidad de la conexión de red pueden influir en la latencia de la red. |
| Tiempo de procesamiento del servidor | El tiempo de procesamiento del servidor depende de la complejidad de la solicitud y del rendimiento del servidor. |
| Hora de publicación del contenido | El tiempo de entrega del contenido se ve afectado por la ubicación del servidor, los CDN y la optimización de los activos. Se refiere al tiempo que lleva cargar imágenes, hojas de estilo, secuencias de comandos y otros elementos necesarios para procesar una página web. |
| Estrategia de carga de contenido | Las estrategias como la carga previa, la carga asíncrona de contenido y la carga diferida afectan la latencia percibida porque, a menudo, priorizan la carga de contenido crítico. |
Puedes mejorar la latencia si incorporas técnicas como el almacenamiento en caché de contenido, la optimización de la entrega de contenido, el ajuste del rendimiento del servidor y el uso de CDN para minimizar el RTT.