apache / apache/apisix-website

refactor: fix Google Lighthouse errors and warnings

Open
#182 9 comments 5 reactions 0 assignees View on GitHub
Enhancement
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**

Screen Shot 2021-02-11 at 10 53 44 am

Screen Shot 2021-02-11 at 10 53 29 am

Screen Shot 2021-02-11 at 10 53 08 am

Screen Shot 2021-02-11 at 10 52 32 am

Screen Shot 2021-02-11 at 10 52 13 am

Screen Shot 2021-02-11 at 10 51 58 am

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.