You are viewing a plain text version of this content. The canonical link for it is here.

Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2021/02/11 01:20:46 UTC

[GitHub] [apisix-website] jbampton opened a new issue #182: refactor: fix Google Lighthouse errors and warnings

jbampton opened a new issue #182:
URL: https://github.com/apache/apisix-website/issues/182

**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 👍

----------------------------------------------------------------
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

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

Posted by GitBox <gi...@apache.org>.

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


   BTW @jbampton do you think we should go for PWA?


-- 
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

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

Posted by GitBox <gi...@apache.org>.

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


   Are we going to use GatsbyJS? @juzhiyuan 


----------------------------------------------------------------
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

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

Posted by GitBox <gi...@apache.org>.

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


   ok!


-- 
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

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

Posted by GitBox <gi...@apache.org>.

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


   Big thanks to @jbampton for those information!


----------------------------------------------------------------
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

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

Posted by GitBox <gi...@apache.org>.

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


   🤔 No, won't change to another framework currently.


----------------------------------------------------------------
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

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

Posted by 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

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

Posted by GitBox <gi...@apache.org>.

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


   Hi @iamayushdas, could you take this or guide other contributors?


-- 
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

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

Posted by GitBox <gi...@apache.org>.

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

I was just giving GatsbyJS as an example framework that did all 5 `circles` green or above 90% score.

PWA can be done with lots of tech like even Google libraries. I even like the Google libraries better 👍

I think GatsbyJS is good but more `locked in` whereas Google tools seem more standard and there are lots more Google tools too. Google is a huge company compared to Gatsby etc.

Chrome DevTools, Lighthouse, Puppeteer, Workbox, Polymer, Angular and the PageSpeed Module are the main web tools from Google.

The first two you need know well and use are Chrome DevTools and Lighthouse. There are similar Devtools in other browsers like Firefox, Safari and Opera.

The next main ones are Puppeteer, Workbox, Polymer.

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Workbox is a set of service worker libraries and the Polymer Project helps you deliver amazing user experiences by unlocking the full potential of the web platform.

Polymer makes the most of Web Components, a powerful new platform feature for extending HTML and componentizing your apps, allowing you to build cutting-edge Progressive Web Apps that load quickly, respond instantly and work from anywhere.

Angular and the PageSpeed Module are the last two. I've use some Angular it's a good framework but not needed for a PWA. The PageSpeed modules are open-source server modules that optimize your site automatically.

https://developers.google.com/web/tools

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

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

Posted by GitBox <gi...@apache.org>.

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


   > Hi @iamayushdas, could you take this or guide other contributors?
   
   yes, i will definitely look in to this, after i will be done by those test refactoring, and if i found this easy i will guide other contributors too
   Thank you


-- 
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