Optimize lighthouse CI - Githubissues

JasonYao / JasonYao.github.io

My personal site at jasonyao.com using Hugo

https://www.jasonyao.com

GNU General Public License v3.0

1 stars 0 forks source link

Optimize lighthouse CI #23

Closed JasonYao closed 3 years ago

JasonYao commented 3 years ago

There's right now only tests 5 links, see if we can get it to test:

/index.html
/about/index.html
/resume/index.html
/posts/index.html
/posts/2017/05/22/a-canadian-existential-crisis-introduction/index.html

Other than that, let's get images and everything else optimized, with the goal being 100% on lighthouse (except for PWA, we'll tackle service workers in a separate issue)

JasonYao commented 3 years ago

Compare to old site at JasonYao/deprecated-old-2017-site#3

web optimize the profile picture, and add in a default picture that's black so it doesn't block anything, and load that image in async. See about using image sets, and also if a masking animation would help

JasonYao commented 3 years ago

Before

JasonYao commented 3 years ago

Current Status

Things remaining

JasonYao commented 3 years ago

Note that the image above is actually from my local, so a more direct apples-to-apples comparison with the before/after lighthouse scores would be the CI/CD pipeline:

About page

Home page

Notes

The best practice that was violated looks to be an aspect ratio issue, which may have been caused by overrides not being loaded correctly

JasonYao commented 3 years ago

To be clear, the overrides are able to be loaded correctly in prod, and no console errors are found- this is probably just a bug in lighthouse static html analysis

JasonYao commented 3 years ago

Might just call it a day here, no real value in digging around setting explicit test pages.

Last image where we compare using google's lighthouse CI, from https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.jasonyao.com&tab=desktop

Mobile

Desktop