Tip:
Highlight text to annotate it
X
Olá.
Sou Maile Ohye.
Trabalho no Google como líder de tecnologia e desenvolvimento de programas
na nossa equipe de suporte a webmasters.
Este vídeo é sobre como fazer correções rápidas
que vocês ou um membro da sua equipe técnica
podem implementar facilmente para aumentar o desempenho
no seu site para dispositivos móveis.
Mas antes de falar sobre como acelerar os processos,
vamos conferir as estatísticas.
É fato que o desempenho pode afetar os lucros.
Em um experimento realizado pela Strangeloop,
um segundo de latência adicional foi acrescentado
a páginas veiculadas para usuários de smartphones.
Com apenas um segundo de atraso, registrou-se
uma diminuição de mais de 9% nas exibições de páginas,
um aumento de mais de 8% na taxa de rejeição,
além de uma queda de 3,5% no número de conversões.
Para piorar a situação, mesmo após o experimento ter sido
encerrado, a probabilidade de os compradores voltarem
ao site era significativamente menor.
Então, qual é o estado atual dos usuários
e a velocidade das páginas para dispositivos móveis?
Estudos mostram que há um limite de um segundo para que o usuário
não tenha sua atenção desviada.
No entanto, hoje, sete segundos é o tempo médio de carregamento da página
em um dispositivo móvel.
Isso significa que nos sobram ainda seis segundos
para tentarmos outro site, esquecermos
completamente nossa tarefa atual ou sermos consumidos pela frustração.
Vou explicar um pouco por que a Web para
dispositivos móveis é mais lenta que a para computadores.
Podemos comparar o potencial de latência entre dispositivos móveis e computadores.
Considere o usuário de laptop que está prestes a fazer uma pesquisa
em google.com.
Quando o usuário fizer uma consulta, a volta completa,
desde o navegador do usuário fazer a conexão com o Google
até os servidores do Google processarem a consulta e, por fim, o Google
retornar os resultados e exibi-los no navegador do laptop,
pode ocorrer em menos de meio segundo.
Na verdade, esse é o desempenho com o qual muitos de nós
estão acostumados.
Nos smartphones, entretanto, é praticamente impossível
essa volta completa ocorrer em menos de meio segundo.
Isso acontece porque, quando um usuário faz
uma consulta no smartphone, o cliente
precisa conectar-se à rede de telefonia móvel
antes que o smarthphone possa acessar o servidor.
As redes de telefonia móvel são configuradas de maneira que,
mesmo sendo 3G ou 4G, um smartphone ainda
exige um mínimo de 0,5 segundo para se conectar
a um servidor como o Google.
Após conectar-se ao servidor, com meio segundo transcorrido,
o Google ainda precisa processar a consulta, retornar os resultados
e esperar que o smartphone processe a página.
A principal lição é que os possíveis visitantes de smartphone
levarão no mínimo 0,5 segundo apenas
para se conectar ao seu servidor.
Então, após cerca de 0,6 segundo, quando o tempo transcorrido
for maior que um segundo, é possível que seu visitante
já tenha se distraído.
Vamos falar sobre como tornar tudo mais rápido.
Para este vídeo, demonstrarei ideias usando o Google Analytics
com o site de comércio eletrônico, a Google Store,
em www.googlestore.com.
Vamos começar com o Google Analytics e criar um segmento
de tráfego em dispositivos móveis.
Comece com "Criar um novo segmento".
No último mês, meus colegas na Equipe da Velocidade de página
lançaram um novo recurso no Google Analytics chamado Velocidade do site.
Vamos acessar "Tempos da página da velocidade do site".
Com nosso segmento definido para o tráfego em dispositivos móveis,
selecione a guia "Distribuição".
A distribuição fornece uma visualização de alto nível
do desempenho do site.
Podemos ver que o tempo médio de carregamento da
página em dispositivos móveis para meu site, a Google Store,
é de mais de seis segundos.
Também notamos que 46% das páginas do site
levam de três a sete segundos para carregar em um dispositivo móvel.
A boa notícia é que temos muito espaço para melhorias.
Ainda em "Tempos da página da velocidade do site",
clique na guia "Explorador".
Nesta página, na ordem padrão de classificação das exibições de páginas,
ao olhar as páginas mais visitadas do nosso site,
é possível ver a velocidade relativa de cada página.
O fato é que minha terceira página mais popular, a página
de categoria do YouTube, que vende itens como garrafas d'água do YouTube
e imãs, é terrivelmente lenta. Ela é 350% mais lenta
que a página média de dispositivo móvel. Como vimos anteriormente,
já não era a mais rápida.
Podemos usar esse recurso para fazer uma lista de páginas populares lentas
que desejamos investigar.
Agora, vamos para as "Sugestões de velocidade do site"
para saber que melhorias devemos fazer.
Vemos que, para a página do YouTube,
há nove sugestões de velocidade de página.
Ao clicar nas sugestões, o "PageSpeed Insights" é aberto
em uma nova janela.
É como se seu *** estivesse sendo avaliado na sua frente.
Depois de concluir, confira "Desempenho em dispositivos móveis".
Sem surpresa, nossa página do YouTube
pontua 55 de 100 em relação às práticas recomendadas
de desempenho.
Temos o equivalente a um "F". Considerando que este vídeo é
sobre fazer correções rápidas no desempenho em dispositivos móveis,
nos concentraremos em corrigir as sugestões mais simples de ponto de
exclamação vermelho.
Algumas dessas sugestões podem ser mais conhecidas que outras,
mas de uma sugestão, vocês podem extrair mais detalhes.
Gostaria que vocês compreendessem
a facilidade e, possivelmente, a rentabilidade
de implementar essas sugestões de desempenho.
Criei uma tabela que será abordada em dois slides, com
a qual espero destacar as sugestões de desempenho fáceis
e contextualizar as que, de certa forma, são um pouco mais difíceis.
Sintam-se à vontade para pausar o vídeo se desejarem revisar alguma etapa.
O topo da tabela se refere ao que é fácil de fazer
e que pode ser feito em poucas horas
por um desenvolvedor ou alguém com mais conhecimento técnico.
O primeiro passo é ativar a compactação.
Ativar a compactação é zipar os recursos.
Assim, há menos dados para transferir entre seu servidor da Web
e o cliente.
É uma alteração simples no arquivo de configuração
do seu servidor.
A redução de recursos pode ser feita facilmente
por meio de ferramentas disponíveis ao público.
Usar scripts ***íncronos é basicamente
uma questão de copiar e colar novos snippets
de código para substituir versões antigas.
Para aproveitar o armazenamento em cache do navegador, é possível apenas
adicionar os cabeçalhos HTTP a seus recursos.
A última sugestão de velocidade bastante fácil
é evitar redirecionamentos da página de destino.
No caso de páginas em uma cadeia de redirecionamento,
isso significa corrigir o URL de origem para direcionar
ao destino em vez de páginas intermediárias.
Vemos como é útil corrigir redirecionamentos externos
ao observar novamente a latência em um smartphone.
Cada redirecionamento exigirá que o usuário do dispositivo móvel
espere pelo menos mais 0,5 segundo para a página carregar.
Voltando à outra recomendação menos complicada,
ativar a compactação é tão fácil quanto copiar o código
em um arquivo de configuração do servidor.
Nele, já existem arquivos de configuração principal
de código aberto ao qual vocês podem fazer referência, ou seja, copiar
para as configurações corretas de segurança e desempenho
do seu servidor.
As sugestões de velocidade na segunda página da tabela
têm um grau de dificuldade maior.
Muitas delas não são correções
que vocês podem fazer em poucas horas.
Elas exigem mais conhecimento e aprimoramentos de processos.
Mesmo assim, gostaria de conversar sobre
a recomendação para otimizar imagens.
Otimizar imagens inclui uma gama
de melhorias da compactação sem perdas
para criar e cortar imagens especificamente
para seu site para dispositivos móveis.
Otimizar imagens não é tão simples
como algumas das outras sugestões de velocidade
no slide anterior.
Porém, elas podem ter um grande impacto.
As imagens constituem 65% dos dados para dispositivos móveis.
Otimizar esses recursos pode reduzir o tempo de download
e, no fim das contas, carregar as páginas mais rápido.
A principal lição que tiramos disso
é que, se vocês tiverem uma página para dispositivos móveis de alto tráfego
com sugestões em pontos de exclamação vermelhos de baixa
dificuldade para o desenvolvedor, corrigi-los será ótimo para seus
visitantes e para seus negócios.
Mas para mais inspiração, vamos
conferir WebPageTest.org.
Com o *** de página da Web, podemos inserir uma página,
como a de categoria do YouTube, e analisá-la em relação à velocidade.
Selecione um user agent de dispositivo móvel, como um iPhone
ou um smartphone Android.
Quando o *** for concluído para a página lenta,
será possível ver o prejuízo.
Revisei esta página com meu colega, Ilya Grigorik,
que se concentra principalmente no desempenho.
A resposta dele: "Caramba!"
Esta não é uma cachoeira bonita.
A cachoeira representa visualmente
por que o tempo de carregamento da página foi superior a 15 segundos.
As barras azuis são os downloads de conteúdo
necessários para carregar a página.
Para iniciar o processamento da página,
foram necessários quase sete segundos.
Com esse desempenho, meu site espera
que um comprador do YouTube aguarde sete segundos
para receber qualquer resposta visual e mais de
de 15 segundos para carregar a página inteira.
Se vocês ainda não estiverem inspirados para fazer
algumas dessas melhorias rápidas,
note que, de acordo com o estudo "What Users Want
From Mobile Sites Today", 61% dos usuários
disseram que, se eles não encontram imediatamente o que
procuram em um site para dispositivos móveis,
eles acessam outro site.
É por isso que uma atividade interessante é comparar sua página
e as referências de velocidade da página com uma página equivalente do seu concorrente.
Por praticar esportes durante minha vida
e ser a filha mais nova de três,
acho muito motivador fazer melhorias
se estou sendo superada pela concorrência.
Também no *** da página da Web, vocês podem fazer o download da visualização de filme
do processamento da sua página para dispositivos móveis.
Sintam-se à vontade para comparar seu filme de processamento
com as páginas de outros sites do mercado.
Gostaria de encerrar com indicações de ótimos recursos.
Há o PageSpeed com ferramentas como o PageSpeed Insights
e artigos.
Há também os ótimos vídeos do Ilya
e de membros da Equipe da Velocidade de página.
E, por último, vamos recorrer a WebPageTest.org.
Obrigada por assistir.