Como otimizar o desempenho móvel

Os melhores designs equilibram estética e desempenho, trabalhando com a mobilidade em mente desde o início. Desde a definição de orçamentos de desempenho rigorosos até a implementação de técnicas de otimização do lado do cliente e do servidor, compartilharei os processos atuais de otimização de desempenho móvel que usamos na Cyber-Duck .

Torne-se móvel

O desempenho é uma parte fundamental da experiência do usuário, portanto, não pode ser uma reflexão tardia no final do processo de desenvolvimento. É preferível gerenciar projetos por meio de uma estrutura voltada para dispositivos móveis , com designers e desenvolvedores colaborando desde o início.

Revisão Colaborativa

Para cada projeto, revise o escopo de design e desenvolvimento com a equipe interna e defina as metas dos principais indicadores de desempenho (KPI). Essas são as métricas de marco que indicam o sucesso do projeto, com base nos objetivos de negócios. Dada a sua importância, as metas relacionadas ao desempenho devem aparecer aqui.

Não assine marcos significativos do projeto (como direção de arte e wireframes) com as partes interessadas até que toda a equipe interna tenha revisado a saída. Caso contrário, descobrimos que os desenvolvedores podem solicitar ajustes de design (para reduzir o tamanho da página) durante a implementação. Com os projetos já aprovados, as mudanças nesta fase podem criar complicações, abrindo novas rodadas de aprovações do cliente. Quando os desenvolvedores estão envolvidos desde o início, eles podem estimar o tamanho e o poder de programação necessários para as interfaces e evitar isso.

Orçamentos de desempenho

A melhor maneira de entrar na mentalidade móvel é definir e aderir a um orçamento de desempenho rigoroso : estabelecer uma meta para a velocidade e o tamanho do site final. Quando a equipe está trabalhando em direção a uma meta clara de alto desempenho, ela deve escolher se deseja implementar recursos caros, como carrosséis.

Objetivos de negócios específicos e requisitos do usuário determinam se definimos orçamentos de desempenho baseados em números. Por exemplo, a reformulação de nosso próprio site teve como objetivo melhorar drasticamente os tempos de carregamento em todos os dispositivos e aumentar as conversões em dispositivos móveis. Definimos limites rígidos de não mais de 40 solicitações HTTP ou 500 KB de dados para dispositivos móveis. Os dados do Google Analytics podem informar quais metas selecionar durante as reformulações, pois as interações históricas indicam o comportamento do seu público-alvo.

Geralmente definimos metas para o tamanho da página, com um limite de 500 KB para páginas iniciais para celular. As solicitações do servidor são mais difíceis de prever, portanto, é menos provável que definamos números exatos. Essas diretrizes aproximadas atendem às nossas necessidades para projetos de clientes. Mas Daniel Mall tem um ótimo guia prático para adicionar detalhes aos orçamentos: desde a alocação de peso para HTML e CSS, até JavaScript, imagens e fontes da web.

Técnicas de otimização

No celular, a velocidade de carregamento do site é determinada por fatores do lado do cliente e do servidor. O uso de técnicas de otimização direcionadas que abordam esses dois fatores pode ajudá-lo a atingir os orçamentos de desempenho definidos para seu projeto.

Otimização do lado do cliente

Com um cenário móvel variado – mais de 5.000 dispositivos de smartphones exclusivos em 2014 – os desenvolvedores têm muito menos controle sobre o desempenho de dispositivos individuais do que fatores do lado do servidor. Portanto, a otimização do lado do cliente é crucial. As técnicas a seguir visam reduzir o tempo de processamento e a energia necessários dos dispositivos móveis para carregar sites.

Otimizar código

Muitos desenvolvedores caem na armadilha de escrever em jQuery para alimentar um site. Mas não existe tal coisa. Na verdade, você está escrevendo em JavaScript, enquanto usa uma biblioteca de atalhos e funções úteis. Embora isso acelere o desenvolvimento – útil, quando você precisa colocar um produto no mercado rapidamente – pode haver um custo de desempenho. A biblioteca jQuery adiciona peso, e a flexibilidade dos plugins (e funções) significa que eles podem ficar inchados.

Aqui está um exemplo, com JavaScript e jQuery usados ​​para a mesma função. Escrever em JavaScript simples evita puxar outra biblioteca externa para seu aplicativo e salvará outra preciosa solicitação HTTP.

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

Você pode otimizar ainda mais os arquivos CSS e JS usando sistemas como Grunt ou Gulp, ou com aplicativos compiladores front-end como Prepos, Codekit ou Hammer. Eles reduzem as solicitações HTTP e o tamanho do arquivo executando uma variedade de tarefas: concatenar arquivos, compilar Sass, Less ou CoffeeScript, Uglify JS (compacta JavaScript) e minificar/compactar arquivos para uso em produção.

Priorize acima da dobra

O Google Pagespeed Insights (e ferramentas semelhantes) recomenda priorizar o tamanho do carregamento e a velocidade do conteúdo acima da dobra. Separe primeiro o CSS usado para renderizar a parte visível da página (acima da dobra); adie o restante dos estilos para carregar depois que a página for renderizada.

Adicionar o CSS principal diretamente no cabeçalho da página pode fazer isso. Mas lembre-se de que isso não será armazenado em cache como o restante do arquivo CSS, portanto, deve ser restrito ao conteúdo principal. Uma variedade de ferramentas pode ajudá-lo a determinar o CSS a ser separado, incluindo o CSS crítico de Scott Jehl e a ferramenta Bookmarklet de Paul Kinlam.

Otimizar imagens

Considerando a preferência atual por um design rico, é lamentável que as imagens sejam muitas vezes o culpado do tamanho da página pesada. Mas o design conduzido por imagem ainda é possível se cada um for otimizado e compactado antes e depois da exportação para o formato correto. Certifique-se sempre de usar o tipo de imagem apropriado. Fotos de cores pesadas funcionam melhor como arquivos JPEG, enquanto gráficos de cores planas devem estar em PNG8. Gradientes e ícones mais complexos funcionam melhor como PNG24/32 com transparência alfa ou SVGs.

O Photoshop e o Fireworks podem ajudá-lo a personalizar os níveis de otimização em diferentes áreas da imagem. Isso significa que o assunto principal pode permanecer de alta qualidade, enquanto o restante é otimizado para aumentar o desempenho. Ferramentas de compactação de imagem sem perdas, como ImageOptim e TinyPNG, podem espremer ao máximo o tamanho do arquivo, sem perder a qualidade da imagem.

Você também pode usar o novo elemento HTML5 <picture> e os atributos srcset e size para imagens. Essas duas adições à linguagem ajudam você a definir imagens responsivas diretamente no HTML, para que o navegador baixe apenas a imagem que corresponda à condição fornecida.

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

No entanto, esta técnica deve ser usada com cuidado. Apenas alguns navegadores o suportam: alguns navegadores modernos (como Safari), navegadores Android e IE10/11 (e mais antigos) não. As alternativas do Polyfill podem fazer esse método funcionar em navegadores mais antigos, mas essas são bibliotecas JavaScript externas que precisam ser carregadas separadamente e podem não valer a pena, pois outras técnicas estão disponíveis. Vale a pena considerar seu público-alvo e quais tecnologias eles usarão para ver se o peso extra do polyfill é necessário.

URLs de dados são uma opção final. Em vez de vincular a um arquivo de imagem externo, os dados da imagem podem ser convertidos em uma string codificada em base64 (ou ASCII) e incorporados diretamente no arquivo CSS ou HTML. Uma ferramenta de conversão online simples está disponível. Os URLs de dados são úteis, pois salvam solicitações HTTP e podem transferir arquivos pequenos mais rapidamente. Mas, conforme demonstrado abaixo, o tamanho do código incorporado é maior do que o link para imagens externas. O comprimento adicionado pode tornar os documentos HTML e CSS mais difíceis de manter, e as alterações de imagem terão que ser recodificados e incorporados a cada vez.

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

Automatize a otimização de mídia do CMS

A aplicação das técnicas de otimização de ativos da seção anterior significou que poderíamos escolher um design clássico baseado em imagens para o BAM, permitindo que eles mostrassem novas fotografias de projetos de construção.

Mas também precisávamos dar ao BAM a liberdade de atualizar o conteúdo sem precisar otimizar cada imagem. É claro que nenhuma solução seria tão eficaz quanto a otimização manual, mas conseguimos atingir um grau razoável de otimização automatizada. Nós reconfiguramos o Sitefinity CMS existente para criar flexibilidade. As opções padrão foram usadas para redimensionar (e otimizar) as imagens automaticamente, adequando-se ao contexto de cada página web:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

O Sitefinity também pode redimensionar imagens do URL usando parâmetros de URL, e uma renderização ainda mais rápida pode ser obtida armazenando em cache a imagem redimensionada, usando a seguinte opção:

 /images/image-opt.jpg?size=480 

A maioria dos sistemas CMS permite algum grau de otimização de mídia. Por exemplo, você pode definir configurações de mídia para garantir que futuros usuários adicionem apenas imagens que se encaixem nos modelos do site. Aqui está um exemplo rápido do WordPress.

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

Simplifique fontes e ícones

As fontes são uma parte importante da experiência do usuário e da marca de um site ou aplicativo, mas podem não ser a primeira prioridade para o usuário. Por esse motivo, as fontes da web podem ser outro fator a ser otimizado.

Ao adiar o carregamento da fonte, o navegador exibirá a cópia em qualquer fonte disponível para começar. Isso significa que o usuário sempre obterá o conteúdo primeiro. Adiar o carregamento da fonte pode ser obtido separando a parte do CSS que vincula aos arquivos de fonte e carregando-a após o restante da página ter sido renderizada. Observe, no entanto, que o texto pode piscar brevemente para mudar quando a fonte da Web for carregada.

Da mesma forma, os ícones são outra área a ser otimizada, pois são arquivos pequenos que precisam ser carregados com frequência. Você pode considerar também usar arquivos de fonte para ícones. Use um serviço como o Fontello para escolher uma variedade de ícones e gerar um arquivo de fonte limitado à sua seleção. Essa técnica pode criar ícones vetoriais de alta qualidade para todas as resoluções de tela, com um leve impacto no desempenho.

Alternativamente, sprites de imagem são uma opção bem conhecida. Eles combinam imagens em um arquivo (que usa apenas uma solicitação para carregar) e exibem apenas a parte necessária para o design usando a posição de fundo. Paul Stamatiou descreve como isso é feito e descreve algumas limitações.

Carregando tecnologias

As técnicas a seguir evitam o envio de todo o conteúdo de um site para navegadores móveis. Em vez disso, apenas os dados precisos necessários são baixados , otimizando para cada ponto de interrupção. A velocidade de carregamento móvel foi uma consideração importante para o site da Velocity Drive, que fornece tecnologias de reboque. As bibliotecas JavaScript devem ser carregadas em todos os pontos de interrupção, para testar os recursos do navegador e evitar falhas. Mas otimizamos os ativos cuidadosamente para cada ponto de interrupção: o tamanho do carregamento da página inicial é de apenas 323 KB em dispositivos móveis, subindo para 828 KB em desktops grandes.

Leve isso adiante com técnicas de carregamento lento condicional para aumentar a velocidade percebida da página. Eles carregam seções visíveis em etapas, com o conteúdo principal colocado acima da dobra. Itens caros (como imagens) encontrados no final das páginas não são carregados, a menos que o usuário opte por rolar pelo conteúdo. Essa técnica foi fundamental para a seção 'Insights' do site da Niu Solutions, cobrindo suas inovações de TI. Usamos um pequeno plugin jQuery chamado jScroll para carregar mais artigos à medida que o usuário rola para baixo. Aqui está uma amostra de como configuraríamos este plugin, que simplesmente requer o link para mais conteúdo:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

As tecnologias de pré-carregamento apresentam outras oportunidades. Eles podem antecipar e se preparar para o próximo movimento do usuário carregando a página que provavelmente visualizarão em seguida, para fornecer uma experiência mais rápida. No entanto, descobrir a estrutura de tráfego típica é mais fácil ao renovar um site existente, pois você pode estudar os funis de fluxo de comportamento no Google Analytics.

Aprimore a partir de uma experiência principal

O Responsive News da BBC refere-se à ideia de dar ao usuário a experiência central que ele solicita, avaliando o ambiente do usuário e aprimorando a experiência de acordo . Um exemplo simples disso é carregar imagens de baixa resolução inicialmente e depois mostrar alta resolução dependendo da largura de banda que o usuário possui.

Essa ideia faz parte do aprimoramento progressivo, onde as tecnologias da Web são colocadas em camadas para fornecer a melhor experiência em todos os ambientes. O aprimoramento progressivo pode ser baseado em vários fatores diferentes. Isso inclui a tecnologia à qual um usuário tem acesso, como navegador, sistema operacional e ambiente (como velocidade da Internet). Aqui, defina um conjunto básico de recursos que devem funcionar nos navegadores menos capazes e apenas adicione mais complexidade após testar se os navegadores podem lidar com isso.

Detectar se o navegador pode suportar recursos HTML5 e CSS nos ajuda a escrever código condicional para cobrir todas as eventualidades: aprimorar e adicionar recursos quando suportados, mantendo-se seguro e simples para dispositivos e navegadores que não suportam.

Reduzir o teste de recursos

Incorporar bibliotecas de teste de recursos como Modernizr ou has.js é uma prática comum e recomendada. Mas muitos desenvolvedores implementam a biblioteca inteira; eles testam todos os recursos, mesmo que apenas um pequeno número de resultados seja necessário para determinar se os recursos devem ser adicionados.

Tim Kadlec relata o tempo de análise e execução da mesma biblioteca (jQuery 2.1.1 minimizado) em vários dispositivos. Isso demonstra que geralmente há um custo de desempenho móvel maior (mesmo entre dispositivos antigos e novos) para implementar essas bibliotecas, em comparação com o desktop. Costumamos adaptar a biblioteca, testando apenas recursos relevantes do site . Isso economizará tempo e um precioso poder de processamento móvel.

Otimização do lado do servidor

O tempo de resposta do servidor é um fator chave na velocidade do site: muitos visam menos de 200ms. Mas a latência da rede (o atraso à medida que os dados se movem entre o servidor e o dispositivo) é o verdadeiro gargalo para o desempenho móvel, deixando os usuários móveis com uma experiência mais lenta.

Isso é influenciado pela velocidade da rede. De acordo com a Ofcom, as velocidades médias de download em redes 3G e 4G populares foram de 6,1 Mbps e 15,1 Mbps no Reino Unido. Alguns interpretam isso como um limite claro no tamanho máximo do site. Mas a realidade é mais complexa, pois a velocidade varia de acordo com a cobertura e o contexto ambiental. Os usuários geralmente se conectam ao Edge lento (E) e ao GPRS quando estão fora do alcance.

Há uma variedade de técnicas disponíveis para melhorar o desempenho do site do lado do servidor.

Cache, pré-renderização e conteúdo estático

As páginas da Web dinâmicas exigem várias consultas de banco de dados, levando um tempo valioso para processar a saída e formatar os dados e, em seguida, renderizar em HTML legível pelo navegador. É recomendável armazenar em cache o conteúdo renderizado anteriormente para esse dispositivo. Para visitantes recorrentes, em vez de processar do zero, ele verificará o cache e enviará apenas atualizações.

Muitos também escolhem bibliotecas de modelos JavaScript, como Handlebars e Mustache, para lidar com o conteúdo da web. Mas analisar e executar JavaScript consome muito tempo e energia. Os dispositivos móveis não podem processar essas bibliotecas de modelos tão rápido quanto os computadores desktop e esgotam seus recursos de processamento. Renderizar páginas completamente no servidor é muito mais rápido. O Twitter optou por essa abordagem já em 2012 e explicou o valor em seu blog.

Recentemente, nosso desenvolvedor front-end sênior expandiu os limites dessa técnica para seu portfólio pessoal. Ele foi construído com o Statamic CMS baseado em arquivo, que acabou de adicionar suporte a html_cache. Quando implementado, esse recurso reduziu o tempo médio de carregamento de todas as páginas de aproximadamente 1,8 segundos para 225 milissegundos.

Cache do navegador

A otimização granular pode agilizar o carregamento do site impedindo a transferência regular de arquivos que você sabe que não são atualizados com frequência. Use um manipulador de servidor (como um arquivo .htaccess ) para instruir o navegador sobre qual tipo de conteúdo armazenar e por quanto tempo eles devem manter as cópias. Veja como você pode implementar o cache do navegador no servidor Apache:

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

Redes de entrega de conteúdo (CDNs)

Você pode melhorar o carregamento de ativos usando um CDN como o CloudFlare junto com seu serviço de hospedagem usual. Aqui, o conteúdo estático (como imagens, fontes e CSS) é armazenado em uma rede de servidores globais. Toda vez que um usuário solicita esse conteúdo, a CDN detecta sua localização e entrega os ativos do servidor mais próximo, o que reduz a latência. Ele aumenta a velocidade permitindo que o servidor principal se concentre em entregar o aplicativo em vez de servir arquivos estáticos.

Embora acrescente despesas, use uma CDN dedicada para melhorar a velocidade de carregamento de sites com muitos recursos . Além da configuração inicial, CloudFlare não requer configuração manual; o cache é criado e atualizado para você, com base no tráfego histórico e em quais ativos são melhores para servir. Mas implemente isso com o futuro gerenciamento de conteúdo independente em mente: certifique-se de que todos os ativos carregados de um CMS também sejam veiculados de forma transparente por meio da CDN.

Um CDN foi a melhor escolha para o nosso site Eurofighter Typhoon, já que a impressionante fotografia de alta resolução de aeronaves de defesa era um recurso crucial para mostrar sua capacidade. Nos últimos 30 dias, os relatórios indicam que o CloudFlare economizou 76% das solicitações e 48% da largura de banda, aumentando a velocidade do site com muitas imagens.

Teste

Não há substituto para testes durante toda a produção. Procure usar várias ferramentas para testar o trabalho em andamento , simulando a experiência móvel e diagnosticando possíveis problemas de desempenho.

À medida que a produção avança, sempre fique de olho nos números: desde garantir que os ativos de design sejam gerados e exportados adequadamente, até verificar o tamanho do arquivo de página e a quantidade de solicitações HTTP por meio das ferramentas de desenvolvedor em seu navegador. Aqui, a guia Rede oferece uma visão geral completa dos recursos carregados, tamanho total do arquivo e tempo de renderização:

Observe as linhas verticais azuis e vermelhas à direita da linha do tempo no Chrome Inspector acima. Eles representam eventos DOM Ready e Page Load, respectivamente. Na parte inferior da janela, ele exibe a quantidade de solicitações HTTP e o tamanho total do arquivo carregado no ponto de interrupção atual.

Outras ferramentas incluem:

• O WebPagetest oferece uma ampla variedade de opções para testar URLs ativos: desde a escolha de qualquer local ao redor do mundo até a configuração de velocidades e latência de conexão 3G e 4G específicas. Você pode até experimentar como o site é carregado para esses usuários, por meio da visualização da tira de filme e do vídeo.
• O Pagespeed Insights do Google é uma ferramenta mais visual e introdutória para analisar a velocidade da página. Ele divide os resultados em desktop ou mobile e sugere técnicas para melhorar as áreas segmentadas do seu site: indicando recursos para armazenar em cache ou imagens para otimizar.

Teste em dispositivos reais

Mas não confie apenas em simuladores. Também testamos projetos em toda a produção em uma variedade de dispositivos móveis reais.

Crie seu próprio laboratório de dispositivos ou use o OpenDeviceLabs. Idealmente, tenha uma noção da experiência real do usuário, evitando o poderoso Wi-Fi do escritório. Crie um site de teste em um servidor da Web (idealmente o mesmo que o servidor ativo) que você possa acessar de fora da rede do escritório. Em seguida, teste enquanto estiver em movimento em ambientes típicos, como um café ou hotel lotado, em uma conexão de rede.

Resumo do desempenho móvel

Acima de tudo, tenha como objetivo criar um site que possa equilibrar estética e desempenho em dispositivos móveis e alcançar métricas de conversão reais. Um processo de otimização de desempenho colaborativo e iterativo ajudará você a conseguir isso.

Desde o início do projeto, incentive a equipe interna a trabalhar em conjunto com uma mentalidade móvel, definindo um orçamento de desempenho rigoroso . Construa uma compreensão dos fatores do lado do cliente e do servidor que determinam o desempenho do site em dispositivos móveis. Então você pode atingir a meta estabelecida implementando uma mistura das técnicas de otimização direcionadas que descrevi. É claro que ainda existe um trade-off entre ter um design marcante, alto desempenho e segurança em alguns casos; uma equipe colaborativa de design e desenvolvimento pode decidir o que é melhor para o negócio, verificando com os gerentes de projeto e as partes interessadas relevantes.

Nosso projeto de otimização para uma consultoria global de tecnologia demonstra como essas técnicas podem se combinar para melhorar significativamente a velocidade e o tamanho do carregamento. O projeto envolveu o armazenamento em cache de templates e páginas, otimização de ativos e fontes e redução de testes de recursos, entre outras técnicas. Até agora, os testes demonstram que a renderização e o tempo total de carregamento foram reduzidos para menos de 1,4 segundos, de quase 4 segundos antes de começarmos a trabalhar; da mesma forma, o tamanho do arquivo foi reduzido para 1 MB de mais de 3 MB.

Leitura adicional no SmashingMag:

• Lista de verificação de desempenho de front-end 2017
• Preparando-se para HTTP/2
• Tudo o que você precisa saber sobre AMP
• Os poderes (não tão) secretos do navegador móvel