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.
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.
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.
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?
Lighthouse works by running tests to simulate different situations that impact user experience. Upon running a Lighthouse report, you’ll receive four different grades for:
- Progressive Web App
- Best Practices
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.
Google Lighthouse 1.3 and the “Do Better Web”
Because it serves as the starting point for much of the web’s traffic, Google has an interest in making sure the websites in their top search results are truly of the highest caliber. That’s why, the company launched the “Do Better Web” initiative: to create web-wide standards and best practices.
Another new feature is the Lighthouse web viewer, which lets you drag and drop your Lighthouse files to generate HTML reports that you can share with others via GitHub. After that, you can access and edit those reports by just adding
?gist=GIST_ID to the URL. This feature is especially helpful for teams working together on larger projects.
What does Google Lighthouse look for?
According to the official docs, Lighthouse grades your website on the following four criteria:
- 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:
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, or HSTS, headers.
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’s 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.
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.