Como você se livra do código CSS não utilizado? Parte 1

O autor do artigo, a primeira parte da tradução que estamos publicando hoje, gostaria que os leitores soubessem com antecedência que se livrar de CSS desnecessário é uma tarefa difícil. Se você ler isso na esperança de encontrar uma ferramenta, executá-la, poderá descobrir exatamente qual código CSS pode ser removido com segurança do seu projeto, então ... Existem ferramentas semelhantes, mas elas devem ser usadas com muito cuidado, pois nenhuma delas incapaz de dar uma resposta decente à questão do CSS não utilizado.



É fácil entender que qualquer desenvolvedor da web gostaria de usar algum tipo de utilitário, executá-lo e remover o CSS desnecessário relatado. Alguns minutos - e o site é acelerado. Mas não é tão simples. O autor deste material acredita que essa ferramenta deve ser tratada com ceticismo saudável. Nenhum deles mente para o desenvolvedor. Essas ferramentas geralmente simplesmente não têm informações suficientes para permitir que produzam resultados que podem ser incondicionalmente confiáveis. Mas isso não significa que essas ferramentas não possam ser usadas. Isso não significa que você não pode se livrar do CSS não utilizado de forma alguma. Nós discutimos isso.

→ Leia a segunda parte

Por que se livrar do CSS não utilizado?

Acredito que a principal razão pela qual alguém possa precisar se livrar do CSS não utilizado pode ser descrita usando o exemplo a seguir. Suponha que você use uma estrutura CSS (como o Bootstrap), e todo o código CSS dessa estrutura entre no seu projeto. Mas, na realidade, apenas uma pequena parte desse código é usada no projeto. Como se livrar de todos os desnecessários?

Eu posso sentir os sentimentos de alguém que está em uma situação semelhante. As estruturas CSS geralmente não oferecem aos desenvolvedores maneiras fáceis de selecionar exatamente os recursos que se aplicam a projetos específicos. Ao mesmo tempo, levar o código fonte da estrutura a um estado idealmente correspondente a um determinado projeto pode exigir uma equipe com um nível de experiência que ela pode não ter. Uma situação semelhante por si só pode se tornar o motivo da busca pela estrutura.

Suponha que você baixe 100 KB de CSS. Eu diria que é muito. (No momento em que escrevo isso, o css-tricks.com usa cerca de 23 Kb de CSS. Existem muitas páginas e modelos. Não fiz nada de especial para reduzir o tamanho do CSS.) Há suspeita de que você não esteja usando parte dessa quantidade de código. E talvez você encontre alguma evidência disso. Eu vejo uma razão para soar o alarme. Se você tem um arquivo jpg de 100 Kb que pode ser compactado para 20 Kb processando-o com algum tipo de ferramenta, isso é ótimo e vale a pena. Mas se algo assim for feito com CSS, isso será muito mais importante. O ponto é que o CSS é carregado no início do carregamento da página e é um recurso que bloqueia a renderização. Arquivos JPG não são esses recursos.

Análise de situação com as Ferramentas do desenvolvedor do Chrome

A janela Ferramentas do desenvolvedor do Chrome tem uma guia Coverage . Com sua ajuda, você pode descobrir quanto CSS e JavaScript carregados são realmente usados ​​na página analisada. Por exemplo, agora fui ao css-tricks.com. Abaixo está o que vi na guia Coverage .


Ferramentas do desenvolvedor do Chrome, guia Cobertura

Aqui vejo que 70,7% do meu arquivo style.css não é usado. Eu acho que não há nada de errado nisso. A parte restante não utilizada do CSS é usada em algumas outras páginas do site. Neste site, não uso uma biblioteca de estilos grandes. Eu próprio escrevi todas as linhas do CSS, então duvido que 2/3 do CSS estejam fora do lugar globalmente.

Supus que, ao trabalhar com a guia Coverage , você possa começar a “gravar” e passear pelo site, observando como a porcentagem de recursos não utilizados cai à medida que diferentes páginas são exibidas no navegador. Infelizmente, quando a página é atualizada, o conteúdo da guia Coverage também é atualizado. Como resultado, essa ferramenta não é particularmente útil para determinar a porcentagem de uso de recursos em várias páginas. Talvez isso não seja apenas se você analisar um aplicativo de uma página.

É desagradável para mim dizer isso, mas analisar o site usando a guia Coverage acabou sendo quase inútil. O que vi, esses 70,7%, é uma imagem terrível que desperta minhas dúvidas, mas essa análise não me dá nada de concreto, como resultado, só posso me preocupar com algo errado no meu site.

Talvez essa análise do site seja o próprio mecanismo que o levará à idéia de que você precisa encontrar e remover o código CSS que carrega, mas não é usado no seu projeto.

Meu principal problema

Ao encontrar e remover CSS não utilizado, o seguinte me preocupa mais. Suponha que alguém analise os resultados da análise e veja fragmentos CSS não utilizados.


Fragmentos CSS não utilizados

Ele pensa: "Tudo bem, exclua tudo desnecessário!". O supérfluo é removido e, em seguida, verifica-se que não era supérfluo e que sua remoção levou a grandes problemas de estilo em todo o site. Aqui está a coisa: você pode ter certeza absoluta de que algum seletor de CSS não é usado, apenas se você realizar pesquisas sobre o seguinte plano:

1. Você precisa verificar todas as páginas do site com uma ferramenta como a guia Coverage .
2. Nesse caso, você precisa executar todo o código JavaScript.
3. Isso deve ser feito com todas as opções possíveis para o estado do aplicativo.
4. Além disso, você precisa verificar tudo isso com todas as opções possíveis para as consultas de mídia usadas.

Se apenas a página inicial do site estiver marcada, isso não será levado em consideração. Estudar todas as páginas de nível superior também não é considerado um teste real. Você precisa percorrer todas as páginas, examinar o site em situações que seu desenvolvedor pode não se lembrar imediatamente, verificar todos os casos limítrofes. Caso contrário, tudo poderá terminar com a remoção do estilo da lista suspensa de cartões de crédito na janela modal pop-up para usuários com uma conta desativada que se conectam ao sistema durante o período de carência para pagar por uma nova assinatura e, ao mesmo tempo, possuem um vale-presente válido.

Algo assim é muito complicado para analisadores de CSS automatizados. Eles não são capazes de executar perfeitamente essas verificações, principalmente considerando a análise do local em uma situação de incerteza. Estamos falando, por exemplo, sobre a pesquisa de projetos em diferentes contextos do navegador (diferentes tamanhos de tela, diferentes recursos do navegador, diferentes navegadores) e levando em consideração o impacto das bibliotecas de terceiros no site.

E agora quero mostrar um exemplo de como todos os problemas que acabei de falar parecem na prática.

PurifyCSS Online

Decidi tentar otimizar css-tricks.com usando o recurso PurifyCSS Online . Você pode passar links para ele e ele imediatamente produz CSS pronto para uso. Eu "alimentei" o css-tricks.com neste site e tinha um novo código CSS à minha disposição. Foi o que aconteceu depois que eu usei esse código.


À esquerda, está a visualização usual do css-tricks.com. À direita está o resultado da aplicação de um novo CSS "refinado". Esse novo código não possuía muito do necessário para várias páginas do site

O PurifyCSS permite que você analise com base em muitos links (o que é bom), mas no css-tricks.com existem dezenas de milhares de links. Muitos deles levam a páginas semelhantes, em termos de CSS, mas em cada uma dessas páginas pode haver algo que não é usado em outro lugar. Além disso, tive a sensação de que o PurifyCSS não executava o código JS, porque, depois de "limpar" meu CSS, tudo o que era exibido nas páginas usando JavaScript acabou ficando sem estilo. Até os estilos das pseudo-classes :hover .

Provavelmente, eu já disse o suficiente para fazer você entender que não é por acaso que confio nessas ferramentas tão pouco.

Purificar CSS com PurifyCSS como parte do processo de construção do projeto

O PurifyCSS é provavelmente usado com mais frequência como ferramenta usada para criar um projeto do que como um limpador de CSS online. A documentação do projeto contém instruções para seu uso ao usar Grunt, Gulp e webpack. Por exemplo, processando arquivos por modelos:

 var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = {  //  CSS    .  output: './dist/purified.css' }; purify(content, css, options); 

Essa abordagem permite uma precisão muito maior. Os materiais do site enviados para análise podem ser uma lista que inclui cada modelo, cada fragmento usado para criar páginas e todos os arquivos JavaScript. Pode acontecer que essa lista de recursos não seja fácil de manter, mas permite que você considere tudo o que pode ser levado em consideração. Isso, no entanto, não se aplica ao conteúdo de páginas que estão em determinados repositórios (como postagens de blog armazenadas no banco de dados) e ao código JavaScript de terceiros, mas talvez isso seja, em alguns casos, sem importância ou talvez o desenvolvedor poderá, de alguma forma, levar em consideração as necessidades de CSS desses recursos.

Documentação rival do PurifyCSS O PurgeCSS possui um aviso sobre o método de manipulação de recursos usado pelo PurifyCSS. Ou seja, estamos falando do fato de que o PurifyCSS pode trabalhar com recursos de qualquer tipo, e não apenas com HTML e JavaScript. O PurifyCSS no decorrer do trabalho analisa todas as palavras nos arquivos e as compara com os seletores no código CSS. Cada palavra é considerada um seletor. Ou seja - muitos seletores podem ser erroneamente reconhecidos como sendo usados ​​no site. Por exemplo, no conteúdo textual de um arquivo, em uma frase regular, pode haver uma palavra correspondente a um determinado seletor de CSS.

Vale a pena lembrar do PurifyCSS sobre isso. Essa ferramenta procura seletores CSS nos materiais do site usando um algoritmo extremamente simples. Esta, por um lado, é uma ideia sensata e, por outro, é bastante perigosa.

Serviço UnusedCSS

O ajuste manual de uma ferramenta, realizado para que essa ferramenta analise cada página, para examiná-la de todos os pontos de vista possíveis, é, obviamente, uma rotina chata. Além disso, esse trabalho deve ser realizado diariamente, uma vez que as informações analisadas sobre o site devem ser atualizadas com novos dados à medida que o projeto se desenvolve. Há um serviço online chamado UnusedCSS . Ele ignora independentemente as páginas do site, poupando o desenvolvedor de muito trabalho monótono. Este serviço é suficiente para transferir um único link para o site.

Eu me inscrevi para uma assinatura paga deste serviço e analisei o css-tricks.com com ele. Devo admitir que, depois de analisar os resultados, tive a sensação de que eles pareciam muito mais precisos do que o que havia visto antes.


Analise css-tricks.com usando UnusedCSS. O relatório diz que o site usa 93% do código CSS carregado. Parece quase verdade para mim, pois escrevi manualmente todo o código CSS deste site

Além disso, o serviço permite fazer o download de um arquivo com código CSS limpo e oferece a capacidade de gerenciar o conteúdo desse arquivo. Por exemplo, isso está ativando e desativando seletores que o desenvolvedor gostaria ou não gostaria de adicionar ao código CSS. Suponha que um desenvolvedor veja um nome de classe que, de acordo com o UnusedCSS, não é necessário no site, mas o desenvolvedor sabe com certeza que não pode ficar sem esse nome de classe. Como resultado, o código erroneamente reconhecido como desnecessário pode ser marcado como necessário. Outros recursos do UnusedCSS incluem trabalhar com prefixos e remover seletores duplicados.

Gostei muito do fato de o UnusedCSS me fornecer resultados muito mais precisos do que outras ferramentas. No entanto, há muito "ruído" nos dados gerados por este serviço, e ainda não sei como incluir o UnusedCSS no processo repetido regularmente de criar um projeto e colocar suas novas versões em produção.

→ Leia a segunda parte

Caros leitores! Você encontrou o problema de ter código CSS não utilizado em seus projetos?