core(tags blocking first-paint): exclude script type=module #3676

thisizkp · 2017-10-28T03:09:51Z

patrickhulce

thanks for the contribution @thisizkp! would you mind adding a module entry to our smoketests?

lighthouse/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

Lines 35 to 36 in 76e51f3

    
           <!-- FAIL: block rendering --> 
        
           <script src="./dbw_tester.js"></script>

patrickhulce · 2017-10-30T15:56:15Z

lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js

@@ -27,12 +27,13 @@ const Gatherer = require('../gatherer');
 function collectTagsThatBlockFirstPaint() {
  return new Promise((resolve, reject) => {
    try {
-      const tagList = [...document.querySelectorAll('link, head script[src]')]
+      const tagList = [...document.querySelectorAll('link, head script[src], script[type]')]


Why was this added?

to detect the inline modules, type="module" may not be always followed by the src attribute.

<script type="module"> import module from '../example.js'; module.test(); </script>

sure, but I mean we're trying to ignore modules so we'd be pulling them in just to ignore them

patrickhulce · 2017-10-30T15:57:10Z

lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js

        .filter(tag => {
          if (tag.tagName === 'SCRIPT') {
            return !tag.hasAttribute('async') &&
                !tag.hasAttribute('defer') &&
-                !/^data:/.test(tag.src);
+                !/^data:/.test(tag.src) &&
+                !(tag.getAttribute('type') === 'module');


let's do tag.getAttribute('type') !== 'module'

is this just for readability or anything I'm missing over?
I just wrote like this to make it consistent with the above checks

well the others are like that only because there not using an operator, so yeah just easier to read :)

thisizkp · 2017-11-01T04:07:06Z

@patrickhulce did those minor fixes, not sure about adding module entry to smoke tests. Can you help me out with any pointers to docs, examples or any resources about doing that?

patrickhulce · 2017-11-01T05:34:23Z

The two lines I referenced are the best example. Basically you want to copy those two lines in that file, add type="module", and change the comment to say it should pass because it's a module and is not blocking

lighthouse/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

Lines 35 to 36 in 76e51f3

    
           <!-- FAIL: block rendering --> 
        
           <script src="./dbw_tester.js"></script>

thisizkp · 2017-11-01T11:58:33Z

Oh, I was thinking may be I should create a new file separately to test module thing and I'm not sure about what to test out in those files. Thanks for that 👍

thisizkp · 2017-11-01T16:37:46Z

@patrickhulce After that mentioned change I did (locally), smoke tests are failing. Need some more time to fix that issue. Will try and get back to you If I get stuck.

thisizkp · 2017-11-02T00:32:09Z

After adding this line

<script type="module" src="dbw_tester.js?module"></script>

Smoke tests are failing for uses-http2 and mutation-events. I'm puzzled about how this change can affect that. Any help

patrickhulce · 2017-11-02T01:59:55Z

You haven't pushed your changes so I'm not sure exactly what's failing 😄 but you've added a new URL so you'll probably need to update the uses-http2 expectation to include 1 more request.

lighthouse/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js

Lines 35 to 43 in fbe3fda

    
           'uses-http2': { 
        
             score: false, 
        
             extendedInfo: { 
        
               value: { 
        
                 results: { 
        
                   length: 15, 
        
                 }, 
        
               }, 
        
             },

(bump line 40 to 16)

mutation events is probably reporting the mutation events fired in dbw_tester.js so let's just change the URL to something that'll 404 like src="sample-module.js", keep it simpler for you :)

thisizkp · 2017-11-02T10:04:02Z

but if it's just a 404, the test will not give accurate results right?

patrickhulce · 2017-11-02T15:57:47Z

a blocking script that 404s is still a blocking script so it should work fine for our purposes (you can add src="sample-module.js?delay=500" to make sure it takes a while to return) and it shouldn't impact any of the other expectations other than uses-http2

thisizkp · 2017-11-03T12:49:08Z

blocked at this - <script type="module" src="./sample-module.js?delay=500"></script> line is being triggered twice.

lighthouse/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js

Lines 35 to 43 in fbe3fda

    
           'uses-http2': { 
        
             score: false, 
        
             extendedInfo: { 
        
               value: { 
        
                 results: { 
        
                   length: 15, 
        
                 }, 
        
               }, 
        
             },

If I bump up this number to 17 instead of 16, it works. But I'm curious about what is triggering it.

patrickhulce · 2017-11-03T17:40:05Z

If I bump up this number to 17 instead of 16, it works. But I'm curious about what is triggering it.

Seems like chrome double requests 404 modules, so I went ahead and fixed up the smoketests since I've had you churn enough 😄

patrickhulce

thanks for helping us out here @thisizkp! 🎉 🎂

thisizkp · 2017-11-04T03:12:50Z

thank you for helping me out, got stuck so many times... but somehow finally merged 🎉

…rome#3676) * exclude script type='module' from render blocking warnings * pr fixes * add 404 sample module as script source * quick typo fix * fix smoketests

exclude script type='module' from render blocking warnings

10a65d1

thisizkp requested review from patrickhulce and paulirish as code owners October 28, 2017 03:09

thisizkp changed the title ~~core(tags blocking first-paint): exclude script type=module from render blocking warnings~~ core(tags blocking first-paint): exclude script type=module Oct 28, 2017

patrickhulce suggested changes Oct 30, 2017

View reviewed changes

patrickhulce added the waiting4committer label Oct 30, 2017

pr fixes

4cbbe96

add 404 sample module as script source

50bb167

thisizkp requested a review from brendankenny as a code owner November 3, 2017 12:49

patrickhulce added 2 commits November 3, 2017 09:07

quick typo fix

ea15e03

fix smoketests

df28a3e

patrickhulce approved these changes Nov 3, 2017

View reviewed changes

patrickhulce merged commit 6ba5eb1 into GoogleChrome:master Nov 3, 2017

thisizkp deleted the issue-3359 branch November 4, 2017 03:12

dependencies bot mentioned this pull request Dec 17, 2017

Update lighthouse in / from 2.5.0 to 2.7.0 chauncey-garrett/dotfiles#57

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

core(tags blocking first-paint): exclude script type=module #3676

core(tags blocking first-paint): exclude script type=module #3676

thisizkp commented Oct 28, 2017 •

edited

Loading

patrickhulce left a comment

patrickhulce Oct 30, 2017

thisizkp Oct 31, 2017 •

edited

Loading

patrickhulce Oct 31, 2017

patrickhulce Oct 30, 2017

thisizkp Oct 31, 2017

patrickhulce Oct 31, 2017

thisizkp commented Nov 1, 2017

patrickhulce commented Nov 1, 2017

thisizkp commented Nov 1, 2017

thisizkp commented Nov 1, 2017 •

edited

Loading

thisizkp commented Nov 2, 2017

patrickhulce commented Nov 2, 2017

thisizkp commented Nov 2, 2017

patrickhulce commented Nov 2, 2017 •

edited

Loading

thisizkp commented Nov 3, 2017

patrickhulce commented Nov 3, 2017

patrickhulce left a comment

thisizkp commented Nov 4, 2017

	<!-- FAIL: block rendering -->
	<script src="./dbw_tester.js"></script>

core(tags blocking first-paint): exclude script type=module #3676

core(tags blocking first-paint): exclude script type=module #3676

Conversation

thisizkp commented Oct 28, 2017 • edited Loading

patrickhulce left a comment

Choose a reason for hiding this comment

patrickhulce Oct 30, 2017

Choose a reason for hiding this comment

thisizkp Oct 31, 2017 • edited Loading

Choose a reason for hiding this comment

patrickhulce Oct 31, 2017

Choose a reason for hiding this comment

patrickhulce Oct 30, 2017

Choose a reason for hiding this comment

thisizkp Oct 31, 2017

Choose a reason for hiding this comment

patrickhulce Oct 31, 2017

Choose a reason for hiding this comment

thisizkp commented Nov 1, 2017

patrickhulce commented Nov 1, 2017

thisizkp commented Nov 1, 2017

thisizkp commented Nov 1, 2017 • edited Loading

thisizkp commented Nov 2, 2017

patrickhulce commented Nov 2, 2017

thisizkp commented Nov 2, 2017

patrickhulce commented Nov 2, 2017 • edited Loading

thisizkp commented Nov 3, 2017

patrickhulce commented Nov 3, 2017

patrickhulce left a comment

Choose a reason for hiding this comment

thisizkp commented Nov 4, 2017

thisizkp commented Oct 28, 2017 •

edited

Loading

thisizkp Oct 31, 2017 •

edited

Loading

thisizkp commented Nov 1, 2017 •

edited

Loading

patrickhulce commented Nov 2, 2017 •

edited

Loading