Saiba como usar os seletores CSS eficientes para melhorar a resposta do site. Evitando seletores CSS principais ineficientes que correspondem grande número de elementos pode acelerar a renderização da página. Use-os com mais eficiência e a resposta do seu website será imediatamente mais rápida.
Como o navegador analisa o HTML, ele constrói uma árvore de documento interno que representa todos os elementos para ser exibido. Em seguida, ele combina elementos para estilos especificados em várias folhas de estilo, de acordo com as regras em cascata CSS, herança e ordenação padrão.
Na implementação da Mozilla e provavelmente outros também – para seletores CSS eficientes – seguem esta mesma metodologia, para cada elemento as buscas do motor através de regras de estilo CSS para encontrar uma correspondência. O motor de busca avalia cada regra da direita para a esquerda, a partir do seletor mais à direita – o chamado “chave” e movendo-se através de cada seletor até que ele encontra uma correspondência ou descarta a regra. O seletor é o elemento documento a que deve aplicar-se a regra.
De acordo com este sistema, as regras menos o motor de busca dos buscadores tem de avaliar o melhor. Então, é claro, removendo CSS não utilizado é um passo importante na melhoria do desempenho de renderização. Depois disso, para páginas que contêm um grande número de elementos e, ou um grande número de regras CSS, otimizando as definições das regras em si pode melhorar o desempenho também.
A chave para a otimização de regras consiste em definir seletores CSS que são o mais específico possível e que evitem redundância desnecessária, para permitir que o motor de estilo para encontrar rapidamente partidas sem gastar tempo avaliando regras que não se aplicam.
As seguintes categorias de regras são consideradas ineficazes:
- Regras com seletores descendentes
- Regras com criança ou adjacentes seletores
- Regras com seletores excessivamente qualificados
- Regras que se aplicam a: hover pseudo-seletor para elementos não-link
Outra prática recomendada com os seletores CSS eficientes, é compactar código CSS, isso pode poupar muitos bytes de dados e acelerar a transferência, análise e tempo de execução.
Existem muitos sites faz essa compressão e deixa o CSS mais leve e menor em Bytes.
Uma declaração de CSS por linha já é o suficiente para melhorar o desempenho do site.
Exemplo:
Ao invés de:
.meudiv { width:100%; margin:0; padding:0 font-size:20px; }
Utilize:
.meudiv{width:100%;margin:0;padding:0;font-size:20px;}
Outras recomendações é colocar in line, os principais atributos do CSS, como os Divs que constroem o esqueleto da sua página. Essa prática aumenta a velocidade de abertura do site, principalmente nas versões mobile. Contrate o melhor VPS pelo menor preço!
