Initial pageload para aplicações SPA?

[klaygomes]

Pessoal, sobre initial page load, o que vocês consideram hoje como aceitável para uma SPA no trabalho de vocês? (Esquecendo as outras métricas).

Estou fazendo um estudo a respeito dessa métrica e precisava de alguns inputs, como vocês estão fazendo?

[adamfoerster]

Considerando que você está falando de SPA que tenham um objetivo de ser um web app e não uma web page na minha empresa costumamos a medir assim:

• First Contentful Paint: > 2 s;
• Speed Index: > 2.5 s
• Time to interactive: > 5 s

Observações

• Usamos o Web Dev para fazer os testes de velocidade. Pode ser qualquer outro. Contanto que o teste não ocorra localmente na sua máquina.
• Sempre procuramos usar service workers para cachear os assets e bundles, assim a partir do segundo acesso o TTI cai para menos de 3 s.
• Sempre usamos Lazy Loading nos módulos (no Angular isso é bem fácil).
• Sempre colocamos um splash screen ou skeleton page para o usuário saber que o app está carregando (colocar o png da logo no centro da tela girando ou piscando já serve como ponto inicial).
• Desativamos as tags (analytics, mixpanel etc) pq apesar de poder colocar o script como defer o First CPU Idle ainda fica mais alto. Lembrando que essas tags geralmente baixam outros scripts para executar.

[klaygomes]

@adamfoerster como você chegaram a esses números? Fizeram algum estudo antes com a base de vocês?

[vNNi]

@adamfoerster como assim desativamos as tags? pode explicar pf? vocês tiraram do app ou na hora do primeiro load elas não carregam?

[felipefialho]

@adamfoerster Ótimas dicas.

Percebi que estão usando Angular, quais os números de vocês, tendo como base o Lighthouse, emulando Slow 4g no Mobile?

[adamfoerster]

Calma aí pessoal, vamos um por vez hehehe.

@klaygomes trabalho em um startup com um equipe bem enxuta (5 devs). O dado dos 3 segundos para index acho que é conhecimento geral, portanto tentamos ficar abaixo. Quantos aos outros números, fiz um estudo dos concorrentes e de web apps famosos.
Dá pra fazer uma análise rápida testando páginas de web apps famosos (lembrando que o web.dev vai entrar deslogado em qualquer endereço que você quiser testar então tem que ser algum que mostre conteúdo deslogado).

Facebook

First Meaningful Paint: 3.5 s
Speed Index: 4.9 s
Time to Interactive: 6.5 s

Youtube

First Meaningful Paint: 3.4 s
Speed Index: 4.2 s
Time to Interactive: 8.6 s
Portanto dá pra ver que é bem possível ficar abaixo desses números e também que se ficar um pouco acima o mundo não vai acabar.

@vNNi quando o projeto é bem pequeno só comento as tags e faço o teste na mão. Quando é maior faço uma versão de staging e condiciono o carremento das tags a algum parametro no arquivo de ambiente (.env no react e environment no angular).

@felipefialho nosso produto principal é um dashboard de big data de marketing voltado pra b2b. Então nem temos versão mobile e não dá pra acessar deslogado. Portanto tenho que fazer o teste na máquina mesmo.
O resultado foi:
First Contentful Paint: 0.4 s
First Meaningful Paint: 1.3 s
Speed Index: 2.5 s
First CPU Idle: 2.7 s
Time to Interactive: 2.9 s
Estimated Input Latency: 130 ms

Obs: Ainda não fizemos atualização pro Angular 8. Não por dificuldade, mas porque temos outro projeto urgente no qual estamos trabalhando.

[eliseumds]

Uma coisa importante: quando fizer esses measurements, tente simular um caso médio entre todos os visitantes do seu site considerando device, qualidade da conexão e geografia (o quão longe eles estão dos seus servidores).