{"id":1485,"date":"2023-09-20T05:00:00","date_gmt":"2023-09-20T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1485"},"modified":"2023-09-15T14:44:06","modified_gmt":"2023-09-15T21:44:06","slug":"use-lighthouse-to-improve-your-angular-applications","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/use-lighthouse-to-improve-your-angular-applications\/","title":{"rendered":"Use Lighthouse to improve your Angular applications"},"content":{"rendered":"\n<p>As Angular developers, we tend to focus on component architecture, modules, TypeScript, and the best framework use. Most of the time, those things differ from what matters to end users.<\/p>\n\n\n\n<p>End users usually want:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Performance<\/strong> &#8211; 60% of the web&#8217;s traffic happens on smartphones that don&#8217;t always have fast internet connections.<\/li>\n\n\n\n<li><strong>Accessibility <\/strong>&#8211; Is your website accessible to everyone? Did you check if color-blind people could see it correctly? Do you use alternate labels for images and buttons for screen readers that read the content to a blind user?<\/li>\n<\/ul>\n\n\n\n<p>And, of course, if your website is supposed to be discoverable on the web, there&#8217;s <strong>search engine optimization (SEO)<\/strong>. <\/p>\n\n\n\n<p>The best way to know how you&#8217;re doing in all these categories (and more) is to use a Google Chrome browser built-in feature called <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Lighthouse<\/a>. It&#8217;s a tab available in the dev tools:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"641\" height=\"575\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-31.png\" alt=\"\" class=\"wp-image-1486\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-31.png 641w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-31-300x269.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Navigate to your web app (a public URL is needed), open Lighthouse in the dev tools, and click the &#8220;Analyze page load&#8221; button. Note that you can also simulate a mobile device to get a different report. You&#8217;ll get a report with scores in all these categories:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"489\" height=\"182\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-32.png\" alt=\"\" class=\"wp-image-1487\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-32.png 489w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-32-300x112.png 300w\" sizes=\"auto, (max-width: 489px) 100vw, 489px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Clicking on any of the scores gives you a TODO list of possible improvements. You can expand every item to get more information about what to fix, how to do it, and why it&#8217;s important:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"736\" height=\"589\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-33.png\" alt=\"\" class=\"wp-image-1488\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-33.png 736w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-33-300x240.png 300w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The nice thing about Lighthouse is that once you have improved your app, it takes just a few seconds to test your website again and see your scores increase.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As Angular developers, we tend to focus on component architecture, modules, TypeScript, and the best framework use. Most of the time, those things differ from what matters to end users. End users usually want: And, of course, if your website is supposed to be discoverable on the web, there&#8217;s search engine optimization (SEO). The best [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,17],"tags":[],"class_list":["post-1485","post","type-post","status-publish","format-standard","hentry","category-best-practices","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1485"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1485\/revisions"}],"predecessor-version":[{"id":1490,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1485\/revisions\/1490"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}