Stack Overflow
Stack Overflow

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.

756 questions
103
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…
Sergino
  • 10,128
  • 30
  • 98
  • 159
49
votes
3 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
  • 577
  • 2
  • 5
  • 12
45
votes
3 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
32
votes
1 answer

Image elements do not have explicit width and height

Lighthouse keeps telling me that "Image elements do not have explicit width and height" eventhough i've tried to add it both in css or in img but the problem persists: img.medium { max-width: 29rem; width: 100%; } or
Francesco
  • 549
  • 1
  • 8
  • 14
20
votes
7 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
  • 217
  • 1
  • 2
  • 3
18
votes
7 answers

Showing "lighthouse is warming up" forever

I built my first Progressive Web App (PWA) in react js. When I click on Generate report on Chrome's Audit tab in DevTools, it is showing the message lighthouse is warming up forever. My chrome version is 81. What can i do to generate report?
Banafshe Alipour
  • 1,041
  • 4
  • 12
  • 27
17
votes
1 answer

Next.js-before-hydration, Next.js-hydration, and FCP

I was wondering if someone could explain what the timing metrics Next.js-before-hydration and Next.js-hydration mean, and how they relate to FCP. This is for a NextJS app that server-side-renders and uses hooks on the client side. Here is a…
tunesmith
  • 1,030
  • 9
  • 22
17
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…
StampyCode
  • 7,218
  • 3
  • 28
  • 44
16
votes
2 answers

For responsive images with different aspect ratios, what's a good way to minimize Cumulative Layout Shift?

If you have a element with image sources at different aspect ratios at different breakpoints, what is the best way to minimize CLS by using aspect-ratio and media queries in CSS?
addyo
  • 2,798
  • 1
  • 14
  • 21
16
votes
2 answers

reduce JS execution time with NextJS

I have a website that I'm trying to optimize lighthouse page speed ranking. I just switched from SSR with nginx caching to next export using exportPathMap and getInitialProps (also with nginx caching). Specific page of interest gets heavy…
Kevin Danikowski
  • 4,620
  • 6
  • 41
  • 75
15
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…
Sofienne Lassoued
  • 418
  • 1
  • 5
  • 16
14
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
  • 241
  • 1
  • 7
13
votes
3 answers

Lighthouse dev tools - site with authentication

I'm trying to perform audit using Lighthouse DevTools. My site requires authentication. When I run the test the lighthouse logs me out and only anayses /login. How can I get Lighthouse DevTools to analyse my site? Can I supply login credentials?
Kermit
  • 2,865
  • 3
  • 30
  • 53
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), …
adamrights
  • 1,701
  • 1
  • 11
  • 27
13
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
  • 47,570
  • 62
  • 203
  • 289
1
2 3
…
50 51