Performance em PWA's

Oi Benisson,

Realmente vc tem uma tarefa complicada pela frente.

Para otimizar o primeiro carregamento nesse mundo de SPA, geralmente recomendamos o server side rendering (SSR). No mundo Angular, é o que chamam de Universal: https://universal.angular.io/

Mas isso só vai te ajudar um pouco. O crítico na sua webapp, pelo que percebi, é o volume de JS que existe - quase 2MB. Mesmo fazendo SSR, esse JS vai ter que ser baixado e executado na main thread. Só de parsing e execução do JS já dão vários segundos.

Você precisa diminuir esse JS.

A parte mais óbvia é repensar a app pra ver se não tem coisas que dá pra cortar, especialmente dependências. Mas claro que isso é limitado.

Se ainda não estiver usando, faça o tree shaking com webpack pra ele remover código inútil pra você.

Outra otimização que não sei se já tá usando é habilitar o AOT Compiler do Angular 2.

Tudo isso, apesar de não ser trivial, vai aliviar o carregamento inicial. Mas é o que vc disse: uma SPA angular tem essa arquitetura de baixar tudo no início e numa app grande isso vira gargalo.

O ideal era fazer o code splitting por rota e carregar lazy cada bundle de acordo com a rota atual apenas. Mas pra falar a verdade não sei quão fácil está isso em Angular 2 hoje em dia (já vi um pessoal fazendo com React e era bem chatinho).

Abraço

Obrigado pela resposta Sérgio.

Já tentei enxugar o js e vou tentar enxugar um pouco mais, apesar de não ter muitas dependências.

Já estou usando o AOT compiler.

Já estou usando o code splitting por partes da app, ou seja, faço o primeiro carregamento de tudo que ele vai precisar de imediato e o lazy a partir da interação do usuário.

O lazy loanding no angular 2 é bem tranquilo de implementar, não estou usando tree shaking com webpack, vou tentar e ver o resultado.

Posso deixar o tópico aberta pra gente ir acompanhando as evoluções ?

Obrigado.

Boa, já tá fazendo bastante coisa!

Mas se vc ja ta com code splitting por partes da App e carregando lazy, pq ele tá carregando 2MB de JS logo no form de login?

Então.

Os 2MB de JS que você esta considerando é tirando o gzip, certo ? descompactado. Essa quantidade de JS provável que venha das próprias dependências :

"dependencies": { "@angular/common": "^2.3.1", "@angular/compiler": "^2.3.1", "@angular/core": "^2.3.1", "@angular/forms": "^2.3.1", "@angular/http": "^2.3.1", "@angular/platform-browser": "^2.3.1", "@angular/platform-browser-dynamic": "^2.3.1", "@angular/router": "^3.3.1", "core-js": "^2.4.1", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2", "jquery": "^2.2.4", "angular2-materialize": "^6.3.0" },

É, tem razão, não tinha percebido. Aparentemente o gzip tá desabilitado lá no servidor, certo?

Huuuuummm... Entendi, estou acessando da rede interna e da rede interna o gzip esta habilitado, e todo o primeiro carregamento esta em 307kb. Já para rede externa o servidor não esta com o gzip habilitado, então todo o primeiro carregamento esta com mais de 2MB. E como essa avaliação pelo lighthouse é feito na internet o que ele esta apontando seja isso.

Mas, com o gzip habilitado em um primeiro carregamento com 307kb esta bom ?

Ufa, 300KB já é bem melhor! hehehe

Mas precisa medir a experiencia do usuario mesmo. Ver se isso trava demais.

De qualquer forma, meu chute é que o lighthouse vai te odiar pra sempre nao interessa mto o que vc faça hahaha. Os caras la sao meio anti-SPA entao acho dificil uma app Angular tirar uma nota boa por la. Nao foca tanto na nota deles, mais na experiencia do usuario mesmo.

Chegou a pensar no server-side rendering? Aliviria um pouco tbm

Pois é... testei no plugin do lighthouse do chrome, para ver se a PWA estava de acordo com os conceitos deles, e ficou com 93% então esta bom neh ?

Sobre o server-side rendering, no meu cenário é um pouco difícil por conta de infra, estou rodando em um ambiente de laboratório por enquanto, mas no ambiente real estou lutando com os caras para parte estática ficar em um apache da vida, ao invés de um weblogic, para você ver o nível de burocracia....rsrs... mas, vou fazer alguns testes com 3g e o gzip habilitado, e como vc disse focar na experiência do usuário com as restrições com tenho.

Valeu Sérgio.