new_audit(preload-audit): Adding preload audit by wardpeet · Pull Request #3450 · GoogleChrome/lighthouse

wardpeet · 2017-10-01T13:36:52Z

fixes #931

paulirish · 2017-10-16T20:44:09Z

Let's let this guy chill while we focus on the bootup PRs..

wardpeet · 2017-10-21T13:08:33Z

Some examples:
https://www.paulirish.com/
https://www.theverge.com/
https://www.washingtonpost.com/
https://mobile.nytimes.com/

patrickhulce

nice! I think #3618 could've really helped with this one in particular, seems like a great first start though!

can probably remove gcloud-credentials too :)

patrickhulce · 2017-10-23T18:04:55Z

lighthouse-core/audits/uses-rel-preload.js

+        if (
+          !networkRecord._isLinkPreload && networkRecord.protocol !== 'data'
+        ) {
+          const wastedMs = (request.endTime - request.startTime) * 1000;


Hmmm I'm not sure we can really count this entire request time as wasted, I'm not really sure of a fantastic alternative in absence of a fastmode-based approach. Maybe we can Math.min it with the time spent delayed instead (request.startTime - mainResource.endTime) for now?

Not 100% following the fast-mode part. I kinda missed that whole part..

patrickhulce · 2017-10-23T18:06:05Z

lighthouse-core/config/test-config.js

+'use strict';
+
+module.exports = {
+  extends: 'lighthouse:default',


this was a temporary config right, we can remove this now?

yeah, sorry need to check my PR's a bit better!

patrickhulce · 2017-10-23T18:08:59Z

lighthouse-core/audits/uses-rel-preload.js

+      failureDescription: 'Scripts were discovered late but fetching them earlier may have ' +
+        'improved how quickly the page was interactive',
+      helpText: 'Consider using <link rel=preload> to prioritize fetching late-discovered ' +
+        'resources sooner [Learn more]().',


Maybe we use https://developers.google.com/web/updates/2016/03/link-rel-preload?

not sure, it 100% explains to beginners what it does but I have no better resource

patrickhulce · 2017-10-23T18:10:17Z

lighthouse-core/audits/uses-rel-preload.js

+      category: 'Performance',
+      name: 'uses-rel-preload',
+      description: 'Preload key requests',
+      failureDescription: 'Scripts were discovered late but fetching them earlier may have ' +


we shouldn't need a failureDescription here, scoringMode: numeric I think is what we're looking for

scoringMode? haven't heard about that, what does it do?

oh it basically means that there's no pass/fail state it's just a numeric score :)

wardpeet · 2017-10-25T20:29:20Z

nice! I think #3618 could've really helped with this one in particular, seems like a great first start though!

I can still move the page dep graph if you like :)

patrickhulce · 2018-01-16T18:03:47Z

@wardpeet I wouldn't expect that smoketest to fail this test since we're trying to target resources that were requested very late but still blocking

the only real common case I can think of that will fail this in Chrome is a font requested by a render-blocking stylesheet and document.write

the main case I would want to catch would be font related

root document

<link rel="stylesheet" href="style.css">

style.css

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

body {
  font-family: "Open Sans";
}

the main case I would want to catch for document.write would be something like level-2.js and level-3.js in the example below, but we already have a document.write audit telling you not to use it at all so not as concerned about working around document.write with preload :)

root document

<script src="level-1.js"></script>

level-1.js

document.write('<script src="level-2.js"></script>')

level-2.js

document.write('<script src="level-3.js"></script>')

level-3.js

document.body.appendChild(createDiv('Hello!'))

wardpeet · 2018-01-16T21:52:16Z

@patrickhulce thanks! implemented smoketests as you stated. What I see now is that fonts from stylesheets are loaded from the document so they are not part of the depdency tree of critical requests
https://googlechrome.github.io/lighthouse/viewer/?gist=886a702680576c0c9b648f0cc87cecf3

Looking at the page dependencygraph gatherer I have the same issue. It seems like chrome tells us that a font is loaded by the document and not by an external stylesheet so we do not consider it as preloadable.

wardpeet · 2018-02-04T12:22:39Z

@patrickhulce @patrickhulce wasn't 100% sure what was needed here. If not mistaking we were going to do a followup PR to expand this audit to other things than critical request chains.

patrickhulce

yeah we'll punt the criticalness and same-origin changes for a future PR :)

few other odds and ends

patrickhulce · 2018-02-05T17:53:45Z

lighthouse-core/gather/computed/critical-request-chains.js

-      };
+      // add url to be backwards compatible with old CRC
+      // TODO remove in version 3.0
+      request.url = request._url;


what's the purpose of this function now then? .url is already a getter on the request object

I'm slightly nervous about doing this since I'm assuming we needed it for a reason at some point :)

fixed removed indeed

patrickhulce · 2018-02-05T17:54:33Z

lighthouse-core/audits/critical-request-chains.js

+      }
+
+      const request = opts.node.request;
+      chain.request = {


maybe that flatten function is needed over here now?

patrickhulce · 2018-02-05T17:55:07Z

lighthouse-cli/test/smokehouse/smokehouse.js

    'config-path': 'The path to the config JSON file',
    'expectations-path': 'The path to the expected audit results file',
  })
+  .array('save-assets-path')


same story about nixing this here I believe :)

patrickhulce · 2018-02-05T17:55:53Z

lighthouse-cli/test/smokehouse/perf/expectations.js

-    initialUrl: 'http://localhost:10200/online-only.html',
-    url: 'http://localhost:10200/online-only.html',
+    initialUrl: 'http://localhost:10200/preload.html',
+    url: 'http://localhost:10200/preload.html',


if we're changing this URL do we need the separate entry below still?

patrickhulce · 2018-02-05T18:04:27Z

lighthouse-core/audits/uses-rel-preload.js

+        const networkRecord = request;
+        if (!networkRecord._isLinkPreload && networkRecord.protocol !== 'data') {
+          // calculate time between mainresource.endTime and resource start time
+          const wastedMs = (request._startTime - mainResource._endTime) * 1000;


let's also Math.min this with the total length of the request

CNN tells me you could save 20s by preloading a tracking pixel that only took ~700ms to load :)

now Math.min is shown :)

oh @wardpeet I meant doing

const wastedMs = Math.min(request._startTime - mainResource._endTime, request._endTime - request._startTime) * 1000

seems like I misread that...

patrickhulce · 2018-02-05T18:06:11Z

lighthouse-core/audits/uses-rel-preload.js

+    return {
+      category: 'Performance',
+      name: 'uses-rel-preload',
+      description: 'Preload key requests',


let's mark this as informative: true

patrickhulce · 2018-02-07T21:13:48Z

lighthouse-core/config/test.js

+ */
+'use strict';
+
+module.exports = {


seems like we might not need this anymore?

paulirish

let's do it.

what's up october 2017. welcome to the ❕ⓝⓞⓦ❕

wardpeet added this to the Loading Performance Audits milestone Oct 1, 2017

paulirish modified the milestones: Loading Performance Audits, Sprint Uno: Oct 2-13 Oct 2, 2017

patrickhulce mentioned this pull request Oct 13, 2017

Text compression with HTTP2 tip #3548

Closed

paulirish modified the milestones: Sprint Uno: Oct 2-13, Sprint Dos: Oct 16-27 Oct 16, 2017

paulirish removed this from the Sprint Dos: Oct 16-27 milestone Oct 16, 2017

paulirish added the chillin ❄ label Oct 16, 2017

wardpeet force-pushed the feature/preload branch from b02437a to 018df55 Compare October 21, 2017 15:38

wardpeet requested review from brendankenny, patrickhulce and paulirish as code owners October 21, 2017 15:38

wardpeet force-pushed the feature/preload branch from 018df55 to 2cb9f33 Compare October 21, 2017 15:40

patrickhulce suggested changes Oct 23, 2017

View reviewed changes

addyosmani added this to the Sprint Tres: Oct 30 - Nov 12 milestone Oct 30, 2017

wardpeet added the waiting4reviewer label Oct 30, 2017

wardpeet changed the title ~~feature(preload-audit): Adding preload audit~~ new_audit(preload-audit): Adding preload audit Nov 3, 2017

vinamratasingal-zz modified the milestones: Sprint Tres: Oct 30 - Nov 12, Sprint Quatro: November 13-26 Nov 13, 2017

paulirish modified the milestones: Sprint Quatro: November 13-26, Sprint Cinco: November 28 - Dec 9 Nov 27, 2017

paulirish self-assigned this Nov 28, 2017

paulirish mentioned this pull request Nov 28, 2017

Refactor CRChains to use the lantern dependency graph #3938

Closed

wardpeet force-pushed the feature/preload branch from 32c5a74 to 8194adc Compare January 13, 2018 14:41

Fix preload, tests and smoketest

31c838d

Fixed smoketests

ae68a0e

wardpeet force-pushed the feature/preload branch from ae978de to ae68a0e Compare January 17, 2018 21:07

paulirish modified the milestones: Sprint Siete: January 8-19, Sprint Ocho: January 29 - Feb 9 Jan 29, 2018

paulirish assigned patrickhulce Jan 31, 2018

patrickhulce suggested changes Feb 5, 2018

View reviewed changes

patrickhulce added waiting4committer and removed waiting4reviewer labels Feb 5, 2018

wardpeet added 2 commits February 5, 2018 22:33

Remove save-assets-path

1164106

Review changes

930cad4

devtools-bot added waiting4reviewer and removed waiting4committer labels Feb 5, 2018

wardpeet added 3 commits February 5, 2018 23:37

Fix unit tests

c468866

Fix review wasted time

c2534f6

Fix smoketest

6acd392

paulirish mentioned this pull request Feb 5, 2018

Preload audit improvements #4425

Closed

2 tasks

wardpeet and others added 3 commits February 6, 2018 08:08

Fix travis

14c36f9

remove unnecessary parens

b9591f0

Merge branch 'master' into feature/preload

d18b045

patrickhulce reviewed Feb 7, 2018

View reviewed changes

lighthouse-core/config/test.js Outdated

*/

'use strict';

module.exports = {

Copy link

Collaborator

patrickhulce Feb 7, 2018

Choose a reason for hiding this comment

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

seems like we might not need this anymore?

remove test config

6e4b183

paulirish approved these changes Feb 8, 2018

View reviewed changes

paulirish merged commit e9ff105 into master Feb 8, 2018

paulirish deleted the feature/preload branch February 8, 2018 00:18

paulirish removed the waiting4reviewer label Mar 6, 2018

Conversation

wardpeet commented Oct 1, 2017 • edited by paulirish Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

paulirish commented Oct 16, 2017

Uh oh!

wardpeet commented Oct 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patrickhulce left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wardpeet commented Oct 25, 2017

Uh oh!

patrickhulce commented Jan 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

root document

style.css

root document

level-1.js

level-2.js

level-3.js

Uh oh!

wardpeet commented Jan 16, 2018

Uh oh!

wardpeet commented Feb 4, 2018

Uh oh!

patrickhulce left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulirish left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

wardpeet commented Oct 1, 2017 •

edited by paulirish

Loading

wardpeet commented Oct 21, 2017 •

edited

Loading

patrickhulce commented Jan 16, 2018 •

edited

Loading