{"id":1578,"date":"2021-03-11T16:59:46","date_gmt":"2021-03-11T19:59:46","guid":{"rendered":"https:\/\/integracaodigital.com.br\/blog\/?p=1578"},"modified":"2024-03-14T10:16:44","modified_gmt":"2024-03-14T13:16:44","slug":"page-experience-como-se-prepar","status":"publish","type":"post","link":"https:\/\/www.integracaodigital.com.br\/blog\/2021\/03\/11\/page-experience-como-se-prepar\/","title":{"rendered":"Page Experience: como se preparar para o novo algoritmo do Google que chega em maio\/21?"},"content":{"rendered":"

\"google<\/p>\n

Demorou, mas chegou! A partir de maio\/21, fatores como velocidade de carregamento, responsividade mobile e navega\u00e7\u00e3o segura ser\u00e3o essenciais para um bom ranqueamento no buscador. Essa \u00e9 a proposta do <\/span>Page Experience<\/b>, <\/span>o novo algoritmo do Google<\/b> que promete sacudir as estrat\u00e9gias de SEO convencionais.<\/span><\/p>\n

Caso ainda n\u00e3o saiba, a experi\u00eancia do usu\u00e1rio (no ingl\u00eas <\/span>user experience<\/span><\/i> “UX”) \u00e9 um conjunto de par\u00e2metros relacionados \u00e0 intera\u00e7\u00e3o do usu\u00e1rio com um determinado produto ou servi\u00e7o, cujo resultado pode gerar uma percep\u00e7\u00e3o negativa ou positiva. Esse termo ficou popular em 1988, com a publica\u00e7\u00e3o do livro \u201c<\/span>The Design of Everyday Things\u201d<\/span><\/i>, de Don Norman.\u00a0<\/span><\/p>\n

O Page Experience traz uma s\u00e9rie de regras que afetam, n\u00e3o s\u00f3 a experi\u00eancia do usu\u00e1rio em p\u00e1ginas\u00a0 na internet, mas na leitura de outros algoritmos. Tais mudan\u00e7as ir\u00e3o impactar diretamente no posicionamento, e consequentemente, na visualiza\u00e7\u00e3o e convers\u00e3o de aplica\u00e7\u00f5es web.\u00a0<\/span><\/p>\n

Quais s\u00e3o as m\u00e9tricas do Google Page Experience? O que considerar e quais os desafios na implementa\u00e7\u00e3o desses fatores? Como fa\u00e7o para otimizar meu site para o novo algoritmo do Google? A resposta a essas e outras perguntas voc\u00ea confere logo a seguir.<\/span><\/p>\n

 <\/p>\n

O que \u00e9 o Google Page Experience<\/b><\/h2>\n

Como promover aos usu\u00e1rios experi\u00eancias positivas nos sites onde navegam? O fluxo de navega\u00e7\u00e3o conduz facilmente o usu\u00e1rio ao seu objetivo? Apesar do conte\u00fado ainda ser um dos fatores mais importantes de ranqueamento no Google, com o avan\u00e7o da tecnologia e mudan\u00e7a de comportamento do consumidor, viu-se a necessidade de avaliar outras vari\u00e1veis.\u00a0<\/span><\/p>\n

O Page Experience foi criado para ampliar o olhar do Google frente \u00e0s quest\u00f5es de usabilidade e navega\u00e7\u00e3o, priorizando aplica\u00e7\u00f5es que promovem uma experi\u00eancia positiva, em detrimento de sites confusos, lentos, sem identidade e interatividade lenta. Para tanto criou as chamadas <\/span>Core Web Vitals<\/b> (M\u00e9tricas essenciais da web), que inclui:<\/span><\/p>\n

LCP \u2014\u00a0 Largest Contentful Paint:<\/b> avalia a responsabilidade das p\u00e1ginas, e o tempo de carregamento de \u00e1reas com maior conte\u00fado, incluindo textos e imagens.<\/span><\/p>\n

FID \u2014 First Input Delay:<\/b> preocupa-se com os pontos de interatividade entre aplica\u00e7\u00e3o e usu\u00e1rio.<\/span><\/p>\n

CLS \u2014 Cumulative Layout Shift<\/b>: visa manter a estabilidade visual da p\u00e1gina.\u00a0<\/span><\/p>\n

 <\/p>\n

Google Page Experience e as novas m\u00e9tricas de ranqueamento<\/b><\/h2>\n

P\u00e1ginas compat\u00edveis com todos os tipos de dispositivos m\u00f3veis <\/span>(mobile friendliness<\/span><\/i>) e navega\u00e7\u00e3o <\/span>safe-browsing<\/span><\/i>, livre de agentes maliciosos como <\/span>malwares <\/span><\/i>e <\/span>phishing <\/span><\/i>s\u00e3o fatores que possibilitam uma navega\u00e7\u00e3o fluida e segura. Por priorizarem a experi\u00eancia do usu\u00e1rio, tais pr\u00e1ticas se encaixam no Core Web Vitals e<\/span> continuam valendo.\u00a0<\/span><\/p>\n

\"banner-mobile-seo-mkt-01-id\" <\/a><\/p>\n

\"banner-desk-seo-mkt-01-id\"<\/a><\/p>\n

Confira agora as novas m\u00e9tricas e saiba como se preparar para alcan\u00e7ar um bom posicionamento no buscador:\u00a0<\/span><\/p>\n

 <\/p>\n

CLS (Cumulative Layout Shift)<\/b><\/h3>\n

P\u00e1ginas repletas de an\u00fancios, mensagens que pipocam na tela e bot\u00f5es flutuantes s\u00e3o mudan\u00e7as que interferem no padr\u00e3o de layout convencional, e dificultam a boa experi\u00eancia. Para evitar essa instabilidade enquanto o site carrega, o Page Experience traz essa m\u00e9trica.\u00a0<\/span><\/p>\n

As mudan\u00e7as repentinas no posicionamento dos conte\u00fados s\u00e3o inconvenientes, e muitas vezes impedem o usu\u00e1rio de ler um artigo ou finalizar uma compra. Sendo assim, o Google estipula que para assegurar uma boa experi\u00eancia ao usu\u00e1rio, <\/span>o LCP precisa estar abaixo de 1,0.\u00a0<\/b><\/p>\n

O que pode ser feito para alcan\u00e7ar tal resultado? Uma dica \u00e9 construir o layout com espa\u00e7os predefinidos para a inser\u00e7\u00e3o de an\u00fancios. Al\u00e9m disso, \u00e9 preciso ficar atento ao tamanho e largura das m\u00eddias, padronizar \u00e9 a melhor solu\u00e7\u00e3o. Desta forma, ajudar\u00e1 o navegador a antecipar o espa\u00e7o a ser utilizado, enquanto carrega a p\u00e1gina.\u00a0<\/span><\/p>\n

Agora \u00e9 para os devs! Outra dica valiosa \u00e9 inserir o atributo<\/span> font-display: swap<\/b> no CSS, que possibilita que o conte\u00fado seja carregado previamente com uma fonte padr\u00e3o.\u00a0<\/span><\/p>\n

 <\/p>\n

LCP (Largest Contentful Paint)<\/b><\/h3>\n

Quanto tempo leva para o conte\u00fado aparecer totalmente? O LCP mede o tempo de carregamento de todo o conte\u00fado vis\u00edvel de uma p\u00e1gina. O Google Page Experience avalia que para promover uma experi\u00eancia positiva, <\/span>o conte\u00fado deve come\u00e7ar a carregar em at\u00e9 2,5 segundos.\u00a0<\/b><\/p>\n

O que mais pesa em uma p\u00e1gina s\u00e3o as m\u00eddias e os scripts. Para melhorar o tempo de carregamento de uma p\u00e1gina, vale a pena ficar de olho no formato das imagens. Est\u00e3o surgindo op\u00e7\u00f5es mais leves, que n\u00e3o comprometem a qualidade.\u00a0<\/span><\/p>\n

Al\u00e9m disso, h\u00e1 uma s\u00e9rie de boas pr\u00e1ticas que devem ser implementadas, tais como:<\/span><\/p>\n