caché en el refuerzo del rendimiento de la BBC

Sep 15, 2025

Cómo

A cached image of the BBC homepage featuring a selection of news headlines

[dieciséis]

El año pasado, durante una sesión de prueba de usuario para la aplicación BBC News, uno de los usuarios hizo un comentario que realmente se ha quedado conmigo. Declararon: "Me gusta fluir". No creo que haya un mejor resumen de lo que significa el rendimiento para nuestros usuarios. En una aplicación o sitio web rápido, el usuario puede fluir alrededor, interactuar y participar con el contenido.

Las experiencias que fluyen son buenas para los propietarios de sitios también. Una experiencia de flujo rápido ayuda a los usuarios a lograr sus objetivos y, a su vez, logramos los objetivos de nuestros organizaciones. Amazon y otros han demostrado el fuerte vínculo entre el rendimiento y la actividad del usuario: a medida que la espera de las páginas se reduce, la cantidad de tiempo y el dinero que el gasto gasta aumenta.

Leer más: Revisión de Nordvpn

Cortar la distancia con un caché.

Los cachés se crean cuando una pequeña cantidad de algo se almacena más cerca de donde se necesita, normalmente para evitar el retrabajo. Por ejemplo, si estoy comiendo Skittles, tiendo a verter unos pocos en mi mano y luego comer desde allí. En efecto, estoy creando un caché de Skittles en mi mano, ya que es más rápido para comerlos de esa manera que volver al paquete.

Este mismo patrón se utiliza en tecnología. Hay tres cachés que tenemos que considerar:

Cachas de servidor: datos en caché en el servidor, como los resultados de las consultas de la base de datos
Cachas de red: cachés construidos en la red, a veces por el operador del sitio (conocido como un caché proxy inverso), pero con más frecuencia por ISP u otros proveedores de redes
Caché del navegador: el navegador almacena archivos en el disco duro del usuario para su reutilización por el usuario

El almacenamiento en caché puede hacer una gran mejora de rendimiento; En la BBC, he visto al caché aumentar el rendimiento más de 20 veces en el código de producción. Es beneficioso para los operadores del sitio también. Con el almacenamiento en caché, más usuarios pueden ser compatibles con el mismo hardware. Esto reduce el costo en hardware por usuario y, por lo tanto, reduce los costos operativos del sitio web.

Diseño con el caché en mente.

Para que sea efectivo, queremos usar los datos en caché lo más posible. Para extender la analogía de los bolos, si quiero un skittle azul, pero no tengo ningún bofetón azul en mi mano (también conocido como mi caché), tendré que volver al paquete. Esto se conoce como la 'tasa de éxito'. Es un 'golpe' cuando el artículo está en el caché y una 'falta' cuando no lo es. Queremos una alta tasa de hits para que el caché tome la mayor parte de la carga.

Uno de los métodos más simples para aumentar la tasa de hits es reducir la variación. Estirando un poco mi analogía de los bisgones, imagínese si todos los bolos eran rojos. De esa manera, cualquier escape en mi mano sería un golpe de caché; Nunca necesitaría volver al paquete. Aplicando esto a la web, si podemos dar la misma página a tantos usuarios como sea posible, la memoria caché se vuelve más efectiva a medida que más solicitudes lleguen al caché.

Cache html por un corto tiempo

[sesenta y cinco]

[dieciséis] La página de inicio de noticias utiliza un encabezado de caché de edad máximo de 30 segundos para obtener contenido frente a los usuarios rápidamente sin demasiada carga

Así que esa es la teoría. Pongámonos prácticos. Empecemos por mirar en caché la solicitud de HTML. El almacenamiento en caché de todos los tipos de archivos se controla mediante encabezados HTTP. Los encabezados son datos meta (datos sobre datos) enviados desde el servidor al navegador y visibles a todos los hardware de la red intermedia. Para decirle al mundo que tiene permiso para almacenar en caché nuestras páginas y compartir ese caché entre usuarios, establecemos el siguiente encabezado:

Cache-Control: public, max-age=30

Aquí, también hemos establecido un límite de tiempo: la cantidad máxima de tiempo que el caché debe reutilizar esta página para, en segundos. Para este ejemplo, lo he establecido a 30 segundos.

Al configurar la página a 'Public', el navegador del usuario (y cualquier hardware a lo largo del camino) mantendrá una copia. Por lo tanto, la primera carga de la página hará una solicitud, pero todas las cargas de la página después de eso reutilizarán la respuesta original, hasta que se alcance el límite de tiempo.

El efecto del hardware de la red a lo largo del camino puede ser profundo. Muchas redes grandes (como los ISP) tendrán un caché compartido entre los usuarios. Los operadores móviles también usan esta técnica en gran medida, por ejemplo, para cachear y recomprimir imágenes servidas en 3G. Los operadores del sitio también pueden colocar un caché HTTP frente a su servicio. Esto es lo que hemos hecho en la BBC.

Activos estáticos de caché para edades

A longer-term cache of BBC iPlayer displaying content that is updated only periodically

Una técnica que usamos mucho en la BBC es tratar activos estáticos (como imágenes, CSS y Scripts) de manera diferente a la forma en que tratamos las páginas. Las páginas HTML de almacenamiento en caché durante demasiado tiempo pueden resultar en que los usuarios faltan actualizaciones de contenido, pero podemos aprovechar este comportamiento cuando se trata de activos estáticos.

En la BBC enviamos todos los activos estáticos con una edad máxima de 31,536,000 segundos establecidos en el encabezado de caché. Esto asegura que los activos se almacenen en caché durante 365 días. En efecto, los activos solo se solicitan una vez. Esto es bueno para el rendimiento, pero es malo para la flexibilidad, ya que los cambios en ese activo tardarán mucho tiempo en llegar al usuario.

Para poder solucionar esto, cada vez que lanzamos una nueva versión de una página, cambiamos la URL donde se mantienen los activos. Este truco significa que los nuevos cambios se ponen frente a los usuarios de inmediato, pero aún obtenemos los mismos beneficios de rendimiento.

Ultimas palabras

El almacenamiento en caché para mejorar el rendimiento del sitio web a su vez, a su vez, los costos operativos más bajos para nuestros sitios web y preservarán el flujo de nuestros usuarios, lo que llevó a una gran experiencia de usuario.

Este artículo se publicó originalmente en el número 279 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar Número 279 o suscribirse a la red .

¿Quieres aprender otras formas de dar a tus sitios un impulso de velocidad?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018

Jason Lengstorf es un desarrollador, diseñador, autor y oso amigable. Su enfoque está en la eficiencia y el desempeño de personas, equipos y software. En IBM, crea procesos y sistemas para hacer lo correcto, lo fácil. En otras ocasiones, vaga la tierra en busca de nuevos y mejores bocadillos.

En su taller, las estrategias y técnicas modernas de desempeño de front-end en Generar Nueva York del 25 al 27 de abril de 2018. , Jason mostrará a los asistentes a mejorar los tiempos de carga percibidos, cuánto tiempo se siente como que se tarda en cargar una página, así como los tiempos de carga reales, utilizando solo técnicas de front-end:

El patrón de carga del esqueleto
Mejor carga para activos estáticos.
Carga lenta
Trabajadores de servicio
¡Mejores procesos de construcción y más!

Generar Nueva York tiene lugar del 25 al 27 de abril de 2018. Obtenga su boleto ahora .

Artículos relacionados:

4 consejos para mejorar el rendimiento de su página
7 consejos de expertos para clavar el rendimiento web
3 formas simples de acelerar su sitio web

caché en el refuerzo del rendimiento de la BBC

Cortar la distancia con un caché.

Diseño con el caché en mente.

Cache html por un corto tiempo

Activos estáticos de caché para edades

Ultimas palabras

¿Quieres aprender otras formas de dar a tus sitios un impulso de velocidad?

Cómo - Artículos más populares

Cómo limpiar los pinceles: la guía definitiva

Cómo hacer un logotipo en Photoshop

5 consejos para CSS super rápido

Modelo Una criatura alienígena pirata en Zbrush

Aprende a animar para los niños

Pinte un retrato de estilo Munch en Photoshop CC

Aprende a ejecutar el diseño y los sprints de contenido

Cómo crear un carácter 3D estilizado para los juegos

Categorías