Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

core: remove fonts gatherer #6166

Merged
merged 4 commits into from
Oct 12, 2018
Merged

core: remove fonts gatherer #6166

merged 4 commits into from
Oct 12, 2018

Conversation

patrickhulce
Copy link
Collaborator

@patrickhulce patrickhulce commented Oct 3, 2018

don't hate me @wardpeet 馃槵

Summary
I thought I'd try another approach for the font-display audit when I noticed the Fonts gatherer taking ~25% of a perf-only CNN run these days. We're already collecting the stylesheet content for everything for unminified/unused-css, so can a simple regex lookup get the job done?

It passes smoke tests, but I'd want to try this on a few more higher profile sites too.

image

(Also noticed we need to update this to use lantern timings, but one thing at a time 馃槃)

@patrickhulce patrickhulce changed the title core(OYB): remove fonts gatherer core: remove fonts gatherer Oct 3, 2018
@wardpeet
Copy link
Collaborator

wardpeet commented Oct 3, 2018

@patrickhulce I don't hate, I kill 馃棥 馃槃 (you're lucky the trip is so far)

it's actually something I suggested as well #5676. I'll run it against some sites too, just make sure the results are ok.

@patrickhulce
Copy link
Collaborator Author

it's actually something I suggested as well #5676

doh! you totally did my bad!

@wardpeet
Copy link
Collaborator

wardpeet commented Oct 3, 2018

I wouldn't have done such a great job though 馃槉

@wardpeet
Copy link
Collaborator

wardpeet commented Oct 5, 2018

Results are the same I tested it on
edition.cnn.com
master
perf

hotelurbano.com
master
perf
this one has the cors issue which now works! :)

tinyhousebuild.com
master
perf

Copy link
Member

@brendankenny brendankenny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this. Faster and super understandable!

Really just a question on handling URLs and some ideas for more unit tests.

// remove any optional quotes before/after
.map(s => {
const firstChar = s.charAt(0);
if (firstChar === s.charAt(s.length - 1) && (firstChar === '"' || firstChar === '\'')) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better like this than in the regex?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this might be more readable than the backreference regex, but I guess not :) switched!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this might be more readable than the backreference regex

haha, it might be! I was just asking

return s;
});

const absoluteURLs = relativeURLs.map(url => new URL(url, artifacts.URL.finalUrl));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how do we want to deal with exceptions here? e.g. invalid font URL probably shouldn't throw the whole audit

Copy link
Collaborator Author

@patrickhulce patrickhulce Oct 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah good point, I'll add a try/catch with beacon


const result = await Audit.audit(getArtifacts());
assert.strictEqual(result.rawValue, true);
assert.deepEqual(result.details.items, []);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how do you feel about populating this with some of the @font-face blocks we can find out on real sites? (like the sites ward mentioned in #6166 (comment)). We'd have better coverage for the regexes, plus we'd have a ready-made place to put future regression tests if we ever find we're missing weird things people are doing.

If all the examples we can find are pretty similar, could use them but vary new lines, font-display value, whitespace, and throw in some invalid URLs. Is there anything interesting for fonts not in the network records or not in stylesheets? (probably not for this audit)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great idea! will do

it('fails when not all fonts have a correct font-display rule', async () => {
stylesheet.content = `
@font-face {
src: url("./font-a.woff");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe call out the quote differences here? Either a comment (or comments for each in the css string) or even a test only testing quoting the url? (though it would be identical to this test :)

It's kind of not obvious that this is covering those possibilities if you haven't just read the audit, and I could see them being accidentally dropped in future edits to this file without knowing they were important.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah good call, done

Copy link
Member

@brendankenny brendankenny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

last thing but otherwise LGTM! 馃帀 馃帀

assert.deepEqual(result.details.items, []);
});

it('should handle real-world font-face declarations', async () => {
Copy link
Member

@brendankenny brendankenny Oct 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

馃憤 馃憤

const absoluteURL = new URL(relativeURL, artifacts.URL.finalUrl);
passingURLs.add(absoluteURL.href);
} catch (err) {
Sentry.captureException(err, {tags: {audit: this.meta.id}});
Copy link
Member

@brendankenny brendankenny Oct 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably only capture once per audit run. Kind of annoying to implement, but some sites end up with a ridiculous number of broken URLs (or whatever we're capturing in a loop). See #5994 (which the only one I had actually checked off was the gatherer this is deleting :)...or disagree with the conclusion there :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a counter-proposal that I will put up in a different PR :)

@paulirish paulirish merged commit 0f680b3 into master Oct 12, 2018
@paulirish paulirish deleted the font_perf branch October 12, 2018 01:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants