Como Otimizar um Site para Dispositivos Móveis

Porque é que a otimização para mobile é crítica

Mais de 60% do tráfego web global vem de dispositivos móveis e, em alguns setores, essa percentagem ultrapassa os 80%. A Google passou para o mobile-first indexing em todos os novos sites em 2019 e, desde março de 2021, utiliza exclusivamente a versão móvel de um site para a indexação e o ranking. Isto significa que, se o seu site não tiver bom desempenho em mobile, também não terá bom desempenho na pesquisa da Google — independentemente de quão perfeita seja a versão desktop.

Os utilizadores móveis têm expetativas diferentes dos utilizadores de desktop. Esperam carregamento rápido (53% dos utilizadores abandonam um site que demora mais de 3 segundos a carregar em mobile), navegação com uma só mão, texto legível sem zoom, botões e formulários touch-friendly e introdução mínima de dados. Um site que não cumpre estas expetativas perde visitantes, conversões e posições na pesquisa.

Mobile-first indexing

O que isso significa na prática

O mobile-first indexing significa que o bot da Google rastreia e indexa principalmente a versão móvel do seu site. Se tiver conteúdo visível apenas na versão desktop, mas não em mobile, a Google não o vai indexar. Isto é crítico para sites que utilizam design responsivo com conteúdo oculto em mobile (display:none) ou sites com uma versão móvel separada m.dominio.com que tem menos conteúdo do que a desktop.

Como verificar a versão móvel

Utilize o Google Search Console para acompanhar o mobile-first indexing. No relatório Coverage pode ver se a Google está a rastrear a versão móvel ou desktop do seu site. A ferramenta URL Inspection mostra como a Google vê uma página específica. O relatório Mobile Usability apresenta problemas como texto demasiado pequeno, elementos sobrepostos ou links colocados demasiado próximos uns dos outros. O Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) testa rapidamente se uma página específica está otimizada para mobile.

Design web responsivo

Fundamentos do responsivo

O design web responsivo é uma abordagem em que o layout do site se adapta automaticamente ao tamanho do ecrã do utilizador. Em vez de versões separadas para desktop e mobile, tem um único site que reorganiza de forma fluida os elementos. Os elementos-chave do design responsivo são a meta tag viewport, que indica ao browser para adaptar a largura do conteúdo à largura do dispositivo, as media queries de CSS que aplicam estilos diferentes para diferentes tamanhos de ecrã, as imagens flexíveis que escalam com o seu contentor e uma grelha fluida que utiliza percentagens em vez de pixels fixos para as larguras dos elementos.

Abordagem de codificação mobile-first

A melhor prática é codificar de mobile para desktop (mobile-first). Os estilos CSS base são para mobile e as media queries adicionam estilos para ecrãs maiores. Isto tem duas vantagens: os dispositivos móveis não têm de descarregar e processar CSS que é depois substituído (melhor desempenho) e obriga-o a priorizar o conteúdo e a funcionalidade para o ecrã mais pequeno. Frameworks CSS como o Tailwind CSS e o Bootstrap 5 utilizam uma abordagem mobile-first com breakpoints para ecrãs sm, md, lg e xl.

Erros comuns no design responsivo

Os erros mais comuns incluem larguras fixas de elementos em pixels (utilize max-width e percentagens), scroll horizontal em mobile (verifique que nenhum elemento ultrapassa a largura do ecrã), botões e links demasiado pequenos (o tamanho mínimo do alvo de toque é 48x48 pixels segundo as diretrizes da Google), imagens não otimizadas (uma grande imagem de desktop carrega também em mobile), pop-ups que cobrem todo o ecrã móvel (a Google penaliza os interstitials intrusivos) e formulários com demasiados campos (minimize a introdução de dados em mobile, utilize autocomplete).

Otimização da velocidade em mobile

Porque é que a velocidade é mais importante em mobile

Os dispositivos móveis têm normalmente ligações à internet mais lentas (4G/LTE em vez de fibra), menos capacidade de processamento para a renderização das páginas e menos RAM para o processamento de JavaScript. O Google Page Speed Insights (ou a nossa ferramenta gratuita de teste de velocidade) apresenta pontuações separadas para mobile e desktop — a pontuação mobile é quase sempre mais baixa e é a pontuação que afeta mais fortemente o ranking.

Otimização de imagens para mobile

As imagens são a causa mais comum de carregamento lento em mobile. Utilize imagens responsivas com o atributo srcset, que serve diferentes tamanhos de imagem para diferentes ecrãs — o mobile recebe uma imagem de 400px em vez de uma imagem de desktop de 1600px. O formato da imagem também importa: os formatos WebP e AVIF são 30-50% mais pequenos do que o JPEG com a mesma qualidade. O lazy loading (o atributo loading="lazy") adia o carregamento de imagens que não estão visíveis no ecrã. O WordPress adiciona automaticamente lazy loading a todas as imagens desde a versão 5.5.

Otimização de JavaScript

O JavaScript é frequentemente o principal culpado dos sites móveis lentos. Minimize a quantidade de JavaScript — cada kilobyte de JS exige download, parsing e execução e, num processador móvel, isso demora muito mais do que no desktop. Utilize code splitting para carregar apenas o JS necessário para a página atual. Adie o carregamento de JavaScript não crítico com os atributos async ou defer. Evite grandes frameworks de JS em sites simples — se só precisa de um slider e de um menu hambúrguer, não precisa de React nem de Angular.

CSS crítico

A técnica de Critical CSS extrai o CSS necessário para renderizar o conteúdo acima da dobra (above-the-fold) e insere-o inline no HTML, enquanto o resto do CSS é carregado de forma assíncrona. Em mobile, o conteúdo acima da dobra é mais pequeno (menor altura do viewport), pelo que o CSS crítico também é mais pequeno. Ferramentas como o Critical, o Penthouse e o CriticalCSS.com geram automaticamente o CSS crítico. Plugins de WordPress como o WP Rocket e o Autoptimize têm suporte integrado para esta otimização. Para saber mais sobre velocidade, leia o nosso guia para acelerar um site.

AMP (Accelerated Mobile Pages)

O que é o AMP

O AMP é a framework da Google para criar páginas móveis ultrarrápidas. As páginas AMP utilizam um subconjunto restrito de HTML, CSS inline até 75KB e JavaScript mínimo (apenas a biblioteca AMP). A Google armazena em cache as páginas AMP na sua rede CDN, resultando num carregamento quase instantâneo. O AMP foi particularmente popular em sites de notícias e blogs, onde a velocidade de leitura é crítica.

Se precisa de AMP

O AMP já não é obrigatório para o carrossel Top Stories da Google (desde junho de 2021) e não é um fator direto de ranking. Se o seu site já tem boas pontuações de Core Web Vitals, provavelmente não precisa de AMP. No entanto, o AMP pode ser útil para sites com elevada taxa de rejeição em mobile (o AMP reduz drasticamente o tempo de carregamento), sites de notícias e blogs com muitos artigos, sites com infraestrutura fraca onde o caching da CDN da Google ajuda significativamente e email marketing (o AMP for Email permite emails interativos). Para WordPress, o plugin AMP da Google e da XWP gera automaticamente versões AMP das suas páginas.

Core Web Vitals em mobile

LCP (Largest Contentful Paint)

O LCP mede o tempo de carregamento do maior elemento visível na página — normalmente a imagem hero ou o cabeçalho principal. Em mobile, o objetivo é um LCP inferior a 2,5 segundos. Os problemas mais comuns são imagens grandes não otimizadas, tempo de resposta lento do servidor (TTFB) e recursos que bloqueiam a renderização. Faça preload da imagem LCP com link rel="preload", utilize um formato otimizado (WebP) e um tamanho adequado, e minimize o CSS e o JS que bloqueiam a renderização.

INP (Interaction to Next Paint)

O INP substituiu o FID como métrica de Core Web Vital e mede a capacidade de resposta do site às interações do utilizador. Em mobile, um INP inferior a 200 milissegundos é uma boa pontuação. Os problemas comuns são tarefas de JavaScript de execução prolongada que bloqueiam a thread principal, manipulações complexas do DOM e demasiados event listeners. As soluções incluem dividir tarefas longas em mais pequenas (ceder à thread principal), aplicar debouncing aos event handlers e utilizar web workers para operações computacionalmente intensivas.

CLS (Cumulative Layout Shift)

O CLS mede a estabilidade visual da página — o quanto os elementos se deslocam durante o carregamento. Em mobile, um CLS inferior a 0,1 é uma boa pontuação. As causas mais comuns de um mau CLS são imagens sem os atributos width e height (o browser não sabe quanto espaço reservar), anúncios injetados dinamicamente que empurram o conteúdo, web fonts que alteram o tamanho do texto ao carregar (FOUT) e conteúdo injetado acima do conteúdo existente. Defina sempre as dimensões das imagens e dos vídeos, utilize font-display: swap para web fonts e reserve espaço para os anúncios.

Testar a otimização para mobile

• Google PageSpeed Insights: Relatório de desempenho detalhado com recomendações específicas para mobile e desktop.
• Chrome DevTools Device Mode: Simula diferentes dispositivos móveis no browser para testar o layout e a funcionalidade.
• BrowserStack e LambdaTest: Testes em dispositivos móveis reais na cloud — diferentes modelos, versões de SO e browsers.
• Google Search Console: O relatório Mobile Usability identifica as páginas com problemas em mobile.
• WebPageTest: Uma ferramenta avançada de teste de velocidade com opções para dispositivos móveis e ligações lentas.
• Lighthouse: A ferramenta da Google para uma análise abrangente de desempenho, acessibilidade, SEO e melhores práticas.

Conclusão

A otimização para mobile não é opcional — é um requisito para qualquer site que pretenda ser visível na pesquisa da Google e proporcionar uma boa experiência ao utilizador. O design responsivo com uma abordagem mobile-first, imagens otimizadas, JavaScript mínimo e boas métricas de Core Web Vitals são a base de uma otimização para mobile bem-sucedida. Na BeoHosting, todos os planos de alojamento estão otimizados para uma entrega rápida de conteúdo em dispositivos móveis, com o servidor web LiteSpeed, caching do lado do servidor e uma CDN gratuita que acelera o carregamento para utilizadores em todo o mundo.