Parece que os web designers estão constantemente se esforçando para otimizar suas criações. No curto prazo, isso beneficia o desempenho. No longo prazo, ele também pode simplificar a manutenção.
Frequentemente, isso significa otimizar imagens , implementar cache de página e servir arquivos por meio de uma rede de distribuição de conteúdo (CDN). Todas essas medidas são eficazes. Mas um item que não recebe atenção suficiente é o potencial inchaço no CSS de um site.
Embora você possa reduzir suas folhas de estilo ou veiculá-las em um CDN, mais pode ser feito. Especificamente, livrar-se da marcação desnecessária que não está sendo usada e restringir os estilos que ainda são relevantes.
Isso é melhor feito desde o início do processo de construção. Mas também é possível aliviar a carga em sites existentes. Vamos dar uma olhada nos desafios envolvidos, junto com algumas ferramentas e técnicas que podem tornar um site mais rápido.
Lidando com o inchaço integrado em temas e estruturas
Antigamente, os sites eram essencialmente construídos do zero. Essa foi uma ótima abordagem, pois os designers podiam incluir apenas os estilos e scripts necessários. Se feito com cuidado, esse processo pode resultar em um site bem ajustado.
Claro, há uma série de razões pelas quais essa prática foi abandonada por muitos de nós. Simplesmente não é eficiente em termos de tempo e restrições orçamentárias.
Os sites modernos são freqüentemente construídos sobre um produto pré-construído. Isso poderia ser uma estrutura CSS, como Bootstrap ou um elaborado tema WordPress. Em alguns casos, um tema CMS pode até incluir uma estrutura.
Esses produtos foram concebidos para serem de tamanho único. Incluindo tudo o que você pode precisar, torna o desenvolvimento muito mais rápido. Infelizmente, o mesmo não pode ser dito sobre seu impacto no desempenho.
Então, o que pode ser feito para melhorar a situação?
Use estruturas baseadas em componentes ou leves, quando possível
Teoricamente, é possível obter as vantagens de um framework e, ao mesmo tempo, evitar o inchaço. Isso pode ser alcançado usando pacotes baseados em componentes que permitem que você carregue recursos específicos, deixando outros de fora. O Bootstrap mencionado anteriormente permite esse tipo de personalização – até certo ponto.
Outra alternativa é Tailwind CSS , que fornece estilos básicos e pressupõe que você criará com base neles. Se você está procurando um ótimo ponto de partida, em vez de um produto mais acabado, essa pode ser a opção.
Não há nada de errado em usar uma estrutura. Mas procure um que: a) permite selecionar e escolher quais componentes carregar ou; b) oferece uma folha de estilo barebones que pode ser facilmente personalizada. De qualquer forma, seu projeto se beneficiará da carga reduzida.
O que fazer com os temas CMS?
Produtos como temas comerciais de WordPress podem ser complicados, pois geralmente incluem uma grande quantidade de estilos – quer você precise deles ou não.
É possível que um tema específico seja bem organizado a ponto de ser fácil retirar da fila as folhas de estilo que você não deseja. Pode até haver um painel de opções de tema que permite fazer isso com alguns cliques. No entanto, é mais provável que seja exceção do que regra.
A melhor maneira de evitar um tema excessivo é criar o seu próprio. Por exemplo, um tema inicial do WordPress oferecerá alguns CSS básicos que você pode personalizar. Isso ajuda a garantir uma folha de estilo mais enxuta e tira pelo menos um pouquinho da sobrecarga associada a um CMS.
Organizar folhas de estilo existentes
Mudar nosso foco para um site existente, organizar e refatorar CSS pode ser feito de duas maneiras:
Revisão manual de estilos
Abrir seu editor de código favorito e abrir as folhas de estilo do seu site é sempre um bom lugar para começar. Sim, pode ser uma experiência tediosa. Mas também é uma forma eficaz de cuidar das frutas que estão ao alcance.
Não é necessário examinar todas as linhas de CSS. Em vez disso, a ideia é encontrar todos os itens que você sabe que não estão sendo usados ou que não são tão eficientes quanto poderiam ser.
Por exemplo, digamos que você execute um site WordPress que tem alguns estilos personalizados para substituir aqueles de um plugin. E se você não estiver mais usando esse plugin específico? Nesse caso, os estilos podem ser facilmente removidos.
Ou talvez haja uma seleção de estilos que você usa apenas esporadicamente – como durante as férias de inverno. Pode valer a pena mover esses estilos para um arquivo separado e chamá-los apenas quando necessário.
Depois, há seletores CSS que não são muito bem escritos. Talvez eles tenham vários prefixos de navegador desnecessários ou propriedades duplicadas desnecessárias. Esta é uma área pronta para limpeza.
Se o design do seu site tem mais de dois anos, você pode se surpreender com a quantidade de estilo em excesso que poderá encontrar.
Use uma ferramenta automatizada
Existem várias ferramentas por aí que irão escanear seu site (ou, pelo menos uma parte dele) e relatar de volta com uma lista de CSS não utilizado. No entanto, não prenda a respiração enquanto espera pela perfeição.
Assim como as ferramentas automatizadas de acessibilidade, os scanners CSS não utilizados podem fornecer uma quantidade limitada de informações. Portanto, é melhor considerar os resultados com cautela e usá-los como um guia – não uma resposta final à sua pergunta.
Chris Coyier, da CSS-Tricks, escreveu um excelente artigo sobre esse assunto específico que vale a pena conferir. Ele não apenas testa algumas dessas ferramentas, mas também analisa os problemas maiores em mãos, como consultas à mídia.
No entanto, se você estiver interessado em experimentar uma ou mais dessas ferramentas, algumas das opções mais populares são:
Uma combinação de uma ferramenta automatizada e revisão manual é provavelmente o melhor curso de ação. Fazer os dois fornecerá uma imagem mais completa das otimizações de desempenho em potencial. Você pode não pegar todos os itens, mas ainda há uma oportunidade de causar um impacto mensurável. Você pode fazer alguns testes antes e depois com uma ferramenta como GTmetrix para ver os resultados.
Quando se trata de CSS: não desperdice, não queira
É incrível como uma folha de estilo pode ficar grande – especialmente ao usar uma estrutura CSS pronta. Claro, é bom que o autor tenha feito muito trabalho duro para você em termos de elementos de estilo. Ao mesmo tempo, deixa muito em dúvida quando se trata de renderização de página e tempos de carregamento.
Isso é algo que vale a pena prestar atenção desde o início de um projeto. Ao procurar reduzir o peso de uma folha de estilo, você está ajudando a extrair até a última gota de otimização de seu site.
Se o seu site já está disponível para o mundo ver, ainda há passos positivos que você pode tomar. Revise o CSS e procure por itens para simplificar ou remover. Utilize uma das muitas ferramentas automatizadas que existem para encontrar itens que você possa ter perdido.
O ponto principal é que reduzir seu CSS ao essencial não é um processo perfeito. No entanto, ainda vale a pena seu tempo e esforço.