A grande mudança no mundo do desempenho para 2015 [este artigo está sendo republicado a partir do Calendário 2015 de Desempenho] ​​é a mudança para as métricas que fazem um trabalho melhor ao medir a experiência do usuário. A indústria de desempenho cresceu com foco em tempo de carregamento de página, mas equipes com sites mais avançados começaram a substituir PLT com métricas que têm mais a ver com a renderização e a interatividade. Os melhores exemplos dessas novas métricas focadas em UX são Start Render e o Speed Index.

Start Render e o Speed Index

Um início rápido no tempo de renderização é importante para uma boa experiência do usuário porque, uma vez que o usuário solicita uma nova página, eles são deixados olhando para a página antiga ou, pior ainda, uma tela em branco. Isso é frustrante para os usuários porque nada está acontecendo e eles não sabem se o site caiu, se eles devem recarregar a página, ou se devem simplesmente esperar mais tempo. Um início rápido no tempo de renderização significa que o usuário não tem que experimentar essa frustração, porque ele tem a garantia de que o site está funcionando e entregando seu pedido.

Speed Index, uma métrica desenvolvida por Pat Meenan como parte do WebPageTest, é o tempo médio em que as partes visíveis da página são exibidas. Enquanto iniciar o tempo de renderização captura quando a experiência de renderização é iniciada, o Speed Index reflete a rapidez com que toda a janela de exibição renderiza. Essas métricas medem coisas diferentes, mas ambas se concentram em como as páginas renderizam rapidamente, o que é fundamental para uma boa experiência do usuário.

Recursos críticos

Os principais bloqueadores para processamento rápido são stylesheets e scripts síncronos. Stylesheets bloqueiam toda a renderização na página até que terminem de carregar. Scripts síncronos (por exemplo, <script src=”main.js”>) bloqueiam a renderização de todos os elementos DOM que o seguem. Portanto, os scripts síncronos no HEAD da página bloqueiam toda a página de renderizar até que terminem de carregar.

Eu chamo stylesheets e scripts síncronos de “recursos de bloqueio críticos” por causa de seu grande impacto na renderização. Alguns meses atrás, eu decidi começar a controlar isso como uma nova métrica de desempenho como parte do SpeedCurve e do HTTP Archive. A maioria dos serviços de desempenho já tem métricas para scripts e stylesheets, mas uma métrica separada dos recursos críticos é diferente em algumas maneiras:

• Ela combina stylesheets e scripts síncronos em uma única métrica, tornando mais fácil de acompanhar o seu impacto.
• Ela só conta scripts síncronos. Scripts assíncronos não bloqueiam renderização, assim eles não estão incluídos. Os dados do HTTP Archive para as maiores 500 mil URLs do mundo mostram que os sites têm, em média, 10 scripts síncronos e 2 scripts assíncronos, por isso ignorar esses scripts assíncronos dá uma medição mais precisa do impacto sobre a renderização. (Eu faço isso como uma métrica WebPageTest customizada. O código está aqui.)
• Scripts síncronos carregados no iframe não estão incluídos porque eles não bloquear o processamento da página principal. (Eu ainda estou trabalhando no código para ignorar stylesheets no iframe.)

Métrica crítica

Estou confiante de que essa nova métrica “recursos críticos” irá provar ser a chave para rastrear uma boa experiência do usuário em termos de desempenho. Se isso for verdade, ela terá uma adoção crescente e nós ganharemos mais experiência correlacionando isso com outras métricas que refletem uma boa experiência do usuário.

Nesse meio tempo, eu adicionei essa métrica ao HTTP Archive e medi a correlação do começo do tempo de renderização, índice de velocidade e tempo de carregamento da página. Aqui estão os resultados para o rastreamento de 01 de dezembro de 2015:

A métrica de recursos críticos descrita neste artigo é chamada de “CSS & Sinc JS” nos gráficos acima. Ela tem a maior correlação com o Speed Index e a segunda maior correlação para inicialização do Start Render. Isso mostra que “recursos críticos” é um bom indicador de desempenho de renderização. Ela não aparece no top 5 das variáveis ​​correlacionadas para tempo de carregamento, o que é bom. A maioria das pessoas concorda que o tempo de carregamento da página já não é uma boa métrica, pois não reflete a experiência do usuário.

Todos nós queremos criar ótimas e agradáveis experiências de usuário. Com a complexidade de aplicações web de hoje – preloading, lazy-loading, sync e async scripts, imagens dinâmicas etc. – é importante ter métricas que nos ajudem a saber quando o nosso desempenho na experiência do usuário está escorregando. Acompanhar recursos críticos fornece um indicador precoce de como o nosso código pode afetar a experiência do usuário, para que possamos manter nossos websites rápidos e nossos usuários felizes.

***

Steve Souders faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://www.stevesouders.com/blog/2016/02/10/critical-metric-critical-resources/