Using Google Lighthouse to Enhance Progressive Web Apps
As part of its effort to support progressive web apps, which offer a growing number of complex features, Google created Google Lighthouse to establish standards for today's web. With innovation accelerating at an ever increasing pace, new developers sometimes feel as though they are drifting in the dark when it comes to optimizing their websites. Google Lighthouse hopes to serve as a beacon to guide developers in a direction that is best for all users.
In this article, we will explore how to use Google Lighthouse to enhance PWAs and make them more efficient, accessible, and user-friendly.
What is Google Lighthouse?
Google Lighthouse is an open source auditing tool that helps developers improve the performance and accessibility of their web projects. Anyone can use it for free to see how their website stacks up against Google's high standards. If SEO value is of importance to you, which it should be, following Google's guidelines can significantly raise your standing in the search results. Lighthouse can be run directly from the Google Chrome browser or installed as a Node.js module. Lighthouse audits web pages based on various criteria such as performance, accessibility, best practices, and search engine optimization. The tool provides a detailed report that highlights areas where the page can be improved.
How to use Google Lighthouse
The easiest way to get started is to install the Google Lighthouse extension for Chrome.
Alternatively, you can run it by using the Node CLI. This requires Node 6 or later and can be installed using the following command:
npm install -g lighthouse
Once installed, run Lighthouse with the following command and replace yourwebsite.com with the actual website you want to test.
lighthouse https://yourwebsite.com/
If you prefer using the Chrome extension, simply navigate to a particular page within your browser and click the "Generate Report" button from the Lighthouse extension. Lighthouse will then tell you how the website measures up to Google's standards. The report will explain your website's strengths/weaknesses, and it will suggest ways to boost your score.
How does Google Lighthouse work?
When a user runs a Lighthouse audit, the tool loads the web page in a headless version of Google Chrome, which means that it runs the web page in the background without displaying it on the screen. Once the web page has loaded, Lighthouse begins to analyze it and collect data on various metrics.
Lighthouse uses various performance metrics, such as first contentful paint, time to interactive, and speed index, to measure how quickly the web page loads and becomes interactive. It also checks the accessibility of the web page by running tests for color contrast, aria-labels, and keyboard navigation. Best practices are evaluated by testing for proper use of web technologies, avoiding deprecated APIs, and minimizing third-party dependencies.
SEO metrics are checked by analyzing the content of the web page and comparing it to industry best practices for SEO. This includes evaluating the use of meta tags, structured data, and mobile friendliness. The progressive web app audit checks for the use of a service worker, manifest file, and the ability to add the PWA to the user's home screen.
Once the audit is complete, Lighthouse generates a report with a score for each category and provides recommendations for improving the score. The report also includes detailed information on each metric that was checked, as well as a list of opportunities and diagnostics that can help users understand the specific areas where their web page can be optimized.
Upon running a Lighthouse report, you'll receive five different grades for:
- Performance: Performance is a critical factor in the success of any web application, and PWAs are no exception. Users expect fast load times, smooth animations, and seamless navigation. The performance audit checks various aspects of a web page, including the time to first byte, first contentful paint, and time to interactive. These metrics indicate how quickly a web page loads and becomes interactive. Some common recommendations to improve performance include optimizing images, minifying JavaScript and CSS files, using a content delivery network (CDN), and leveraging browser caching.
- Accessibility: Accessibility is an important aspect of web development that ensures that websites can be used by everyone, including those with disabilities. PWAs must be accessible to all users, regardless of their abilities. The accessibility audit checks various aspects of a web page, including contrast ratios, semantic HTML, and the use of ARIA attributes. These metrics indicate how easy it is for users with disabilities to navigate and use a web page. Some common recommendations to improve accessibility include adding alt text to images, using descriptive link text, and providing keyboard navigation.
- Best Practices: Best practices are a set of guidelines that ensure that web pages are well-structured, secure, and maintainable. PWAs should follow best practices to ensure that they are maintainable and scalable. The best practices audit checks various aspects of a web page, including the use of HTTPS, responsive design, and avoiding the use of deprecated APIs. These metrics indicate how well a web page adheres to best practices. Some common recommendations to improve best practices include implementing HTTPS, avoiding the use of inline styles and scripts, and using modern web APIs.
- Search Engine Optimization: Search Engine Optimization (SEO) is the practice of improving the visibility and ranking of a web page in search engine results. PWAs should follow SEO best practices to ensure that they can be easily found by search engines. The SEO audit checks various aspects of a web page, including the use of meta tags, structured data, and mobile friendliness. These metrics indicate how well a web page is optimized for search engines. The common recommendations to improve SEO include using descriptive page titles and meta descriptions, implementing structured data, and optimizing images for faster load times.
- Progressive Web App features: PWAs should provide features that make them feel like native apps, such as offline functionality, push notifications, and the ability to add the PWA to the user's home screen. The progressive web app audit checks various aspects of a web page, including the use of a service worker, manifest file, and the ability to add the PWA to the user's home screen. These metrics indicate how well a web page adheres to the PWA standards. Some common recommendations to improve PWA features include implementing a service worker, adding a manifest file, and optimizing the PWA for different screen sizes and orientations.
Of course, numbers can only tell you so much, so you must see for yourself how users experience your website and make judgments about how to prioritize which bottlenecks you should focus on.
If Lighthouse gives your website a low grade at first, don't be disappointed; take it as a challenge to improve your optimization skills. Following the pointers that Google gives you and using this guide as a reference will help get your project up to standard. Once you create your own set of best practices, you can go back and optimize your older web projects, and your future projects will be that much better
What does Google Lighthouse look for?
In addition to the above-mentioned criteria, the following additional factors are taken into consideration when evaluating the website:
- Security: Is it being served from a secure origin?
- Accessibility: Does it work for all users?
- Perceptual Speed: Do users perceive it as fast?
- Offline Connectivity: Will it load offline or in unreliable network conditions?
Those questions are incredibly broad, so let's break down some specific things that Lighthouse looks for:
1. Security
Google is cracking down on unencrypted websites in an effort to raise security standards for the overall web. Therefore, HTTPS is mandatory to protect your users from potential hackers. If you need a free SSL certificate for your CDN domain, consider using Let's Encrypt. Here are some general tips to help improve the security of your site:
- Review your Content Security Policy and migrate from HTTP to HTTPS. Make sure all of your links are properly updated.
- Only depend on third parties that also use HTTPS.
- Serve pages using HTTP Strict Transport Security (HSTS) headers.
2. Accessibility
Ensuring accessibility means more than just making sure your app works in every browser. You should also look for ways to encourage user engagement. A major goal behind the concept of progressive web apps is making websites feel more like self-contained applications, which is why Lighthouse encourages developers to include an "add to homescreen" prompt. Pinning a favicon to the user's desktop requires a web application manifest, and tools such as Real Favicon Generator can help you optimize your favicons for every browser, OS and platform.
If you inspect your web app manifest from the the Chrome DevTools application panel, you'll see all of your favicons along with their start URL and theme colors. You can also set up a splash screen that draws from the background_color, name and icons in your web app manifest. Google recommends shipping a 192px homescreen icon and a 512px splashscreen. These considerations are very important if you plan on releasing a project through the app store since Google uses meta info in your manifest to categorize your app in their directories.
Once you set up your web app manifest, you can use app installer banners to prompt users whenever you deem appropriate. While it's tempting to prompt every user upon their initial visit, many people are put off by such suggestions when they visit a website for the first time. You may get better results if you delay the prompt until after the user has engaged meaningfully with your app. For example, certain websites wait until a user reaches their order confirmation page before asking them to install a homescreen shortcut.
3. Perceptual speed
It's been said that numbers can only tell you so much, but programmers are getting better at quantifying subjective user experiences. In addition to the standard metrics such as transaction speed, Lighthouse also looks at factors that affect the user's perception of speed using the Perceptual Speed Index.
How your content loads is just as important as how fast it loads. For example, if your fonts and images jitter as they load, users may assume your website isn't working and hit the back button. Such decisions are made within mere milliseconds, so these little things can make a big difference in user retention.
"Content jumps" also have a major impact on perceptual speed. Returning users know where the content they want to see is located, so they often start scrolling while the page is still loading. If you haven't specified pre-defined heights for your containing elements in CSS, such scrolling can send users up and down the page randomly as each element renders. Therefore, the user gets frustrated and loses confidence in your website's performance.
Figuring out exactly how much physical space each element takes up can be tedious, but simply specifying a minimum height for your containing elements can go a long way in reducing content jumps. As to what your containing elements should look like while they are awaiting content, studies suggest that skeleton screens are preferable to progress bars and spinning wheels.
Other key indicators of perceptual speed include the "first meaningful paint" and "time to interact". The first paint, or the time it takes for the user to see the first pixel of content, has long been a standard for measuring webpage performance; however, when we talk about the first "meaningful" paint, we refer to how long it takes for your unique primary content to load rather just nav bars and other things users are used to seeing. The first meaningful paint assures the visitor that they've come to the right place.
Time to interact, or TTI, is the amount of time it takes for your app to start responding to user inputs. Like most performance related matters, improving the TTI and first meaningful paint is best accomplished by making sure your web app is sending as little data as possible. If you set up a service worker, your site can load even faster for returning visitors.
4. Offline connectivity
Speaking of service workers, the ability to function without a stable internet connection is perhaps the greatest achievement of progressive web apps. Using service workers, you can set it up so that some of your website's files get saved by the user's browser. That way, users can keep using the latest cached version of your website even if they get disconnected because much of the data is stored locally. Your site will also load much faster whenever the user returns since some resources are already stored on their own device.
Google offers a comprehensive explanation of service workers. If you're new to the concept, IndexedDB is a popular client side storage API to start off with. There are also a few webpack plugins that support service worker caching.
General Google Lighthouse tips
Similar to Google PageSpeed Insights, getting your Google Lighthouse score to 100 may take a fair amount of work. Don't be discouraged if Google knocks you for dozens of things that you didn't think were important. It's up to you to decide which metrics matter for your website. Take each suggestion as a learning opportunity and a challenge to drive your next move. Here are a few things to keep in mind:
- Since Lighthouse is open source, there is a thriving community of contributors and a robust repository to draw from. The issues tracker is an excellent resource for trading tips with other developers about audit metrics and other Lighthouse related issues.
- If you want a very thorough walkthrough of what all goes into meeting Google's standards, Medium.com has a step by step tutorial for creating a simple progressive web app with a 90+ score in Google Lighthouse using Ionic 2.
- One easy way to limit data requests is to reduce the size of your images where possible. You should inspect your bundle to see if you're using any third party code that you don't need, and make sure you compress as much as you can. webpack is a helpful tool for your managing dependencies, which is also essential for optimizing your project's perceptual speed.
- Speaking of accessibility, another core principle of progressive web design is catering to mobile users, which is why Lighthouse will tell you to include a meta-viewport in the
<head>of your documents. Doing so will ensure that your app works across the immense variety of browsers and devices. - Be mindful that not all browsers currently support service workers, and make sure your site works for users who don't have JavaScript enabled. Using the
<noscript>tag will allow essential content to be displayed even without JavaScript.
Summary
As you add more content and features to your websites, make Google Lighthouse audits a routine part of your maintenance plan. Lighthouse will keep being updated, and it is likely to remain a staple of the web development community for many years to come, so everyone should get up to speed on Google's standards as soon as possible.