apache / apache/apisix-website
refactor: fix Google Lighthouse errors and warnings
- Dominant language
- JavaScript
- Stars
- 146
- Forks
- 204
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 21
Description
**Actual Behaviour**
Website is not optimized as much as it could be and there are coding errors and warnings etc.
**Expected Behaviour**
Google Lighthouse scores are not always the same on each run and device etc.
All the `circles` should be as close to `100` as possible. Most modern best practice sites are all in the `green` above 90% range on all 4 stats.
An additional PR for the 5th circle for PWA would be really nice in future. GatsbyJS is a new modern framework that builds full `green machine` for 5 circles on Google Lighthouse.
A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.
Official -> "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, SEO and more.
You can run Lighthouse in Chrome DevTools, from the command line, 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.
You can also use Lighthouse CI to prevent regressions on your sites."
https://developers.google.com/web/tools/chrome-devtools
https://developers.google.com/web/tools/lighthouse
https://web.dev/progressive-web-apps/
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
https://www.gatsbyjs.com/
**Steps to reproduce it**
Use Google Chrome desktop browser and open the menu -> View -> Developer
Use the Chrome devtools to reproduce the Google Lighthouse report.
**Screenshots of the issue**






I am happy to work on this issue but don't mind if someone else does.
I report here first for discussion 👍
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by running Google Lighthouse from Chrome DevTools against the website and review the failing audits across performance, accessibility, PWA, and SEO. The issue names no files or tests; completion would mean addressing the identified warnings and errors and bringing the four reported scores as close to the green, above-90% range as practical.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- frontend, performance, web-dev
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100