Otimização de CSS

✔️ Tag: otimização de CSS

A otimização de CSS é o processo de melhorar o desempenho e a velocidade de carregamento de páginas da Web, reduzindo o tamanho dos arquivos CSS e simplificando sua estrutura. Isso é importante para melhorar a experiência do usuário e aumentar as classificações nos mecanismos de pesquisa.

Como otimizar o CSS - encurtando o CSS

Encurtar CSS significa remover todos os caracteres desnecessários do código, como espaços, quebras de linha e comentários. Isso reduz o tamanho do arquivo CSS e torna o carregamento mais rápido.

Combinando Arquivos CSS

A combinação de vários arquivos CSS em um também pode acelerar o carregamento da página. Isso ocorre porque o navegador precisa fazer menos solicitações ao servidor.

Usando seletores por classe e ID

Usar seletores de classe e ID em vez de seletores de tag pode acelerar o processamento de CSS pelo navegador. Os seletores de classe e ID são mais específicos e permitem que o navegador encontre rapidamente os elementos correspondentes na página.

Otimização de ordem de estilo

A ordem dos estilos em um arquivo CSS também pode afetar a velocidade de renderização. Os estilos aplicados aos elementos na parte superior da página devem ser colocados na parte superior do arquivo CSS. Isso permitirá que o navegador renderize o conteúdo da página mais rapidamente.

A otimização de CSS é um aspecto importante do desenvolvimento de sites. Isso ajuda a melhorar a experiência do usuário e a melhorar as classificações dos mecanismos de pesquisa. Existem muitas técnicas de otimização de CSS, como encurtar código, concatenar arquivos e usar seletores de classe e ID.

Minificação de CSS

A minificação CSS é o processo de compactação do código CSS removendo todos os caracteres desnecessários, como espaços, quebras de linha e comentários. Isso reduz o tamanho do arquivo CSS e torna o carregamento mais rápido. Existem várias ferramentas de minificação de CSS, como CSS Minifier e CleanCSS.

Otimização de imagem

A otimização de imagem também pode melhorar o desempenho da página. Isso significa comprimir imagens para o menor tamanho possível sem perder qualidade. Existem várias ferramentas de otimização de imagem, como TinyPNG e JPEGmini.

A otimização de CSS é um aspecto importante do desenvolvimento de sites. Isso ajuda a melhorar a experiência do usuário e a melhorar as classificações dos mecanismos de pesquisa. Existem muitas técnicas de otimização de CSS, como encurtar código, concatenar arquivos e usar seletores de classe e ID. Não se esqueça de otimizar também as imagens para melhorar o desempenho da página.

Existem quatro aspectos principais da otimização de CSS:

1. Desempenho de download - principalmente reduzindo o tamanho do arquivo, reduzindo o bloqueio de download e melhorando a simultaneidade.

2. Desempenho do seletor.

3. Desempenho de renderização.

4. Manutenibilidade, confiabilidade.

Otimização de CSS - Carregar Desempenho

1. Compactação de CSS: empacotar e compactar o CSS escrito pode reduzir muito seu tamanho;

2. Estilo CSS uniforme: quando as margens inferior e esquerda são necessárias,

⟹ Selecione várias vezes:margin: top 0 bottom 0;

⟹ Mas margin-bottom: inferior; margem-esquerda: esquerda; a execução é mais eficiente;

3. Reduza o uso de @import e use um link porque o último é carregado junto quando a página é carregada e o primeiro tem que esperar a página carregar antes de carregar;

4. Projete seu layout CSS com sabedoria, preste atenção à reutilização de estilo e reduza o tempo de renderização. Para seleção de classe e ID, use um correspondente menos global, como * e defina estilos básicos de forma sensata (como definir uma tabela{}) para melhorar a reutilização.

Otimização de CSS - Desempenho do Seletor

1. Os seletores CSS são combinados da direita para a esquerda. Ao usar seletores filho, o navegador examina todos os elementos filho para determinar se é o elemento especificado e assim por diante;

2. Evite usar curingas. Por exemplo, *{} o número de cálculos é incrível! Selecione apenas os itens que você precisa.

3. Escolha o menor número possível de tags, mas use uma classe. Por exemplo: #nav li{}, você pode adicionar o nome de classe nav_item a li, selecione .nav_item{} da seguinte maneira.

4. Não use tags para qualificar identificadores ou seletores de classe. Por exemplo: ul#nav deve ser simplificado para #nav.

5. Use o seletor infantil o mínimo possível e reduza o peso do seletor. A sobrecarga dos seletores descendentes é a mais alta, tente manter a profundidade dos seletores no mínimo, o nível mais alto não é mais do que três camadas e mais classes de uso para vincular cada elemento de rótulo.

6. Pense na herança. Saiba quais propriedades podem ser herdadas e evite repetir as regras para essas propriedades.

Otimização de CSS - desempenho de renderização

1. Use cuidadosamente os atributos de alto desempenho: flutuante, posicionamento;

2. Minimize a troca e redesenho de páginas;

3. Reorganize de acordo com a ordem de escrita do css:

⟹ Posição: posição, superior, esquerda, z-index, float, display.

⟹ Tamanho: largura, altura, margens, preenchimento.

⟹ Série de texto: fonte, altura da linha, cor, espaçamento entre letras.

⟹ Borda de fundo: fundo, borda.

⟹ Outros: animação, transição.

4. Redesenhe: borda, contorno, fundo, caixa-sombra, se puder usar fundo-cor, tente não usar fundo;

5. Remova as regras vazias: {};

6. Quando o valor do atributo é 0, nenhuma unidade é adicionada;

7. O valor do atributo é um número decimal flutuante 0.**, e o 0 antes do ponto decimal pode ser omitido;

8. Padronize diferentes prefixos de navegador: aqueles com prefixos de navegador vêm primeiro. Seguem os atributos padrão;

9. Não use o prefixo @import, isso afetará a velocidade de carregamento do css;

10. Faça pleno uso das propriedades de herança CSS para reduzir a quantidade de código;

11. Extraia estilos públicos de forma abstrata e reduza a quantidade de código;

12. O seletor otimiza o aninhamento e tenta evitar níveis muito profundos;

13. imagem sprite css, um pequeno ícone da mesma parte da mesma página, conveniente de usar e reduzir o número de solicitações na página, mas a própria imagem ficará maior, ao usá-la, considere claramente as vantagens e desvantagens, e então usá-lo;

14. Coloque o arquivo css no topo da página.

Manutenibilidade e confiabilidade

1. Extrair estilos com os mesmos atributos, integrá-los e utilizá-los nas páginas por meio de classes para melhorar a manutenibilidade do CSS;

2. Seguindo o anterior, o oocss também é uma maneira de melhorar o desempenho do css. Ao definir classes base reutilizáveis e semanticamente boas e, em seguida, adicioná-las ao html, essa técnica também é usada por muitos frameworks de interface do usuário, como :class=”btn btn-active btn-blue”;

3. Separação de estilo e conteúdo: o código css é definido em css externo;

4. Separação de recipiente e estilo;

⟹ A seguir estão os materiais que cobrem este tópico: