1 00:00:02,080 --> 00:00:08,470 We did a lot in this course and now we have a working application running on a real host using all 2 00:00:08,460 --> 00:00:09,780 these features we implemented, 3 00:00:09,820 --> 00:00:11,140 that's really amazing. 4 00:00:11,140 --> 00:00:15,910 We have access to the camera, we have access to the location at least if we have Internet which we should have 5 00:00:15,910 --> 00:00:23,820 now and we also can do all of that offline, we can even use our app offline due to caching. 6 00:00:24,190 --> 00:00:31,500 Now I showed you lightbox at the beginning of this course, this tool by Google to audit our application, 7 00:00:31,780 --> 00:00:36,790 let's run this audit again now. In the latest version of Chrome, you should have this audit tab in the 8 00:00:36,790 --> 00:00:38,020 developer tools. 9 00:00:38,020 --> 00:00:42,790 If you don't, simply visit the Google lighthouse page and followed installation steps there to 10 00:00:42,820 --> 00:00:44,570 install it as a Chrome extension, 11 00:00:44,590 --> 00:00:47,090 you will need Chrome to use it though. 12 00:00:47,200 --> 00:00:53,170 Now lighthouse is a tool which allows you to audit your progressive web apps for performance, accessibility 13 00:00:53,170 --> 00:00:54,480 and so on. 14 00:00:54,490 --> 00:00:57,230 Now I'm really interested in seeing how it performs. 15 00:00:57,310 --> 00:01:03,790 So running on a real server, let's perform an audit, run the audit on all these categories and let's see 16 00:01:03,790 --> 00:01:06,020 which score we get on this application 17 00:01:06,040 --> 00:01:09,340 with all the features we added. Now don't worry if it looks strange 18 00:01:09,340 --> 00:01:11,340 during the audit, that's absolutely normal, 19 00:01:11,350 --> 00:01:16,030 it's just testing different things with the application and it will take awhile and 20 00:01:16,070 --> 00:01:23,300 in the end, we will get a score to see how well our application performs and what we can improve. 21 00:01:23,320 --> 00:01:25,170 I'll be back once it finished. 22 00:01:25,330 --> 00:01:28,740 Here's the result and the result is really good, 23 00:01:28,750 --> 00:01:33,130 a 100 in progressive web app is amazing. 24 00:01:33,130 --> 00:01:35,350 Now here's one important note, 25 00:01:35,350 --> 00:01:42,580 the results you get here may vary because the Google lighthouse tool is constantly evolving, adding new 26 00:01:42,580 --> 00:01:45,630 checks and making it tougher to get high scores. 27 00:01:45,820 --> 00:01:52,800 So maybe you get a worse score, still you will get useful insights down there into what you could improve 28 00:01:53,140 --> 00:01:56,200 and I recommend going through these things anyways. 29 00:01:56,230 --> 00:01:58,480 Check what you passed to see what you're doing 30 00:01:58,480 --> 00:01:59,070 good, 31 00:01:59,080 --> 00:02:06,010 for example serving over https, also we'll have a look at these manual checks which could be done automatically 32 00:02:06,490 --> 00:02:08,980 and have a look at the other categories too. 33 00:02:08,980 --> 00:02:12,790 Now here for example, you see performance-wise, we could improve this 34 00:02:12,820 --> 00:02:17,320 for example by optimizing our images. It gives you some hints here. 35 00:02:17,350 --> 00:02:22,260 Now this is really slow because I think my internet connection isn't the best right now too. 36 00:02:22,600 --> 00:02:27,500 In general, you want to have a look at this and see when you get your first meaningful paint, 37 00:02:27,550 --> 00:02:33,670 when your application is interactive, that should be below 5 seconds to be really good and that of course 38 00:02:33,670 --> 00:02:38,530 means when your users are able to use your app even if they have a bad internet connection. 39 00:02:38,590 --> 00:02:40,710 Again as you can see with the screenshots, 40 00:02:40,720 --> 00:02:44,250 the biggest issue I have is that my images are loading late. 41 00:02:44,260 --> 00:02:45,950 It's interacting very quickly 42 00:02:46,030 --> 00:02:48,520 but images are loading because they're not optimized, 43 00:02:48,520 --> 00:02:49,930 that wasn't the goal of this app. 44 00:02:49,960 --> 00:02:52,790 In a real app where you let your users upload images, 45 00:02:52,870 --> 00:02:58,420 you'll probably want to have some automatic process optimizing them and you even might want to optimize this 46 00:02:58,450 --> 00:03:00,440 main image a little bit more. 47 00:03:00,460 --> 00:03:06,790 Now here you see the opportunities, for example you'll see that the stylesheets took relatively long to 48 00:03:06,790 --> 00:03:07,050 load 49 00:03:07,050 --> 00:03:12,580 here, definitely a hint that my connection isn't that bad because we don't have big stylesheets and you 50 00:03:12,580 --> 00:03:13,810 might inline them. 51 00:03:13,900 --> 00:03:16,840 You see the text compression and the image hints here too. 52 00:03:17,230 --> 00:03:23,590 We also have a look at accessibility where we see that we could improve the contrast of background 53 00:03:23,590 --> 00:03:24,880 and foreground colors 54 00:03:24,970 --> 00:03:26,900 but besides that, we're doing good 55 00:03:27,520 --> 00:03:33,380 and besides that, we could remove this meta tag which I use on purpose though 56 00:03:33,400 --> 00:03:38,830 but I discuss this meta tag and potential issues earlier in the course. We're also seeing what we're 57 00:03:38,830 --> 00:03:42,480 doing good and you see which best practices we're following, 58 00:03:42,580 --> 00:03:46,650 so you see, you didn't learn that much bad stuff in this course. 59 00:03:46,810 --> 00:03:50,230 So this is the audit with which I want to conclude this application, 60 00:03:50,230 --> 00:03:52,180 definitely a satisfying result, 61 00:03:52,270 --> 00:03:57,070 definitely showing that we did a lot of things right and definitely showing that you're well prepared 62 00:03:57,310 --> 00:04:03,470 to use the many things you learned here, to practice them and apply them in your upcoming web projects. 63 00:04:03,520 --> 00:04:05,930 Now I'm not entirely done with this course though, 64 00:04:06,160 --> 00:04:08,850 I want to guide you into other directions 65 00:04:08,860 --> 00:04:14,860 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 66 00:04:14,860 --> 00:04:21,370 applications built with React, Angular or Vue in conjunction with progressive web apps. We'll do that in 67 00:04:21,370 --> 00:04:22,620 the next course module.