PWA and Lighthouse

Ionic Framework ionic-v3
1

Hello everyone,

I am trying to build a PWA using ionic.

I created a new project using sidemenu. After enabled service-workers, and run an audit with lighthouse, I get a lot of bad performance (main.css specialy)

To launch my PWA , I do :

npm run ionic:build --prod
ionic cordova emulate browser --livereload

And obtain this result :

pwa_ionic
pwa_ionic917×969 97.5 KB

My ionic info :

@ionic/cli-utils : 1.10.1
ionic (Ionic CLI) : 3.10.1

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : browser 4.1.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v7.7.1
npm  : 4.1.2
OS   : Windows 10

Main.css is a generated file. so i can’t do this Eliminate render-blocking resources - Chrome for Developers

Any help or suggestion would be great :slight_smile:
Thanks in advance

2

If you use ionic cordova emulate browser to serve your app, I think it will do a dev build. So to test the performance of a production build you have to run ionic build --prod and then serve the contents of www with some tool (or upload it to a server).

Regarding the file size of main.css, one easy thing you can do is remove all unused colors from the $colors array in src/theme/variables.scss. Ideally you will only have one or two colors left. This will reduce the file size already quite a bit. For more advanced stuff, see https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/.

Furthermore Ionic 4 will introduce lazy loading for css, which will bring further performance improvements and the steps from the post above will not be necessary anymore.

Hope that helps.

3

Here some additional tips that I applied to improving my Ionic PWA. https://chrisgriffith.wordpress.com/2017/08/24/case-study-stone-fest-21-pwa/

Yes, Ionic 4 will make life SOOOOO much better.

1 Like
4

Thanks for your reply @ChrisGriiffith & @pwespi
When is ionic 4 released ?

5

No formal date has been announced for Ionic 4.

6

okk thnaks, i will follow this :slight_smile:

Really liked to lean angular, and applied it with ionic. I saw like ionic will give the choose of the framework when we create a new projectt, like read, angular… Right ?
Is there any article about new feature? I dont find

7

Hello All,

I want to share additional link for improving ionic pwa application performance. http://meumobi.github.io/ionic/2018/05/02/optimizing-performance-ionic-pwa.html
I followed most of the directive in the above link and I achieved to increase the performance of my applications

I hope help others.