search

iFixit / css-gather

Fetches all the CSS files off a page and dumps their CSS to stdout
MIT License
2 stars 0 forks source link

Fix "*-after" screenshots #8

Closed batbattur closed 1 year ago

batbattur commented 1 year ago

Summary

Currently, we take 2 screenshots (-before and -after) per URL we provide using the penthouse tool. However, the -after screenshots are ending up looking weird, see https://github.com/iFixit/ifixit/pull/47019#issuecomment-1483295353.

Explanation of -before and -after images from penthouse:

Can be used to verify that critical css generation works as intended for your pages. Takes two screenshots, -before and -after: -before, of original page -after, with all css on page replaced by the generated critical css:

Example artifact with weird *-after images: critical-css-screenshots-weird-after.zip

Do this

Fix *-after screenshot.

One possible fix was to disable JS (blockJSRequests: true) in the penthouse config to get the screenshot working, however, this will affect the generation of the critical-css, so we are not sure if we should do this.

Here is an example artifact with fixed *-after images (when blockJSRequests: true): critical-css-screenshots-normal-after.zip

As penthouse docs and this article suggest, they recommend to disable JS requests while generating the critical css:

Critical CSS by accessing your web page with JavaScript disabled. Doing this ensures the resulting styles don't rely on dynamically created elements from JavaScript. After all, the Critical CSS is only used before any other resources are loaded (the non-critical CSS and JavaScript).

Let's try generating the critical css with blockJSRequests: true and see how it affects the First Contentful Paint (FCP) and the page load.

batbattur commented 1 year ago

Created pull with JS disabled on iFixit/ifixit side: https://github.com/iFixit/ifixit/pull/47314

batbattur commented 1 year ago

Tested generating critical css with JS disabled. The overall performance score was similar to with JS enabled.

Then noticed one important thing from the screenshot artifacts: if the JS is disabled, then the WIki and Device pages don't load at all. Here's how to reproduce:

  1. Go to your chrome JS settings, and add ifixit.com in the not allowed list: chrome://settings/content/javascript?search=javascript Screen Shot 2023-04-11 at 10 07 11 AM

  2. Then visit a wiki or device page.

Therefore, we still need to have JS enabled when generating the critical CSS. Going to close this issue since this issue was originally created to debug/find the flakiness in the manta page critical css changes. Since we found the cause of flakiness in https://github.com/iFixit/ifixit/pull/47312#issuecomment-1501968121, we will be tackling it in https://github.com/iFixit/ifixit/issues/47316.