Otimização de CSS - 21 maneiras de acelerar seu site

Ouça este artigo

CSS deve passar por um pipeline relativamente complexo, assim como HTML e JavaScript. O navegador deve baixar os arquivos do servidor e, em seguida, analisá-los e aplicá-los ao DOM. Devido aos níveis extremos de otimização, esse processo geralmente é bastante rápido - para pequenos projetos da Web que não são baseados em frameworks, o CSS geralmente representa apenas uma pequena parte do consumo total de recursos.

Os quadros quebram esse equilíbrio. Inclua uma pilha de GUI JavaScript como jQuery UI e observe seu CSS, JS e HTML crescerem exponencialmente. Freqüentemente, os desenvolvedores não se sentem mal - quando se sentam em uma poderosa estação de trabalho de oito núcleos com Internet T3, ninguém se importa com a velocidade. Isso está mudando conforme as latências ou dispositivos com limitações de CPU entram em ação.

Otimização de CSS requer uma abordagem multidimensional. Embora o código manuscrito possa ser reduzido usando vários métodos, a iteração manual do código da estrutura é ineficiente. Nesses casos, usar o minimizador automático oferece melhores resultados.

As etapas a seguir ajudarão você a otimizar seu CSS. Nem todos eles podem ser diretamente aplicáveis ao seu projeto, tenha isso em mente.

O conteúdo do artigo:

• Use Sugestões de CSS de Atalho
• Remova o código CSS não utilizado
• Trabalhe com CSS de uma forma mais conveniente
• Esteja sempre atento às questões relacionadas aos seus estilos
• CSS crítico em linha
• Análise antiparalela
• Substitua suas imagens por CSS
• Usar combinações de cores
• Remova zeros e uns desnecessários
• Remover ponto e vírgula extras
• Usar sprites de textura
• Excluir pixel indesejado
• Evite proporções exigentes
• Remova espaços desnecessários
• Remover comentários indesejados
• Usar compactação automática
• Executar a partir do NPM
• Mantenha Sass e outros sob controle
• Configurar cache
• Limpar cache
• Não se esqueça do básico

Use Sugestões de CSS de Atalho

A frase CSS mais rápida é aquela que nunca é analisada. Usar sugestões abreviadas como a declaração de campo mostrada abaixo reduzirá drasticamente o tamanho de seus arquivos CSS. Muitas abreviações adicionais podem ser encontradas pesquisando "CSS Shorthand" no Google.

Aqui está um exemplo:

p { margem superior: 1px; margem direita: 2px; margem inferior: 3px; margem esquerda: 4px; } p { margem: 1px 2px 3px 4px; }

Remova o código CSS não utilizado

A eliminação de partes desnecessárias de sua marcação obviamente resulta em um grande aumento na velocidade. O navegador Google Chrome tem esse recurso pronto para uso.

Basta acessar Exibir > Desenvolvedor > Ferramentas do desenvolvedor, abrir a guia Fontes na versão mais recente e abrir o menu de comandos. Depois disso, selecione "Mostrar cobertura" e admire a janela de análise de cobertura destacando o código não utilizado na página da web atual.

Trabalhe com CSS de uma forma mais conveniente

A navegação pela análise linha a linha não é necessariamente conveniente. A auditoria de desempenho da Web do Chrome retorna informações semelhantes - basta abri-la na barra de ferramentas, escolher Exibir > Desenvolvedor > Ferramentas do desenvolvedor > Auditoria e executá-la. Quando isso for feito, uma lista de itens problemáticos aparecerá.

Esteja sempre atento às questões relacionadas aos seus estilos

Lembre-se de que a análise automatizada de CSS sempre pode levar a erros. Faça um teste completo de todo o site depois de substituir os arquivos CSS por arquivos reduzidos - você nunca sabe quais erros o otimizador cometeu. E daqui para frente, um host decente pode ajudá-lo a eliminar as rugas em seu site.

CSS crítico em linha

O carregamento de folhas de estilo externas leva tempo devido à latência - alguém se lembra do "flash de conteúdo sem estilo"? Dessa forma, as partes mais importantes do código podem ser colocadas na tag de cabeçalho.

No entanto, tente não exagerar. Lembre-se de que o código também precisa ser lido por pessoas que realizam tarefas de manutenção.

Aqui está um exemplo:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Olá Mundo! </div>

Análise antiparalela

@importar adiciona estrutura ao seu código CSS. Infelizmente, os benefícios não são gratuitos: como as importações podem ser aninhadas, elas não podem ser analisadas em paralelo. A forma mais paralela usa uma série de tags que o navegador pode obter de uma só vez.

Exemplo:

@import url("a.css"); @import url("b.css"); @import url("c.css");

Substitua suas imagens por CSS

Alguns anos atrás, um conjunto de arquivos PNG translúcidos para criar efeitos translúcidos em sites era comum. Atualmente, os filtros CSS são uma alternativa de economia de recursos. Por exemplo, o snippet que acompanha esta etapa garante que a imagem em questão seja exibida como uma versão em escala de cinza dela mesma.

Exemplo:

img { -webkit-filter: grayscale(100%); /* safari antigo */ filtro: grayscale(100%); }

Usar combinações de cores

O senso comum dita que os descritores de cores de seis dígitos são a maneira mais eficiente de expressar cores. Este não é o caso - em alguns casos, descrições abreviadas ou nomes de cores podem ser mais curtos.

alvo { cor de fundo: #ffffff; } alvo { plano de fundo: #fff; }

Remova zeros e uns desnecessários

O CSS oferece suporte a uma ampla variedade de unidades e formatos numéricos. Eles são um alvo bem-vindo para otimização - os zeros à direita e à direita podem ser removidos, conforme mostrado no trecho abaixo. Além disso, lembre-se de que zero é sempre zero e que adicionar uma dimensão não aumenta o valor das informações contidas.

preenchimento: 0,2em margem: 20,0em valor: 0px; enchimento: .2em; margem: 20em valor: 0;

Remover ponto e vírgula extras

Essa otimização é um tanto crítica, pois afeta as alterações de código. A especificação CSS permite omitir o último ponto e vírgula em um grupo de propriedades. Como a economia obtida com esse método de otimização é mínima, o mencionamos principalmente para quem trabalha com o otimizador automático.

p { . . . tamanho da fonte: 1,33em

Usar sprites de textura

Carregar vários sprites pequenos é ineficiente devido à sobrecarga do protocolo. Os sprites CSS combinam uma série de pequenas imagens em um grande arquivo PNG, que é então dividido usando regras CSS. Programas como empacotador de textura , simplifica muito o processo de criação.

.download {largura:80px; altura: 31px; posição de fundo: -160px -160px; } .download:hover { largura:80px; altura: 32px; posição de fundo: -80px -160px; }

Excluir pixel indesejado

Uma maneira bacana de melhorar o desempenho é um recurso do padrão CSS. Valores numéricos sem unidade são considerados pixels - a remoção de pixels economiza dois bytes para cada número.

h2 {preenchimento:0px; margem:0px;} h2 {preenchimento:0; margem:0}

Evite proporções exigentes

A análise mostrou que algumas tags custam mais do que outras. A lista que acompanha esta etapa é considerada especialmente exigente no desempenho - evite-a quando tiver a oportunidade de fazê-lo.

filtro de transformação de sombra de caixa de raio de borda: posição nth-filho: fixo; etc.

Remova espaços desnecessários

Espaços - pense em tabulações, retornos de carro e espaços - tornam o código mais fácil de ler, mas não fazem muito do ponto de vista do analisador. Elimine-os antes do envio. Melhor ainda, delegue esse trabalho a um script de shell ou dispositivo semelhante.

Remover comentários indesejados

Comentários também são inúteis para o compilador. Crie seu próprio analisador para removê-los antes da entrega. Isso não apenas economiza largura de banda, mas também torna mais difícil para invasores e clonadores descobrir o que está por trás do código.

Usar compactação automática

A equipe de IU do Yahoo criou um aplicativo que faz muito trabalho de compactação. Ele vem como um arquivo JAR e pode ser executado com a JVM de sua escolha.

java -jar yuicompressor-xyzjar Uso: java -jar yuicompressor-xyzjar [opções] [arquivo de entrada] Opções globais -h, --help Exibe esta informação --type Especifica o tipo do arquivo de entrada

Executar a partir do NPM

Se preferir integrar o produto em Node.JS, visite npmjs.com/package/yuicompressor . O repositório mal mantido contém um conjunto de arquivos wrapper e uma API JavaScript.

var compressor = require('yuicompressor'); compressor.compress('/path/to/ file or String of JS', { //Compressor Options: charset: 'utf8', type: 'js',

Mantenha Sass e outros sob controle

Embora o desempenho do seletor de CSS não seja tão crítico quanto há alguns anos (consulte o recurso), estruturas como Sass às vezes produzem código extremamente complexo. Revise os arquivos de saída de vez em quando e pense em como otimizar os resultados. Tem resultados para compartilhar com a equipe? Armazene arquivos em armazenamento em nuvem pública.

Configurar cache

O velho ditado diz que o arquivo mais rápido é aquele que nunca passa do fio. Consultar o cache do navegador consegue isso de forma eficiente. Infelizmente, a configuração dos cabeçalhos de cache deve ser feita no servidor. Faça bom uso das duas ferramentas mostradas nas capturas de tela, elas fornecem uma maneira rápida de analisar os resultados de suas alterações.

Limpar cache

Designers geralmente não gostam de cache por medo de problemas com mudanças futuras. Uma maneira simples de resolver esse problema envolve a inclusão de tags com o nome do arquivo. Infelizmente, o esquema descrito no código que acompanha esta etapa não funciona em todos os lugares, pois alguns proxies se recusam a armazenar em cache arquivos com caminhos "dinâmicos".

Não se esqueça do básico

A otimização de CSS é apenas parte do esforço de otimização. Se o seu servidor não usar compressão HTTP/2 e gzip, muito tempo será perdido na transferência de dados. Felizmente, resolver esses dois problemas é bastante simples. Meu exemplo mostra várias configurações para um servidor Apache amplamente usado usando um arquivo .htaccess. Se você estiver em um sistema diferente, consulte a documentação do servidor.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Ficarei muito feliz se este artigo for útil para você. Bem, continuarei a adicionar novos materiais relevantes sobre este tópico.

Lendo este artigo:

• Como fazer redirecionamento 301 no arquivo .htaccess - exemplos detalhados
• Otimização de desempenho da página da web

Obrigado por ler: AJUDANTE DE SEO | NICOLA.TOP