PWA and Lighthouse

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 :

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


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

Main.css is a generated file. so i can’t do this

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

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

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.

1 Like

Here some additional tips that I applied to improving my Ionic PWA.

Yes, Ionic 4 will make life SOOOOO much better.

1 Like

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

No formal date has been announced for Ionic 4.

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

Hello All,

I want to share additional link for improving ionic pwa application performance.
I followed most of the directive in the above link and I achieved to increase the performance of my applications

I hope help others.