We did a lot in this course and now we have a working application running on a real host using all
these features we implemented,
that's really amazing.
We have access to the camera, we have access to the location at least if we have Internet which we should have
now and we also can do all of that offline, we can even use our app offline due to caching.
Now I showed you lightbox at the beginning of this course, this tool by Google to audit our application,
let's run this audit again now. In the latest version of Chrome, you should have this audit tab in the
developer tools.
If you don't, simply visit the Google lighthouse page and followed installation steps there to
install it as a Chrome extension,
you will need Chrome to use it though.
Now lighthouse is a tool which allows you to audit your progressive web apps for performance, accessibility
and so on.
Now I'm really interested in seeing how it performs.
So running on a real server, let's perform an audit, run the audit on all these categories and let's see
which score we get on this application
with all the features we added. Now don't worry if it looks strange
during the audit, that's absolutely normal,
it's just testing different things with the application and it will take awhile and
in the end, we will get a score to see how well our application performs and what we can improve.
I'll be back once it finished.
Here's the result and the result is really good,
a 100 in progressive web app is amazing.
Now here's one important note,
the results you get here may vary because the Google lighthouse tool is constantly evolving, adding new
checks and making it tougher to get high scores.
So maybe you get a worse score, still you will get useful insights down there into what you could improve
and I recommend going through these things anyways.
Check what you passed to see what you're doing
good,
for example serving over https, also we'll have a look at these manual checks which could be done automatically
and have a look at the other categories too.
Now here for example, you see performance-wise, we could improve this
for example by optimizing our images. It gives you some hints here.
Now this is really slow because I think my internet connection isn't the best right now too.
In general, you want to have a look at this and see when you get your first meaningful paint,
when your application is interactive, that should be below 5 seconds to be really good and that of course
means when your users are able to use your app even if they have a bad internet connection.
Again as you can see with the screenshots,
the biggest issue I have is that my images are loading late.
It's interacting very quickly
but images are loading because they're not optimized,
that wasn't the goal of this app.
In a real app where you let your users upload images,
you'll probably want to have some automatic process optimizing them and you even might want to optimize this
main image a little bit more.
Now here you see the opportunities, for example you'll see that the stylesheets took relatively long to
load
here, definitely a hint that my connection isn't that bad because we don't have big stylesheets and you
might inline them.
You see the text compression and the image hints here too.
We also have a look at accessibility where we see that we could improve the contrast of background
and foreground colors
but besides that, we're doing good
and besides that, we could remove this meta tag which I use on purpose though
but I discuss this meta tag and potential issues earlier in the course. We're also seeing what we're
doing good and you see which best practices we're following,
so you see, you didn't learn that much bad stuff in this course.
So this is the audit with which I want to conclude this application,
definitely a satisfying result,
definitely showing that we did a lot of things right and definitely showing that you're well prepared
to use the many things you learned here, to practice them and apply them in your upcoming web projects.
Now I'm not entirely done with this course though,
I want to guide you into other directions
you might want to have a look at in the future and I also want to have a look at how we use single page
applications built with React, Angular or Vue in conjunction with progressive web apps. We'll do that in
the next course module.