SlideShare uma empresa Scribd logo
1 de 61
GUIA SOBRE
PAGESPEED
SUMÁRIO
I. BENEFÍCIOS DESTE GUIA
II. O CONSUMIDOR MOBILE
III. ALGUNS CONCEITOS
IV. GUIDELINES
V. CAIXA DE FERRAMENTAS
VI. REFERÊNCIAS
COMO ESTE GUIA VAI ME AJUDAR?
Muito se fala em Site Speed, Web Performance, Mobile
First... Mas para bem compreender este assunto
importantíssimo, em um mundo cada vez mais mobile, é
necessário ir além de apenas medir o tempo de
carregamento da página. Portanto, este guia ajudará a:
▪ Compreender com mais profundidade os conceitos em
torno de Web Performance;
▪ Conhecer as diretrizes globais e as melhores práticas de
otimização de performance;
▪ Mensurar os diversos pontos de performance por meio
das ferramentas disponíveis;
▪ Formar um maior conhecimento sobre o assunto para
direcionar nas tomadas de decisões sobre o assunto.
CONSUMIDOR
MOBILE
Entre Outubro e Novembro de 2016, ocorreu o primeiro registro de superação dos acessos
Mobile sobre Desktop no mundo.
COMPORTAMENTO MOBILE…
54%
Fonte: StatCounter Global Stats
Em Março de 2017, o sistema operacional Android ultrapassou o Windows mundialmente, com
37,94% contra 37,91%. Atualmente está com 40% de representatividade.
COMPORTAMENTO MOBILE…
40%
Fonte: StatCounter Global Stats
COMPORTAMENTO MOBILE…
E quando olhamos para algumas das contas Nestlé, notamos que
esta tendência é acompanhada, no qual:
DOS 52M
DE PAGEVIEWS
NOS ÚLTIMOS 12 MESES*
72%FORAM MOBILE
Fonte: Google Analytics – Período: 01/03/17 até 28/02/18 – Baseada em 11 grandes contas da marca
Manter uma boa experiência de navegação garante, além da satisfação
do consumidor, mais conversões.
E QUAL A IMPORTÂNCIA DESTES DADOS?
Fonte: Como conquistar o consumidor em tempos de imediatismo?
E nesta experiência, também se deve atender
as expectativas do consumidor.
E QUAL A IMPORTÂNCIA DESTES DADOS?
Fonte: Como conquistar o consumidor em tempos de imediatismo?
De olho em toda esta mudança de comportamento, a Google, além de impulsionar e incentivar esta
transição com inúmeras diretrizes, a partir de Julho de 2018, atualizará seu algoritmo levando em
consideração o tempo de carregamento das páginas mobile como fator de rankeamento.
GOOGLE SPEED UPDATE & MOBILE FIRST INDEX
Fonte: Conversion
"COMO O PRÓPRIO NOME SUGERE, O MOBILE FIRST INDEX MUDARÁ A FORMA DE O
GOOGLE INDEXAR AS PÁGINAS E TAMBÉM DE CLASSIFICAR OS RESULTADOS. HOJE, AS
PÁGINAS SÃO INDEXADAS PRIMEIRO E AVALIADAS PELA SUA VERSÃO DESKTOP – AINDA
QUE, NOS RESULTADOS DE BUSCAS FEITAS EM CELULAR, SEJA EXIBIDA A VERSÃO MOBILE
DA PÁGINA. (...) QUANDO ESSA ATUALIZAÇÃO FOR IMPLEMENTADA, OS CRITÉRIOS DE
RANKEAMENTO SERÃO CONSIDERADOS O DO SITE MOBILE OU A VERSÃO RESPONSIVA
EXIBIDA NOS DISPOSITIVOS MÓVEIS“
MOBILE FIRST INDEX
RECAPITULANDO…
Vimos, portanto, que:
▪ Hoje em dia, ter um site Mobile é imprescindível.
Entretanto, apenas ter um site mobile não quer dizer
que evitará potenciais problemas;
▪ Mobiles estão se tornando cada vez mais, a fonte
primária e principal de consumo de conteúdo e
também de compras;
▪ Google tem dado muita, mas muita importância para
garantir boas experiências ao consumidor através
dos dispositivos móveis.
MAS ANTES…
ALGUNS CONCEITOS
Para um melhor entendimento deste guia é necessários elucidar sobre alguns conceitos técnicos, vamos a eles!
CONCEITOS IMPORTANTES
Accelerated Mobile Pages (AMP): é uma biblioteca de código aberto que
fornece uma maneira de criar páginas atraentes, suaves e que são
carregadas quase que instantaneamente.
Content Delivery Network (CDN): é uma rede de servidores que
armazenam réplicas do conteúdo de outros sites na memória (cache) e
depois os entrega aos visitantes, baseando-se na localização geográfica
para conectá-los ao servidor mais próximo e mais rápido, reduzindo o
tempo de transferência dos dados (latência).
Critical Render Path (CRP): conjunto de passos que os navegadores devem
seguir para converter HTML, CSS e JavaScript em sites cheios de vida.
CSS Object Model (CSSOM): é uma espécie de mapa dos estilos CSS de
uma página Web. É vital para a renderização de uma página e é combinado
com o DOM para que os navegadores a exibam.
Document Object Model (DOM): é uma API de programação para
documentos HTML e XML. Ele define a estrutura lógica dos documentos e
a forma como um documento é acessado e manipulado.
DOMContentLoaded (DCL): é um evento que geralmente marca que o
DOM e CSSOM estão prontos, o que significa que a árvore de renderização
pode ser criada.
First Contentful Paint (FCP): reporta o momento em que o navegador
processa qualquer texto, imagem (incluindo os planos de fundo), SVG ou
tela não-branca. Também está incluso as webfonts pendentes. É o
momento que os usuários podem começar a consumir o conteúdo da
página.
First Meaningful Paint (FMP): é o momento em que o conteúdo principal
da página é exibido. Quanto menor a pontuação do FMP, mais
rapidamente a página aparecerá a exibir seu conteúdo principal.
First Paint (FP): informa o momento em que o navegador renderizou pela
primeira vez após a navegação.
Navigation Start: é o ponto de partida real de uma página carregada
iniciada por um usuário clicando em um link ou tomando outra ação de
navegação.
Para um melhor entendimento deste guia é necessários elucidar sobre alguns conceitos técnicos, vamos a eles!
CONCEITOS IMPORTANTES
Progressive Web App (PWA): são experiências que combinam o melhor da
Web e o melhor dos aplicativos. Eles são úteis para os usuários desde a
primeira visita em uma guia de navegador sem exigir instalações.
Conforme o usuário desenvolve uma relação com o aplicativo ao longo do
tempo, ele se torna cada vez mais eficaz. Ele é carregado com rapidez,
mesmo em redes instáveis, envia notificações push relevantes, tem um
ícone na tela inicial e é carregado como uma experiência de tela inteira de
alto nível.
Push, Render, Pre-cache, Lazy-load (PRPL): é um padrão para a
estruturação e atendimento de PWAs, com ênfase no desempenho da
entrega e lançamento de aplicativos.
Response, Animation, Idle, Load (RAIL): é um modelo de desempenho
centrado no usuário que divide a experiência do usuário em ações-chave.
Os objetivos e diretrizes da RAIL visam ajudar os desenvolvedores e
designers a garantir uma boa experiência de usuário para cada uma dessas
ações.
Responsive Design: responde às necessidades dos usuários e dos
dispositivos que eles estão usando, no qual o layout muda conforme o
tamanho e capacidades do dispositivo.
Time To First Byte (TTFB): representa a quantidade de tempo que os
navegadores aguardam para receber o primeiro “pedaço” de informação
de um servidor web após tê-lo requisitado.
Time To First Paint (TTFP): indica o tempo desde o momento em que o
usuário insere um URL na barra de endereço até o navegador pintar os
primeiros pixels na tela. Em outras palavras, o tempo que os usuários
observam a tela em branco antes que qualquer coisa apareça..
Time To Interactive (TTI): é definido como o ponto em que o layout se
estabilizou, os Webfonts são visíveis e o segmento principal está disponível
o suficiente para lidar com a interação do usuário.
Viewport: é a área onde seu website aparece. É a área branca da janela
quando você abre o browser.
GUIDELINES
É um modelo de performance centrado no usuário que visa, através de suas metas e diretrizes, ajudar os
desenvolvedores e designers a garantir a melhor experiência para cada um dos quatro aspectos de seu modelo.
O MODELO RAIL
Fonte: RAIL
I. Foco no usuário.
II. Responder o comando do usuário em menos de 100 ms.
III. Durante animação ou rolagem, produzir um quadro em menos de 10 ms.
IV. Maximizar o tempo de ociosidade do encadeamento principal.
V. Manter os usuários envolvidos, fornecer conteúdo interativo em menos de 1000 ms.
Metas (Goals): são as principais métricas
de desempenho relacionadas à
experiência do usuário. Uma vez que a
percepção humana é relativamente
constante, é improvável que esses
objetivos mudem em breve.
Diretrizes (Guidelines): são as
recomendações que o ajudam a atingir
metas. Estes podem ser específicos das
atuais condições de conexão de
hardware e rede e, portanto, podem
mudar ao longo do tempo.
Para avaliar o site baseado neste modelo, recomenda-se as ferramentas: Chrome DevTools, Lighthouse,
WebPageTest.
Fonte: RAIL
Etapa do RAIL Métrica Ações do usuário
Resposta
Latência da interação (do toque à
gravação) de menos de 100 ms.
O usuário toca em um botão (por exemplo,
abre o navegador).
Animação
O trabalho de cada quadro (do JS à
gravação) é concluído em menos de
16ms.
O usuário rola a página, arrasta o dedo (para
abrir um menu, por exemplo) ou vê uma
animação. Ao arrastar, a resposta do aplicativo
é vinculada à posição do dedo, como puxar
para atualizar ou arrastar um carrossel. Essa
métrica se aplica somente à fase contínua de
arrastos, não ao início.
Ociosidade
Trabalho de JS do encadeamento
principal dividido em partes não
superiores a 50 ms.
O usuário não está interagindo com a página,
mas o encadeamento principal deve estar
suficientemente disponível para lidar com a
próxima interação do usuário.
Carregamento
Página considerada pronta para uso em
1000 ms.
O usuário carrega a página e vê o conteúdo do
caminho crítico.
COMO MENSURAR O RAIL?
Para boas experiências em Mobile, tempo de carregamento e tamanho dos arquivos são pontos
bem importantes. Vejamos as melhores práticas na construção de experiências Mobile First.
DIRETRIZES GLOBAIS - GOOGLE
Fonte: Find out how you stack up to new industry benchmarks for mobile page speed
Average Speed Index
Quão rápido uma página mobile
apresenta seu conteúdo aos
consumidores (Quanto menor, melhor).
Recomendação: Abaixo de 3s
Average Time to First Byte
Quanto tempo o Navegador tem que
esperar até receber o primeiro byte de
dados do servidor
(Quanto menor, melhor).
Recomendação: Abaixo de 1,3s
Average Request Count
Número de “pedaços” de conteúdos que
são necessários para apresentar toda a
página (Quanto menor, melhor).
Recomendação: Menos que 50
Average Page Weight Bytes
Tamanho total de uma página mobile,
medida em bytes
(Quanto menor, melhor).
Recomendação: Menos que 500KB
Corresponde ao tempo médio em que
as partes visíveis da página são
exibidas. É expresso em milissegundos e
depende do tamanho do View Port.
Bom indicador para comparação nos
ganhos de performance e entre
concorrentes.
Para um melhor entendimento, deve ser
mensurado com métricas como Load
Time, Start Render, etc.)
Quanto menor for o Speed Index, mais
rápido o website estará performando.
Na ferramenta WebPageTest, que
criaram este índice, corresponde a um
sistema de pontuação que avalia uma
série de outras métricas. Já na
ferramenta Google Lighthouse, esta
métrica é pautada no conceito
Perceptual Speed index, que está mais
relacionada à perspectiva do usuário.
Refere-se ao número de chamadas
que um site faz ao servidor para
recuperar os pedaços de conteúdos
necessários para exibir
completamente uma página.
Quanto mais Requests, tanto maior o
tempo de carregamento do site.
Reduza o número de solicitações que
precisam ser enviadas de ida e volta e
será possível reduzir
significativamente o tempo médio de
carregamento da página.
O TTFB diz respeito à medida da
capacidade de resposta de um
servidor web, ou seja, quanto tempo
que leva para que o navegador
comece a receber informações
depois de solicitado ao servidor.
Composto de 3 componentes
separados:
▪ O tempo necessário para enviar o
pedido HTTP
▪ O tempo necessário para que o
servidor processe o pedido
▪ O tempo necessário para que o
servidor envie o primeiro byte da
resposta ao cliente
Corresponde ao tamanho total, em
bytes, de uma página.
Com relação a este ponto, é
necessário buscar o equilíbrio entre
performance e percepção, uma vez
que, muitas vezes, alcançar o ideal
proposto pelo Google de menos de
500KB será algo um tanto quanto
complexo, tendo em vista que este
tamanho tem crescido em média 16%
ano a ano.
AVERAGE PAGE INDEX AVERAGE REQUEST COUNT AVERAGE TIME TO FIRST BYTE AVERAGE PAGE WEIGHT BYTES
DIRETRIZES GLOBAIS - GOOGLE
Em linhas gerais, vejamos o que correspondem cada um e, posteriormente, algumas recomendações de otimização.
Cada métrica de carregamento representa uma fase diferente da percepção do usuário sobre a experiência de
carregamento. Portanto, o ideal seria entregar o conteúdo e torna-lo interativo em menos de 5 segundos.
Fonte: RAIL, First Meaningful Paint, First Interactive, Time to Interactive
DIRETRIZES GLOBAIS - GOOGLE
2 VERTENTES A TRABALHAR
OTIMIZAÇÃO DA
EFICIÊNCIA DE CONTEÚDO
OTIMIZAÇÃO DO CAMINHO
CRÍTICO DE RENDERIZAÇÃO
2 VERTENTES A TRABALHAR
OTIMIZAÇÃO DA
EFICIÊNCIA DE CONTEÚDO
OTIMIZAÇÃO DO CAMINHO
CRÍTICO DE RENDERIZAÇÃO
Ao passo que a Web vai avançando em termos de tecnologias e funcionalidades, proporcionalmente a
quantidade de dados a serem baixadas também aumentam. Logo, para oferecer um desempenho ideal, é
necessário otimizar a entrega de todos bytes.
OTIMIZAR EFICIÊNCIA DO CONTEÚDO
Fontes: Speed Index WebPageTest, Speed Index Keycdn
O QUE FAZER PARA MELHORAR?
Eliminar Downloads Desnecessários
Compressão de Dados
Otimização de Imagens
Otimização de inicialização do JavaScript
Carregando o JavaScript de terceiros
Otimização de fontes da web
Cache de HTTP
Clique nos itens a seguir para navegar entre os slides
ELIMINAR DOWNLOADS DESNECESSÁRIOS
Fonte: Eliminando downloads desnecessários
É necessário eliminar os recursos que são desnecessários ou que, pior, prejudicam o desempenho da página sem
entregar muito valor ao consumidor ou ao site em que está hospedado. Isto vale para recursos widgets próprios e
de terceiros, portanto, perguntas como estas são sempre excelentes opções a levantar:
▪ Esse recurso precisa ou tem um SLA? Esse recurso segue as práticas recomendadas de desempenho:
compressão, armazenamento em cache e assim por diante?
▪ O site B decidiu instalar um widget de terceiros para exibir conteúdo relacionado, aprimorar a interação social
ou fornecer algum outro serviço.
Pergunta: Você rastreou quantos visitantes usam o widget ou clicam no conteúdo fornecido pelo widget? O
engajamento que este widget gera é suficiente para justificar a sua sobrecarga?
O QUE FAZER
PARA MELHORAR?
I. Faça um inventário de todos os ativos próprios e de terceiros em suas páginas.
II. Meça o desempenho de cada ativo: seu valor e seu desempenho técnico.
III. Determine se os recursos fornecem valor suficiente.
COMPRESSÃO DE DADOS
Fonte: Introdução à Compressão de Dados
A Compressão de Dados nada mais é que o processo de codificar informações usando menos bits, ou
seja, uma redução do tamanho dos dados, que podem ser recursos de texto, imagem, vídeo, fontes... E
para isso, existem diversas técnicas e algoritmos de compressão diferentes que podem ser aplicadas em
conjunto para um melhor desempenho:
▪ Ferramentas Genéricas que podem ser ativadas no servidor (i.e.: GZIP)
▪ Otimizações de Pré-processamento para tipos de conteúdo específicos
(i.e.: remoção de caracteres desnecessários no HTML, CSS, Javascript)
▪ Otimizações específicas de recursos que exigem um desenvolvedor
O QUE FAZER
PARA MELHORAR?
I. Criar um inventário dos diferentes tipos de conteúdo.
II. Considerar quais tipos de otimizações específicas podem ser aplicadas a esses tipos de
conteúdo para reduzir seu tamanho.
III. Automatizar essas otimizações por meio do processo de desenvolvimento das páginas.
▪ É um compressor genérico que pode ser
aplicado a qualquer fluxo de bytes.
▪ Tem melhor desempenho em ativos baseados
em texto: CSS, JavaScript e HTML
▪ Para uma melhor economia, combine arquivos
Minimizados com GZIP
▪ Todos os navegadores modernos são
compatíveis com a compressão GZIP e a
solicitam automaticamente
GZIP
OTIMIZAÇÃO DE IMAGENS
Fonte: Otimização de Imagens
Frequentemente, as imagens são as maiores responsáveis pela quantidade de bytes baixados em uma página.
Entretanto, quando se fala de otimização de imagens, é necessário uma análise cuidadosa de diversos fatores,
como recursos do formato, conteúdo dos dados codificados, qualidade e dimensões em pixels..., para garantir as
configurações ideais a serem aplicadas. Logo, não há uma resposta definitiva sobre qual a melhor forma de
comprimir uma imagem individualmente, é necessário olhar caso a caso.
Otimização de imagem: escolha o formato certo, comprima cuidadosamente e priorize
imagens críticas sobre as que podem ser carregadas.
ELIMINAR E SUBSTITUIR IMAGENS
Fonte: Eliminando downloads desnecessários
Um bom design proporciona o melhor desempenho. Neste ponto é necessário encontrar um equilíbrio entre
comunicação e otimização, questionando-se: “Esta imagem é realmente necessária para alcançar o efeito que
desejo?”. Como falado anteriormente, as imagens consomem muitos bytes em comparação ao HTML, CSS,
JavaScript e outros ativos na página, logo, a decisão de eliminar este recurso substituindo por outras
alternativas será sempre a melhor otimização.
O QUE FAZER
PARA MELHORAR?
I. Efeitos CSS e animações CSS para reproduzir sombras, gradientes e etc., uma
vez que por meio destes garante-se nitidez em qualquer resolução e níveis de
zoom.
I. Fontes da Web preservam a capacidade de selecionar, pesquisar, e
redimensionar o texto, além da possibilidade do uso de fontes elegantes.
I. Texto em imagens: além de oferecer uma experiência de baixa qualidade, o
texto não é selecionável, pesquisável, redimensionável, acessível.
IMAGENS VETORIAIS (SVG)
Fontes: Otimização de Imagens, Vector Graphics, Compressão de Imagens
São formatos ideais para imagens em formatos geométricos simples (i.e.: logotipos, textos, ícones, etc.) e
oferecem resultados nítidos independente das configurações de resolução e zoom. É um formato muito
adequado para telas e ativos de alta resolução que precisam ser exibidos em diversos tamanhos.
Entretanto, quando se trata de imagens complexas, como fotografias, a opção SVG deixa a desejar, sendo
mais recomendável o uso de imagens raster (GIF, JPEG, PNG..).
Imagem vetorial com
zoom aproximado
O QUE FAZER PARA MELHORAR?
I. Por ser um formato de imagem baseado em
XML, pode-se incorporar a marcação SVG
diretamente na página ou como um recurso
externo;
I. Os arquivos SVG devem ser minimizados
para reduzir seu tamanho;
I. Os arquivos SVG devem ser compactados
com GZIP.Imagem raster com
zoom aproximado
Ferramenta Recomendada: SVGO
IMAGENS RASTER (GIF, JPEG, PNG…)
Fontes: Otimização de Imagens, Raster Graphics, Codificações Delta, Compressão de Imagens
Estes formatos são dependentes da resolução, no qual não podem escalar até uma resolução arbitrária sem
perda de qualidade, causando os serrilhados e borrados. Portanto, uma boa prática é fornecer e otimizar
diversas variantes (em resoluções) de cada imagem para oferecer a experiência ideal aos consumidores.
I. Não existe um único formato melhor ou única
“configuração de qualidade” para todas as
imagens. Cada combinação de um compressor
e um conteúdo de imagem específicos gera
uma saída única.
I. Um fluxo normal de Otimização de Imagens
consiste em duas etapas resumidas:
I. Eliminação de alguns dados dos pixels
pelo processamento de imagem com
filtro com perda (Lossy)
II. Compressão dos dados dos pixels pelo
processamento de imagem com filtro
sem perda (Lossless)
PNG: 32 bits
(16 milhões de cores)
PNG: 7 bits
(128 cores)
PNG: 5 bits
(32 cores)
EXEMPLO
DICAS PRÁTICAS
1. A configuração de Otimização de Imagem dependerá dos seus critérios entre o tamanho
de arquivo e artefatos introduzidos pela compressão com perda.
2. Níveis de qualidade da imagem são diferentes para os diferentes tipos de formatos e até
mesmo para o mesmo formato.
ESCOLHENDO O FORMATO DE IMAGEM CORRETO
Fontes: Otimização de Imagens, Raster Graphics, Codificações Delta, Compressão de Imagens
Formato Transparência Animação Navegador
GIF Sim Sim Todos
PNG Sim Não Todos
JPEG Não Não Todos
JPEG XR Sim Sim IE
WebP Sim Sim Chrome, Opera, Android
GIF, PNG E JPEG são, por enquanto, os únicos formatos de imagem universais – que funcionam em todos os
navegadores. Além destes, existem os formatos mais recentes JPEG XR e WebP que oferecem uma melhor
compressão geral e mais recursos e que valem ser experimentados.
1. Precisa de
animação?
2. Precisa preservar os
detalhes e com alta
resolução?
GIF
3. Precisa de uma
paleta de cores
maior que 256?
JPEG
PNG-8 PNG-24
Experimente várias
configurações de
qualidade
Sim
Sim
Sim
Não
Não
Não
COMO ESCOLHER?
Adaptação do esquema fornecido pelo Google
FORMATOS DE IMAGEM
FORMATOS JPEG XR E WEBP
Fonte: Otimização de Imagens, JPEGXR, JPEGXR Wikipedia, WebP Google
Como vistos anteriormente, são formatos usados por apenas alguns navegadores. Entretanto, podem
oferecer economias consideráveis para consumidores mais recentes, podendo oferecer, através do WebP
i.e., uma redução de 30% no tamanho do arquivo em relação a uma imagem JPEG comparável.
▪ Fornece a mesma qualidade de arquivos PNG, JPG com tamanhos
reduzidos;
▪ Formato único de extensão, podendo ser criadas animações GIFs,
imagens com transparência como PNG, usar qualidade
relativamente superior à um JPG;
▪ Por enquanto, WebP é suportado nativamente nos navegadores
Opera e Chrome. Lista completa de suporte.
▪ Combina os benefícios da qualidade de imagem otimizada e
da eficiência de compressão;
▪ A principal aplicação pretendida do JPEG XR é a
representação de imagens estáticas de tons contínuos, como
imagens fotográficas;
▪ Lista completa de suporte.
O QUE FAZER
PARA MELHORAR?
Será necessário acrescentar lógica ao aplicativo ou aos servidores para servir o recurso adequado:
I. Algumas CDNs fornecem otimização de imagens como serviço, incluindo fornecimento de JPEG XR e WebP.
II. Adicionar lógica ao aplicativo para detectar o cliente, verificar os formatos compatíveis e servir o melhor formato
de imagem disponível.
III. Algumas ferramentas de código aberto (por exemplo, PageSpeed para Apache ou Nginx) automatizam a
otimização, a conversão e o envio de ativos adequados.
DIMENSIONAMENTO CORRETO DE IMAGENS
Fonte: Otimização de Imagens, JPEGXR, JPEGXR Wikipedia, WebP Google
Muitas vezes, as páginas enviam ativos de imagem maiores que o tamanho necessário, dependendo do
navegador para redimensioná-las, o que acaba aumentando o tempo de renderização das mesmas.
O QUE FAZER
PARA MELHORAR?
I. Garantir que o número de pixels desnecessários seja mínimo e que seus ativos grandes
sejam fornecidos com o tamanho mais próximo possível ao tamanho de exibição.
O tamanho de arquivo da imagem é simplesmente o número total de pixels
multiplicado pelo número de bytes usados para codificar cada pixel.
Resolução
da tela
Tamanho
natural
Tamanho de exibição
(pixels do CSS)
Pixels desnecessários
1x 110x110 100x100 110 x 110 - 100 x 100 = 2.100
1x 410x410 400x400 410 x 410 - 400 x 400 = 8.100
2x 820x820 400x400
820 x 820 - (2 x 400) x (2 x
400) = 32.400
2x 1620x1620 800x800
1.620 x 1.620 - (2 x 800) x (2
x 800) = 64.400
Perceba a quantidade de pixels desnecessários com o incremento da resolução da tela, gerando
uma sobrecarga enviada aos navegadores.
PERCEIVED PERFORMANCE
Fonte: Otimização de Imagens, Automatização de Otimização de Imagens, Avoid the Spinner, Perceived Performance
Este conceito está relacionado à percepção do desempenho da página na perspectiva do consumidor e não
nas ferramentas de testes de velocidade: “Com que rapidez a aparência do seu site aparenta carregar?”
LAZY LOAD BENEFÍCIOS
▪ Consumo reduzido de Dados: somente os recursos mínimos
necessários são carregados na página;
▪ Redução do Consumo de Bateria: menos carga de trabalho
ao navegador do consumidor;
▪ Velocidade de Download Aprimorada: aumento considerável
no carregamento do site, uma vez que o carregamento das
imagens serão de acordo com a necessidade do consumidor.
RECOMENDAÇÕES
▪ Evitar imagens Lazy Load “Acima da Dobra”: podem causar a
percepção de demora no carregamento da página;
▪ Tomar cuidado com o Lazy Load ao rolar a página: se você
esperar até o usuário se deslocar, é provável que eles vejam os
marcadores de posição e, eventualmente, podem obter
imagens, caso ainda não passaram por eles.
▪ Evite usar o indicador de Carregamento : causam a
sensação de carregamento lento.
É um padrão de performance da Web que atrasa o carregamento
de imagens no navegador até o usuário precisar vê-lo.
As imagens “acima da dobra” ou quando a página aparece pela primeira vez, são
carregadas imediatamente. As que se seguem “abaixo da dobra”, não têm
necessidade de visibilidade, podendo ser carregadas mediante o deslizamento do
consumidor no decorrer da página.
Ferramenta Recomendada: Lazysizes
JPEGs PROGRESSIVOS
Enquanto os JPEGs por padrão carregam de cima para baixo, os JPEGs Progressivos carregam da baixa
qualidade (embaçado) refinando-a para alta qualidade, causando assim uma percepção de que a imagem
está sendo carregada mais rapidamente, principalmente em conexões 3G.
Fonte: Automatizando a Otimização de Imagens, How Medium does progressive image loading
Carregamento de JPEG Básica
Carregamento de JPEG Progressivo
Carregamento de JPEG Progressivo (Medium)
OBSERVAÇÃO
Nem sempre os JPEG Progressivos serão
mais leves e vantajosos, tudo sempre
dependerá de testes para encontrar o
equilíbrio certo de tamanho de arquivo,
latência de rede e uso de ciclos de CPU.
GIFS ANIMADOS vs. VIDEO
GIFs muitas vezes desperdiçam uma significativa largura de banda, demoram mais para carregar, além de
serem limitados a uma paleta de 256 cores – causando uma qualidade degradada na imagem. É possível
entregar conteúdos de maior qualidade e mais otimizados através dos formatos H.264 e WebM.
Fonte: Automatizando a Otimização de Imagens, H.264 Wikipedia, WebM
O WebM é um formato de arquivo
de mídia aberto, livre de royalties,
projetado para a web.
Formato mais comum de gravação,
compressão e distribuição de
conteúdos em vídeo
O QUE FAZER
PARA MELHORAR?
I. Se for possível mudar os GIFs para Vídeos, usar ferramentas/técnicas como ffmpeg e
ImageOptim API para conversão e otimização.
II. Se tiver que utilizar GIF, utilize ferramentas/técnicas que o otimize, tais como Giflossy e Gifify.
Para GIFs não animados, converta-os em outro formato de imagem.
AUTOMATIZANDO A OTIMIZAÇÃO DE IMAGENS
Fonte: Automatizando a Otimização de Imagens
Existem inúmeras ferramentas automatizadas e infraestrutura que asseguram que os ativos de imagens
estejam sempre otimizados.
Ferramenta/Técnica Descrição Tipo
WebP codec package
Permite fazer um preview de imagens WebP em Windows no File Explorer e Windows Photo
Viewer
-
imagemin Automatize o processo de otimização de imagens Automatização da Compressão de Imagens
libvps Automatize o processo de otimização de imagens Automatização da Compressão de Imagens
Akamai CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens
Cloudinary CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens
Imgix CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens
Fastly's Image Optimizer CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens
Instart Logic's SmartVision CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens
ImageOptim API CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens
Imageflow Solução open-source para automatização da otimização de imagens no próprio servidor Automatização da Compressão de Imagens
Thumbor Solução open-source para automatização da otimização de imagens no próprio servidor Automatização da Compressão de Imagens
gifsicle Crie e otimize imagens GIF Compressão de Imagem
jpegtran Otimização de imagens JPEG Compressão de Imagem
optipng Otimização PNG sem perda Compressão de Imagem
pngquant Otimização PNG com perda Compressão de Imagem
MozJPEG Otimização de imagens JPEG Compressão de Imagem
SVGO Otimização de imagens Vetoriais Compressão de Imagem
Giflossy Otimização de GIFs Compressão de Imagem
AUTOMATIZANDO A OTIMIZAÇÃO DE IMAGENS
Fonte: Automatizando a Otimização de Imagens
Existem inúmeras ferramentas automatizadas e infraestrutura que asseguram que os ativos de imagens
estejam sempre otimizados.
Ferramenta/Técnica Descrição Tipo
VerEXIF Remove informações EXIF adicionadas pelas câmeras digitais e editores Compressão de Imagem
Imagemin Minimifica imagens Compressão de Imagem
cwebp Converte imagens em WebP Compressão de Imagem
Android Studio Converte ou crie imagens em WebP Compressão de Imagem
Quick Look plugin for WebP Crie e otimize imagens em WebP para Mac Compressão de Imagem
ffmpeg Converte GIFs animados (ou arquivos) em H.264 MP4s Compressão de Imagem
LazySizes Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens
Lazy Load XT Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens
BLazy.js Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens
Unveil Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens
yall.js (Yet Another Lazy Loader) Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens
WebM Criação de animações em vídeos mais leves que GIFs Otimização de Videos
H.264 Criação de animações em vídeos mais leves que GIFs Otimização de Videos
OTIMIZAÇÃO DE INICIALIZAÇÃO DO JAVASCRIPT
Fonte: Otimização de inicialização do JavaScript, Desempenho de inicialização do JavaScript, Solving the Web Performance Crisis
Javascript gasta tempo significativo para Analisar (Parse), Compilar (Compile) e Executar durante a
inicialização, o que resulta em um atraso com relação a possibilidade de interação do consumidor com a
página. E este tempo gasto pode chegar de 2-5x mais em smartphones em relação ao desktop.
O QUE FAZER
PARA MELHORAR?
I. Enviar menos Javascript: remoção de JavaScript não crítico de suas páginas pode reduzir os
tempos de transmissão, análise e compilação intensivas de CPU e capacidade de memória
potencial. Isso também ajuda a tornar suas páginas interativas mais rápidas.
I. Use o code-splitting para enviar apenas o código que um consumidor precisa para uma rota e
aplique Lazy Load no resto. Recomenda-se o padrão PRPL (Push, Render, Pre-Cache, Lazy Load)
CONTEÚDO COMPLEMENTAR
Chrome Dev Summit 2017 - Modern Loading Best Practices
JavaScript Start-up Performance
Solving the web performance crisis
Can you afford it? Real-world performance budgets
Evaluating web frameworks and libraries
Performance Futures
JAVASCRIPT DE TERCEIROS
Fonte: Carregando o JavaScript de Terceiros, Things to Know (and Potential Dangers) with Third-Party Scripts
Scripts de terceiros (anúncios, analytics, botões de compartilhamento, rastreadores, etc.) permitem uma
séria de funcionalidades úteis, tornando a web mais dinâmica, interativa e interconectada. Entretanto,
muitas vezes, apresentam muitos riscos na performance e que precisam ser levados em consideração para
minimizar seu impacto, uma vez que estes recursos estão fora do nosso controle.
POR QUE VOCÊ PRECISA TER CUIDADO COM SCRIPTS DE TERCEIROS?
Podem ser uma
preocupação de
desempenho
Podem ser uma
questão de
privacidade
Podem ser uma
preocupação de
segurança
Podem ser
imprevisíveis e mudar
sem que você saiba
Podem ter
consequências não
intencionais
O ideal é garantir que estes scripts não estejam afetando o caminho de renderização crítico
Utilize ferramentas
como WebPageTest,
Chrome
DevTools e PageSpe
ed Insights para
identificar a
quantidade destes
scripts e que
demoram mais para
carregar, além de
receber orientações
no tocante à
otimização.
JAVASCRIPT DE TERCEIROS
Fonte: Carregando o JavaScript de Terceiros, Things to Know (and Potential Dangers) with Third-Party Scripts
A resolução para este ponto dependerá do contexto do site e da capacidade de configurar como os códigos
de terceiros estão sendo carregados. E ao identificar aqueles que mais atrasam o desempenho, recomenda-
se um teste A/B para equilibrar o valor percebido em relação ao seu impacto no engajamento do
consumidor ou métricas de desempenho. E a partir disso, questionar a real necessidade do mesmo.
O QUE FAZER
PARA MELHORAR?
I. Carregar o script usando os atributos async ou defer para evitar o bloqueio da análise dos
documentos;
II. Considerar a auto hospedagem do script, caso os servidores de terceiros for lento;
III. Considerar a remoção do script, caso este não gere um valor claro ao site;
IV. Considerar o uso de Resources Hints como <link rel=preconnect>ou <link rel=dns-
prefetch>para realizar uma pesquisa de DNS para domínios que hospedam scripts de
terceiros;
V. Considerar o carregamento dos recursos de terceiros com Lazy Load;
VI. Buscar evitar document.write ();
VII. Utilizar Gerenciadores de Tags com sabedoria: embora eles auxiliam na minimização da
sobrecarga, também não impedem que sejam adicionadas tags dispendiosas por parte de
qualquer pessoa que tenha credencial para gerenciar.
VIII. Evitar scripts que poluam o escopo global
OTIMIZAÇÃO DE FONTES DA WEB
Fonte: Otimização de Fontes da Web, Web Fonts Performance
São fontes que não estão instaladas no computador do consumidor, mas sim carregadas a partir de um servidor na
web, baixados usando a declaração @font-face do CSS3 e que devem ser suportados pelo navegador web.
▪ Uma implementação simplista pode gerar downloads grandes e demoras desnecessárias. É necessário ajudar o navegador, otimizando os próprios
ativos de fonte e a forma como são recuperados e usados nas páginas;
▪ Minimize o número de variantes usadas: com um uso controlado e monitorado das fontes, é possível produzir uma experiência mais consistente e
rápida;
▪ Crie um subconjunto dos recursos de fontes: de acordo com o script (i.e.: latino, grego, etc.) , fornecendo apenas os glifos necessários para uma
determinada página. Isso reduz o tamanho do arquivo e aumenta a velocidade do download do recurso.
▪ Forneça formatos de fonte otimizados para cada navegador: cada fonte deve ser fornecida nos formatos WOFF2, WOFF, EOT e TTF. Não deixe de
aplicar a compressão GZIP aos formatos EOT e TTF, pois eles não são comprimidos por padrão.
▪ Use a Font Loading API para otimizar o caminho crítico de renderização: permite modificar o comportamento padrão de lazyload, que retarda a
renderização do texto, para determinadas fontes e especificar estratégias personalizadas de renderização e tempo limite para conteúdos diferentes na
página.
▪ Especifique políticas de revalidação e de armazenamento em cache ideal: as fontes são recursos estáticos, raramente atualizados. Verifique se os
servidores fornecem uma marcação de data e hora de max-age longo e um token de revalidação para possibilitar a reutilização eficiente de fontes
entre páginas distintas.
O QUE FAZER PARA MELHORAR?
CACHE DE HTTP
Fonte: Cache HTTP, HTTP Cache Headers – A Complete Guide
Diz respeito à capacidade de armazenar em cache e reutilizar recursos recuperados, melhorando assim, a
performance entre as respostas de cliente e servidor.
I. URLs Consistentes: se você servir o mesmo conteúdo em URLs diferentes, esse
conteúdo será recuperado e armazenado várias vezes;
I. Certifique-se de que o servidor fornece um token de validação (ETag): os tokens de
validação eliminam a necessidade de transferir os mesmos bytes quando um recurso
não foi alterado no servidor;
I. Identifique quais recursos podem ser armazenados em cache por intermediários: os
recursos com respostas idênticas para todos os usuários são ótimos candidatos para
armazenamento em cache por uma CDN ou por outros intermediários;
I. Determine o ciclo de vida ideal do cache para cada recurso: recursos diferentes podem
ter requisitos de atualização diferentes. Examine e determine o max-age adequado
para cada um;
I. Mais informações: Cache HTTP, HTTP Cache Headers – A Complete Guide
O QUE FAZER
PARA MELHORAR?
2 VERTENTES A TRABALHAR
OTIMIZAÇÃO DA
EFICIÊNCIA DE CONTEÚDO
OTIMIZAÇÃO DO CAMINHO
CRÍTICO DE RENDERIZAÇÃO
O CRP é o conjunto de passos que os navegadores devem seguir para converter HTML, CSS e JavaScript em
páginas elegantes. E a otimização diz respeito à capacidade de reduzir consideravelmente o tempo da primeira
renderização das páginas, priorizando a exibição do conteúdo relacionado à ação atual do usuário.
OTIMIZAR O CAMINHO CRÍTICO DE RENDERIZAÇÃO
Fontes: Critical rendering Path
Esta otimização permite renderizar conteúdo na tela o mais cedo possível, além
de reduzir o tempo entre as atualizações da tela após a renderização inicial, ou
seja, atingir uma taxa de atualização mais alta para conteúdo interativo.
E para obter a maior rapidez possível na primeira renderização, é necessário minimizar 3 variáveis:
OTIMIZAR O CAMINHO CRÍTICO DE RENDERIZAÇÃO
Fontes: Critical rendering Path, Otimizando o Caminho Crítico de Renderização
I. Número de Recursos Críticos: onde um recurso crítico é
aquele que pode bloquear a renderização inicial da
página. Quanto menos desses recursos houver, menor
será o trabalho do navegador, do CPU e de outros
componentes.
I. Tamanho do Caminho Crítico: número de ida e volta, ou
o tempo total necessário para buscar todos os recursos
críticos.
I. Número de Bytes Críticos: quanto menos o navegador
precisar baixar, mais rápido poderá processar o
conteúdo e renderizá-lo na tela. Para reduzir o número
de bytes, podemos diminuir o número de recursos
(eliminá-los ou torná-los não críticos) e assegurar a
redução do tamanho da transferência compactando e
otimizando cada recurso.
número de recursos,
bytes e tamanho
Analisar e caracterizar
o caminho crítico
eliminá-los, adiar o
download, marcá-los
como assíncronos etc
Minimizar o número
de recursos críticos
para reduzir o tempo de
download (número de
idas e voltas)
Otimizar o número de
bytes críticos
baixar todos os ativos
críticos o quanto antes
para reduzir o tamanho
do caminho crítico
Otimizar a ordem de
carregamento dos
recursos críticos
restantes
SEQUÊNCIA GERAL DE ETAPAS DE OTIMIZAÇÃO
Por padrão, os recursos do JavaScript bloqueiam o
analisador – parser blocking -, o que acarreta em uma
espera forçada por parte do navegador pelo CSSOM
e a suspenção da construção do DOM, retardando
consideravelmente a primeira renderização.
OTIMIZAÇÃO DE JAVASCRIPT
O QUE FAZER
PARA MELHORAR?
Evitar JavaScript de Longa Duração
Dar preferência a recursos
JavaScript Assíncronos
Evitar chamadas
Síncronas ao Servidor
Adiar a Análise do JavaScript
Fontes: Critical rendering Path, Contruindo o Modelo de Objeto, Desempenho de Renderização
CSS é tratado como um recurso bloqueador de
renderização, o que significa que o navegador
não renderiza nenhum conteúdo processado
até que o CSSOM seja construído. Portanto, é
preciso manter o CSS enxuto, entregá-lo o
mais rápido possível e usar tipos e consultas
de mídia para desbloquear a renderização.
OTIMIZAÇÃO DE CSS
O QUE FAZER
PARA MELHORAR?
Colocar o CSS no
cabeçalho do documento
Evitar importações de CSS
CSS em linha bloqueador
de renderização
CSSFontes: Critical rendering Path, Contruindo o Modelo de Objeto, Desempenho de Renderização
Os principais objetivos do HTTP/2 são a redução da latência com a multiplexação completa de solicitação e
resposta, a minimização da carga do protocolo com a compressão eficiente dos campos do cabeçalho HTTP e a
adição de suporte a priorização de solicitações e envio push de servidor.
HTTP/2 E PERFORMANCE
Fontes: HTTP/2, HTTP/2 Wikipedia
▪ Multiplexação e simultaneidade: várias solicitações podem
ser enviadas em rápida sucessão na mesma conexão TCP e
as respostas podem ser recebidas fora de ordem -
eliminando a necessidade de várias conexões entre o
cliente e o servidor;
▪ Dependências de fluxo: o cliente pode indicar ao servidor
quais recursos são mais importantes do que os outros;
▪ Compressão de cabeçalho: o tamanho do cabeçalho HTTP
é drasticamente reduzido;
▪ Push do servidor: o servidor pode enviar recursos que o
cliente ainda não solicitou.
Teste a diferença nesta simulação
CAIXA DE
FERRAMENTAS
Para um melhor diagnóstico e recomendações de melhorias, existem no mercado inúmeras ferramentas.
Recomenda-se o uso das seguintes (basta clicar na imagem para acessar):
CAIXA DE FERRAMENTAS
Essa ferramenta do Google permite fazer um comparativo na performance de seu site em conexões 3G/4G com a
da concorrência. Além de fornecer uma calculadora de impacto potencial de receita, no qual examina o efeito em
potencial que a velocidade tem nas taxas de conversão.
SPEED SCORECARD
BONUS!
Para melhor compreender a respeito do assunto, além das fontes citadas e das referências contidas neste Guia,
recomenda-se os cursos gratuitos oferecidos pelo Google e Udacity.
CURSOS PARA APROFUNDAMENTO
REFERÊNCIAS
ALGUMA DÚVIDA?
Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
▪ Google to Use Page Speed as Ranking Signal in Mobile Search
https://www.searchenginejournal.com/google-use-page-speed-ranking-signal-mobile-search/232553/
▪ Speed Index - WebPageTest
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
▪ Speed Index Explained – Another Way to Measure Web Performance
https://www.keycdn.com/blog/speed-index/
▪ WebP: implemente imagens menores e mais bonitas com maior rapidez da Google I/O 2013
https://www.youtube.com/watch?v=pS8udLMOOaE
▪ Perceived Performance
https://www.keycdn.com/blog/perceived-performance/
▪ Progressive JPEGs and green Martians
https://cloudinary.com/blog/progressive_jpegs_and_green_martians
▪ Bulk Image Optimization in Bash
https://jeremywagner.me/blog/bulk-image-optimization-in-bash
▪ Book of Speed
http://www.bookofspeed.com/index.html
▪ JavaScript Start-up Performance
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
ALGUMA DÚVIDA?
▪ O padrão PRPL
https://developers.google.com/web/fundamentals/performance/prpl-pattern/
▪ The Book of GIF
https://rigor.com/wp-content/uploads/2017/03/TheBookofGIFPDF.pdf
▪ How to lazy-load images to improve loading time and save bandwidth
https://jmperezperez.com/lazy-loading-images/
▪ WebP: implemente imagens menores e mais bonitas com maior rapidez da Google I/O 2013
https://www.youtube.com/watch?v=pS8udLMOOaE
▪ Automating Performance Best Practices with PageSpeed - Google I/O 2013
https://www.youtube.com/watch?v=uR5urTx8S4E
▪ Case Study – Analyzing Web Font Performance
https://www.keycdn.com/blog/web-font-performance/
▪ "Speed, Performance, and Human Perception“
https://www.youtube.com/watch?v=7ubJzEi3HuA
▪ Things to Know (and Potential Dangers) with Third-Party Scripts
https://css-tricks.com/potential-dangers-of-third-party-javascript/
▪ Usando o WebPageTest para medir o impacto de tags de terceiros
https://andydavies.me/blog/2018/02/19/using-webpagetest-to-measure-the-impact-of-3rd-party-tags/
Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
ALGUMA DÚVIDA?
▪ Orientações para Lazy Load em Doubleclick
https://support.google.com/dfp_premium/answer/4578089#lazyloading
▪ Lazy loading ads: why mediavine ads load 200% faster
https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/
▪ The Google Analytics Setup I Use on Every Site I Build
https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/
▪ Intervindo contra document.write ()
https://developers.google.com/web/updates/2016/08/removing-document-write
▪ Solving the Web Performance Crisis
https://channel9.msdn.com/Blogs/msedgedev/nolanlaw-web-perf-crisis
▪ JavaScript de Terceiros – Leituras Adicionais
https://developers.google.com/web/fundamentals/performance/optimizing-content-
efficiency/loading-third-party-javascript/#further_reading
▪ A Slow Website – Time to First Byte (TTFB)
https://www.keycdn.com/blog/a-slow-website-time-to-first-byte-ttfb/
▪ Responsive Web Design Basics
https://developers.google.com/web/fundamentals/design-and-ux/responsive/
▪ Optimization Explained GTmetrix
https://gtmetrix.com/blog/category/optimization-explained/
Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
ALGUMA DÚVIDA?
▪ Progressive Web Apps
https://developers.google.com/web/progressive-web-apps/
▪ Seu primeiro Progressive Web App
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=pt-br
▪ First Contentful Paint Explained
https://gtmetrix.com/blog/first-contentful-paint-explained/
▪ Time to First Meaningful Paint
https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view
▪ Web performance Glossary
https://varvy.com/performance/
▪ Responsive Images: Using srcset and sizes Attributes
https://www.keycdn.com/blog/responsive-images/
▪ Deciphering the Critical Rendering Path
https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/
▪ The Complete Guide to Testing Your Accelerated Mobile Pages
https://www.searchenginejournal.com/amp-testing/212462/
▪ WebPageTest Guide
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide
Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
ALGUMA DÚVIDA?
▪ High Performance Browser Networking
https://hpbn.co/
▪ Performance Matters
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
▪ HTTP/2 – A Real-World Performance Test and Analysis
https://css-tricks.com/http2-real-world-performance-test-analysis/
▪ AMP: The web’s first steps into the Performance Age
https://uxplanet.org/amp-the-webs-first-steps-into-the-performance-age-8a25ba2f35f2
Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
NLAB

Mais conteúdo relacionado

Mais procurados

Design de interfaces para CMS's
Design de interfaces para CMS'sDesign de interfaces para CMS's
Design de interfaces para CMS'sThiago Melo
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Patricia Mallmann
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos CentraisCarlos Franco
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Augusto César Albuquerque
 
Análise e reformulação da página inicial do site uel.br com base nas premissa...
Análise e reformulação da página inicial do site uel.br com base nas premissa...Análise e reformulação da página inicial do site uel.br com base nas premissa...
Análise e reformulação da página inicial do site uel.br com base nas premissa...Frederico de Figueiredo Siena
 
Pitacos sobre usabilidade
Pitacos sobre usabilidadePitacos sobre usabilidade
Pitacos sobre usabilidadeDarcio Vilela
 
IntroduçãO A Web Design
IntroduçãO A Web DesignIntroduçãO A Web Design
IntroduçãO A Web Designdiegosamba
 
Avaliação de usabilidade
Avaliação de usabilidadeAvaliação de usabilidade
Avaliação de usabilidadeJonas Henrique
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04Alvaro Gomes
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01Renato Melo
 

Mais procurados (15)

Design de interfaces para CMS's
Design de interfaces para CMS'sDesign de interfaces para CMS's
Design de interfaces para CMS's
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
3 apres pb_g4
3 apres pb_g43 apres pb_g4
3 apres pb_g4
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Front end architecture
Front end architectureFront end architecture
Front end architecture
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Análise e reformulação da página inicial do site uel.br com base nas premissa...
Análise e reformulação da página inicial do site uel.br com base nas premissa...Análise e reformulação da página inicial do site uel.br com base nas premissa...
Análise e reformulação da página inicial do site uel.br com base nas premissa...
 
Pitacos sobre usabilidade
Pitacos sobre usabilidadePitacos sobre usabilidade
Pitacos sobre usabilidade
 
IntroduçãO A Web Design
IntroduçãO A Web DesignIntroduçãO A Web Design
IntroduçãO A Web Design
 
Avaliação de usabilidade
Avaliação de usabilidadeAvaliação de usabilidade
Avaliação de usabilidade
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Aula14
Aula14Aula14
Aula14
 
Javascript
JavascriptJavascript
Javascript
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 

Semelhante a Guia de Otimização de Performance de Sites (Page Speed)

Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End ArchitectureCristiano Gomes
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfArlindo Correia
 
Case Drupal: Todeschini
Case Drupal: TodeschiniCase Drupal: Todeschini
Case Drupal: TodeschiniMMDA
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCJanderson Silva
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67Reideson Rocha
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxGelvazioCamargo
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveisLeandro Borges
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
01- Introdução a programação e modelo RAD v1.0
01- Introdução a programação e modelo RAD v1.001- Introdução a programação e modelo RAD v1.0
01- Introdução a programação e modelo RAD v1.0César Augusto Pessôa
 

Semelhante a Guia de Otimização de Performance de Sites (Page Speed) (20)

Ap iii
Ap iiiAp iii
Ap iii
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End Architecture
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
 
Case Drupal: Todeschini
Case Drupal: TodeschiniCase Drupal: Todeschini
Case Drupal: Todeschini
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
DevQA: UI Testing , como fazer?
DevQA: UI Testing , como fazer?DevQA: UI Testing , como fazer?
DevQA: UI Testing , como fazer?
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Responsive Web Design - UX
Responsive Web Design - UXResponsive Web Design - UX
Responsive Web Design - UX
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Tecno maio 2010
Tecno maio 2010Tecno maio 2010
Tecno maio 2010
 
01- Introdução a programação e modelo RAD v1.0
01- Introdução a programação e modelo RAD v1.001- Introdução a programação e modelo RAD v1.0
01- Introdução a programação e modelo RAD v1.0
 

Último

Relatório de Gestão 2022-2023 Intra Leste Nordeste
Relatório de Gestão 2022-2023 Intra Leste NordesteRelatório de Gestão 2022-2023 Intra Leste Nordeste
Relatório de Gestão 2022-2023 Intra Leste NordesteDaniloMatos36
 
Selling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdfSelling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdfmaanuarruda
 
EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...
EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...
EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...9z64mgz4kf
 
Selling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdfSelling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdfmaanuarruda
 
AULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdf
AULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdfAULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdf
AULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdfhistonfilho
 
Selling Story Max Excellence DIS - Q2'24 DIS TD (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS TD (1).pdfSelling Story Max Excellence DIS - Q2'24 DIS TD (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS TD (1).pdfmaanuarruda
 

Último (6)

Relatório de Gestão 2022-2023 Intra Leste Nordeste
Relatório de Gestão 2022-2023 Intra Leste NordesteRelatório de Gestão 2022-2023 Intra Leste Nordeste
Relatório de Gestão 2022-2023 Intra Leste Nordeste
 
Selling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdfSelling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS HIB (1).pdf
 
EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...
EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...
EM-3ª-SERIE-SLIDE-DE-BIOLOGIA-os-principios-das-leis-da-genetica-ou-mendelian...
 
Selling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdfSelling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS VJ (1).pdf
 
AULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdf
AULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdfAULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdf
AULA_02_-_SISTEMA_DE_NUMERACAO2023/2.pdf
 
Selling Story Max Excellence DIS - Q2'24 DIS TD (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS TD (1).pdfSelling Story Max Excellence DIS - Q2'24 DIS TD (1).pdf
Selling Story Max Excellence DIS - Q2'24 DIS TD (1).pdf
 

Guia de Otimização de Performance de Sites (Page Speed)

  • 2. SUMÁRIO I. BENEFÍCIOS DESTE GUIA II. O CONSUMIDOR MOBILE III. ALGUNS CONCEITOS IV. GUIDELINES V. CAIXA DE FERRAMENTAS VI. REFERÊNCIAS
  • 3. COMO ESTE GUIA VAI ME AJUDAR? Muito se fala em Site Speed, Web Performance, Mobile First... Mas para bem compreender este assunto importantíssimo, em um mundo cada vez mais mobile, é necessário ir além de apenas medir o tempo de carregamento da página. Portanto, este guia ajudará a: ▪ Compreender com mais profundidade os conceitos em torno de Web Performance; ▪ Conhecer as diretrizes globais e as melhores práticas de otimização de performance; ▪ Mensurar os diversos pontos de performance por meio das ferramentas disponíveis; ▪ Formar um maior conhecimento sobre o assunto para direcionar nas tomadas de decisões sobre o assunto.
  • 5. Entre Outubro e Novembro de 2016, ocorreu o primeiro registro de superação dos acessos Mobile sobre Desktop no mundo. COMPORTAMENTO MOBILE… 54% Fonte: StatCounter Global Stats
  • 6. Em Março de 2017, o sistema operacional Android ultrapassou o Windows mundialmente, com 37,94% contra 37,91%. Atualmente está com 40% de representatividade. COMPORTAMENTO MOBILE… 40% Fonte: StatCounter Global Stats
  • 7. COMPORTAMENTO MOBILE… E quando olhamos para algumas das contas Nestlé, notamos que esta tendência é acompanhada, no qual: DOS 52M DE PAGEVIEWS NOS ÚLTIMOS 12 MESES* 72%FORAM MOBILE Fonte: Google Analytics – Período: 01/03/17 até 28/02/18 – Baseada em 11 grandes contas da marca
  • 8. Manter uma boa experiência de navegação garante, além da satisfação do consumidor, mais conversões. E QUAL A IMPORTÂNCIA DESTES DADOS? Fonte: Como conquistar o consumidor em tempos de imediatismo?
  • 9. E nesta experiência, também se deve atender as expectativas do consumidor. E QUAL A IMPORTÂNCIA DESTES DADOS? Fonte: Como conquistar o consumidor em tempos de imediatismo?
  • 10. De olho em toda esta mudança de comportamento, a Google, além de impulsionar e incentivar esta transição com inúmeras diretrizes, a partir de Julho de 2018, atualizará seu algoritmo levando em consideração o tempo de carregamento das páginas mobile como fator de rankeamento. GOOGLE SPEED UPDATE & MOBILE FIRST INDEX Fonte: Conversion "COMO O PRÓPRIO NOME SUGERE, O MOBILE FIRST INDEX MUDARÁ A FORMA DE O GOOGLE INDEXAR AS PÁGINAS E TAMBÉM DE CLASSIFICAR OS RESULTADOS. HOJE, AS PÁGINAS SÃO INDEXADAS PRIMEIRO E AVALIADAS PELA SUA VERSÃO DESKTOP – AINDA QUE, NOS RESULTADOS DE BUSCAS FEITAS EM CELULAR, SEJA EXIBIDA A VERSÃO MOBILE DA PÁGINA. (...) QUANDO ESSA ATUALIZAÇÃO FOR IMPLEMENTADA, OS CRITÉRIOS DE RANKEAMENTO SERÃO CONSIDERADOS O DO SITE MOBILE OU A VERSÃO RESPONSIVA EXIBIDA NOS DISPOSITIVOS MÓVEIS“ MOBILE FIRST INDEX
  • 11. RECAPITULANDO… Vimos, portanto, que: ▪ Hoje em dia, ter um site Mobile é imprescindível. Entretanto, apenas ter um site mobile não quer dizer que evitará potenciais problemas; ▪ Mobiles estão se tornando cada vez mais, a fonte primária e principal de consumo de conteúdo e também de compras; ▪ Google tem dado muita, mas muita importância para garantir boas experiências ao consumidor através dos dispositivos móveis.
  • 13. Para um melhor entendimento deste guia é necessários elucidar sobre alguns conceitos técnicos, vamos a eles! CONCEITOS IMPORTANTES Accelerated Mobile Pages (AMP): é uma biblioteca de código aberto que fornece uma maneira de criar páginas atraentes, suaves e que são carregadas quase que instantaneamente. Content Delivery Network (CDN): é uma rede de servidores que armazenam réplicas do conteúdo de outros sites na memória (cache) e depois os entrega aos visitantes, baseando-se na localização geográfica para conectá-los ao servidor mais próximo e mais rápido, reduzindo o tempo de transferência dos dados (latência). Critical Render Path (CRP): conjunto de passos que os navegadores devem seguir para converter HTML, CSS e JavaScript em sites cheios de vida. CSS Object Model (CSSOM): é uma espécie de mapa dos estilos CSS de uma página Web. É vital para a renderização de uma página e é combinado com o DOM para que os navegadores a exibam. Document Object Model (DOM): é uma API de programação para documentos HTML e XML. Ele define a estrutura lógica dos documentos e a forma como um documento é acessado e manipulado. DOMContentLoaded (DCL): é um evento que geralmente marca que o DOM e CSSOM estão prontos, o que significa que a árvore de renderização pode ser criada. First Contentful Paint (FCP): reporta o momento em que o navegador processa qualquer texto, imagem (incluindo os planos de fundo), SVG ou tela não-branca. Também está incluso as webfonts pendentes. É o momento que os usuários podem começar a consumir o conteúdo da página. First Meaningful Paint (FMP): é o momento em que o conteúdo principal da página é exibido. Quanto menor a pontuação do FMP, mais rapidamente a página aparecerá a exibir seu conteúdo principal. First Paint (FP): informa o momento em que o navegador renderizou pela primeira vez após a navegação. Navigation Start: é o ponto de partida real de uma página carregada iniciada por um usuário clicando em um link ou tomando outra ação de navegação.
  • 14. Para um melhor entendimento deste guia é necessários elucidar sobre alguns conceitos técnicos, vamos a eles! CONCEITOS IMPORTANTES Progressive Web App (PWA): são experiências que combinam o melhor da Web e o melhor dos aplicativos. Eles são úteis para os usuários desde a primeira visita em uma guia de navegador sem exigir instalações. Conforme o usuário desenvolve uma relação com o aplicativo ao longo do tempo, ele se torna cada vez mais eficaz. Ele é carregado com rapidez, mesmo em redes instáveis, envia notificações push relevantes, tem um ícone na tela inicial e é carregado como uma experiência de tela inteira de alto nível. Push, Render, Pre-cache, Lazy-load (PRPL): é um padrão para a estruturação e atendimento de PWAs, com ênfase no desempenho da entrega e lançamento de aplicativos. Response, Animation, Idle, Load (RAIL): é um modelo de desempenho centrado no usuário que divide a experiência do usuário em ações-chave. Os objetivos e diretrizes da RAIL visam ajudar os desenvolvedores e designers a garantir uma boa experiência de usuário para cada uma dessas ações. Responsive Design: responde às necessidades dos usuários e dos dispositivos que eles estão usando, no qual o layout muda conforme o tamanho e capacidades do dispositivo. Time To First Byte (TTFB): representa a quantidade de tempo que os navegadores aguardam para receber o primeiro “pedaço” de informação de um servidor web após tê-lo requisitado. Time To First Paint (TTFP): indica o tempo desde o momento em que o usuário insere um URL na barra de endereço até o navegador pintar os primeiros pixels na tela. Em outras palavras, o tempo que os usuários observam a tela em branco antes que qualquer coisa apareça.. Time To Interactive (TTI): é definido como o ponto em que o layout se estabilizou, os Webfonts são visíveis e o segmento principal está disponível o suficiente para lidar com a interação do usuário. Viewport: é a área onde seu website aparece. É a área branca da janela quando você abre o browser.
  • 16. É um modelo de performance centrado no usuário que visa, através de suas metas e diretrizes, ajudar os desenvolvedores e designers a garantir a melhor experiência para cada um dos quatro aspectos de seu modelo. O MODELO RAIL Fonte: RAIL I. Foco no usuário. II. Responder o comando do usuário em menos de 100 ms. III. Durante animação ou rolagem, produzir um quadro em menos de 10 ms. IV. Maximizar o tempo de ociosidade do encadeamento principal. V. Manter os usuários envolvidos, fornecer conteúdo interativo em menos de 1000 ms. Metas (Goals): são as principais métricas de desempenho relacionadas à experiência do usuário. Uma vez que a percepção humana é relativamente constante, é improvável que esses objetivos mudem em breve. Diretrizes (Guidelines): são as recomendações que o ajudam a atingir metas. Estes podem ser específicos das atuais condições de conexão de hardware e rede e, portanto, podem mudar ao longo do tempo.
  • 17. Para avaliar o site baseado neste modelo, recomenda-se as ferramentas: Chrome DevTools, Lighthouse, WebPageTest. Fonte: RAIL Etapa do RAIL Métrica Ações do usuário Resposta Latência da interação (do toque à gravação) de menos de 100 ms. O usuário toca em um botão (por exemplo, abre o navegador). Animação O trabalho de cada quadro (do JS à gravação) é concluído em menos de 16ms. O usuário rola a página, arrasta o dedo (para abrir um menu, por exemplo) ou vê uma animação. Ao arrastar, a resposta do aplicativo é vinculada à posição do dedo, como puxar para atualizar ou arrastar um carrossel. Essa métrica se aplica somente à fase contínua de arrastos, não ao início. Ociosidade Trabalho de JS do encadeamento principal dividido em partes não superiores a 50 ms. O usuário não está interagindo com a página, mas o encadeamento principal deve estar suficientemente disponível para lidar com a próxima interação do usuário. Carregamento Página considerada pronta para uso em 1000 ms. O usuário carrega a página e vê o conteúdo do caminho crítico. COMO MENSURAR O RAIL?
  • 18. Para boas experiências em Mobile, tempo de carregamento e tamanho dos arquivos são pontos bem importantes. Vejamos as melhores práticas na construção de experiências Mobile First. DIRETRIZES GLOBAIS - GOOGLE Fonte: Find out how you stack up to new industry benchmarks for mobile page speed Average Speed Index Quão rápido uma página mobile apresenta seu conteúdo aos consumidores (Quanto menor, melhor). Recomendação: Abaixo de 3s Average Time to First Byte Quanto tempo o Navegador tem que esperar até receber o primeiro byte de dados do servidor (Quanto menor, melhor). Recomendação: Abaixo de 1,3s Average Request Count Número de “pedaços” de conteúdos que são necessários para apresentar toda a página (Quanto menor, melhor). Recomendação: Menos que 50 Average Page Weight Bytes Tamanho total de uma página mobile, medida em bytes (Quanto menor, melhor). Recomendação: Menos que 500KB
  • 19. Corresponde ao tempo médio em que as partes visíveis da página são exibidas. É expresso em milissegundos e depende do tamanho do View Port. Bom indicador para comparação nos ganhos de performance e entre concorrentes. Para um melhor entendimento, deve ser mensurado com métricas como Load Time, Start Render, etc.) Quanto menor for o Speed Index, mais rápido o website estará performando. Na ferramenta WebPageTest, que criaram este índice, corresponde a um sistema de pontuação que avalia uma série de outras métricas. Já na ferramenta Google Lighthouse, esta métrica é pautada no conceito Perceptual Speed index, que está mais relacionada à perspectiva do usuário. Refere-se ao número de chamadas que um site faz ao servidor para recuperar os pedaços de conteúdos necessários para exibir completamente uma página. Quanto mais Requests, tanto maior o tempo de carregamento do site. Reduza o número de solicitações que precisam ser enviadas de ida e volta e será possível reduzir significativamente o tempo médio de carregamento da página. O TTFB diz respeito à medida da capacidade de resposta de um servidor web, ou seja, quanto tempo que leva para que o navegador comece a receber informações depois de solicitado ao servidor. Composto de 3 componentes separados: ▪ O tempo necessário para enviar o pedido HTTP ▪ O tempo necessário para que o servidor processe o pedido ▪ O tempo necessário para que o servidor envie o primeiro byte da resposta ao cliente Corresponde ao tamanho total, em bytes, de uma página. Com relação a este ponto, é necessário buscar o equilíbrio entre performance e percepção, uma vez que, muitas vezes, alcançar o ideal proposto pelo Google de menos de 500KB será algo um tanto quanto complexo, tendo em vista que este tamanho tem crescido em média 16% ano a ano. AVERAGE PAGE INDEX AVERAGE REQUEST COUNT AVERAGE TIME TO FIRST BYTE AVERAGE PAGE WEIGHT BYTES DIRETRIZES GLOBAIS - GOOGLE Em linhas gerais, vejamos o que correspondem cada um e, posteriormente, algumas recomendações de otimização.
  • 20. Cada métrica de carregamento representa uma fase diferente da percepção do usuário sobre a experiência de carregamento. Portanto, o ideal seria entregar o conteúdo e torna-lo interativo em menos de 5 segundos. Fonte: RAIL, First Meaningful Paint, First Interactive, Time to Interactive DIRETRIZES GLOBAIS - GOOGLE
  • 21. 2 VERTENTES A TRABALHAR OTIMIZAÇÃO DA EFICIÊNCIA DE CONTEÚDO OTIMIZAÇÃO DO CAMINHO CRÍTICO DE RENDERIZAÇÃO
  • 22. 2 VERTENTES A TRABALHAR OTIMIZAÇÃO DA EFICIÊNCIA DE CONTEÚDO OTIMIZAÇÃO DO CAMINHO CRÍTICO DE RENDERIZAÇÃO
  • 23. Ao passo que a Web vai avançando em termos de tecnologias e funcionalidades, proporcionalmente a quantidade de dados a serem baixadas também aumentam. Logo, para oferecer um desempenho ideal, é necessário otimizar a entrega de todos bytes. OTIMIZAR EFICIÊNCIA DO CONTEÚDO Fontes: Speed Index WebPageTest, Speed Index Keycdn O QUE FAZER PARA MELHORAR? Eliminar Downloads Desnecessários Compressão de Dados Otimização de Imagens Otimização de inicialização do JavaScript Carregando o JavaScript de terceiros Otimização de fontes da web Cache de HTTP Clique nos itens a seguir para navegar entre os slides
  • 24. ELIMINAR DOWNLOADS DESNECESSÁRIOS Fonte: Eliminando downloads desnecessários É necessário eliminar os recursos que são desnecessários ou que, pior, prejudicam o desempenho da página sem entregar muito valor ao consumidor ou ao site em que está hospedado. Isto vale para recursos widgets próprios e de terceiros, portanto, perguntas como estas são sempre excelentes opções a levantar: ▪ Esse recurso precisa ou tem um SLA? Esse recurso segue as práticas recomendadas de desempenho: compressão, armazenamento em cache e assim por diante? ▪ O site B decidiu instalar um widget de terceiros para exibir conteúdo relacionado, aprimorar a interação social ou fornecer algum outro serviço. Pergunta: Você rastreou quantos visitantes usam o widget ou clicam no conteúdo fornecido pelo widget? O engajamento que este widget gera é suficiente para justificar a sua sobrecarga? O QUE FAZER PARA MELHORAR? I. Faça um inventário de todos os ativos próprios e de terceiros em suas páginas. II. Meça o desempenho de cada ativo: seu valor e seu desempenho técnico. III. Determine se os recursos fornecem valor suficiente.
  • 25. COMPRESSÃO DE DADOS Fonte: Introdução à Compressão de Dados A Compressão de Dados nada mais é que o processo de codificar informações usando menos bits, ou seja, uma redução do tamanho dos dados, que podem ser recursos de texto, imagem, vídeo, fontes... E para isso, existem diversas técnicas e algoritmos de compressão diferentes que podem ser aplicadas em conjunto para um melhor desempenho: ▪ Ferramentas Genéricas que podem ser ativadas no servidor (i.e.: GZIP) ▪ Otimizações de Pré-processamento para tipos de conteúdo específicos (i.e.: remoção de caracteres desnecessários no HTML, CSS, Javascript) ▪ Otimizações específicas de recursos que exigem um desenvolvedor O QUE FAZER PARA MELHORAR? I. Criar um inventário dos diferentes tipos de conteúdo. II. Considerar quais tipos de otimizações específicas podem ser aplicadas a esses tipos de conteúdo para reduzir seu tamanho. III. Automatizar essas otimizações por meio do processo de desenvolvimento das páginas. ▪ É um compressor genérico que pode ser aplicado a qualquer fluxo de bytes. ▪ Tem melhor desempenho em ativos baseados em texto: CSS, JavaScript e HTML ▪ Para uma melhor economia, combine arquivos Minimizados com GZIP ▪ Todos os navegadores modernos são compatíveis com a compressão GZIP e a solicitam automaticamente GZIP
  • 26. OTIMIZAÇÃO DE IMAGENS Fonte: Otimização de Imagens Frequentemente, as imagens são as maiores responsáveis pela quantidade de bytes baixados em uma página. Entretanto, quando se fala de otimização de imagens, é necessário uma análise cuidadosa de diversos fatores, como recursos do formato, conteúdo dos dados codificados, qualidade e dimensões em pixels..., para garantir as configurações ideais a serem aplicadas. Logo, não há uma resposta definitiva sobre qual a melhor forma de comprimir uma imagem individualmente, é necessário olhar caso a caso. Otimização de imagem: escolha o formato certo, comprima cuidadosamente e priorize imagens críticas sobre as que podem ser carregadas.
  • 27. ELIMINAR E SUBSTITUIR IMAGENS Fonte: Eliminando downloads desnecessários Um bom design proporciona o melhor desempenho. Neste ponto é necessário encontrar um equilíbrio entre comunicação e otimização, questionando-se: “Esta imagem é realmente necessária para alcançar o efeito que desejo?”. Como falado anteriormente, as imagens consomem muitos bytes em comparação ao HTML, CSS, JavaScript e outros ativos na página, logo, a decisão de eliminar este recurso substituindo por outras alternativas será sempre a melhor otimização. O QUE FAZER PARA MELHORAR? I. Efeitos CSS e animações CSS para reproduzir sombras, gradientes e etc., uma vez que por meio destes garante-se nitidez em qualquer resolução e níveis de zoom. I. Fontes da Web preservam a capacidade de selecionar, pesquisar, e redimensionar o texto, além da possibilidade do uso de fontes elegantes. I. Texto em imagens: além de oferecer uma experiência de baixa qualidade, o texto não é selecionável, pesquisável, redimensionável, acessível.
  • 28. IMAGENS VETORIAIS (SVG) Fontes: Otimização de Imagens, Vector Graphics, Compressão de Imagens São formatos ideais para imagens em formatos geométricos simples (i.e.: logotipos, textos, ícones, etc.) e oferecem resultados nítidos independente das configurações de resolução e zoom. É um formato muito adequado para telas e ativos de alta resolução que precisam ser exibidos em diversos tamanhos. Entretanto, quando se trata de imagens complexas, como fotografias, a opção SVG deixa a desejar, sendo mais recomendável o uso de imagens raster (GIF, JPEG, PNG..). Imagem vetorial com zoom aproximado O QUE FAZER PARA MELHORAR? I. Por ser um formato de imagem baseado em XML, pode-se incorporar a marcação SVG diretamente na página ou como um recurso externo; I. Os arquivos SVG devem ser minimizados para reduzir seu tamanho; I. Os arquivos SVG devem ser compactados com GZIP.Imagem raster com zoom aproximado Ferramenta Recomendada: SVGO
  • 29. IMAGENS RASTER (GIF, JPEG, PNG…) Fontes: Otimização de Imagens, Raster Graphics, Codificações Delta, Compressão de Imagens Estes formatos são dependentes da resolução, no qual não podem escalar até uma resolução arbitrária sem perda de qualidade, causando os serrilhados e borrados. Portanto, uma boa prática é fornecer e otimizar diversas variantes (em resoluções) de cada imagem para oferecer a experiência ideal aos consumidores. I. Não existe um único formato melhor ou única “configuração de qualidade” para todas as imagens. Cada combinação de um compressor e um conteúdo de imagem específicos gera uma saída única. I. Um fluxo normal de Otimização de Imagens consiste em duas etapas resumidas: I. Eliminação de alguns dados dos pixels pelo processamento de imagem com filtro com perda (Lossy) II. Compressão dos dados dos pixels pelo processamento de imagem com filtro sem perda (Lossless) PNG: 32 bits (16 milhões de cores) PNG: 7 bits (128 cores) PNG: 5 bits (32 cores) EXEMPLO DICAS PRÁTICAS 1. A configuração de Otimização de Imagem dependerá dos seus critérios entre o tamanho de arquivo e artefatos introduzidos pela compressão com perda. 2. Níveis de qualidade da imagem são diferentes para os diferentes tipos de formatos e até mesmo para o mesmo formato.
  • 30. ESCOLHENDO O FORMATO DE IMAGEM CORRETO Fontes: Otimização de Imagens, Raster Graphics, Codificações Delta, Compressão de Imagens Formato Transparência Animação Navegador GIF Sim Sim Todos PNG Sim Não Todos JPEG Não Não Todos JPEG XR Sim Sim IE WebP Sim Sim Chrome, Opera, Android GIF, PNG E JPEG são, por enquanto, os únicos formatos de imagem universais – que funcionam em todos os navegadores. Além destes, existem os formatos mais recentes JPEG XR e WebP que oferecem uma melhor compressão geral e mais recursos e que valem ser experimentados. 1. Precisa de animação? 2. Precisa preservar os detalhes e com alta resolução? GIF 3. Precisa de uma paleta de cores maior que 256? JPEG PNG-8 PNG-24 Experimente várias configurações de qualidade Sim Sim Sim Não Não Não COMO ESCOLHER? Adaptação do esquema fornecido pelo Google FORMATOS DE IMAGEM
  • 31. FORMATOS JPEG XR E WEBP Fonte: Otimização de Imagens, JPEGXR, JPEGXR Wikipedia, WebP Google Como vistos anteriormente, são formatos usados por apenas alguns navegadores. Entretanto, podem oferecer economias consideráveis para consumidores mais recentes, podendo oferecer, através do WebP i.e., uma redução de 30% no tamanho do arquivo em relação a uma imagem JPEG comparável. ▪ Fornece a mesma qualidade de arquivos PNG, JPG com tamanhos reduzidos; ▪ Formato único de extensão, podendo ser criadas animações GIFs, imagens com transparência como PNG, usar qualidade relativamente superior à um JPG; ▪ Por enquanto, WebP é suportado nativamente nos navegadores Opera e Chrome. Lista completa de suporte. ▪ Combina os benefícios da qualidade de imagem otimizada e da eficiência de compressão; ▪ A principal aplicação pretendida do JPEG XR é a representação de imagens estáticas de tons contínuos, como imagens fotográficas; ▪ Lista completa de suporte. O QUE FAZER PARA MELHORAR? Será necessário acrescentar lógica ao aplicativo ou aos servidores para servir o recurso adequado: I. Algumas CDNs fornecem otimização de imagens como serviço, incluindo fornecimento de JPEG XR e WebP. II. Adicionar lógica ao aplicativo para detectar o cliente, verificar os formatos compatíveis e servir o melhor formato de imagem disponível. III. Algumas ferramentas de código aberto (por exemplo, PageSpeed para Apache ou Nginx) automatizam a otimização, a conversão e o envio de ativos adequados.
  • 32. DIMENSIONAMENTO CORRETO DE IMAGENS Fonte: Otimização de Imagens, JPEGXR, JPEGXR Wikipedia, WebP Google Muitas vezes, as páginas enviam ativos de imagem maiores que o tamanho necessário, dependendo do navegador para redimensioná-las, o que acaba aumentando o tempo de renderização das mesmas. O QUE FAZER PARA MELHORAR? I. Garantir que o número de pixels desnecessários seja mínimo e que seus ativos grandes sejam fornecidos com o tamanho mais próximo possível ao tamanho de exibição. O tamanho de arquivo da imagem é simplesmente o número total de pixels multiplicado pelo número de bytes usados para codificar cada pixel. Resolução da tela Tamanho natural Tamanho de exibição (pixels do CSS) Pixels desnecessários 1x 110x110 100x100 110 x 110 - 100 x 100 = 2.100 1x 410x410 400x400 410 x 410 - 400 x 400 = 8.100 2x 820x820 400x400 820 x 820 - (2 x 400) x (2 x 400) = 32.400 2x 1620x1620 800x800 1.620 x 1.620 - (2 x 800) x (2 x 800) = 64.400 Perceba a quantidade de pixels desnecessários com o incremento da resolução da tela, gerando uma sobrecarga enviada aos navegadores.
  • 33. PERCEIVED PERFORMANCE Fonte: Otimização de Imagens, Automatização de Otimização de Imagens, Avoid the Spinner, Perceived Performance Este conceito está relacionado à percepção do desempenho da página na perspectiva do consumidor e não nas ferramentas de testes de velocidade: “Com que rapidez a aparência do seu site aparenta carregar?” LAZY LOAD BENEFÍCIOS ▪ Consumo reduzido de Dados: somente os recursos mínimos necessários são carregados na página; ▪ Redução do Consumo de Bateria: menos carga de trabalho ao navegador do consumidor; ▪ Velocidade de Download Aprimorada: aumento considerável no carregamento do site, uma vez que o carregamento das imagens serão de acordo com a necessidade do consumidor. RECOMENDAÇÕES ▪ Evitar imagens Lazy Load “Acima da Dobra”: podem causar a percepção de demora no carregamento da página; ▪ Tomar cuidado com o Lazy Load ao rolar a página: se você esperar até o usuário se deslocar, é provável que eles vejam os marcadores de posição e, eventualmente, podem obter imagens, caso ainda não passaram por eles. ▪ Evite usar o indicador de Carregamento : causam a sensação de carregamento lento. É um padrão de performance da Web que atrasa o carregamento de imagens no navegador até o usuário precisar vê-lo. As imagens “acima da dobra” ou quando a página aparece pela primeira vez, são carregadas imediatamente. As que se seguem “abaixo da dobra”, não têm necessidade de visibilidade, podendo ser carregadas mediante o deslizamento do consumidor no decorrer da página. Ferramenta Recomendada: Lazysizes
  • 34. JPEGs PROGRESSIVOS Enquanto os JPEGs por padrão carregam de cima para baixo, os JPEGs Progressivos carregam da baixa qualidade (embaçado) refinando-a para alta qualidade, causando assim uma percepção de que a imagem está sendo carregada mais rapidamente, principalmente em conexões 3G. Fonte: Automatizando a Otimização de Imagens, How Medium does progressive image loading Carregamento de JPEG Básica Carregamento de JPEG Progressivo Carregamento de JPEG Progressivo (Medium) OBSERVAÇÃO Nem sempre os JPEG Progressivos serão mais leves e vantajosos, tudo sempre dependerá de testes para encontrar o equilíbrio certo de tamanho de arquivo, latência de rede e uso de ciclos de CPU.
  • 35. GIFS ANIMADOS vs. VIDEO GIFs muitas vezes desperdiçam uma significativa largura de banda, demoram mais para carregar, além de serem limitados a uma paleta de 256 cores – causando uma qualidade degradada na imagem. É possível entregar conteúdos de maior qualidade e mais otimizados através dos formatos H.264 e WebM. Fonte: Automatizando a Otimização de Imagens, H.264 Wikipedia, WebM O WebM é um formato de arquivo de mídia aberto, livre de royalties, projetado para a web. Formato mais comum de gravação, compressão e distribuição de conteúdos em vídeo O QUE FAZER PARA MELHORAR? I. Se for possível mudar os GIFs para Vídeos, usar ferramentas/técnicas como ffmpeg e ImageOptim API para conversão e otimização. II. Se tiver que utilizar GIF, utilize ferramentas/técnicas que o otimize, tais como Giflossy e Gifify. Para GIFs não animados, converta-os em outro formato de imagem.
  • 36. AUTOMATIZANDO A OTIMIZAÇÃO DE IMAGENS Fonte: Automatizando a Otimização de Imagens Existem inúmeras ferramentas automatizadas e infraestrutura que asseguram que os ativos de imagens estejam sempre otimizados. Ferramenta/Técnica Descrição Tipo WebP codec package Permite fazer um preview de imagens WebP em Windows no File Explorer e Windows Photo Viewer - imagemin Automatize o processo de otimização de imagens Automatização da Compressão de Imagens libvps Automatize o processo de otimização de imagens Automatização da Compressão de Imagens Akamai CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens Cloudinary CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens Imgix CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens Fastly's Image Optimizer CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens Instart Logic's SmartVision CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens ImageOptim API CDN que fornece solução de automatização de otimização de imagens Automatização da Compressão de Imagens Imageflow Solução open-source para automatização da otimização de imagens no próprio servidor Automatização da Compressão de Imagens Thumbor Solução open-source para automatização da otimização de imagens no próprio servidor Automatização da Compressão de Imagens gifsicle Crie e otimize imagens GIF Compressão de Imagem jpegtran Otimização de imagens JPEG Compressão de Imagem optipng Otimização PNG sem perda Compressão de Imagem pngquant Otimização PNG com perda Compressão de Imagem MozJPEG Otimização de imagens JPEG Compressão de Imagem SVGO Otimização de imagens Vetoriais Compressão de Imagem Giflossy Otimização de GIFs Compressão de Imagem
  • 37. AUTOMATIZANDO A OTIMIZAÇÃO DE IMAGENS Fonte: Automatizando a Otimização de Imagens Existem inúmeras ferramentas automatizadas e infraestrutura que asseguram que os ativos de imagens estejam sempre otimizados. Ferramenta/Técnica Descrição Tipo VerEXIF Remove informações EXIF adicionadas pelas câmeras digitais e editores Compressão de Imagem Imagemin Minimifica imagens Compressão de Imagem cwebp Converte imagens em WebP Compressão de Imagem Android Studio Converte ou crie imagens em WebP Compressão de Imagem Quick Look plugin for WebP Crie e otimize imagens em WebP para Mac Compressão de Imagem ffmpeg Converte GIFs animados (ou arquivos) em H.264 MP4s Compressão de Imagem LazySizes Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens Lazy Load XT Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens BLazy.js Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens Unveil Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens yall.js (Yet Another Lazy Loader) Otimização de imagens usando técnica Lazy Load Otimização de Performance de Imagens WebM Criação de animações em vídeos mais leves que GIFs Otimização de Videos H.264 Criação de animações em vídeos mais leves que GIFs Otimização de Videos
  • 38. OTIMIZAÇÃO DE INICIALIZAÇÃO DO JAVASCRIPT Fonte: Otimização de inicialização do JavaScript, Desempenho de inicialização do JavaScript, Solving the Web Performance Crisis Javascript gasta tempo significativo para Analisar (Parse), Compilar (Compile) e Executar durante a inicialização, o que resulta em um atraso com relação a possibilidade de interação do consumidor com a página. E este tempo gasto pode chegar de 2-5x mais em smartphones em relação ao desktop. O QUE FAZER PARA MELHORAR? I. Enviar menos Javascript: remoção de JavaScript não crítico de suas páginas pode reduzir os tempos de transmissão, análise e compilação intensivas de CPU e capacidade de memória potencial. Isso também ajuda a tornar suas páginas interativas mais rápidas. I. Use o code-splitting para enviar apenas o código que um consumidor precisa para uma rota e aplique Lazy Load no resto. Recomenda-se o padrão PRPL (Push, Render, Pre-Cache, Lazy Load) CONTEÚDO COMPLEMENTAR Chrome Dev Summit 2017 - Modern Loading Best Practices JavaScript Start-up Performance Solving the web performance crisis Can you afford it? Real-world performance budgets Evaluating web frameworks and libraries Performance Futures
  • 39. JAVASCRIPT DE TERCEIROS Fonte: Carregando o JavaScript de Terceiros, Things to Know (and Potential Dangers) with Third-Party Scripts Scripts de terceiros (anúncios, analytics, botões de compartilhamento, rastreadores, etc.) permitem uma séria de funcionalidades úteis, tornando a web mais dinâmica, interativa e interconectada. Entretanto, muitas vezes, apresentam muitos riscos na performance e que precisam ser levados em consideração para minimizar seu impacto, uma vez que estes recursos estão fora do nosso controle. POR QUE VOCÊ PRECISA TER CUIDADO COM SCRIPTS DE TERCEIROS? Podem ser uma preocupação de desempenho Podem ser uma questão de privacidade Podem ser uma preocupação de segurança Podem ser imprevisíveis e mudar sem que você saiba Podem ter consequências não intencionais O ideal é garantir que estes scripts não estejam afetando o caminho de renderização crítico Utilize ferramentas como WebPageTest, Chrome DevTools e PageSpe ed Insights para identificar a quantidade destes scripts e que demoram mais para carregar, além de receber orientações no tocante à otimização.
  • 40. JAVASCRIPT DE TERCEIROS Fonte: Carregando o JavaScript de Terceiros, Things to Know (and Potential Dangers) with Third-Party Scripts A resolução para este ponto dependerá do contexto do site e da capacidade de configurar como os códigos de terceiros estão sendo carregados. E ao identificar aqueles que mais atrasam o desempenho, recomenda- se um teste A/B para equilibrar o valor percebido em relação ao seu impacto no engajamento do consumidor ou métricas de desempenho. E a partir disso, questionar a real necessidade do mesmo. O QUE FAZER PARA MELHORAR? I. Carregar o script usando os atributos async ou defer para evitar o bloqueio da análise dos documentos; II. Considerar a auto hospedagem do script, caso os servidores de terceiros for lento; III. Considerar a remoção do script, caso este não gere um valor claro ao site; IV. Considerar o uso de Resources Hints como <link rel=preconnect>ou <link rel=dns- prefetch>para realizar uma pesquisa de DNS para domínios que hospedam scripts de terceiros; V. Considerar o carregamento dos recursos de terceiros com Lazy Load; VI. Buscar evitar document.write (); VII. Utilizar Gerenciadores de Tags com sabedoria: embora eles auxiliam na minimização da sobrecarga, também não impedem que sejam adicionadas tags dispendiosas por parte de qualquer pessoa que tenha credencial para gerenciar. VIII. Evitar scripts que poluam o escopo global
  • 41. OTIMIZAÇÃO DE FONTES DA WEB Fonte: Otimização de Fontes da Web, Web Fonts Performance São fontes que não estão instaladas no computador do consumidor, mas sim carregadas a partir de um servidor na web, baixados usando a declaração @font-face do CSS3 e que devem ser suportados pelo navegador web. ▪ Uma implementação simplista pode gerar downloads grandes e demoras desnecessárias. É necessário ajudar o navegador, otimizando os próprios ativos de fonte e a forma como são recuperados e usados nas páginas; ▪ Minimize o número de variantes usadas: com um uso controlado e monitorado das fontes, é possível produzir uma experiência mais consistente e rápida; ▪ Crie um subconjunto dos recursos de fontes: de acordo com o script (i.e.: latino, grego, etc.) , fornecendo apenas os glifos necessários para uma determinada página. Isso reduz o tamanho do arquivo e aumenta a velocidade do download do recurso. ▪ Forneça formatos de fonte otimizados para cada navegador: cada fonte deve ser fornecida nos formatos WOFF2, WOFF, EOT e TTF. Não deixe de aplicar a compressão GZIP aos formatos EOT e TTF, pois eles não são comprimidos por padrão. ▪ Use a Font Loading API para otimizar o caminho crítico de renderização: permite modificar o comportamento padrão de lazyload, que retarda a renderização do texto, para determinadas fontes e especificar estratégias personalizadas de renderização e tempo limite para conteúdos diferentes na página. ▪ Especifique políticas de revalidação e de armazenamento em cache ideal: as fontes são recursos estáticos, raramente atualizados. Verifique se os servidores fornecem uma marcação de data e hora de max-age longo e um token de revalidação para possibilitar a reutilização eficiente de fontes entre páginas distintas. O QUE FAZER PARA MELHORAR?
  • 42. CACHE DE HTTP Fonte: Cache HTTP, HTTP Cache Headers – A Complete Guide Diz respeito à capacidade de armazenar em cache e reutilizar recursos recuperados, melhorando assim, a performance entre as respostas de cliente e servidor. I. URLs Consistentes: se você servir o mesmo conteúdo em URLs diferentes, esse conteúdo será recuperado e armazenado várias vezes; I. Certifique-se de que o servidor fornece um token de validação (ETag): os tokens de validação eliminam a necessidade de transferir os mesmos bytes quando um recurso não foi alterado no servidor; I. Identifique quais recursos podem ser armazenados em cache por intermediários: os recursos com respostas idênticas para todos os usuários são ótimos candidatos para armazenamento em cache por uma CDN ou por outros intermediários; I. Determine o ciclo de vida ideal do cache para cada recurso: recursos diferentes podem ter requisitos de atualização diferentes. Examine e determine o max-age adequado para cada um; I. Mais informações: Cache HTTP, HTTP Cache Headers – A Complete Guide O QUE FAZER PARA MELHORAR?
  • 43. 2 VERTENTES A TRABALHAR OTIMIZAÇÃO DA EFICIÊNCIA DE CONTEÚDO OTIMIZAÇÃO DO CAMINHO CRÍTICO DE RENDERIZAÇÃO
  • 44. O CRP é o conjunto de passos que os navegadores devem seguir para converter HTML, CSS e JavaScript em páginas elegantes. E a otimização diz respeito à capacidade de reduzir consideravelmente o tempo da primeira renderização das páginas, priorizando a exibição do conteúdo relacionado à ação atual do usuário. OTIMIZAR O CAMINHO CRÍTICO DE RENDERIZAÇÃO Fontes: Critical rendering Path Esta otimização permite renderizar conteúdo na tela o mais cedo possível, além de reduzir o tempo entre as atualizações da tela após a renderização inicial, ou seja, atingir uma taxa de atualização mais alta para conteúdo interativo.
  • 45. E para obter a maior rapidez possível na primeira renderização, é necessário minimizar 3 variáveis: OTIMIZAR O CAMINHO CRÍTICO DE RENDERIZAÇÃO Fontes: Critical rendering Path, Otimizando o Caminho Crítico de Renderização I. Número de Recursos Críticos: onde um recurso crítico é aquele que pode bloquear a renderização inicial da página. Quanto menos desses recursos houver, menor será o trabalho do navegador, do CPU e de outros componentes. I. Tamanho do Caminho Crítico: número de ida e volta, ou o tempo total necessário para buscar todos os recursos críticos. I. Número de Bytes Críticos: quanto menos o navegador precisar baixar, mais rápido poderá processar o conteúdo e renderizá-lo na tela. Para reduzir o número de bytes, podemos diminuir o número de recursos (eliminá-los ou torná-los não críticos) e assegurar a redução do tamanho da transferência compactando e otimizando cada recurso. número de recursos, bytes e tamanho Analisar e caracterizar o caminho crítico eliminá-los, adiar o download, marcá-los como assíncronos etc Minimizar o número de recursos críticos para reduzir o tempo de download (número de idas e voltas) Otimizar o número de bytes críticos baixar todos os ativos críticos o quanto antes para reduzir o tamanho do caminho crítico Otimizar a ordem de carregamento dos recursos críticos restantes SEQUÊNCIA GERAL DE ETAPAS DE OTIMIZAÇÃO
  • 46. Por padrão, os recursos do JavaScript bloqueiam o analisador – parser blocking -, o que acarreta em uma espera forçada por parte do navegador pelo CSSOM e a suspenção da construção do DOM, retardando consideravelmente a primeira renderização. OTIMIZAÇÃO DE JAVASCRIPT O QUE FAZER PARA MELHORAR? Evitar JavaScript de Longa Duração Dar preferência a recursos JavaScript Assíncronos Evitar chamadas Síncronas ao Servidor Adiar a Análise do JavaScript Fontes: Critical rendering Path, Contruindo o Modelo de Objeto, Desempenho de Renderização
  • 47. CSS é tratado como um recurso bloqueador de renderização, o que significa que o navegador não renderiza nenhum conteúdo processado até que o CSSOM seja construído. Portanto, é preciso manter o CSS enxuto, entregá-lo o mais rápido possível e usar tipos e consultas de mídia para desbloquear a renderização. OTIMIZAÇÃO DE CSS O QUE FAZER PARA MELHORAR? Colocar o CSS no cabeçalho do documento Evitar importações de CSS CSS em linha bloqueador de renderização CSSFontes: Critical rendering Path, Contruindo o Modelo de Objeto, Desempenho de Renderização
  • 48.
  • 49. Os principais objetivos do HTTP/2 são a redução da latência com a multiplexação completa de solicitação e resposta, a minimização da carga do protocolo com a compressão eficiente dos campos do cabeçalho HTTP e a adição de suporte a priorização de solicitações e envio push de servidor. HTTP/2 E PERFORMANCE Fontes: HTTP/2, HTTP/2 Wikipedia ▪ Multiplexação e simultaneidade: várias solicitações podem ser enviadas em rápida sucessão na mesma conexão TCP e as respostas podem ser recebidas fora de ordem - eliminando a necessidade de várias conexões entre o cliente e o servidor; ▪ Dependências de fluxo: o cliente pode indicar ao servidor quais recursos são mais importantes do que os outros; ▪ Compressão de cabeçalho: o tamanho do cabeçalho HTTP é drasticamente reduzido; ▪ Push do servidor: o servidor pode enviar recursos que o cliente ainda não solicitou. Teste a diferença nesta simulação
  • 51. Para um melhor diagnóstico e recomendações de melhorias, existem no mercado inúmeras ferramentas. Recomenda-se o uso das seguintes (basta clicar na imagem para acessar): CAIXA DE FERRAMENTAS
  • 52. Essa ferramenta do Google permite fazer um comparativo na performance de seu site em conexões 3G/4G com a da concorrência. Além de fornecer uma calculadora de impacto potencial de receita, no qual examina o efeito em potencial que a velocidade tem nas taxas de conversão. SPEED SCORECARD
  • 54. Para melhor compreender a respeito do assunto, além das fontes citadas e das referências contidas neste Guia, recomenda-se os cursos gratuitos oferecidos pelo Google e Udacity. CURSOS PARA APROFUNDAMENTO
  • 56. ALGUMA DÚVIDA? Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes: ▪ Google to Use Page Speed as Ranking Signal in Mobile Search https://www.searchenginejournal.com/google-use-page-speed-ranking-signal-mobile-search/232553/ ▪ Speed Index - WebPageTest https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index ▪ Speed Index Explained – Another Way to Measure Web Performance https://www.keycdn.com/blog/speed-index/ ▪ WebP: implemente imagens menores e mais bonitas com maior rapidez da Google I/O 2013 https://www.youtube.com/watch?v=pS8udLMOOaE ▪ Perceived Performance https://www.keycdn.com/blog/perceived-performance/ ▪ Progressive JPEGs and green Martians https://cloudinary.com/blog/progressive_jpegs_and_green_martians ▪ Bulk Image Optimization in Bash https://jeremywagner.me/blog/bulk-image-optimization-in-bash ▪ Book of Speed http://www.bookofspeed.com/index.html ▪ JavaScript Start-up Performance https://medium.com/reloading/javascript-start-up-performance-69200f43b201
  • 57. ALGUMA DÚVIDA? ▪ O padrão PRPL https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ▪ The Book of GIF https://rigor.com/wp-content/uploads/2017/03/TheBookofGIFPDF.pdf ▪ How to lazy-load images to improve loading time and save bandwidth https://jmperezperez.com/lazy-loading-images/ ▪ WebP: implemente imagens menores e mais bonitas com maior rapidez da Google I/O 2013 https://www.youtube.com/watch?v=pS8udLMOOaE ▪ Automating Performance Best Practices with PageSpeed - Google I/O 2013 https://www.youtube.com/watch?v=uR5urTx8S4E ▪ Case Study – Analyzing Web Font Performance https://www.keycdn.com/blog/web-font-performance/ ▪ "Speed, Performance, and Human Perception“ https://www.youtube.com/watch?v=7ubJzEi3HuA ▪ Things to Know (and Potential Dangers) with Third-Party Scripts https://css-tricks.com/potential-dangers-of-third-party-javascript/ ▪ Usando o WebPageTest para medir o impacto de tags de terceiros https://andydavies.me/blog/2018/02/19/using-webpagetest-to-measure-the-impact-of-3rd-party-tags/ Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
  • 58. ALGUMA DÚVIDA? ▪ Orientações para Lazy Load em Doubleclick https://support.google.com/dfp_premium/answer/4578089#lazyloading ▪ Lazy loading ads: why mediavine ads load 200% faster https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/ ▪ The Google Analytics Setup I Use on Every Site I Build https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/ ▪ Intervindo contra document.write () https://developers.google.com/web/updates/2016/08/removing-document-write ▪ Solving the Web Performance Crisis https://channel9.msdn.com/Blogs/msedgedev/nolanlaw-web-perf-crisis ▪ JavaScript de Terceiros – Leituras Adicionais https://developers.google.com/web/fundamentals/performance/optimizing-content- efficiency/loading-third-party-javascript/#further_reading ▪ A Slow Website – Time to First Byte (TTFB) https://www.keycdn.com/blog/a-slow-website-time-to-first-byte-ttfb/ ▪ Responsive Web Design Basics https://developers.google.com/web/fundamentals/design-and-ux/responsive/ ▪ Optimization Explained GTmetrix https://gtmetrix.com/blog/category/optimization-explained/ Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
  • 59. ALGUMA DÚVIDA? ▪ Progressive Web Apps https://developers.google.com/web/progressive-web-apps/ ▪ Seu primeiro Progressive Web App https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=pt-br ▪ First Contentful Paint Explained https://gtmetrix.com/blog/first-contentful-paint-explained/ ▪ Time to First Meaningful Paint https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view ▪ Web performance Glossary https://varvy.com/performance/ ▪ Responsive Images: Using srcset and sizes Attributes https://www.keycdn.com/blog/responsive-images/ ▪ Deciphering the Critical Rendering Path https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/ ▪ The Complete Guide to Testing Your Accelerated Mobile Pages https://www.searchenginejournal.com/amp-testing/212462/ ▪ WebPageTest Guide https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
  • 60. ALGUMA DÚVIDA? ▪ High Performance Browser Networking https://hpbn.co/ ▪ Performance Matters http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html ▪ HTTP/2 – A Real-World Performance Test and Analysis https://css-tricks.com/http2-real-world-performance-test-analysis/ ▪ AMP: The web’s first steps into the Performance Age https://uxplanet.org/amp-the-webs-first-steps-into-the-performance-age-8a25ba2f35f2 Para maiores informações, não deixe de conferir cada assunto abordado com mais detalhes:
  • 61. NLAB