{"id":902,"date":"2021-01-20T23:59:44","date_gmt":"2021-01-21T02:59:44","guid":{"rendered":"https:\/\/srougi.biz\/?p=902"},"modified":"2021-03-05T01:55:55","modified_gmt":"2021-03-05T04:55:55","slug":"o-que-e-web-vitals","status":"publish","type":"post","link":"https:\/\/srougi.biz\/o-que-e-web-vitals\/","title":{"rendered":"O que \u00e9 Web Vitals? \u00c9 importante em 2021?"},"content":{"rendered":"<p><strong>Web Vitals<\/strong> foi o termo usado pelo Google pra indicar o que passar\u00e1 a ser um dos principais fatores de ranqueamento ainda no primeiro trimestre de 2021. Cada vez mais focado na experi\u00eancia positiva para o usu\u00e1rio, o Google possa a medir a performance dos websites baseando-se em v\u00e1rias m\u00e9tricas de performance, tr\u00eas delas principais chamadas de Core <strong><a href=\"https:\/\/ferramentasseo.club\/o-que-e-web-vitals\" target=\"_blank\" title=\"o que \u00e9 web vitals?\" rel=\"noopener\">web vitals<\/a><\/strong>, usadas para definir se o site oferece ou n\u00e3o uma boa experi\u00eancia aos seus visitantes.<\/p>\n<p>O Google nunca escondeu de ningu\u00e9m sua preocupa\u00e7\u00e3o com a experi\u00eancia do usu\u00e1rio, mas \u00e9 a primeira vez que declara publicamente que passa a considerar isso um dos maiores fatores de ranqueamento.<\/p>\n<p>Se antes quando pens\u00e1vamos em performance de websites, n\u00e3o sab\u00edamos exatamente o qu\u00e3o importante era a rela\u00e7\u00e3o velocidade\/performance Vs experi\u00eancia do usu\u00e1rio, o <a title=\"O que \u00e9 Web Vitals?\" href=\"https:\/\/ferramentasseo.club\/o-que-e-web-vitals\" target=\"_blank\" rel=\"noopener\"><strong>Web Vitals<\/strong><\/a> veio para dar um direcionamento do que devemos melhorar e ferramentas como o site <a href=\"https:\/\/gtmetrix.com\/\">Gtmetrix<\/a> usadas por donos de sites e desenvolvedores para medir a performance de sites, j\u00e1 est\u00e3o baseando seus resultados tamb\u00e9m em <strong>web vitals<\/strong>, para lhe ajudar em que pontos melhorar.<\/p>\n<h2>O que s\u00e3o Core <strong>Web Vitals<\/strong>?<\/h2>\n<p>Como citado acima, Core <strong>web vitals<\/strong> s\u00e3o as tr\u00eas principais m\u00e9tricas do <strong>web vitals<\/strong>, que por sua vez s\u00e3o baseadas em tr\u00eas fatores de experi\u00eancia dos usu\u00e1rios:<\/p>\n<ol>\n<li>Tempo de Carregamento;<\/li>\n<li>Interatividade;<\/li>\n<li>Estabilidade Visual da P\u00e1gina.<\/li>\n<\/ol>\n<p>E abaixo est\u00e3o os Core <strong>web vitals<\/strong> correspondentes a cada um dos tr\u00eas \u00edtens acima, que o google identificou como muito importantes para mensurar a experi\u00eancia do usu\u00e1rio:<\/p>\n<ul>\n<li>Largest Contentful Paint (LCP) \u2014 Carregamento (O qu\u00e3o r\u00e1pido seu site aparece na tela)<\/li>\n<li>First Input Delay (FID) \u2014 Interatividade (Quanto tempo seu site reage a um comando do usu\u00e1rio)<\/li>\n<li>Cumulative Layout Shift (CLS) \u2014 Estabilidade visual (Quantas coisas se movem na tela enquanto o site \u00e9 carregado)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-909\" src=\"https:\/\/srougi.biz\/wp-content\/uploads\/2021\/01\/teclando.gif\" alt=\"teclando\" width=\"500\" height=\"300\" \/><\/p>\n<p>Iremos detalhar cada um dos Core <strong>Web Vitals<\/strong> abaixo.<\/p>\n<h2>O que \u00e9 Largest Contentful Paint (LCP)?<\/h2>\n<p>O LCP, ou Largets ContentFul Paint (LCP) mede o tempo de carregamento da p\u00e1gina na percep\u00e7\u00e3o do usu\u00e1rio, baseado no tempo de carregamento do \u00edtem mais pesado da p\u00e1gina na parte vis\u00edvel ao usu\u00e1rio no seu carregamento.<\/p>\n<p>O prop\u00f3sito do LCP \u00e9 medir o tempo que lea para o conte\u00fado principal da p\u00e1gina ser carregado no navegador do usu\u00e1rio, focando na percep\u00e7\u00e3o visual do usu\u00e1rio ao inv\u00e9s de levar em considera\u00e7\u00e3o uma longa lista de m\u00e9tricas que medem diversos passos do processo de carregamento.<\/p>\n<h2>O que \u00e9 o First Input Delay (FID)?<\/h2>\n<p>O First Input Delay (FID) mede a tempo de resposta a um comando do usu\u00e1rio, ou seja, ele mede o tempo desde o momento que o usu\u00e1rio interage com a p\u00e1gina (por exemplo: clica em um link ou bot\u00e3o ou usa algum recurso em java) at\u00e9 o tempo que o navegador leva para responder ao comando.<\/p>\n<p>O Google considera este um fator importante pois mesmo um pequeno delay ap\u00f3s a intera\u00e7\u00e3o, pode ser frustrante ao usu\u00e1rio.<\/p>\n<h2>O que \u00e9 Cumulative Layout Shift (CLS)?<\/h2>\n<p>Cumulative Layout Shift (CLS) mensura a estabilidade da p\u00e1gina. O CLS \u00e9 baseado em uma f\u00f3rmula que calcula quantas vezes os componentes da p\u00e1gina se movem ou se alteram enquanto a p\u00e1gina \u00e9 carregada. Quanto menos altera\u00e7\u00f5es melhor.<\/p>\n<p>Quem de n\u00f3s nunca teve experi\u00eancias com sites em que o layout se altera enquanto ele est\u00e1 carregando. Apesar do site j\u00e1 possibilitar intera\u00e7\u00e3o, se os elementos est\u00e3o se movendo ainda, isso ir\u00e1 gerar uma experi\u00eancia ruim ao usu\u00e1rio.<\/p>\n<h2>Como otimizar meu site para o <strong>Web Vitals<\/strong>?<\/h2>\n<p>Enquanto as t\u00e9cnicas para deixar seu site otimizado para o <strong>Web Vitals<\/strong> s\u00e3o tecnicamente complexas, o processo \u00e9 simples. Abaixo listo alguns passos que voc\u00ea pode come\u00e7ar a seguir agora para iniciar a melhoria de seu site:<\/p>\n<p>1. Deixe o comportamento do usu\u00e1rio guiar seus esfor\u00e7os: comece acompanhando pelo seu Analytics quais as p\u00e1ginas mais acessadas e quais os fluxos seguidos pelo usu\u00e1rios e ent\u00e3o comece trabalhando neles.<\/p>\n<p>2.Optimize o site para estabilidade visual e interatividade: Atrase a execu\u00e7\u00e3o de qualquer script n\u00e3o essencial para executar depois que a p\u00e1gina estiver est\u00e1vel pro usu\u00e1rio. Uma tag de an\u00fancios as vezes \u00e9 essencial, uma webfont carregada externamente a pedido do seu designer d\u00e1 um melhor visual ao site, mas saiba que cada um deles atrasa um pouco o carregamento do seu site. O seu navegador precisa vazer o download, processar e carregar cada arquivo externo, um por um, por isso seu site demora tanto para finalizar o carregamento em muitos casos.<\/p>\n<p>3. Sirva conte\u00fados como imagens e arquivos css a partir de pontos pr\u00f3ximos aos usu\u00e1rios utilizando CDNs.<\/p>\n<p>4.Teste e monitore sempre a performance de seu site. O time de marketing sempre quer inserir v\u00e1rios javascripts em seu site, desenvolvedores nem sempre programam seus c\u00f3digos da forma mais clean e imagens de resolu\u00e7\u00e3o maior que a necess\u00e1ria ir\u00e3o prejudicar a performence do seu site. Sempre que poss\u00edvel use ambientes de testes para validar como mudan\u00e7as espec\u00edficas podem prejudicar seu site.<\/p>\n<p>J\u00e1 segui suas dicas inciciais para otimizar meu site, e agora?<\/p>\n<p>As dicas acima podem ser muito boas como um in\u00edcio de trabalho. Por\u00e9m, como dissemos acima, o processo de otimiza\u00e7\u00e3o para <strong>Web Vitals<\/strong> \u00e9 muito complexo para realizarmos sozinhos sem ter muito conhecimento. E terceirizar o trabalho tamb\u00e9m n\u00e3o \u00e9 recomendado, pois nossos sites vivem em constante mudan\u00e7a e devemos sempre estar monitorando e otimizando nossos projetos. E acredite, quem n\u00e3o estiver preparado, ir\u00e1 cair nos resultados do Google, e quem estiver com o site bem otimizado, certamente ir\u00e1 subir nos resultados como foguete.<\/p>\n<p>O que sugiro ent\u00e3o? O mesmo que fiz na minha empresa. Eu e mais 2 desenvolvedores ap\u00f3s muita procura, encontramos um curso que realmente \u00e9 BEM completo e ensina do b\u00e1sico ao avan\u00e7ado como otimizar seu site para o <strong>Web Vitals<\/strong>. O foco do curso \u00e9 100% performance e <strong>web vitals<\/strong> e o mais interessante \u00e9 que mesmo pra quem n\u00e3o \u00e9 desenvolvedor o curso \u00e9 muito \u00fatil, diversos alunos com conhecimentos bem b\u00e1sicos de WordPress j\u00e1 est\u00e3o mostrando os resultados, como esse abaixo de um dos meus sites que atingiu a pontua\u00e7\u00e3o m\u00e1xima no medidor de performance do Google:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-907\" style=\"border: 1px solid darkgray;\" src=\"https:\/\/srougi.biz\/wp-content\/uploads\/2021\/01\/performance-100.jpg\" alt=\"\" width=\"550\" height=\"394\" srcset=\"https:\/\/srougi.biz\/wp-content\/uploads\/2021\/01\/performance-100.jpg 550w, https:\/\/srougi.biz\/wp-content\/uploads\/2021\/01\/performance-100-300x215.jpg 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/webvitals.top\">Clique aqui<\/a> para ser redirecionado ao site do curso que estou falando e conhecer melhor. O melhor \u00e9 que o curso te d\u00e1 acesso a vida toda para atualiza\u00e7\u00f5es e uma comunidade no Facebook com muitas dicas boas. Voc\u00ea, como eu pode parcelar o curso em at\u00e9 12x e gastando menos que o valor de um cafezinho por dia, voc\u00ea pode adquirir o curso e fazer seu site subir na serp como um foguete, enquanto seus concorrentes nem sabem ainda o que \u00e9 o <strong>Web Vitals<\/strong>. A hora de come\u00e7ar a otimizar seu site \u00e9 AGORA, aproveite pois quem sair na frente se dar\u00e1 melhor.<\/p>\n<p><a href=\"https:\/\/webvitals.top\"><strong><span style=\"color: red;\">=&gt; Quero conhecer o melhor curso de Web Vitals agora!<\/span><\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web Vitals foi o termo usado pelo Google pra indicar o que passar\u00e1 a ser um dos principais fatores de ranqueamento ainda no primeiro trimestre de 2021. Cada vez mais focado na experi\u00eancia positiva para o usu\u00e1rio, o Google possa a medir a performance dos websites baseando-se em v\u00e1rias m\u00e9tricas de performance, tr\u00eas delas principais [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":910,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[18,17,16,15],"_links":{"self":[{"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/posts\/902"}],"collection":[{"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/comments?post=902"}],"version-history":[{"count":0,"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/posts\/902\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/media\/910"}],"wp:attachment":[{"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/media?parent=902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/categories?post=902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/srougi.biz\/wp-json\/wp\/v2\/tags?post=902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}