refactor: fix Google Lighthouse errors and warnings #182
Comments
|
Are we going to use GatsbyJS? @juzhiyuan |
|
🤔 No, won't change to another framework currently. |
|
I was just giving GatsbyJS as an example framework that did all 5 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 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
|
|
Big thanks to @jbampton for those information! |
Thats a nice practice to be done, thank you for this info 😄 |
|
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 |
|
ok! |
|
BTW @jbampton do you think we should go for PWA? |
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
circlesshould be as close to100as possible. Most modern best practice sites are all in thegreenabove 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 machinefor 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 👍
The text was updated successfully, but these errors were encountered: