Melhore o desempenho do usuário com o Pulse Insights

Quando eu estava aprendendo a desenvolver a Web, otimizar nossos sites para que tivessem menos de 200kb era o padrão que meus colegas e eu tínhamos que atingir. A velocidade da Internet não era tão rápida e sites grandes criavam uma experiência de usuário muito ruim. Para isso, íamos a cada página, abríamos as ferramentas de desenvolvimento (firebug era a ferramenta escolhida na época) e medíamos o tamanho da página.

Se descobríssemos que uma página era muito grande, comprimiríamos as imagens, caso não tivéssemos encontrado nenhuma na primeira vez, reduziríamos o código e faríamos todo o possível para ficar abaixo desse número mágico. Era um trabalho muito repetitivo e cansativo, mas o motivo pelo qual era tão importante naquela época é o mesmo que é agora. Quanto menor for o tamanho do seu site, mais rápido ele será carregado, melhor será a experiência dos usuários.

Para nossa sorte, as conexões de Internet se tornaram muito mais rápidas, mas nossos sites também ficaram muito maiores. Um site comum agora tem alguns megabytes de tamanho e os usuários finais, mais do que nunca, querem visualizar o conteúdo do seu site no momento em que clicam no link.

Então, tenho uma pergunta para o senhor. Qual é o tamanho médio da página em seu site? Quanto tempo leva para o usuário médio carregar uma página em seu site? E quando foi a última vez que o senhor navegou em seu site página por página para garantir que suas imagens fossem compactadas e o código fosse reduzido?

Alguns podem dizer que foi há alguns dias, mas o restante de nós precisará voltar e consultar o calendário. Pode ter sido há algum tempo.

Não estou tentando ser preguiçoso, mas hoje em dia, infelizmente, não tenho tempo para ir página por página e testar manualmente essas coisas. Tenho novos designs nos quais preciso trabalhar, recursos atuais que precisam ser aprimorados, bugs que precisam ser corrigidos e uma lista de tarefas que nunca diminui.

Como posso garantir que cada uma de nossas páginas seja otimizada, mas ainda assim manter alguma forma de sanidade?

Hoje vou apresentar aos senhores uma ferramenta chamada Pulse Real User Monitoring (Monitoramento do usuário real)que inclui um poderoso recurso chamado Pulse Insights. O Pulse Insights foi criado especificamente pelo Raygun para poupar horas de trabalho manual de teste dos desenvolvedores, para que o senhor possa se concentrar em todas as outras tarefas.

O que é o Pulse Real User Monitoring?

O Pulse Real User Monitoring mede a experiência do usuário final das pessoas que realmente visitam e passam tempo no seu site. Essas informações são fornecidas em tempo real, o que é inestimável para obter visibilidade de todos os tipos de ações que, de outra forma, não seriam vistas. Um exemplo é que o senhor pode ver como uma implementação recente afetou os usuários finais e quais páginas estão apresentando os maiores tempos de carregamento.

O Pulse Real User Monitoring rastreia cada sessão individual do usuário final e mede o desempenho de páginas e ativos para essa sessão específica.

Se quiser saber mais sobre o Pulse Real User Monitoring e o que ele pode fazer pelos seus projetos, o senhor pode ler um post anterior que escrevemos aqui. É a introdução do Pulse Insights, no entanto, que torna a versão do Raygun realmente poderosa.

O que é o Pulse Insights?

Usando os dados fornecidos pelo Pulse Real User Monitoring, o Pulse Insights rastreia automaticamente o seu site toda semana e, em seguida, fornece tarefas acionáveis para o senhor implementar, o que melhorará o desempenho geral do seu site. Isso elimina a necessidade de o senhor verificar manualmente o seu site, página por página, em busca de problemas de desempenho.

Depois de carregar a página, os resultados são validados com base em uma série de 22 regras que são conhecidas por mostrar benefícios de desempenho se implementadas.

Por exemplo, o Pulse Insights garante que suas imagens sejam compactadas, para reduzir seu código, e ainda vai além, usando o async ou defer em elementos de script.

Os principais benefícios que o Pulse Insights oferece à sua equipe de software são:

• Conhecimento instantâneo das melhorias de desempenho
• Descubra por que uma regra é importante
• Aumente a velocidade de suas páginas mais visualizadas
• Receba notificações sobre problemas de desempenho diretamente em seu software ChatOps
• Receba semanalmente scans confiáveis

Conhecimento instantâneo dos aprimoramentos de desempenho que o senhor pode fazer

Como sabemos que o tempo de desenvolvimento está sempre em alta demanda, a primeira exibição que o senhor vê no Pulse Insights é uma lista de todas as regras que estão falhando no momento em seu site.

Essa é a minha visualização favorita porque, usando essa página, o senhor pode escolher qual regra corrigir com base no número de páginas afetadas, nos problemas que ela causou e na dificuldade de implementação da regra. Isso significa que o senhor pode obter o melhor resultado possível.

Descubra por que essa regra é importante e como o senhor pode resolvê-la

Cada regra tem sua própria página detalhada para fornecer ao senhor mais informações.

A descrição do problema fornece insights sobre quando a regra foi acionada, evitando que o senhor tenha que pesquisar incessantemente na Web. Os recursos que causaram a falha de uma regra são exibidos no painel, permitindo que o senhor descubra rapidamente por que uma determinada regra está falhando.

Aumente a velocidade de suas páginas mais visualizadas

Cada página não tem a mesma importância e, embora o senhor precise que as páginas carreguem rapidamente, haverá momentos em que precisará otimizar determinadas páginas. As páginas de destino e de inscrição são um bom exemplo de páginas que podem ter prioridade em sua empresa.

É aqui que o “Páginas” no Pulse Insights entra em ação. O senhor pode pesquisar uma página específica em seu site (com base na pontuação, nas visualizações ou no nome) e, em seguida, visualizar as regras individuais que afetam essa página:

Isso permite que o senhor aumente o desempenho das páginas que mais lhe interessam e, em seguida, veja o desempenho das regras ao longo do tempo.

Receba notificações sobre problemas de desempenho diretamente em seu software ChatOps

O Pulse Real User Monitoring também se integra ao software ChatOps Slack e HipChat, para que sua equipe possa ser alertada sobre problemas de desempenho em tempo real. Dessa forma, o senhor pode fazer a triagem dos problemas de desempenho e evitar a perda de tempo com pequenas correções:

Receba semanalmente scans confiáveis

O Pulse Insights examina regularmente o seu site e fornece relatórios semanais confiáveis sobre exatamente onde a sua equipe deve concentrar esforços quando se trata de desempenho. Ter a tranquilidade de não precisar verificar seu site manualmente economiza muito tempo. A captura de tela abaixo mostra um relatório típico que apresenta uma visão geral do desempenho do seu site a partir do Pulse Insights:

Veja como começar a usar o Pulse Real User Monitoring e o Pulse Insights:

Primeiros passos

Primeiramente, faça um teste gratuito de 30 dias do Pulse Real User Monitoring (para aplicativos da Web e móveis). O senhor obterá todos os benefícios do Pulse Insights.

O Pulse Real User Monitoring é fácil de instalar, com apenas algumas linhas de código a serem adicionadas ao seu aplicativo. Veja abaixo um passo a passo detalhado:

Instalar a biblioteca do cliente

<script type="text/javascript">
    !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
    (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
    f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
    h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
    e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

Basta adicionar o seguinte snippet acima do fechamento </head> para cada página que o senhor deseja rastrear. Isso fará o download do provedor Raygun4JS de forma assíncrona a partir da CDN do Raygun.

Habilite o monitoramento do usuário real do Pulse

<script type="text/javascript">
  rg4js('apiKey', 'XXXXXXXXXXXXXX');
  rg4js('enablePulse', true);
  rg4js('enableCrashReporting', false);
</script>

Em seguida, adicione o script acima logo acima do fechamento </body> . O senhor pode obter uma apiKey depois de se inscrever e criar um aplicativo para o Pulse.

Implantar e enviar dados

Quando o senhor tiver implementado essas atualizações, seus usuários finais começarão a enviar dados para o Pulse Real User Monitoring. Assim, o senhor poderá ver as informações de detalhamento de desempenho de cada página que os usuários finais visitam em seu site.

Como o senhor pode ver, é fácil configurar e enviar dados.

Considerações finais

Já se foi o tempo em que os sites precisavam ter menos de 200kb para serem carregados rapidamente. O senhor não precisa mais testar manualmente cada página.

Se o senhor deseja entregar seu conteúdo aos usuários finais o mais rápido possível e não consegue responder às perguntas:

• “quanto tempo leva para o usuário médio carregar uma página no seu site?”
• “Por que nosso site está tão lento?”

O Pulse Real User Monitoring e o Pulse Insights fornecerão os dados de que o senhor precisa para identificar problemas rapidamente, bem antes que eles afetem os usuários finais. O Pulse Real User Monitoring também foi criado para complementar Raygun Crash Reporting. Os relatórios de erros podem ser comparados com os relatórios de desempenho para descobrir exatamente o que aconteceu, onde e com quem.

Oferta especial

O Pulse Real User Monitoring lhe dá ainda mais poder para encontrar e corrigir problemas de desempenho em seus aplicativos da Web bem antes que eles afetem os usuários finais. Ele pode ser usado de forma independente ou em conjunto com o software de rastreamento de erros do Raygun para obter ainda mais informações sobre os problemas que afetam os usuários.

A Raygun está oferecendo um mês grátis de Pulse Real User Monitoring para todos os leitores do David Walsh Blog!

Basta fazer um teste gratuito de 30 dias aqui e clicar no banner abaixo para obter uma oferta especial!