3 Dicas de performance de CSS

O primeiro passo para se discutir a performance da renderização das páginas no navegador é entender como o navegador funciona.

Antes de continuar você deve entender os conceitos de browser reflow e browser repaint, pois nosso objetivo para ter uma página renderizada mais rapidamente é a redução dos reflows e repaints da página.

Como o navegador interpreta o CSS?

O navegador começa a leitura do CSS da direita para a esquerda, do nosso último elemento para o primeiro. Ele pega o seletor bem da direita, percorre todos os elementos do DOM que casem com este seletor e passar para o próximo seletor a esquerda, verificando os parents do seletor que ele verificou anteriormente (o bem da direita na sua linha de seletores).

Parece confuso mas na prática é simples. Para o código abaixo, por exemplo:

#content #menu ul li a

O navegador vai varrer todos os elementos "a" da sua página, depois ele vai verificar quais destes elementos estão dentro de um elemento li e assim por diante até encontrar o elemento #content.

Agora que você já sabe como o navegador trabalha vamos as dicas de CSS para páginas rápidas!

 

1. Escreva seletores curtos

Agora que você já sabe como o navegador percorre o seu seletor, já sabe quanto mais curto ele for menos será o caminho percorrido e consequentemente mais rápida a renderização da sua página.

Evite

#content nav#menu ul li a

 

Melhor performance CSS

.menu-item

 

Outro exemplo, em uma página com bastante conteúdo tabular:

Evite

table thead tr td

 

Melhor performance CSS

.header-table

 

2. Prefira classes e ids do que seletor por elemento

Quanto mais preciso seu seletor for menos elementos do DOM serão percorridos pelo browser, o seletor de tag tende a ser mais abrangente do que seletor de classe.

Evite 

h2.product-title

Melhor performance CSS

.product-title

 

Evite

nav#menu

Melhor performance

#menu

O navegador não precisa fazer 2 verificações para estilizar os elementos casados com a classe.

 

3. Evite seletor universal, por atributo e pseudo-selectors

Principalmente no IE evite os pseudo seletores como :hover, :nth-child e outros. O seletor universal percorre todos os elementos do DOM (por isso a baixa performance) e os pseudo seletores tem uma performance bem inferior do que qualquer seletor por classe ou id, então sempre que for possível evite seu uso.

Evite:

input[type="text"]

Não tão ruim:

input.texto

Melhor performance CSS:

.input-texto

 

Dica bônus: não enlouqueça

Não seja um paranóico, não deixe que as preocupações com performance de CSS prejudiquem (muito) a organização e leitura do seu código.

Se você trabalha em projetos com uma equipe grande em que todos estão acostumados a escrever seletores descritivos (e compridos) para facilitar o entendimento do código pode ser um pouco complicado fazer esta mudança, uma boa dica é estimular comentários no CSS – qualquer processo de minify arrancará os comentários e manterá o código enxuto.

 

Para saber mais sobre performance no front-end veja este post sobre performance de javascript e o recente post do Chris sobre manipulação do DOM de forma mais performática.

Se está na dúvida (ou não acredita no que escrevi), utiliza esta ferramenta para testar a performance de seletores CSS.

 

Referências:

Melhorando a performance do CSS

Escrevendo CSS eficiente

Google best pratices rendering

Mozilla – Writting effective CSS

Simplifying CSS selectors

Executando comandos unix pelo PHP

Eu apliquei um sistema unificado de cache no And After, nos blogs do site e na loja Eu Compraria, este sistema tornou o Gir (nosos querido escravo-servidor) muito mais eficiente na realização de suas tarefas.

O sistema de cache utiliza o Code Igniter com memcached e cache de arquivo físico. Isso otimizou muito o carregamento de todas as nossas páginas: "(1.002 Seconds), 70% of sites are slower: segundo a Alexa.

Além de adiantar a entrega das páginas, melhorando a vida dos leitores, reduziu drasticamente o consumo (e consequentemente o custo) de servidor e eliminou os problemas de performance com com o alto consumo de processamento do MySQL (saiba as diferenças entre innoDB e MyISAM).

Automatizando a "limpeza" de cache

A única dificuldade que isto acarretou foi o trabalho de realizar a limpeza de cache de arquivos físicos quando era necessário.

Até hoje eu fazia isso via ssh: logava no servidor e removia os arquivos necessários. Eu poderia implementar um sistema do Code Igniter para fazer isso, mas envolveria percorrer todos os registros do banco e eliminar o cache referente a cada objeto.

Um modo menos custoso e trabalhoso de fazer isso é automatizar a remoção dos arquivos físicos através do próprio PHP, e uma forma de fazer isso é com o comando shell_exec.

PHP shell_exec

O comando do PHP shell_exec permite você executar algum comando do terminal unix diretamente pelo PHP, retornando como uma string qualquer coisa que este comando imprima no terminal.

Atenção: este comando pode expor seu servidor a problemas de segurança.

No meu caso eu queria apagar os arquivos físicos de cache, um exemplo de sintaxe para o meu caso:

shell_exec('rm /var/www/andafter.org/htdocs/cache/publicacoes/*');

 

Vale lembrar que seu usuário www deve ter as permissões necessárias para executar os comandos. Abriu um novo leque de possibilidades do que é possível fazer com o PHP depois de conhecer este comando. 🙂

Como fazer o restore de um dump do MySQL?

Em outro post eu expliquei como agendar backup (dump) do MySQL com shellscript, agora vou explicar como fazer um "restore" desses dados.

Quando você faz um dump ou um "export" pelo PHPMyAdmin, ele gera um arquivo .sql, o comando abaixo vai ler esse SQL e executar ele no banco indicado.

Supondo que você tenha gerado um dump chamado "dump.sql", para inserir isso no banco chamado "andafter", faça o seguinte:

Fazendo restore do MySQL no terminal

mysql -u root -p andafter < dump.sql

No exemplo acima meu usuário (parâmetro -u) é "root", e o parâmetro -p pede que a senha solicitada após o comando (para que a senha não fique gravada nos comandos do terminal). O nome do banco é "andafter" e ele irá executar o dump.sql.

Import no PHPMyAdmin

Pelo PHPMyAdmin acesse o banco que vai receber a importação e clique em Import.

Selecione o arquivo sql que você vai usar para importar os dados (lembre-se que existe um limite de upload setado no PHP, o padrão é 2Mb, se o dump ultrapassr o limite do servidor você precisa fazer este processo ou em partes ou por terminal).

Clique em GO e aguarde, a importação aqui é um pouco mais lenta do que pelo terminal.

Forçando o Curtir do javascript com injection de JS

Devido ao lançamento do novo Arena (tá sensacional, quem curte games deveria conferir e escutar o Games on The Rocks) o @iG está fazendo uma promoção para seus colaboradores, a publicação que tiver mais "curtir" vai levar para casa um XBox neste Natal.

Adendo: eu quero este xbox.

Estou participando (e você deveria me ajudar a ganhar, curtindo esta minha publicação no Facebook), mas aí resolvi brincar um pouco com javascript depois de encher o saco de alguns amigos para eles curtirem a página…

Adendo 2: vou sortear 3 vale presente de R$100,00 do Eu Compraria! entre todos que curtirem a página se eu for o ganhador do XBox

Lembrei da publicação sobre "injection" de javascript em qualquer página, e pensei: porque não agradecer as pessoas divertindo um pouco o "curtir"? 😀

No quesito "vantagem" não há nenhuma, nao é uma forma de forçar a pessoa a curtir pois depende da ação do usuário, mas com o código tem uma surpresinha…

Para funcionar:

1º Certifique-se de que você está logado no Facebook

2º Acesse esta publicação do facebook  em uma nova aba

3º Arraste  /* */