How to create a PWA a scoring 90+ score in Google Lighthouse using Ionic 2

I just created a Progressive Web App that scores 99 out of 100 in the Lighthouse auditing report. I used Ionic 2 (Angular) to get the results I wanted, here’s how I did it:

Install Ionic globally

To use the Ionic CLI we fist need to install Ionic globally.

$ sudo npm install -g ionic cordova

Create a new blank Ionic 2 project

After that we can make a new Ionic 2 project by executing the following command using the Ionic CLI.

$ ionic start MyPWA blank — v2

Serve the application

Execute the ionic serve command to serve the application in your browser. Serving the application in the browser automatically creates a web based build of your Ionic project.

$ ionic serve

Install Lighthouse for Google Chrome

Click here and install Lighthouse. After installation and icon will appear.

Run Lighthouse to generate a report

If you click on the Lighthouse icon it will do some tests and generate a report.

You need to close Chrome Developer tools to be able to run the test.

Optimize 📈

1. App can load on offline/flaky connections

Ensuring your web app can respond when the network connection is unavailable or flaky is critical to providing your users a good experience. This is achieved through the use of a Service Worker.

You can enable the Service Worker in Ionic by un-commenting the Service Worker part in the index.html

After enabling you automatically resolve the Service Worker fail under User can be prompted to Add to Homescreen

2. Site is progressively enhanced

Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.

We’re going to add some code to our index.html file to let the user know that they need to enable JavaScript to get the full experience. Ionic wouldn’t be able to provide a functional experience without using JavaScript.

 <h1>You don’t have javascript enabled.</h1>
 <p>Please enable it to get the full experience.</p>

4. Page load performance is fast

Users notice if sites and apps don’t perform well and that will give them a bad experience. To pass this point in the report let’s make a production build using Ionic CLI’s build command and the — prod flag.

$ ionic build — prod

Create a secure hosting environment using Firebase 🔥

Head to Firebase and create an account. Once your account has been created go to the Firebase console to create a new project.

That’s it you’ve created your first Firebase project 🎉

As you’ve might have noticed Firebase includes a lot of features from analytics, to cloud messaging to hosting. We are going to use the last one to host our PWA in a secure environment.

Deploy 📦

We can deploy to Firebase by using the Firebase CLI login, init & deploy commands. First, you need to login into your Firebase account (a web browser will pop-up).

$ firebase login

After that traverse to the right directory and execute Firebase init, select hosting and select the project we’ve created above.

$ firebase init

Set the www folder as default

After initializing the project we can simply deploy the application to Firebase by executing.

$ firebase deploy

That’s it we’ve deployed our package 👍🏻

Run Lighthouse (again) to generate a report

Click on the lighthouse icon when in your Firebase environment, again it will do some tests and generate a report. This time, and most of the times it will generate a 90+ score.

100 out of 100?

If you want to get a perfect score you should need to optimize more. Due to the way Ionic was build the first meaningful paint, perceptual speed index, time to interactive are higher than recommended. In my opinion, this wouldn’t be an issue but there’s always room for improvement.

We can measure our application by applying the RAIL method. RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in different ways:

There a couple of ways to improve the performance, the two main parts would be Optimizing Content Efficiency & adjusting the Critical Rendering Path

Github repository

I’ve made a repository containing the code of myPWA feel free to clone and use it, it’s released under MIT license. Also if you want to add something to the blog & starter, just add a pull request or send me a tweet.

Thank you for taking the time to reading this story! If you enjoyed reading this story, clap for me by clicking the 👏🏻 below so other people will see this here on Medium.

You can follow me on Twitter @0x1ad2 and feel free to tweet me anything!

Also, I work at one of the biggest e-commerce companies of 🇳🇱
We do have a Tech blog, check it out and subscribe if you want to read more stories like this one. Or look at our job offers if you are looking for a great job!