Questions tagged [lighthouse]

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

You can run Lighthouse from the command line, as a Chrome Extension, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

538 questions
63
votes
3 answers

How to fix Lighthouse "Links do not have a discernible name"

Lighthouse suggesting to fix my a href text I have a html like that What is really happens here is I just displaying the image…
sreginogemoh
  • 7,997
  • 18
  • 71
  • 125
24
votes
2 answers

Preloading Google Fonts

Light House audit is suggesting that I preload key requests, specifically the two google fonts that I'm using in my React app. A Light House member suggested using:
wildair
  • 297
  • 1
  • 3
  • 10
17
votes
6 answers

How to fix "Lighthouse returned error: NO_FCP." when running Google Page Speed Test?

I am running the Google Page Speed test for https://www.oceanluxe.com.au and get the following message: > Lighthouse returned error: NO_FCP. Something went wrong with the recording > the trace over your page load. Please run the Lighthouse again.…
NJohns
  • 187
  • 1
  • 1
  • 3
14
votes
2 answers

Does not use passive listeners to improve scrolling performance (Lighthouse Report)

A recent Lighthouse Report flagged the following issue. Does not use passive listeners to improve scrolling performance It also mentions... Consider marking your touch and wheel event listeners as passive to improve your page's scroll…
user12945822
13
votes
3 answers

Can Google.com and other heavily trafficked websites get a "fast" rank using Google's PSI API?

Google changed its PSI definition of fast-ranking FCP from 90-percentile to 75-percentile below 1000ms From PSI documentation: Why does the FCP in v4 and v5 have different values? FCP in v5 reports the 75th percentile (as of November 4th 2019), …
13
votes
0 answers

Google Lighthouse Not Recognizing preconnect and dns-prefetch

The performance report in Google Lighthouse made the following recommendation: Avoid multiple, costly round trips to any origin "Avoid multiple, costly round trips to any origin"...It then proceeds to list 8 origins. So, I added the following code…
Devin Peterson
  • 231
  • 1
  • 7
13
votes
2 answers

Progressive Web App "does not work offline" error

I have written a progressive web app, following all available guides and examples, but for some reason when I click the Add to homescreen button, I keep getting this mysterious error: Site cannot be installed: does not work offline The major…
12
votes
2 answers

Manifest start_url is not cached by a Service Worker

I'm using Lighthouse to audit my webapp. I'm working through the failures, but I'm stuck on this one: Failures: Manifest start_url is not cached by a Service Worker. In my manifest.json I have "start_url": "index.html", In my worker.js I am…
JOATMON
  • 15,576
  • 31
  • 99
  • 188
11
votes
2 answers

WebApp: Failures: Service worker does not successfully serve the manifest's start_url

After testing the web app with Lighthouse I have such error: User will not be prompted to Install the Web App Browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more. Failures:…
10
votes
2 answers

Next.js PWA (Service Worker + Manifest.json)

I am using Next.js to develop a Server Side Rendering website and I want to make it a Progressive Web App but the problem I couldn't find the way to make it happen correctly. When I build the application it serves correctly the service worker but…
10
votes
3 answers

Extract used CSS from a page

I need to extract the used CSS from a 19,000 line CSS file where 98.4% of it is unused (ouch). I know you can use Chrome Developer Tools to view the CSS Coverage, like so: But it doesn't allow you to even jump to the green lines. Manually going…
Chuck Le Butt
  • 43,669
  • 58
  • 179
  • 268
10
votes
3 answers

Generating HTML report in gulp using lighthouse

I am using gulp for a project and I added lighthouse to the gulp tasks like this: gulp.task("lighthouse", function(){ return launchChromeAndRunLighthouse('http://localhost:3800', flags, perfConfig).then(results => { …
bhansa
  • 6,166
  • 2
  • 23
  • 42
10
votes
1 answer

Lighthouse & Polymer: start_url in manifest is not cached by Service Worker

I'm testing my Polymer application and I get a pretty good score on Lighthouse. However, I still have a small problem. I have a manifest.json file containing everything so the app can be added to the home screen, but Lighthouse still gives a failure…
9
votes
2 answers

Cumulative Layout Shift with Bootstrap 4 grid

I am having a problem with high CLS (Content Layout Shift) while using Bootstrap (4.5) grid for two column layout with column order change. CLS is a Core Web Vital metric. Basically Google sees a problem when webpage's parts are moving when the page…
szymond
  • 1,190
  • 2
  • 18
  • 39
9
votes
2 answers

Run chrome lighthouse's audit from command line

I would like to write a script which run (from the chrome's binary) its lighthouse's audit with a url given. I didn't manage to find how to do it, but since there is even a chrome extension doing I assume it should be feasible right ?
Scipion
  • 9,227
  • 7
  • 59
  • 120
1
2 3
35 36