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 setembro 2024

  • maio 2024
  • junho 2023
  • novembro 2020
  • setembro 2020
  • maio 2020
  • janeiro 2019
  • dezembro 2018
  • novembro 2018
  • setembro 2016
  • janeiro 2015
  • outubro 2014
  • agosto 2014
  • junho 2014
  • maio 2014
  • abril 2014
  • março 2014
  • fevereiro 2014
  • janeiro 2014
  • dezembro 2013
  • novembro 2013
  • setembro 2013
  • julho 2013
  • junho 2013
  • maio 2013
  • fevereiro 2013
  • janeiro 2013
  • dezembro 2012
  • novembro 2012
  • setembro 2012
  • agosto 2012
  • julho 2012
  • junho 2012
  • maio 2012
  • abril 2012
  • março 2012
  • fevereiro 2012
  • janeiro 2012
  • dezembro 2011
  • novembro 2011
  • outubro 2011
  • setembro 2011
  • agosto 2011
  • julho 2011
  • junho 2011
  • maio 2011
  • abril 2011
  • março 2011
  • fevereiro 2011
  • janeiro 2011
  • dezembro 2010
  • novembro 2010
  • outubro 2010
  • setembro 2010
  • agosto 2010
  • julho 2010
  • junho 2010
  • maio 2010
  • abril 2010
  • março 2010
  • fevereiro 2010
  • janeiro 2010
  • dezembro 2009
  • novembro 2009
  • outubro 2009
  • setembro 2009
  • agosto 2009
  • julho 2009
  • junho 2009
  • maio 2009
  • abril 2009
  • março 2009
  • fevereiro 2009
  • janeiro 2009
  • dezembro 2008
  • novembro 2008
  • outubro 2008
  • setembro 2008
  • agosto 2008
  • julho 2008
  • junho 2008
  • maio 2008
  • abril 2008
  • março 2008
  • fevereiro 2008
  • janeiro 2008
  • dezembro 2007
  • setembro 2007