Cache no impulsionador de desempenho da BBC

Sep 16, 2025
Como
A cached image of the BBC homepage featuring a selection of news headlines

No ano passado, durante uma sessão de testes do usuário para o aplicativo BBC News, um dos usuários fez um comentário que realmente ficou comigo. Eles declararam: "Eu gosto de fluir". Eu não acho que há um resumo melhor de que meios de desempenho para nossos usuários. Em um aplicativo rápido ou site, o usuário pode fluir, interagir e se envolver com o conteúdo.

Experiências de fluxo são boas para os proprietários também. Uma experiência de fluxo rápido ajuda os usuários a alcançar seus objetivos e, por sua vez, alcançamos os objetivos de nossos organismos. A Amazon e outros demonstraram o forte elo entre o desempenho e a atividade do usuário: Como a espera pelas páginas cai, a quantidade de tempo e dinheiro que o usuário gasta sobe.

Leia mais: Nordvpn Review

Corte a distância com um cache

Caches são criados quando uma pequena quantidade de algo é armazenada mais perto de onde é necessário, normalmente para evitar o retrabalho. Por exemplo, se eu estiver comendo Skittles, tendem a derramar alguns na minha mão e depois comer de lá. Com efeito, estou criando um cache de skittles na minha mão, pois é mais rápido paraê-los dessa maneira que voltar para o pacote.

Este mesmo padrão é usado em tecnologia. Existem três caches que temos que considerar:

  • Caches do servidor: dados em cache no servidor, como os resultados das consultas do banco de dados
  • Caches de rede: Caches embutidos na rede, às vezes pelo operador do site (conhecido como um cache de proxy reverso), mas mais frequentemente por ISPs ou outros provedores de rede
  • Cache do navegador: O navegador armazena arquivos no disco rígido do usuário para reutilização pelo usuário

O cache pode fazer uma enorme melhoria de desempenho; Na BBC, vi cache aumentar o desempenho mais de 20 vezes no código de produção. É benéfico para os operadores do site também. Com o cache, mais usuários podem ser suportados pelo mesmo hardware. Isso reduz o custo de hardware por usuário e, portanto, reduz os custos operacionais do site.

Design com o cache em mente

Para que seja eficaz, queremos usar dados em cache o máximo possível. Para estender a analogia de Skittles, se eu quiser um skittle azul, mas eu não tenho nenhum skittles azul na minha mão (também conhecido como meu cache), eu terei que voltar para o pacote. Isso é conhecido como "taxa de sucesso". É um "hit" quando o item está no cache e uma "falta" quando não é. Queremos uma alta taxa de sucesso para que o cache tira a maior parte da carga.

Um dos métodos mais simples para aumentar a taxa de sucesso é reduzir a variação. Esticando meu skittles analogia um pouco, imagine se todos os skittles estavam vermelhos. Dessa forma, qualquer skittle na minha mão seria um golpe de cache; Eu nunca precisaria voltar para o pacote. Aplicando isso à Web, se pudermos dar a mesma página para quantos usuários possibilitam, o cache se tornará mais eficaz à medida que mais solicitações atingirão o cache.

Cache HTML por um curto período de tempo

A 30-second cache of the BBC News homepage displaying regularly updated content

A homepage de notícias usa um cabeçalho de cache de idade de 30 segundos para obter conteúdo na frente dos usuários rapidamente sem muita carga

Então essa é a teoria. Vamos nos tornar práticos. Vamos começar olhando para cache a solicitação para o HTML. O cache de todos os tipos de arquivo é controlado usando cabeçalhos HTTP. Os cabeçalhos são dados (dados sobre dados) enviados do servidor para o navegador e visível para todo o hardware de rede entre. Para dizer ao mundo, tem permissão para cache nossas páginas e compartilhar esse cache entre os usuários, definimos o seguinte cabeçalho: 

Cache-Control: public, max-age=30

Aqui, também definimos um limite de tempo: a quantidade máxima de tempo que o cache deve reutilizar esta página para, em segundos. Para este exemplo, coloquei para 30 segundos.

Ao definir a página para 'Public', o navegador do usuário (e qualquer hardware ao longo do caminho) manterá uma cópia. Portanto, a carga da primeira página fará uma solicitação, mas todas as cargas de página após a reutilizar a resposta original, até que o limite de tempo seja atingido.

O efeito do hardware da rede ao longo do caminho pode ser profundo. Muitas grandes redes (como ISPs) terão um cache compartilhado entre os usuários. Os operadores móveis também usam essa técnica pesadamente - por exemplo, para cache e recomprimir as imagens servidas ao longo de 3G. Os operadores de site também podem colocar um cache HTTP na frente de seu serviço. Isto é o que fizemos na BBC.

Ativos estáticos de cache para idades

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

BBC iPlayer armazena ativos estáticos por um ano - alterações ao URL garantem que os usuários vejam novas versões prontamente

Uma técnica que usamos muito no BBC é tratar os ativos estáticos (como imagens, css e scripts) de maneira diferente de como tratamos páginas. Páginas HTML em cache para muito tempo podem resultar em usuários ausentes de atualizações de conteúdo, mas podemos aproveitar esse comportamento quando se trata de ativos estáticos.

Na BBC, enviamos todos os ativos estáticos com uma idade máxima de 31,536.000 segundos definidos no cabeçalho do cache. Isso garante que os ativos sejam armazenados em cache por 365 dias. Com efeito, os ativos são solicitados apenas uma vez. Isso é bom para o desempenho, mas ruim para flexibilidade, pois as alterações nesse ativo levarão muito tempo para chegar ao usuário.

Para contornar isso, toda vez que liberamos uma nova versão de uma página, alteramos o URL onde os ativos são mantidos. Esse truque significa que novas alterações são colocadas na frente dos usuários imediatamente, mas ainda recebemos os mesmos benefícios de desempenho.

Palavras finais

O cache para melhorar o desempenho do site irá, por conseguir, reduzir os custos operacionais para nossos sites e preservar o fluxo de nossos usuários, levando a uma ótima experiência ao usuário.

Este artigo foi originalmente publicado em questão 279 da rede, a revista mais vendida do mundo para web designers e desenvolvedores. Comprar Edição 279. ou Inscreva-se na Net. .

Quer aprender outras maneiras de dar aos seus sites um impulso de velocidade?

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

Jason Lengstorf está dando sua oficina moderna estratégias de desempenho front-end e técnicas em gerar Nova York a partir de 25 de abril de 2018

Jason Lengstorf é um desenvolvedor, designer, autor e urso amigável. Seu foco é sobre a eficiência e o desempenho de pessoas, equipes e software. Na IBM, ele cria processos e sistemas para fazer a coisa certa a coisa fácil. Em todas as outras vezes, ele vagueia a terra em busca de novos e melhores lanches.

Em sua oficina moderna estratégias de desempenho front-end e técnicas em Gere Nova York de 25-27 de abril de 2018 , Jason estará mostrando participantes como melhorar os tempos de carga percebidos - quanto tempo parece que leva para carregar uma página - bem como tempos de carga reais, usando apenas técnicas fronteiras, incluindo:

  • O padrão de carregamento de esqueleto
  • Melhor carregamento para ativos estáticos
  • Carregamento lento
  • Trabalhadores de serviço
  • Melhor construir processos e muito mais!

Gerar Nova York ocorre de 25 a 27 de abril de 2018. Obtenha seu ingresso agora .

Artigos relacionados:

  • 4 dicas para melhorar o desempenho da sua página
  • 7 dicas de especialistas para pregar o desempenho da web
  • 3 maneiras simples de acelerar o seu site

Como - Artigos mais populares

Construa protótipos com o Adobe XD

Como Sep 16, 2025

(Crédito da imagem: futuro) Na Web contemporânea e design de aplicativos, muitas vezes há momentos em que a intera..

Pinte uma configuração de jogo de ficção científica no Photoshop

Como Sep 16, 2025

Eu sempre achei que a originalidade é encontrada em algum lugar entre o que você gosta e o que você observa. Eu amo misturar f..

Como criar um proxy redshift no cinema 4D

Como Sep 16, 2025

Cinema 4D. É ótimo em muitas coisas, mas pode desacelerar quando tem muitos objetos na cena, o que é um problema r..

Mestre pintura negativa em aquarela

Como Sep 16, 2025

A pintura negativa refere-se a pintar o espaço negativo que define formas positivas. Isto é especialmente importante com aquarela tradicional, onde pintando coisas como luz-c..

Faça um logotipo no Illustrator

Como Sep 16, 2025

Esta semana viu a liberação de alguns novos vídeos no Adobe's Faça agora Playlist, uma coleção de clipes sobre como criar projetos de design com aplicativos de nuvem criativos em um min..

Textura Um Authentically Worn K-2SO Droid

Como Sep 16, 2025

Pagina 1 de 2: Página 1 Página 1 Pági..

Como usar formas de mistura para animar caracteres

Como Sep 16, 2025

Enquanto forçando o seu Modelos 3D. Usar os ossos pode ser muito eficaz, às vezes esse método não é adequado - e expressões faciais é uma daquelas vezes. E..

Acelerar o seu fluxo de trabalho de textura

Como Sep 16, 2025

O guerreiro é um projeto pessoal que eu tive a alegria de conceitar e projetar. Eu queria criar um personagem que incorpora o es..

Categorias