Keynotes Summit/2020: Desempenho e experiência do usuário para a Web do amanhã

Durante o WP Engine's 2020 Summit, Mariya Moeva, gerente de produto do Google, discute o futuro da web e os importantes papéis que a privacidade, a velocidade e a promoção de experiências de usuário de qualidade devem desempenhar nela. Aprenda sobre ferramentas como AMP, Site Kit e Web Stories for WordPress que você pode usar para avaliar e aprimorar o desempenho do seu site WordPress.

Slides da sessão

Mariya Moeva, gerente de produto do Google, discute :

• Como o Google trabalha em estreita colaboração com o WordPress, o WP Engine e a comunidade para avançar e oferecer suporte ao ecossistema WordPress.
• Compartilhando informações sobre as três principais maneiras pelas quais o Google está ajudando a manter a Web próspera e saudável e a torná-la útil amanhã:
  • Velocidade e desempenho: defina métricas que correspondam à experiência do usuário e compartilhe-as com a comunidade de forma acionável.
  • Excelentes experiências do usuário: garanta que os proprietários do site e os usuários finais tenham as informações mais relevantes dos produtos do Google no momento em que precisam e no contexto certo.
  • Privacidade e segurança : projetar um novo modelo de suporte ao ecossistema respeitando a privacidade do usuário.

Não é apenas pelo fato de que, se a experiência for lenta, os usuários irão para outro lugar, mas também porque as expectativas do usuário mudam para cima, pois eles usam experiências agradáveis ​​de aplicativos nativos ao longo de suas vidas digitais diárias.

Transcrição completa do texto

[00:00:00.03]

Olá pessoal. Meu nome é Maria e sou gerente de produto da equipe de pesquisa do Google. Passo a maior parte do meu tempo criando produtos para ajudar os proprietários de sites a ter sucesso na web.

[00:00:09.08]

E hoje estou muito animado para compartilhar com vocês o que nós do Google achamos importante para a web ser saudável e próspera, e também o que estamos fazendo sobre isso, e como podemos trabalhar juntos.

[00:00:21.03]

Mas para olhar para frente, vamos olhar em volta primeiro, onde estamos agora? E como é o cenário da web?

[00:00:27.07]

As plataformas CMS estão se tornando cada vez mais críticas para o sucesso da web.

[00:00:32.03]

Vemos um crescimento constante na porcentagem geral de sites criados com plataformas CMS.

[00:00:37.08]

Eles são críticos, especialmente para negócios de cauda e torso, mas também para sites realmente grandes que usam CMSs.

[00:00:44.04]

E nós, do Google, trabalhamos de perto com uma variedade de plataformas de CMS para manter o

web saudável e privada.

[00:00:51.02]

E, claro, estamos comprometidos em trabalhar de perto com o WordPress e a comunidade para promover e dar suporte ao ecossistema WordPress.

[00:00:59.04]

Fazemos isso de várias maneiras. Por exemplo, contribuindo para a plataforma central do WordPress para melhorar o desempenho com coisas como carregamento lento de imagens ou para aumentar a descoberta de conteúdo com coisas como Sitemaps.

[00:01:12.03]

Também criamos plug-ins, que oferecem funcionalidades importantes de vários produtos do Google ou mostram como habilitar tecnologias específicas como AMP em seu site WordPress.

[00:01:23.01]

E nós os oferecemos a todos no diretório de plugins do WordPress.

[00:01:26.09]

E por último, mas não menos importante, nos envolvemos ativamente com a comunidade, dando palestras e patrocinando vários eventos, como os vários WordCamps na Europa, na Ásia e nos Estados Unidos, e também localmente em cidades menores e outros eventos do setor.

[00:01:41.06]

E quando se trata do WP Engine, também temos um relacionamento próspero, que abrange todas as mesmas áreas que acabei de mencionar quando se trata do WordPress.

[00:01:51.01]

Por exemplo, a plataforma do WP Engine agora oferece as máquinas virtuais otimizadas para computação do Google Cloud Platform, o que permite que o tempo de execução do servidor caia drasticamente.

[00:02:01.00]

Por exemplo, sites como boardingarea.com, que migraram para essa nova infraestrutura, tiveram uma queda imediata no backend_processing_times, resultando em uma melhoria de até 40% no desempenho do site.

[00:02:13.00]

Os principais plug-ins, como o plug-in AMP e o Site Kit, são apresentados no WP Engine Solution Center e o Genesis Framework é compatível com AMP, ajudando os clientes a criar sites bonitos e de alto desempenho.

[00:02:25.06]

E por último, mas não menos importante, nos reunimos em eventos importantes, como a festa do WP Engine no WordCamp US, ou aqui hoje.

[00:02:34.04]

Além da importância das plataformas CMS na web, um fator que não podemos ignorar é como o mundo mudou drasticamente em apenas alguns meses em todas as esferas de atividade, devido à pandemia do COVID-19.

[00:02:46.09]

Isso também afetou a web. Alguns sites estão com uma sobrecarga de visitas e tráfego, enquanto outros tiveram que suspender temporariamente a atividade.

[00:02:57.07]

A web agora é crítica para o crescimento e, em alguns casos, é a única chance de sobrevivência para muitos negócios.

[00:03:05.01]

Manter as empresas vivas e ajudá-las a entrar e crescer online é a chave

prioridade em nossa perspectiva.

[00:03:12.08]

Também é crítico para os usuários finais, porque muitos dos serviços e informações importantes foram transferidos para a Internet como resultado da pandemia.

[00:03:22.07]

Sabendo de tudo isso, vejamos as três principais direções que consideramos realmente importantes para manter a Web próspera e saudável e torná-la útil amanhã.

[00:03:32.08]

Existem três áreas que consideramos críticas.

[00:03:35.08]

Garantir que os sites sejam rápidos, com alto desempenho e acessíveis.

[00:03:39.09]

Garantindo que proprietários de sites e usuários finais desfrutem de uma excelente experiência de usuário na web.

[00:03:46.00]

E também garantir a manutenção de um ecossistema próspero, enquanto reconhecemos a privacidade e as escolhas dos usuários finais.

[00:03:53.04]

Então, o que eu gostaria de fazer agora é contar o que nós do Google estamos fazendo para cada uma dessas áreas e como podemos trabalhar juntos.

[00:04:01.01]

Para cada uma dessas três áreas importantes, gostaria de compartilhar com você o que achamos importante e as etapas que estamos tomando para trabalhar em conjunto com nossos parceiros no ecossistema, incluindo plataformas CMS, proprietários de sites e provedores de hospedagem.

[00:04:15.06]

Quando se trata de velocidade e desempenho, estamos trabalhando duro para definir métricas que correspondam à experiência real do usuário o mais próximo possível e compartilhá-las com a comunidade de maneira acionável.

[00:04:26.04]

Para uma excelente experiência do usuário, trabalhamos para garantir que os proprietários do site e os usuários finais tenham as informações mais relevantes dos produtos do Google, exatamente no momento em que precisam e no contexto certo.

[00:04:38.05]

E por último, mas não menos importante, para privacidade e segurança, estamos trabalhando para ajudar a projetar um novo modelo de suporte ao ecossistema, respeitando a privacidade do usuário.

[00:04:49.00]

Então, vamos começar com velocidade e desempenho.

[00:04:51.07]

A otimização para esses fatores torna a Web mais agradável para os usuários em todos os navegadores e serviços da Web e ajuda os sites a evoluir de acordo com as expectativas do usuário em dispositivos móveis.

[00:05:02.00]

Acreditamos que isso contribuirá para o sucesso dos negócios na web, pois os usuários estão cada vez mais engajados e podem fazer o que precisam com muito menos atrito.

[00:05:12.01]

Então, acho que todos nós sabemos disso, mas vale a pena reiterar que o foco no usuário é fundamental na web de hoje.

[00:05:18.08]

Não é apenas pelo fato de que, se a experiência for lenta, os usuários irão para outro lugar, mas também porque as expectativas do usuário mudam para cima, pois eles usam experiências agradáveis ​​de aplicativos nativos ao longo de suas vidas digitais diárias.

[00:05:33.06]

Aqui estão apenas duas estatísticas que demonstram como uma melhoria ou atraso relativamente pequeno pode fazer uma diferença significativa na experiência do usuário e afetar as taxas de conversão.

[00:05:45.02]

Nós nos concentramos em três áreas principais para uma experiência de alta qualidade. Primeiro, uma carga rápida. Então você pode ver algo imediatamente. Em seguida, as interações que são responsivas e, finalmente, uma página suave e agradável que não muda ou trinca.

[00:06:00.09]

Procuramos medir esses três atributos e estamos ansiosos para apresentá-los a você e receber seu feedback.

[00:06:06.03]

Então vamos dar uma olhada. Essas são as novas métricas, os principais sinais vitais da web.

[00:06:12.03]

É um conjunto de métricas centradas no usuário do mundo real que qualificam os principais aspectos da experiência do usuário. Eles medem as dimensões da usabilidade da web, como baixo tempo, interatividade e estabilidade do conteúdo durante o carregamento. Para que você não toque acidentalmente naquele botão que não queria tocar.

[00:06:30.06]

Nosso objetivo é ajudar os proprietários de sites a avaliar e melhorar a experiência do usuário na web.

[00:06:35.03]

Para a maioria dessas métricas, fornecemos dados de campo e de laboratório, ou seja, dados baseados em estatísticas agregadas de como os usuários experimentaram esta página no Chrome, bem como dados baseados na análise que executamos na página.

[00:06:49.02]

Portanto, a primeira métrica é a maior pintura de conteúdo. Essa é uma das nossas métricas mais recentes e serve para medir a rapidez com que o conteúdo principal de uma página da web é carregado e fica visível para os usuários.

[00:07:01.08]

Essa métrica é a combinação de bastante pesquisa e desenvolvimento de métricas. Seus predecessores são métricas como, índice de velocidade e primeira pintura significativa.

[00:07:11.03]

O objetivo do LCP é capturar quando o maior elemento de conteúdo estiver visível na janela de visualização do navegador. Os principais fatores, como tempo de resposta do servidor, tempo de bloqueio do CSS e tempo de carregamento do sub-recurso do ativo, afetam o LCP. E está disponível tanto no laboratório quanto nos conjuntos de dados de campo.

[00:07:32.02]

A segunda métrica, é o primeiro atraso de entrada, e é uma métrica apenas de campo, porque requer interação real do usuário. É uma medida do tempo que leva para o navegador realmente responder pela primeira vez que um usuário fornece uma entrada em uma página.

[00:07:47.00]

É extremamente importante olhar para o First Input Delay, porque ele dá a você uma indicação da primeira impressão do usuário sobre a capacidade de resposta do seu site.

[00:07:56.04]

As soluções para melhorar essa métrica incluem coisas como carregar JavaScript antecipadamente, divisão de código e assim por diante.

[00:08:03.06]

Qualquer coisa acima de 300 milissegundos é percebida pelos usuários como uma experiência ruim. E qualquer coisa acima de 100 milissegundos é bom.

[00:08:14.01]

E por último, mas não menos importante, Mudança cumulativa de layout ou CLS. Aqui no slide vocês podem ver um exemplo do que acontece quando essa métrica não é muito boa.

[00:08:24.03]

Isso pode resultar em muita frustração para os usuários. Ele mede o quanto os elementos dentro da viewport se movem durante o carregamento.

[00:08:32.09]

O CLS está tentando medir coisas como anexar um anúncio a uma lista de forma a aumentar as chances de cliques acidentais no anúncio ou ter uma página de notícias na qual a foto das histórias desloca o conteúdo do texto para baixo na página quando é totalmente carregada.

[00:08:47.08]

Para calcular a pontuação de deslocamento do layout, o navegador verifica o tamanho da viewport e o movimento dos elementos instáveis ​​na viewport entre os dois quadros renderizados.

[00:08:57.04]

A pontuação da mudança de layout é um produto de duas medidas desse movimento. A fração de impacto e a fração de distância.

[00:09:04.04]

Em outras palavras, você está medindo quanto conteúdo realmente se moveu e até onde ele se moveu.

[00:09:11.00]

Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter Deslocamento cumulativo de layout inferior a 0,1.

[00:09:18.09]

O CLS pode ser medido tanto no campo quanto no laboratório, semelhante ao Largest Contentful Paint.

[00:09:24.04]

Considerando que, por simples atraso, como mencionei antes, é apenas no campo.

[00:09:30.01]

Estamos trabalhando em todas as nossas diferentes ferramentas para garantir que elas sejam instrumentadas de maneira eficaz e consistente, para que você possa obter informações sobre o desempenho de uma página ou site específico em relação a essas métricas e compartilhar essas informações com sua equipe ou com seus clientes.

[00:09:46.05]

E, claro, quando falamos de desempenho, uma coisa a ter em mente é que precisamos mencionar o AMP Framework.

[00:09:53.06]

Esta é uma estrutura de componentes da Web para criar facilmente sites, e-mails e histórias do usuário. E já resolve muitos dos problemas comuns de desempenho na web.

[00:10:03.05]

Para dar apenas alguns exemplos, o AMP cuida automaticamente de coisas como carregamento lento de conteúdo não crítico.

[00:10:10.02]

Assim, carregaria o conteúdo visível muito mais rapidamente, enquanto os outros elementos em outras partes da página seriam baixados em segundo plano.

[00:10:17.05]

E dá ao usuário uma melhor percepção da importância do site. Também otimiza o rastreamento do seu site.

[00:10:24.01]

Com o componente de análise de AMP, você pode medir comportamentos e interações com seu site uma vez e, em seguida, entregá-los a muitos back-ends de análise com eficiência.

[00:10:35.02]

E, finalmente, também permite que você obtenha design responsivo tão facilmente quanto adicionar atributos a tags HTML.

[00:10:42.08]

Portanto, se você se preocupa com o desempenho, é uma estrutura interessante para investigar se ele se encaixa na configuração atual do seu site e resolverá muitos dos seus problemas de desempenho.

[00:10:52.05]

A segunda área principal na qual estamos focando hoje é a excelente experiência do usuário.

[00:10:57.09]

Capacitar proprietários de negócios e criadores de conteúdo para tomar as medidas certas, para ficar online, aumentar sua presença, obter mais visitantes e transformá-los em clientes.

[00:11:08.07]

O que ouvimos repetidas vezes, quando conversamos com proprietários de negócios e criadores de conteúdo, é que eles acham muito difícil deduzir quais etapas devem seguir a partir da variedade de relatórios complexos, especialmente quando precisam obter informações de vários produtos para obter uma visão completa do que está acontecendo com seu site.

[00:11:28.02]

Eles precisam se concentrar em seus negócios e não têm conhecimento ou tempo para se tornarem também especialistas em web. E eles não deveriam ter que fazer isso.

[00:11:36.05]

Podemos oferecer sugestões intuitivas, fáceis de entender e acionáveis ​​sobre como melhorar e crescer.

[00:11:44.06]

Aproveitamos esse feedback para definir os princípios orientadores quando construímos produtos. Por exemplo, plugins para WordPress, como Site Kit.

[00:11:52.08]

Nosso objetivo é mostrar informações exatamente onde e quando os usuários precisam. Diretamente no painel de administração do WP, eliminamos relatórios complexos e mostramos apenas as estatísticas mais relevantes. E fazemos isso em vários produtos diferentes do Google.

[00:12:09.08]

Não importa se a métrica vem de análises, AdSense ou insights de velocidade da página, nós a exibiremos no mesmo painel fácil de usar, para que as pessoas tenham um local onde possam verificar tudo relacionado ao site e ao Google.

[00:12:24.01]

Um bom exemplo de aplicação desses princípios na prática é o Site Kit. Esse é o plugin oficial do Google para WordPress.

[00:12:30.05]

Ele combina estatísticas, atualmente de quatro produtos diferentes do Google, em insights em um painel muito simples, diretamente no painel de administração do site WordPress.

[00:12:40.09]

Ele fornece informações sobre o desempenho do site em um piscar de olhos. Facilita o acompanhamento regular para proprietários de sites realmente ocupados.

[00:12:50.00]

A abordagem de fornecer os insights e o contexto corretos realmente ressoou com os proprietários de sites WordPress.

[00:12:55.09]

Desde o lançamento, em novembro de 2019, estamos vendo uma adoção orgânica muito forte e atualmente estamos com mais de 400.000 instalações ativas e continuamos a crescer constantemente todos os dias.

[00:13:09.06]

Então, o que há de tão especial no Site Kit? Ele foi projetado para melhorar o atrito no início da jornada na web.

[00:13:16.06]

Especialmente durante a configuração inicial, muitos usuários não sabem como editar seu site, colocar trechos de rastreamento ou tags para coletar e acessar dados importantes de vários produtos.

[00:13:29.05]

Com a permissão do usuário, o Site Kit pode cuidar disso em seu nome e remover os gargalos naqueles primeiros momentos de envio do site e conexão das contas de produto certas.

[00:13:42.04]

E aqui está um exemplo. Depois de conectar esses produtos, veja como o Site Kit traz as informações relevantes quando necessário diretamente no painel do usuário.

[00:13:51.08]

Muitos usuários preferem o compartilhamento proativo de informações para que saibam quando algo importante aconteceu, em vez de ter que verificar repetidamente por conta própria.

[00:14:01.03]

Essa também é uma oportunidade de combinar informações de vários produtos em um insight.

[00:14:06.06]

Por exemplo, suas páginas de carregamento mais rápido também são as páginas com maior tempo na página e maior receita de acesso.

[00:14:13.01]

Então, essas são três estatísticas que vieram de informações, sotaques e análises de velocidade P, e as reunimos para dar ao usuário uma compreensão do que está acontecendo.

[00:14:23.00]

Outro aspecto crítico de excelentes experiências do usuário, tanto para proprietários de sites quanto para usuários finais, é entender qual conteúdo é procurado e como criá-lo estrategicamente para obter mais visitantes e usuários.

[00:14:36.02]

Há algumas mudanças que estamos observando no ecossistema como um todo em termos de que tipo de conteúdo está sendo consumido e o que é popular. E quero compartilhar com vocês o que estamos fazendo para levar a web nessa direção.

[00:14:50.01]

A maioria de vocês provavelmente já está familiarizada com o Stories. Eles são o primeiro formato de conteúdo nativo móvel. Quase três em cada quatro usuários de smartphones leem ou visualizam histórias tocáveis ​​nas redes sociais

mídia, pelo menos semanalmente.

[00:15:05.04]

64% dos usuários preferem o formato de história e mais de 75% estão interessados ​​em ler Histórias tocáveis ​​nas principais categorias de conteúdo lido.

[00:15:16.08]

Acreditamos que o formato de histórias funciona além do caso de uso efêmero e pode se tornar seu próprio pilar no cenário da mídia.

[00:15:25.03]

Histórias são páginas da web que podem ser vistas em qualquer lugar que uma página da web possa ser vista, mas no Google estamos indo além para deixá-las brilhar.

[00:15:34.07]

Assim, em consultas selecionadas como coisas para fazer em Nova York, por exemplo. Acionaremos um bloqueio visual como este com histórias de editores.

[00:15:44.01]

O Discover é outro produto onde as histórias surgem e é muito popular entre os usuários de Android e iPhone, com mais de 800 milhões de usuários ativos mensais, e isso já faz dois anos.

[00:15:59.04]

Para aqueles que são usuários regulares do Discover, provavelmente já viram essa experiência de visualização grande e única de histórias no Discover.

[00:16:08.06]

As histórias ocupam bastante espaço no feed e, se você tocar em uma delas, isso o colocará diretamente na história do editor.

[00:16:16.06]

Isso já existe hoje e oferece uma quantidade decente de tráfego para muitos editores.

[00:16:23.01]

Queremos ajudar os proprietários de sites no WordPress a obter acesso mais fácil ao formato Stories. Então, criamos um plugin Stories for WordPress reformulado.

[00:16:33.01]

Decidimos criar um editor que tornasse fácil e divertido produzir histórias visualmente impressionantes.

[00:16:39.02]

Ele apresenta vários modelos e muitas funcionalidades, como predefinições de máscara, inserção de imagens em outras imagens, amplas opções para editar fontes, imagens de texto, formas e vídeos, e tudo isso em uma interface de usuário muito simples e intuitiva.

[00:16:54.04]

Se você quiser ser notificado quando a versão melhor for lançada, você pode expressar seu interesse no link curto deste slide.

[00:17:01.08]

E se você quiser saber ainda mais sobre isso, pode assistir à sessão de

meu colega, Paul Bakaus, que falará sobre o plug-in de histórias da web e dará uma prévia hoje.

[00:17:15.07]

Por último, mas não menos importante, gostaria de apresentar uma breve visão geral de nossa visão de privacidade na Web, explicar o caminho para concretizar essa visão e falar sobre as opções para compartilhar feedback e colaborar no processo.

[00:17:29.07]

Você provavelmente já viu manchetes sobre os planos do Chrome de encerrar o suporte a cookies de terceiros.

[00:17:35.03]

Mas a visão é mais ampla e com mais nuances do que as manchetes podem sugerir.

[00:17:40.06]

Trata-se realmente de evoluir a Web para respeitar melhor a privacidade do usuário e, ao mesmo tempo, garantir que ela continue a oferecer suporte aos principais modelos de negócios e casos de uso que mantêm a Web vibrante e saudável para todos.

[00:17:55.05]

A comunidade da web precisa fazer mais para apoiar a privacidade e as escolhas do usuário.

[00:18:01.03]

Isso significa abordar o problema de que as mesmas tecnologias, que suportam casos de uso como relevância de conteúdo e publicidade ou prevenção de fraude, também são usadas para fins indesejados

rastreamento na web.

[00:18:15.04]

Principalmente, estamos falando de cookies de terceiros e métodos de rastreamento secretos, como impressões digitais.

[00:18:21.05]

Embora os usuários possam controlar o rastreamento baseado em cookies por meio das configurações do navegador, por exemplo, eles não podem realmente desativar a impressão digital e muitas vezes não têm como saber o que está acontecendo.

[00:18:31.07]

E nenhum desses mecanismos é privado por padrão.

[00:18:36.02]

É por isso que acreditamos que a abordagem responsável é substituir as práticas herdadas por novas soluções de preservação da privacidade.

[00:18:45.08]

Pense neste trabalho em três fases. Primeiro, há coisas que já podemos fazer hoje para melhorar a segurança e a escolha de cookies.

[00:18:55.01]

Um exemplo é a nova política de rotulagem de cookies, conhecida como cookies SameSite, que torna os cookies primários por padrão, melhorando a segurança e reduzindo a oportunidade de rastreamento oculto.

[00:19:08.03]

E também garante que os cookies de terceiros sejam acessados ​​por meio de conexões seguras. Em abril, o Chrome reescreveu temporariamente as alterações do cookie SameSite para garantir a estabilidade e evitar distrações para sites, fornecendo serviços essenciais durante a crise do COVID-19. Este lançamento foi retomado recentemente.

[00:19:29.07]

Em segundo lugar, estamos defendendo um esforço aberto e colaborativo para desenvolver novos padrões da Web para privacidade. Esta é a iniciativa Privacy Sandbox.

[00:19:39.09]

Esse trabalho inclui a criação de novas tecnologias e o suporte a casos de uso importantes sem identificar os usuários nos sites, além de esforços para mitigar o rastreamento oculto, limitando a coleta passiva de dados.

[00:19:55.00]

E somente depois que essas novas soluções de preservação da privacidade estiverem em vigor e atenderem às necessidades do ecossistema, pretendemos eliminar gradualmente o suporte para cookies de terceiros no Chrome.

[00:20:08.06]

Então, essas são as três áreas que consideramos críticas para continuar trabalhando e melhorando para garantir uma web próspera hoje e amanhã.

[00:20:19.01]

E espero que agora você entenda melhor porque cada um deles é tão importante e que grandes mudanças estão acontecendo dentro de cada um.

[00:20:26.06]

Desnecessário dizer que isso também depende de você, seja para garantir que seus clientes ou parceiros entendam e se beneficiem das métricas de desempenho do site, seja para dar acesso às estatísticas certas e ao contexto certo para sua equipe ou seus clientes, ou talvez contribuindo para a discussão em torno dos novos padrões de privacidade.

[00:20:47.03]

Juntos, podemos tornar a Web mais segura, rápida e agradável para usuários finais e proprietários de sites. Obrigado.