Como otimizar a entrega de CSS – 7 etapas simples

imagem de vetor de otimização de cssLonge vão os dias em que especialistas em design e blogueiros líderes do setor recomendaram a criação de páginas da web com no máximo 30 kilobytes…


Naquela época, esse “limite” era esperado para lidar com HTML, JavaScript, imagens, CSS e Flash. Vamos ser honestos, não é preciso muito para exceder completamente 30 kb.

À medida que o JavaScript e o CSS ganhavam popularidade, tornou-se comum apenas o CSS exceder o limite de 30 KB. Isto é especialmente verdade para sites maiores.

No entanto, você não deve se concentrar muito na sua “contagem de kilobytes” ao criar e criar páginas para o seu site. É importante manter suas páginas otimizado e firme ao escrever seu CSS.

A otimização não é apenas minimizar o tamanho dos seus arquivos. Trata-se de manter suas páginas livres de confusão e inchaço, tornando-as o mais organizadas e eficientes possível. À medida que aprende mais sobre as práticas recomendadas de otimização de CSS, você descobre que cria automaticamente tamanhos de arquivo menores.

Aqui estão 5 coisas simples que você pode fazer para otimizar seu CSS agora.

Como otimizar totalmente a entrega de CSS

1. Use taquigrafia

Escrever em taquigrafia tornou-se uma prática muito comum. Essa é de longe a maneira mais simples de reduzir seu código e quanto tempo você leva para codificar. Se você ainda não está fazendo isso, não há tempo como o presente.

propriedade de fonte css

Existem vários elementos que você pode usar para abreviar, mas os mais comuns incluem:

  • Margem
  • Preenchimento
  • Fonte
  • Esboço
  • Fronteira
  • fundo
  • Estilo de lista

valores de configuração abreviadosVocê também pode combinar valores usando taquigrafia. Ao especificar valores diferentes, o navegador usará essencialmente uma maneira especificada para interpretar as regras.

Usar qualquer taquigrafia torne seu código geral muito mais sucinto. Você está salvando caracteres e linhas.

Se você usar taquigrafia em todas as áreas possíveis, isso poderá reduzir drasticamente o tamanho geral do arquivo.

2. Livre-se dos Hacks

ou seja, regra cssPara servir regras CSS específicas do IE, o uso de hacks CSS condicionais oferece o benefício de servir um arquivo CSS padrão menor e mais limpo.

Ajuda nos navegadores mais compatíveis com os padrões. No entanto, o peso adicional da página será baixado apenas pelos navegadores que precisam dele.

Se você precisar usar um hack, é imperativo que o código usado seja específico da versão do Internet Explorer em que você está focado.

Existem inúmeros códigos pré-escritos que servem como hacks, se você não quiser escrever seus próprios. Apenas reserve um tempo para realmente analisar o código pré-escrito e garantir que ele seja preciso ou então isso pode resultar em ainda mais problemas.

Agora, se você pode usar o CSS para obter os resultados desejados, faça isso sem hacks. Obviamente, isso depende de todas as outras coisas serem iguais. Seu código geral será muito mais leve e mais simples quando você usar menos hacks no seu site.

3. Seja esperto ao usar o espaço em branco

Para o seu código CSS, espaço em branco é imperativo para legibilidade.

O espaço em branco inclui elementos, como tabulações, espaços e quebras de linha extras. Todo espaço em branco que você é capaz de eliminar é semelhante à eliminação de um personagem.

remover linhas vaziasNo entanto, geralmente não é recomendável economizar em espaço em branco por causa de um arquivo menor. Você ainda precisa manter a legibilidade ideal em suas páginas da web.

Espaço em branco é importante para a formatação, então você deseja encontrar um equilíbrio. Se você escrever grandes blocos em texto para eliminar alguns espaços em branco, o curto tempo de atenção dos leitores na internet os fará clicar.

Uma maneira de fornecer um tamanho de arquivo menor e legibilidade é abandonar as guias e colocar apenas uma linha entre os parágrafos. Isso fornece espaço em branco suficiente do ponto de vista da legibilidade, mas também elimina parte desse espaço em branco que não é necessário.

Agora, para a versão de produção do seu arquivo CSS, você pode remover o espaço em branco. Ele ainda estará presente no seu arquivo de trabalho.

Essa é outra maneira de comprometer, para que você tenha arquivos menores e formatação legível.

4. Remover redefinições e estruturas

Quando você estiver usando uma estrutura CSS, é imperativo que você revise a documentação.

É igualmente importante observar todas as linhas que estão dentro do seu arquivo CSS. Há momentos em que você descobre que existem algumas regras na estrutura que você não deseja para o seu projeto atual. Estes podem ser removidos.

regras CSS não utilizadas removidas

Você pode achar que pode obter detalhes de apresentação de uma maneira mais concisa e elegante…

Pode não ser o que você normalmente usa, mas se funcionar, isso pode permitir uma estrutura mais limpa. Quando você os conhece, isso também ajuda a evitar a duplicação não intencional de conjuntos de regras.

As mesmas informações também se aplicam às redefinições. Quando você usa redefinições, elas ajudam a neutralizar o estilo padrão de um navegador. Agora, se você estiver familiarizado com o site que está criando, não é incomum encontrar certas declarações que você sabe que não precisará.

Por exemplo, em um blog geral, você provavelmente não os usará. Basta se livrar do que você não precisa para o site específico que está construindo. Você pode garanta um trabalho melhor otimizado ao usar um conjunto de regras em relação a uma redefinição ou estrutura.

No entanto, em seu estado padrão, eles não devem ser aceitos. Para manter seus arquivos CSS legíveis e enxutos, analise cada declaração individualmente e reduza as desnecessárias.

5. Seu CSS à prova de futuro

Sintaxe CSS

Outra opção útil de otimização de CSS: separe a maioria das suas regras das suas declarações específicas de layout.

Atribua o layout ao seu próprio arquivo individual, se isso for possível. Caso contrário, pelo menos fornecer uma seção própria pode ser benéfico.

Por fim, o posicionamento e os flutuadores – que são os métodos atuais usando CSS – não foram feitos para servir como ferramentas de layout.

Alguns chegam ao ponto de dizer que estes são realmente similares aos hacks de layout. Não há uma alternativa viável no momento e a esperança é que, uma vez que os padrões de layout acordados ocorram, eles comecem a obter suporte dos navegadores.

Depois que esse suporte ocorrer, não será muito difícil trocar as propriedades do modelo de caixa que são hackeadas por aquelas destinadas a layouts.

Neste momento, o a melhor opção é manipular seu layout usando as propriedades certas. Isso normalmente condensará o peso da página com mais eficiência do que usar o conjunto limitado de propriedades atualmente disponíveis para compensar as peculiaridades.

6. Mantenha sempre a documentação atualizada sobre seu trabalho

Esteja você trabalhando em um site em equipe ou sozinho, é imperativo acompanhar tudo o que você fez.

Por exemplo, sozinho, você pode esquecer algo que fez. Como equipe, alguém pode fazer algo e você pode não estar ciente até fazer alterações que podem causar problemas com vários elementos do código.

adicionando comentário cssA duplicação de código é uma grande área de preocupação para equipes e designers individuais, especialmente ao usar criadores populares de sites. Wix, Squarespace e outros softwares de criação de sites são conhecido por duplicar o código ou perdê-lo totalmente do banco de dados.

O uso de guias de folhas de estilo e de marcação é uma opção viável de documentação. Você também pode usar comentários CSS é outra opção e isso pode ser benéfico para separar os elementos dos arquivos CSS que são longos. Colocá-los no estilo ou no guia de marcação impede que eles adicionem o tamanho do arquivo.

Uma das maneiras mais rápidas de aumentar o código é fazendo o mesmo trabalho duas vezes. A codificação é complexa, por isso é imperativo manter uma documentação precisa de tudo o que você fez.

Se você trabalha sozinho, é ideal revisar esta documentação toda vez que você se senta para começar a trabalhar. Ao trabalhar como parte de uma equipe, verifique se todos estão codificando no mesmo documento adere a um estilo de comunidade ou guia de marcação para que as alterações de codificação sejam facilmente compreendidas por todos no grupo.

7. Comprima seus arquivos (CSS Optimization 101)

gif de compressão e otimização de css

Compressão: há um pouco mais do que isso …

Uma maneira eficaz de otimizar o CSS é usando a compactação. Essa é uma maneira de garantir que seus arquivos sejam compatíveis com o navegador, mesmo que sejam ilegíveis por humanos.

Comparado com as cópias de trabalho, estas serão uma fração do tamanho. Existem diferentes aplicativos que você pode aproveitar para facilitar o processo de compactação.

Eles executarão tarefas, como encontrar e corrigir propriedades CSS que estão sobrescrevendo umas às outras, compactando espaços em branco e procurando chances de usar abreviação de CSS.

Além da conveniência desses aplicativos, eles também podem ajudá-lo a aprender mais sobre as tarefas que você pode executar manualmente, se preferir. Você também pode usar vários editores de texto para ajudar a formatar seus arquivos CSS.

Eles podem servir versões zip dos vários arquivos CSS que você possui. Isso geralmente é feito usando PHP. Se você deseja usar ferramentas de otimização e compactação, revise várias opções antes de escolher a correta..

Agora, esses aplicativos geralmente são bons em minimizar erros, mas não são perfeitos. Por isso, você deve sempre revisar seu CSS depois de usar um aplicativo para garantir a precisão. O código otimizado e limpo é essencial para o tamanho do arquivo, mas também para legibilidade e manutenção.

Sua vez

Os princípios discutidos aqui são considerações sólidas para CSS, mas também para JavaScript, HTML e outras linguagens de programação. Comparado à renderização do seu site, os arquivos CSS não são tão importantes para o usuário final.

No entanto, os princípios discutidos aqui ajudam na experiência de desenvolvimento e na experiência do usuário.

A maioria das boas empresas de hospedagem irá ajudá-lo com a otimização de CSS. Sites mais rápidos fazem de você um cliente feliz, mas arquivos menores também são menos carregados em seus servidores.

Testamos todos os hosts da web canadenses e recomendamos o SiteGround. Além de ajudá-lo a otimizar a entrega de CSS, o suporte técnico é incomparável.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map