Performance Web

Conclusões sobre nosso projeto de Performance Web

Chegamos no último artigo dessa série sobre Performance Web e está na hora de verificarmos o resultado prático das técnicas que aprendemos e implementamos no nosso site de exemplo. Se por acaso você chegou aqui diretamente através de uma pesquisa do Google, saiba que antes desse artigo existe outros nos quais abordo diversas técnicas sobre Performance Web. Segue a lista cronológica dos artigos desta série: Introdução a Performance Web PageSpeed Insights – Ferramenta de análise […]

Conclusões sobre nosso projeto de Performance Web Continue lendo »

Performance Web: Diferença entre cache de navegador e server cache

Fiquei vários dias “batendo cabeça” quando comecei a colocar em prática o que estava aprendendo sobre cache de navegador. Estudei os conceitos em diferentes fontes, segui alguns tutoriais para fazer o arquivo .htaccess e instalei vários plugins para essa finalidade. Mas nada funcionava da forma como deveria, e assim “perdi” muitas horas com centenas de testes. Até que finalmente encontrei em um site “gringo”* – não é à toa que inglês é tão importante! –

Performance Web: Diferença entre cache de navegador e server cache Continue lendo »

Performance Web: Otimização do header.php no WordPress

Para quem utiliza o WordPress como plataforma existe uma estratégia (mais puxado para gambiarra, mas ajuda) para reduzir ainda mais os request de página. Como todo gerenciador de conteúdo, o WordPress possui funcionalidades para que qualquer pessoa possa configurá-lo a seu gosto através do painel administrativo. Para isso ocorrer, o sistema precisa fazer requisições ao banco de dados para exibir na página, por exemplo, o nome do site e sua configuração de linguagem. Essas chamadas

Performance Web: Otimização do header.php no WordPress Continue lendo »

Performance Web: Bloqueio de renderização

Durante o carregamento de uma página o navegador precisa analisar toda a marcação HTML e processar todas as informações sobre o layout dela. E este processo fica mais lento quando o navegador encontra um script, pois quando isto acontece é necessário que o navegador interrompa a análise do HTML até que seja executado completamente o script, bloqueando dessa forma renderização da página. Quando for inevitável esta situação é recomendável que não seja acima da dobra

Performance Web: Bloqueio de renderização Continue lendo »

Performance Web: Compactação Gzip

Ativar este recurso de compactação no servidor web significa diminuir o tamanho dos arquivos antes da transferência de dados pela rede, reduzindo assim o tempo de download da página no navegador. A compactação gzip ou deflate é normalmente ativada por padrão em serviços de hospedagem. Mas, no caso do nosso site de exemplo, ativarei a compactação gzip através do plugin WP Fastest Cache. Após a instalação no painel administrativo do WordPress, basta acessar a aba

Performance Web: Compactação Gzip Continue lendo »

Performance Web: Compactação HTML, CSS e Javascript

Esta estratégia de compactação HTML, CSS e Javascript gera controvérsias na comunidade de desenvolvedores, pois muitos defendem que o custo-benefício desta prática não vale a pena. Eu, particularmente, não obtive resultados expressivos adotando esta prática nos projetos no quais já trabalhei. Porém, acredito que ela seja sim eficiente; a questão é que em meus projetos por serem relativamente pequenos, não possível mensurar o impacto de milissegundos de melhora. Mas creio que em sites de médio

Performance Web: Compactação HTML, CSS e Javascript Continue lendo »

Performance Web: Diminuição de requests

Depois de aprender a otimizar as imagens e a criar um arquivo .htaccess para aproveitar o cache do navegador, chegou a hora de atacarmos outra frente que pode colaborar com a lentidão do nosso site: o grande número request para a renderização da página. Com o advento do HTTP 2.0 não mais precisaremos nos preocupar com o número de request. No entanto, como o HTTP 2.0 ainda é novidade, acho que é importante compreender este

Performance Web: Diminuição de requests Continue lendo »

Performance Web: Como aproveitar o cache do navegador

Aproveitar o cache do navegador significa informar para o navegador que ele não precisa fazer o download de todos os arquivos da página, mas sim utilizar os que estão armazenados na máquina do usuário (What!?). Um pouco confuso, não é?  Vamos desde o início para entender toda essa história. Na primeira vez que você acessa um site o seu navegador de internet faz o download de todos os arquivos que compõem aquela página. Arquivos HTML,

Performance Web: Como aproveitar o cache do navegador Continue lendo »

Performance Web: Otimização de imagens com Tinypng

As imagens que compõe um site correspondem, geralmente, mais de 50% dos bytes que são transferidos pela rede. E não necessariamente o site possui muitas imagens, a questão é que comparando imagens com arquivos de texto HTML, CSS e até o mesmo Javacript em muitos casos, a quantidade de bytes das imagens costuma ser infinitamente maior. Ok, exagerei um pouco com o “infinitamente”, mas é quase isso. Podemos observar a discrepância no “peso” das imagens

Performance Web: Otimização de imagens com Tinypng Continue lendo »

Pingdom – Ferramenta de Análise de Performance Web

O Pingdom é uma ferramenta completa de análise de performance web. Com ela você pode medir o desempenho do seu site e descobrir quais fatores estão deixando-o lento, obtendo ainda sugestões para melhorar não somente a velocidade de carregamento, mas também a experiência de navegação do usuário. A versão premium para assinantes permite monitorar continuamente vários sites, analisando pontos críticos de desempenho e recebendo notificações em caso de problemas. No entanto, há uma versão gratuita na

Pingdom – Ferramenta de Análise de Performance Web Continue lendo »