No dia 17 de Janeiro, o Google publicou um artigo, anunciando que em breve os rankings de todos os sites seriam ainda mais influenciados por sua performance nos dispositivos móveis.
Esta não é uma notícia tão nova, pois já se fala sobre essa mudança há um bom tempo. O Google sempre tem mandado sinais de que deveriamos nos preocupar sobre o desempenho de nossos sites mobile. E agora é oficial:
“Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.” – Hoje anunciamos que a partir de Julho de 2018, a velocidade do site será um fator de rankeamento para buscas mobile
Devo correr para deixar meu site super rápido no mobile?
Claro que isto é algo a se preocupar, mesmo sem levar o Google em consideração. Ninguém gosta de sites lentos, ainda mais quando está no 4G / 3G (edge?!).
Se no desktop, a velocidade é importante, no mobile ela é ainda mais relevante.
Ainda assim, o Google deixa claro que não irá penalizar de forma tão brutal sites mais lentos, com tanto que possuam conteúdo fodástico.
“The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.” – Os termos de busca ainda são um sinal forte, então uma página lenta pode rankear melhor se tiver um conteúdo ótimo e relevante.
A seguir, veja um checklist mínimo do que se deve fazer para seu site ficar mais enxuto.
1. Ativar a compactação no servidor
Apache, nginx e IIS, podem compactar os arquivos html, css, js (etc) em formato GZIP. O navegador, por sua vez, recebe estes arquivos compactados e os descompacta. O ganho de velocidade é brutal. Experimenta aí na sua máquina mesmo: pega aquele JavaScript enorme do Bootstrap e compacta com gzip / zip / tar. O efeito é o mesmo. Exatamente por isso que não adianta querer compactar PNGs e JPEGs… eles já estão compactados ?.
Eu uso o apache, e o código que coloco no .htaccess é o seguinte:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>Claro que você deve habilitar o mod_deflate no seu servidor, usando o comando a2enmod deflate.
2. Ativar o cache
o usuário acessa seu site pela primeira vez, e o navegador armazena os recursos estáticos como imagens, css e scripts no dispositivo do visitante. Isso acelera significativamente o carregamento das páginas seguintes que o usuário acessar durante o tempo de duração do cache.
Se você atualizar um CSS, por exemplo, o cache do usuário não será automaticamente renovado. Você deve avisar o navegador que o conteúdo do arquivo mudou. Para tanto, basta adicionar uma querystring no final da URL do arquivo JS / CSS:
<link rel="stylesheet" type="text/css" href="/css/app.min.css?x58844">Quando eu alterar o app.min.css, vou atualizar um arquivo de configurações do meu sistema e dizer que a versão agora é 1.2. Agora, o navegador vai substituir o arquivo cacheado pelo novo. Defino da seguinte maneira o que e como quero colocar em cache no meu .htaccess:
<IfModule mod_expires.c>
ExpiresActive on
# Media: images, video, audio
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# CSS and JavaScript
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
</IfModule>3. Minificando CSS, JS e HTML
Quando editamos os fontes CSS e JavaScript, os espaços, identações, comentários e variáveis longas, podem deixar o arquivo bem grande. Existem inúmeros minificadores que resumem o conteúdo destes arquivos em uma única linha.
Eu gosto de usar rotinas em GULP para atingir este resultado. Um exemplo para minificar meus CSS’s:
gulp.task('styles', function () {
gulp.src(['resources/assets/scss/theme.scss','resources/assets/scss/bootstrap/bootstrap.css'])
.pipe(concat('theme.css'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass().on('error', sass.logError))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('public/assets'));
});Mesmo com estas três otimizações padrão, minha nota no PageSpeed do Google era 88 de 100.
Mas o próprio PageSpeed me deu a dica necessária para mudar isso:
“Sua página tem 1 recursos de CSS de bloqueio. Isso causa um atraso na renderização de sua página.
Aproximadamente 55% do conteúdo acima da dobra em sua página seria renderizado sem aguardar o carregamento dos seguintes recursos. Tente adiar ou carregar de maneira assíncrona os recursos de bloqueio, ou incorpore in-line as partes fundamentais desses recursos diretamente ao HTML.”
Como uso o Bootstrap, resolvi incorporar seu CSS direto no corpo das páginas e movi a chamada do CSS externo com minhas personalizações do tema para o final, perto da tag </body>. Assim, não teria nenhuma requisição no topo da página, atrasando a exibição dos elementos básicos do site. O estilo do meu tema seria aplicado no final do carregamento.
Veja que com isso, estaria quebrando uma “regra”, cuspida a torto e a direito que os CSS devem ser carregados no topo da página e os JavaScripts no final. Queria chamar a atenção dos devs novatos ao seguinte: não se prenda tanto às regras. Se você perceber que uma regra será quebrada em prol de um melhor resultado para seu cliente (no caso os visitantes do site), faça! Quebra esta regra sem dó 😉
Depois que fiz essa pequena mudança, o score do PageSpeed pulou para 99/100.