[GitHub] [apisix-website] iamayushdas commented on issue #182: refactor: fix Google Lighthouse errors and warnings

[GitBox <gi...@apache.org>]

iamayushdas commented on issue #182:
URL: https://github.com/apache/apisix-website/issues/182#issuecomment-833175200


   > **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**
   > 
   > <img alt="Screen Shot 2021-02-11 at 10 53 44 am" width="1443" src="https://user-images.githubusercontent.com/418747/107592176-0878fa00-6c58-11eb-945b-328b64476acd.png">
   > 
   > <img alt="Screen Shot 2021-02-11 at 10 53 29 am" width="1887" src="https://user-images.githubusercontent.com/418747/107592187-10d13500-6c58-11eb-8ee0-0bd63dcf2e60.png">
   > 
   > <img alt="Screen Shot 2021-02-11 at 10 53 08 am" width="809" src="https://user-images.githubusercontent.com/418747/107592200-19297000-6c58-11eb-8bcb-cf326396636f.png">
   > 
   > <img alt="Screen Shot 2021-02-11 at 10 52 32 am" width="835" src="https://user-images.githubusercontent.com/418747/107592214-2181ab00-6c58-11eb-8a86-a57d0676b4e6.png">
   > 
   > <img alt="Screen Shot 2021-02-11 at 10 52 13 am" width="828" src="https://user-images.githubusercontent.com/418747/107592230-2ba3a980-6c58-11eb-9fae-5ef02608a369.png">
   > 
   > <img alt="Screen Shot 2021-02-11 at 10 51 58 am" width="852" src="https://user-images.githubusercontent.com/418747/107592249-38c09880-6c58-11eb-8d1b-acaf1c0a5f7f.png">
   > 
   > I am happy to work on this issue but don't mind if someone else does.
   > 
   > I report here first for discussion
   
   Thats a nice practice to be done, thank you for this info :smile: 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org