Painel de auditoria de experiência experience-audit-dashboard
Saiba como a Auditoria de experiência valida seu processo de implantação e ajuda a garantir que as alterações implantadas atendam aos padrões básicos de desempenho, acessibilidade, práticas recomendadas e SEO, por meio de uma interface de painel clara e informativa.
Visão geral overview
A Auditoria de experiência valida o processo de implantação e ajuda a garantir que as alterações sejam implantadas:
-
Atenda aos padrões básicos de desempenho, acessibilidade, práticas recomendadas, SEO (otimização do mecanismo de pesquisa) e PWA (Aplicativo Web Progressivo).
-
Não introduza regressões.
A Auditoria de experiência no Cloud Manager garante que a experiência do usuário no site seja do mais alto padrão.
Os resultados da auditoria são informativos e permitem que o gerente de implantação veja as pontuações e as alterações entre as pontuações atual e anterior. Essa informação é valiosa para determinar se foi introduzida uma regressão com a implantação atual.
A Auditoria de experiência é disponibilizada pelo Google Lighthouse, uma ferramenta de código aberto da Google, e está habilitada em todos os pipelines de produção do Cloud Manager.
Disponibilidade availability
A Auditoria de experiência está disponível para o Cloud Manager:
- Pipelines de produção de sites, por padrão
- Desenvolvimento de pipelines de pilha completa, opcionalmente
- Pipelines de front-end de desenvolvimento, opcionalmente
Consulte a seção Configuração para obter mais informações sobre como configurar a auditoria para os ambientes opcionais.
As auditorias são executadas como parte do pipeline. As auditorias também podem ser executadas sob demanda fora dos pipelines.
Configuração configuration
A Auditoria de experiência está disponível por padrão para pipelines de produção. Ele pode ser ativado opcionalmente para pipelines de pilha completa e front-end de desenvolvimento. Em todos os casos, é necessário definir quais caminhos de conteúdo são avaliados durante a execução do pipeline.
-
Dependendo do tipo de pipeline que você deseja configurar, siga as instruções para:
- Adicione um novo pipeline de produção se desejar definir os caminhos a serem avaliados pela auditoria.
- Adicione um novo pipeline de não produção se desejar habilitar a auditoria em um pipeline de front-end ou de pilha completa de desenvolvimento.
- Ou você pode editar um pipeline existente e atualizar as opções existentes.
-
Se você estiver adicionando ou editando um pipeline de não produção para o qual deseja usar a Auditoria de Experiência, marque a caixa de seleção Auditoria de Experiência na guia Código Source.
- Isso só é necessário para pipelines de não produção.
- A guia Auditoria de experiência aparece quando a caixa de seleção é marcada.
-
Para pipelines de produção e não produção, você define os caminhos que devem ser incluídos na Auditoria de experiência na guia Auditoria de experiência.
- Os caminhos de página devem começar com
/
e são relativos ao seu site. - Por exemplo, se o site for
wknd.site
e quiser incluirhttps://wknd.site/us/en/about-us.html
na Auditoria de Experiência, insira o caminho/us/en/about-us.html
.
- Os caminhos de página devem começar com
-
Toque ou clique em Adicionar página e o caminho é preenchido automaticamente com o endereço do ambiente e adicionado à tabela de caminhos.
-
Continue a adicionar caminhos, conforme necessário, repetindo as duas etapas anteriores.
- É possível adicionar no máximo 25 caminhos.
- Se você não definir nenhum caminho, a página inicial do site será incluída na Auditoria de experiência por padrão.
-
Clique em Salvar para salvar o pipeline.
Resultados da auditoria de experiência results
Os resultados da Auditoria de Experiência são apresentados na fase Teste de preparo do pipeline de produção através da página de execução do pipeline de produção.
A Auditoria de Experiência fornece as pontuações medianas do Google Lighthouse para as páginas configuradas e a diferença na pontuação para a verificação anterior.
Nesta exibição resumida, na fase Teste de Preparo do pipeline, você tem duas opções:
Além do resumo apresentado nos detalhes de uma execução de pipeline, você também pode acessar diretamente os resultados completos da auditoria usando a guia Relatórios do painel do Cloud Manager para acessar o relatório completo diretamente.
- Se desejar detalhes sobre como a auditoria funciona, consulte a seção Detalhes da avaliação da auditoria de experiência.
- Se você quiser saber como executar uma auditoria de experiência sob demanda, consulte a seção Relatórios de auditoria sob demanda.
- Se você tiver problemas com a auditoria, consulte a seção Problemas de Encontros de Auditoria de Experiência.
- Para obter dicas gerais de desempenho, consulte a seção Dicas Gerais de Desempenho.
Exibir páginas mais lentas view-slowest-pages
Tocar ou clicar em Exibir páginas mais lentas abre a caixa de diálogo 5 páginas mais lentas, mostrando as cinco páginas de menor desempenho que você configurou para auditoria.
As pontuações são detalhadas por Desempenho, Acessibilidade, Práticas recomendadas e SEO, juntamente com o desvio de cada métrica em relação à última auditoria.
Por padrão, a caixa de diálogo é aberta com as pontuações dos dispositivos móveis. Você pode alterar isso para pontuações da área de trabalho usando a opção Dispositivos na parte superior da caixa de diálogo.
A caixa de diálogo tem como objetivo fornecer uma visão geral rápida. Para obter detalhes completos, toque ou clique em Exibir relatório completo.
Exibir Relatório Completo view-full-report
É possível exibir o relatório completo de Auditoria de experiência por:
- Tocando ou clicando em Exibir relatório completo na caixa de diálogo 5 páginas mais lentas.
- Tocando ou clicando em Exibir relatório completo ao exibir a execução de um pipeline.
- Tocando ou clicando na guia Relatórios no Cloud Manager.
A guia Relatórios do Cloud Manager está aberta, mostrando a Auditoria de experiência.
O relatório divide-se em duas áreas:
Pontuações de páginas: tendência trend
Por padrão, a exibição selecionada para Pontuações de página - tendência é pontuações medianas para os Últimos 6 meses.
Use os menus suspensos Selecionar e Exibir na parte superior e inferior do botão do gráfico para selecionar detalhes específicos da página e diferentes intervalos de tempo, respectivamente. Toque ou clique no e no botão atualizar tendência na parte superior do gráfico para aplicar as seleções e atualizar o gráfico.
Ao mover o mouse sobre o gráfico, uma dica de ferramenta exibe os valores das categorias do Google Lighthouse em pontos específicos do tempo.
Se você tocar ou clicar no gráfico em um ponto no tempo, um popover será aberto com detalhes dessa verificação. Toque ou clique em abrir verificação de auditoria de experiência para carregar os resultados dessa verificação na seção Resultados da verificação de auditoria de experiência.
Resultados da verificação de auditoria de experiência scan-results
A seção Resultados da verificação de auditoria da experiência fornece recomendações sobre como melhorar sua pontuação e os detalhes de todas as páginas digitalizadas. Ele está dividido em duas seções:
Recomendações recommendations
A seção Recommendations mostra um conjunto agregado de insights. Por padrão, as recomendações para desempenho são exibidas. Use o menu suspenso ao lado do cabeçalho Recommendations para alterar para outra categoria.
Toque ou clique na divisa de qualquer recomendação para revelar detalhes sobre ela.
Quando disponíveis, os detalhes expandidos da recomendação também contêm a porcentagem do impacto das recomendações para ajudar a se concentrar nas alterações mais impactantes.
Toque ou clique no link exibir páginas na exibição de detalhes para ver as páginas às quais a recomendação se aplica.
Páginas digitalizadas scanned-pages
A seção Páginas digitalizadas fornece pontuações detalhadas em todas as páginas digitalizadas. Você pode usar os botões Anterior e Avançar para percorrer os resultados e escolher em quantos a exibição deve paginar.
Tocar ou clicar no link de uma página específica atualiza o filtro Selecionar da seção Pontuações da página - tendência e mostra a guia Pontuações e recomendações da página selecionada.
A guia Relatórios brutos fornece pontuações para cada auditoria da página. Toque ou clique na data do relatório na coluna Relatório de Farol para recuperar um arquivo JSON dos dados brutos.
Uma nova guia será aberta no navegador, apontando para https://googlechrome.github.io/lighthouse/viewer/
com uma URL assinada do relatório Lighthouse raw JavaScript Object Notation (JSON) da página selecionada, que será aberta automaticamente para sua inspeção detalhada
Relatórios de auditoria por solicitação on-demand
Além de serem executados durante a execução do pipeline, os relatórios da Auditoria de experiência também podem ser gerados sob demanda. Essa é uma boa solução para digitalizar rapidamente suas páginas, sem precisar executar um pipeline.
Para executar uma varredura por solicitação, navegue até a guia Relatórios para ver o relatório de auditoria completo e toque ou clique no botão Executar verificação.
O botão Executar verificação fica indisponível e está marcado com um ícone de relógio quando uma verificação por solicitação já está em execução.
As varreduras por solicitação acionam uma Auditoria de experiência para as 25 páginas configuradas mais recentes e normalmente são concluídas em alguns minutos.
Após a conclusão, o gráfico de pontuações será atualizado automaticamente e você poderá inspecionar os resultados exatamente como em uma verificação de execução de pipeline.
Você pode filtrar o gráfico de pontuações com base no tipo de acionador usando o seletor Acionador.
A Auditoria de experiência encontra problemas issues
Se as páginas que você configurou para serem auditadas não estivessem disponíveis ou houvesse outros erros na auditoria, a Auditoria de experiência refletirá isso.
O pipeline mostra uma seção de erro expansível para exibir os caminhos de URL relativos que não podia acessar.
Se estiver exibindo o relatório completo, os detalhes serão mostrados na seção Resultados da verificação de auditoria da experiência, que também é expansível.
Alguns motivos pelos quais as páginas podem não estar disponíveis são:
- A configuração bloqueia o acesso.
- A página não existe.
- A página redireciona exigindo autenticação diferente da básica.
- Problema interno.
- Etc.
Dicas gerais de desempenho performance-tips
Dois dos problemas de impacto mais comuns que são fáceis de corrigir estão relacionados com as mudanças cumulativas de layout (CLS) e a maior tinta de conteúdo (LCP).
Estes podem ser melhorados através de:
- O carregamento das imagens acima da dobra não é lento (o conteúdo é visível no navegador sem a necessidade de rolagem para baixo).
- Priorizar corretamente como os recursos são carregados (por exemplo, carregando de forma assíncrona as imagens abaixo da dobra após o carregamento do documento).
- Busca prévia de arquivos JavaScript e CSS usados para renderizar conteúdo acima da dobra (se necessário).
- Reserva de espaço vertical ao atribuir uma proporção aos contêineres que carregam lentamente ou são renderizados posteriormente.
- Conversão de imagens para o formato WebP para reduzir seu tamanho.
- Usando
<picture>
e imagemsrcset
com tamanhos de imagem variados para diferentes tamanhos de visor (e garantindo que o redimensionamento funcione).
Detalhes de avaliação da auditoria de experiência details
Os detalhes a seguir fornecem informações adicionais sobre como a Auditoria de experiência avalia o site. Eles não são necessários para o uso geral do recurso e são fornecidos aqui para fins de integridade.
-
A auditoria verifica o domínio de origem (
.com
) conforme definido nos caminhos configurados da página Auditoria de Experiência do editor para simular experiências de usuário reais com mais precisão e ajuda a tomar decisões mais conscientes sobre como gerenciar e otimizar seus sites. -
Em pipelines de pilha completa de produção, o ambiente de preparo é verificado.
- Para garantir que a auditoria forneça detalhes relevantes durante a auditoria, o conteúdo do ambiente de preparo deve estar o mais próximo possível do ambiente de produção.
-
As páginas exibidas na lista suspensa Selecionar na seção Pontuações de páginas - tendência são todas páginas conhecidas que foram digitalizadas no passado pela Auditoria de Experiência.
-
Uma recomendação pode ter um ganho potencial e uma diferença em relação à verificação anterior.
- A Auditoria de experiência estima o ganho potencial processando o relatório bruto de cada página e correlacionando os bytes ou milissegundos desperdiçados com um insight que tem um impacto ponderado na pontuação de desempenho.
- A auditoria fornece essas informações (bem como as páginas afetadas) para ajudar a decidir qual recomendação seguir.
- Para obter mais detalhes, consulte a seção Dicas Gerais de Desempenho
-
Considerando que um pipeline de front-end pode ser implantado em um ambiente existente (ou que pode haver vários pipelines de front-end direcionados ao mesmo ambiente) e que os resultados da verificação são agregados em um nível de ambiente, as pontuações, as tendências e as recomendações são exibidas no mesmo ambiente selecionado, independentemente da execução do pipeline que acionou a verificação.