Acelerando seu site com CSS Sprites

spritemaster web

Escrevo um pouco sobre a velocidade da página neste site e é uma parte importante da análise e das melhorias que fazemos nos sites de nossos clientes. Além de mudar para servidores poderosos e utilizar ferramentas como Content Delivery Networks, há uma série de outras técnicas de programação que o desenvolvedor da Web médio pode usar.

O padrão para a Folha de Estilo em Cascata original já tem mais de 15 anos. CSS foi uma evolução importante no desenvolvimento web porque separou o conteúdo do design. Olhe para este blog e qualquer outro e a maior parte da diferença de estilo está simplesmente na folha de estilo anexada. Folhas de estilo também são importantes porque são armazenadas localmente em um cache no navegador. Como resultado, conforme as pessoas continuam a visitar seu site, elas não estão baixando uma folha de estilo a cada vez ... apenas o conteúdo da página.

Um elemento de CSS que muitas vezes é subutilizado são CSS Sprites. Quando um usuário visita seu site, você pode não perceber que ele não está simplesmente fazendo uma solicitação para a página. Eles fazer vários pedidos… Um pedido para a página, para qualquer folha de estilo, para qualquer arquivo JavaScript anexado e, em seguida, cada imagem. Se você tem um tema que possui uma série de imagens para bordas, barras de navegação, fundos, botões, etc ... o navegador deve solicitar cada uma, uma de cada vez, de seu servidor web. Multiplique isso por milhares de visitantes e isso pode ser dezenas de milhares de solicitações feitas ao seu servidor!

Isso, por sua vez, torna seu site mais lento. UMA site lento pode ter um impacto dramático no engajamento e nas conversões que o seu público faz. Uma estratégia que grandes desenvolvedores da web usam é colocar todas as imagens em um único arquivo ... chamado de duende. Em vez de fazer uma solicitação para cada uma das imagens de arquivo, agora só precisa haver uma única solicitação para a imagem de sprite única!

Você pode ler sobre como CSS Sprites funcionam em CSS-Tricks or CSS Sprite da Smashing Magazine publicar. Meu objetivo não é mostrar como usá-los, apenas aconselhá-lo a garantir que sua equipe de desenvolvimento os incorpore ao site. O exemplo fornecido pelo CSS Tricks mostra 10 imagens que são 10 solicitações e somam 20.5 KB. Quando reunido em um único sprite, é 1 solicitação de 13 kb! A solicitação de ida e volta e os tempos de resposta para 9 imagens acabaram e a quantidade de dados foi reduzida em mais de 30%. Multiplique isso pelo número de visitantes em seu site e você realmente vai economizar alguns recursos!

globalnavA Apple a barra de navegação é um ótimo exemplo. Cada botão tem alguns estados ... se você está na página, fora da página ou passando o mouse sobre o botão. CSS define as coordenadas do botão e apresenta a região do estado correto para o navegador do usuário. Todos esses estados são recolhidos em um único gráfico - mas exibidos região por região conforme especificado na folha de estilo.

Se seus desenvolvedores amam ferramentas, há uma tonelada que pode ajudá-los, incluindo o Estrutura CSS do Compass, RequestReduce para ASP.NET, CSS-Spriter para Ruby, Script CSSSprite para Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Gerador de Sprites CSS do Projeto Fondue, Sprite Master Web, e as SpriteMe Bookmarklet.

Captura de tela de Sprite Master Web:
spritemaster web

Martech Zone não utiliza imagens de fundo em todo o tema, portanto, não precisamos implantar essa técnica neste momento.

2 Comentários

  1. 1

    Espere… toda a coleção não é uma “imagem” (ou um “plano”), e cada sub-imagem (ou subgrupo de imagens no caso de imagens animadas ou que mudam interativamente) um “sprite”?

    Talvez as coisas tenham sido renomeadas desde a última vez em que lidei com esse tipo de coisa, mas eu poderia jurar que o Sprite foi o elemento que acabou sendo exibido, não a tabela de big data da qual foi extraído.

    (“Mesa Sprite” ... era isso, não era?)

    • 2

      Podemos estar falando duas coisas diferentes, Mark. Com CSS, você pode basicamente especificar qual 'parte' de um arquivo de imagem exibir utilizando as coordenadas. Isso permite que você coloque todas as suas imagens em um único 'sprite' e, em seguida, aponte para a área que deseja exibir com o CSS.

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.