Google AMP - Visão geral
Google Accelerated Mobile Pages(Google-AMP) é o novo projeto de código aberto do Google especialmente desenvolvido para criar páginas da web leves usando amp html. O principal objetivo deste projeto é garantir que o código do amplificador funcione bem e carregue rapidamente em todos os dispositivos possíveis, como smartphones, tablets etc.
O que é AMP?
Accerated Mobile Pages (AMP) é o projeto de código aberto do Google especialmente desenvolvido para tornar as páginas da web amigáveis para dispositivos móveis, tornando-as mais rápidas, suaves e responsivas em qualquer navegador.
O site oficial do Google amp é - https://www.ampproject.org/
POR QUE AMP?
Qualquer usuário espera que os sites carreguem o conteúdo muito rápido. No entanto, pode não ser o caso quando as páginas estão quase inundadas com imagens, vídeos, animações, widgets sociais, o que torna a página muito pesada e, portanto, aumenta seu tempo de carregamento. Tal cenário pode causar perda de usuários para o site a longo prazo.
O Google AMP foi desenvolvido para resolver esse problema. AMP tem uma maneira especial de cuidar de imagens, iframes, javascripts, anúncios, vídeos, animações, css, fonte carregada etc. o conteúdo é servido a partir do cache. A versão do cache também é atualizada em tempo hábil para que o usuário sempre obtenha uma página atualizada.
Por que escolher AMP?
Esta seção explica por que você deve optar por AMP para seu site -
Priorizado na Pesquisa Google
Hoje, ao pesquisar algo no Google, você encontrará um carrossel do Google exibido na parte superior com as páginas, seguido pela lista de páginas em resposta à sua pesquisa. O carrossel de notícias exibido são todos sites AMP válidos. Isso significa que o Google dá prioridade às páginas amplificadas e as exibe de acordo com a classificação no carrossel de notícias.
Um exemplo de uma pesquisa feita no Google com a palavra-chave “latest indian news”É dado aqui -
Todas as páginas de alta classificação que são páginas AMP são exibidas no início no carrossel do Google, conforme mostrado na imagem acima.
Uma página AMP do Google tem a aparência mostrada abaixo quando o usuário pesquisa algo na pesquisa do Google. Observe que há um logotipo Google AMP nas páginas AMP.
Tempo de carregamento mais rápido
Quando sua página é convertida em AMP, o tempo de carregamento é muito melhor em comparação com uma página sem amplificador. O tempo de carregamento mais rápido também é um fator importante na classificação da página na pesquisa do Google.
Sem pop-ups
Usar o Google AMP oferece uma experiência de navegação agradável, pois o usuário não verá pop-ups indesejados nas páginas projetadas com o Google AMP.
Gera Tráfego
Quando a taxa de carregamento das páginas é rápida, aumenta automaticamente o número de visualizadores e, portanto, o tráfego para a página aumenta.
Como funciona o AMP?
Os componentes mais importantes usados para construir um site são javascript, imagens, vídeos, fontes, css etc. O design da página AMP é feito cuidando-se de todos esses fatores de uma maneira única. Nesta seção, vamos discutir resumidamente o que exatamente AMP faz para tornar as páginas mais rápidas.
JavaScript assíncrono
Javascript desempenha um papel importante na página, pois ajuda a adicionar interatividade à página na forma de animações, alterações de DOM, etc. Ele também adiciona lentidão à página e pode bloquear a renderização de outros conteúdos na página.
Como AMP lida com JavaScript?
AMP carrega JavaScript de forma assíncrona. JavaScript personalizado é estritamente proibido em uma página AMP. Observe que o AMP tem muitos componentes adicionados, alguns deles substituem as tags html existentes; por exemplo amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations etc.
Para cada um desse componente, há um arquivo JavaScript a ser carregado com o atributo async adicionado à tag do script. Apenas arquivos JavaScript relacionados aos componentes do amp são permitidos na página e qualquer outro JavaScript dentro de uma página AMP ou arquivo javascript de terceiros não é permitido. Como o AMP usa o cache de AMP do Google, os arquivos são pré-carregados do cache, tornando o carregamento mais rápido.
Tamanhos para tags HTML
É obrigatório dar o tamanho da imagem, iframe, tags de vídeo para que a página amp possa localizar o espaço na página sem ter que carregar o recurso. Os recursos a serem carregados são priorizados pela página do amplificador. O conteúdo tem mais prioridade sobre os recursos a serem carregados.
Widgets sociais / anúncios
O Amp fornece componentes especiais, como amp-facebook, amp-twitter, amp-ad, amp-sticky, para cuidar dos widgets sociais a serem exibidos na página. O componente de anúncio AMP é usado para veicular anúncios na página. O AMP tem um cuidado especial ao lidar com os componentes e carrega o conteúdo em uma prioridade com base nos requisitos.
CSS
CSS externo não é permitido em páginas AMP. CSS personalizado, se houver, pode ser adicionado à tag de estilo usando o atributo amp-custom. CSS inline também é permitido. O AMP reduz as solicitações de http de todas as maneiras possíveis.
Fontes
As fontes são permitidas nas páginas amp e a prioridade de carregamento das fontes é decidida pelo AMP.
Animação
AMP é compatível com componentes de animação de amp e permite a transição conforme compatível com navegadores modernos.
Considerando todos os pontos listados acima, o AMP tem um cuidado especial com a solicitação HTTP feita para fontes, imagens, iframes, anúncios a serem veiculados, etc. Os recursos disponíveis acima da dobra da página são renderizados primeiro e, posteriormente, é dada preferência aos recursos disponíveis abaixo da dobra .
Outros pontos
O cache de AMP do Google é outro fator importante que ajuda a renderizar o conteúdo mais rapidamente à medida que o conteúdo é buscado no cache.
O editor deve manter dois sites amplificadores e não amplificadores. Por exemplo, considere que o site tem o endereço -https://www.mypage.com. Em seguida, as páginas internamente para não amplificadores a serem veiculadas no desktop serãohttps://www.mypage.com/news. Para dispositivos ou AMP, será:https://www.mypage/com/news/amp/
Como o Google identifica páginas AMP e não AMP?
Agora, vamos entender como o Google identifica páginas AMP e não AMP.
Quando a pesquisa do Google rastreia a página, se acontecer de obter amp em html ou <html amp> ou <html ⚡>, ela saberá que é uma página AMP.
Além disso, no caso do Google encontrar uma página não amp, primeiro para saber sobre a página amp, é obrigatório adicionar as seguintes tags de link na seção head da página html para páginas amp e não amp.
URL da página para página não amplificada
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">Aqui rel = ”amphtml” é especificado para uma página sem amplificador para apontar para a versão do amplificador, para que o Google mostre a correta com base na plataforma.
Page-url para amp-page
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">Aqui, rel = ”canonical” é especificado na página do amp para apontar para a versão padrão do html, para que o Google mostre a correta com base na plataforma.
Caso seu site tenha apenas uma página de amplificador, você não deve se esquecer de adicionar rel = ”canonical” que apontará para si mesmo -
<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">O diagrama a seguir mostra a referência a rel = ”amphtml” apontando para a página amp e rel = ”canonical” apontando para a página html padrão.
Recursos do Google AMP
Nesta seção, vamos discutir os importantes recursos disponíveis no Google AMP -
Amp Caching
O cache do Google Amp é um dos principais recursos adicionados ao amplificador. Ele fornece uma rede de entrega de conteúdo baseada em proxy para servir páginas de amp puras. O cache de amp está disponível por padrão para todas as páginas de amp válidas. Ajuda a renderizar as páginas mais rapidamente em comparação com páginas não amp. Atualmente, existem 2 provedores de cache de amp, Google Cache AMP e Cloudflare AMP Cache. Quando o usuário clica e é redirecionado para a página do amp, o conteúdo é servido do cache do google.
Componentes de Amp
Amp tem uma grande lista de componentes projetados para diversos fins. Alguns deles estão listados abaixo -
amp-img - Usado para mostrar imagens em páginas de amplificador.
amp-iframe- Usado para mostrar iframe com conteúdo externo a ser mostrado nas páginas. Observe que o iframe usado está em sandbox, o que significa que precisa de permissão para mostrar dados na página do amp. Portanto, os detalhes da origem cruzada devem ser especificados para o atributo sandbox.
amp-video - Para mostrar o vídeo na página.
amp-audio - Para mostrar o áudio na página.
amp-datepicker- Usado para mostrar widgets de data na página. Você não precisa ir para nenhum selecionador de data de terceiros, pois o mesmo está disponível diretamente no amp.
amp-story - Um meio para exibir suas histórias na página.
amp-selector- É um componente de amplificador que exibe menu de opções e o usuário pode selecionar entre as opções. As opções exibidas podem ser texto, imagens ou qualquer outro componente de amplificador.
amp-list - É um componente de amp que chama um endpoint CORS json e os dados do arquivo json são exibidos dentro de um modelo.
Publicidade
A publicidade é muito importante para os editores, pois sua receita depende totalmente dos anúncios veiculados na página. O Amp não permite que nenhum javascript externo seja adicionado à página, mas tem um componente de amp especial chamado amp-ad introduzido, que cuida da exibição de anúncios na página.
A rede de anúncios que o editor deseja veicular em sua página precisa ter suporte para anúncios de amp. Por exemplo, para veicular anúncios de clique duplo na página, o clique duplo precisa oferecer suporte a anúncios a serem veiculados usando o componente amp-ad. O código a seguir mostra uma tag amp-ad de doubleclick.
<amp-ad width = "300"
height = "200"
type = "doubleclick"
data-slot = "/4119129/ad-layout">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>Amp também suporta amphtmlads, que são ampads puros desenvolvidos a partir de componentes AMP e html. Amp também suporta amp-sticky-ads, um anúncio de rodapé exibido na parte inferior da página. Os detalhes dos anúncios em amp são discutidos no capítulo de anúncios em amp.
Widgets Sociais
Widgets sociais como Facebook, Twitter, Instagram tornaram-se muito importantes para serem exibidos na página do editor, para que as páginas sejam compartilhadas nas mídias sociais. AMP estendeu seu suporte a todos os widgets de mídia social importantes a serem usados na página, desenvolvendo componentes AMP como amp-facebook, amp-twitter, amp-instagram, amp-pinterest etc.
Amp Media
Outro componente importante nas páginas é a mídia para mostrar vídeos e também veicular anúncios no meio do vídeo como anúncios intermediários. O AMP fornece um meio para fazer isso usando amp-jwplayer, amp-youtube etc. Você não precisa carregar nenhum arquivo extra de terceiros para que o jwplayer e o youtube sejam exibidos em sua página.
Amp Analytics
Amp analytics é um componente AMP usado para rastrear dados em uma determinada página. Toda a interação do usuário na página pode ser registrada e salva para analisar os dados para futuras melhorias ou fins comerciais.
Animações de amplificador
Amp-animation é um componente de amplificador que define animações a serem usadas em outros componentes de amplificador. A TI apóia a animação, transição que funciona bem com o navegador moderno. Você não precisa usar nenhuma biblioteca CSS externa para executar a animação e pode usar o componente amp-animation.
Layouts de amp
Layout AMP é um dos recursos importantes disponíveis no google-amp. O layout do amplificador garante que os componentes do amplificador sejam renderizados corretamente quando a página é carregada, sem causar oscilações ou problemas de rolagem.
O Google AMP garante que a renderização do layout seja feita na página antes que quaisquer outros recursos remotos, como solicitação http para imagens, sejam feitas chamadas de dados. Os atributos disponíveis para layout são largura / altura para todos os componentes do amplificador, atributo de layout com valores como responsivo, preenchimento, fixo etc., atributo de espaço reservado a ser mostrado quando o recurso demora para carregar ou tem algum erro, atributo de fallback a ser mostrado quando o recurso tem algum erro.
Layouts de exibição de amp
Amp oferece suporte a muitos componentes usados para exibir conteúdo na página sem a necessidade de nenhuma biblioteca de terceiros ou sem ter que fazer CSS pesado na página. A lista inclui
Accordion- Amp-acordeão é um componente de amplificador usado para exibir o conteúdo no formato expandir-recolher. Torna-se fácil para os usuários visualizá-lo em dispositivos móveis, onde podem selecionar a seção de acordo com sua escolha no acordeão.
Carousel - Amp-carrossel é um componente de amplificador para mostrar um conjunto de conteúdos semelhantes na tela e usar as setas para alternar entre os conteúdos.
Lightbox - Amp-lightbox é um componente de amplificador que ocupará toda a janela de visualização e será exibido como uma sobreposição.
Slider - Amp-image-slider é um componente de amplificador usado para comparar 2 imagens adicionando controle deslizante ao movê-lo verticalmente sobre a imagem.
Sidebar - A barra lateral do amplificador é um componente do amplificador usado para exibir o conteúdo que desliza das laterais da janela ao toque de um botão.
Vantagens do AMP
As páginas AMP são leves e carregam mais rápido
O Google dá prioridade às páginas AMP na pesquisa do Google. As páginas AMP são listadas no formato de carrossel na parte superior da página. Para obter uma classificação mais alta, é uma boa vantagem ter suas páginas em AMP.
As páginas AMP são otimizadas para dispositivos móveis, pois o conteúdo é responsivo e se ajusta bem a todos os navegadores, sem a necessidade de qualquer estilo adicional.
A satisfação dos usuários aumenta com as páginas AMP, pois a taxa de carregamento da página é mais rápida em comparação com as páginas sem amplificador, economizando largura de banda e bateria móvel.
Desvantagens do AMP
Amp possui as seguintes desvantagens -
O editor deve manter duas versões para suas páginas amplificadas e não ampliadas.
O usuário deve fazer esforços adicionais para converter as páginas que não são de amplificador em amplificador. Como o amp não suporta javascript personalizado ou carregamento de javascript externo, o mesmo deve ser feito com o que estiver disponível no amp.