feat: add basic lighthouse functionality #825

patrickhulce · 2017-03-02T01:26:27Z

The Lighthouse

The Run

The Report (video is available on mobile)

paulirish · 2017-03-02T02:21:30Z

agent/js/src/wd_server.js

+  this.lighthouseFile_ = path.join(this.runTempDir_, 'lighthouse.html');
+  this.app_.timeout(1000, 'Waiting for Chrome to be available...');
+  process_utils.scheduleExec(this.app_,
+    'lighthouse',


Probably up to Pat, but should we put the lighthouse install instructions in a readme?

Presumably it's npm install -g GoogleChrome/lighthouse + confirm npm globals are in your PATH?

Yeah the most helpful instructions I actually found were over in the google sites page rather than any README so I figured we'd add it there, but even better to find a place here if there's one I missed!

How big is it and is it feasible to include directly? Worst case I'll add logic to the agent at startup to look for it and try to install if it isn't there (and automatically update if it is) but if we can eliminate the need for manually installing then all of the existing agents will pick up lighthouse support automatically.

Also, does running it as "lighthouse" work on Windows as well or does Node need to explicitly be referenced? Just checking since the Node agent runs across all platforms.

IMO the maintenance burden of keeping it as a submodule or checking in the result of npm install here is more trouble than letting npm install -g handle it and adding an auto-update check, but it's a bit safer so I'm open to either.

I'm not on Windows anywhere with node, so I can't verify it, but we've recently had a contributor making sure our build runs on appveyor which I believe removed our *nix specific hashbangs and such. If your path is setup correctly it should, but I can validate on my machine at home tonight.

ebidel

PHP! It's been a while my friend.

ebidel · 2017-03-02T07:34:33Z

agent/js/src/wd_server.js

+      '--output-path', this.lighthouseFile_,
+      this.task_.url,
+    ], undefined, this.timeout_).then(function () {
+    var devtoolsLogFile = path.join(this.runTempDir_, 'lighthouse-0.devtoolslog.json');


is this indentation intentional?

this line yes :) though the above should be indented 2 more spaces. it's used elsewhere like this, will fix

ebidel · 2017-03-02T07:38:00Z

www/lighthouse.php

+
+      // Cache for a year
+      header('Last-Modified: ' . gmdate('r'));
+      header('Expires: '.gmdate('r', time() + 31536000));


space around .

IIRC Expires is old and everyone supports Cache-Control now. Do we need it?

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en#cache-control

The WPT code is old so it's just left over :-) It's fine to remove it but it also doesn't hurt since cache-control takes precedence.

I'll remove

ebidel · 2017-03-02T07:42:44Z

Does our snazy LH animation come into the mix anywhere, or is that just for PR description fun?

pmeenan

No blockers so I'm happy to merge. My vote is to merge it as it is and iterate on the result UI and agent install bits. LMK if that sounds good and I'll pull it in.

pmeenan · 2017-03-02T14:21:55Z

agent/js/src/wd_server.js

+  this.lighthouseFile_ = path.join(this.runTempDir_, 'lighthouse.html');
+  this.app_.timeout(1000, 'Waiting for Chrome to be available...');
+  process_utils.scheduleExec(this.app_,
+    'lighthouse',


How big is it and is it feasible to include directly? Worst case I'll add logic to the agent at startup to look for it and try to install if it isn't there (and automatically update if it is) but if we can eliminate the need for manually installing then all of the existing agents will pick up lighthouse support automatically.

Also, does running it as "lighthouse" work on Windows as well or does Node need to explicitly be referenced? Just checking since the Node agent runs across all platforms.

pmeenan · 2017-03-02T14:23:36Z

www/lighthouse.php

+
+      // Cache for a year
+      header('Last-Modified: ' . gmdate('r'));
+      header('Expires: '.gmdate('r', time() + 31536000));


The WPT code is old so it's just left over :-) It's fine to remove it but it also doesn't hurt since cache-control takes precedence.

pmeenan · 2017-03-02T14:26:41Z

www/result.inc

                    // create a friendlier (unique) name for the fi
                    $fileUrl = GetFileUrl($url);
+                    if ( $test['testinfo']['lighthouse'] && $fvMedian )
+                    {
+                      echo "<a href=\"/lighthouse.php?test=$id&run=$fvMedian\">Lighthouse report</a><br>";


This works for now but I'd really like to give it much more prominent treatment. The grades section in the header is a perfect place since the grades won't be calculated in the lighthouse case. If the score can be pulled out of the HTML then the UI can have a large:

Lighthouse Score: 85/100 (click for full report)

And maybe also the logo ;-)

ebidel · 2017-03-02T16:58:49Z

+1 on iterating on the UI and figuring out more prominent bits as we go. Including the logo will help users know this is the same tool they've used elsewhere.

…

On Thu, Mar 2, 2017, 6:29 AM Patrick Meenan ***@***.***> wrote: ***@***.**** approved this pull request. No blockers so I'm happy to merge. My vote is to merge it as it is and iterate on the result UI and agent install bits. LMK if that sounds good and I'll pull it in. ------------------------------ In agent/js/src/wd_server.js <#825 (comment)> : > * a directory. * @Private */ WebDriverServer.prototype.runLighthouse_ = function() { - // TODO(phulce): actually run lighthouse - this.onPageLoad_(new Error('Lighthouse not yet implemented!')); + this.lighthouseFile_ = path.join(this.runTempDir_, 'lighthouse.html'); + this.app_.timeout(1000, 'Waiting for Chrome to be available...'); + process_utils.scheduleExec(this.app_, + 'lighthouse', How big is it and is it feasible to include directly? Worst case I'll add logic to the agent at startup to look for it and try to install if it isn't there (and automatically update if it is) but if we can eliminate the need for manually installing then all of the existing agents will pick up lighthouse support automatically. Also, does running it as "lighthouse" work on Windows as well or does Node need to explicitly be referenced? Just checking since the Node agent runs across all platforms. ------------------------------ In www/lighthouse.php <#825 (comment)> : > @@ -0,0 +1,26 @@ +<?php +if(array_key_exists("HTTP_IF_MODIFIED_SINCE",$_SERVER) && strlen(trim($_SERVER['HTTP_IF_MODIFIED_SINCE']))) { + header("HTTP/1.0 304 Not Modified"); +} else { + include 'common.inc'; + $ok = false; + if (isset($testPath) && is_dir($testPath)) { + $file = "${run}_lighthouse.html.gz"; + $filePath = "$testPath/$file"; + if (is_file($filePath)) { + $ok = true; + + // Cache for a year + header('Last-Modified: ' . gmdate('r')); + header('Expires: '.gmdate('r', time() + 31536000)); The WPT code is old so it's just left over :-) It's fine to remove it but it also doesn't hurt since cache-control takes precedence. ------------------------------ In www/result.inc <#825 (comment)> : > // create a friendlier (unique) name for the fi $fileUrl = GetFileUrl($url); + if ( $test['testinfo']['lighthouse'] && $fvMedian ) + { + echo "<a href=\"/lighthouse.php?test=$id&run=$fvMedian\">Lighthouse report</a><br>"; This works for now but I'd really like to give it much more prominent treatment. The grades section in the header is a perfect place since the grades won't be calculated in the lighthouse case. If the score can be pulled out of the HTML then the UI can have a large: Lighthouse Score: 85/100 (click for full report) And maybe also the logo ;-) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#825 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAOigCsQZ8XrvVJoh8Bq5XwWwmEJaVKEks5rhtJGgaJpZM4MQbjA> .

patrickhulce · 2017-03-02T17:31:51Z

Does our snazy LH animation come into the mix anywhere, or is that just for PR description fun?

Just fun, but it will! That GIF was from my local custom LH-WPT launch page ;)

I also vote to iterate on the UI, adding the score, etc.

ebidel · 2017-03-02T18:02:10Z

Woot! cc @igrigorik

igrigorik · 2017-03-02T22:08:59Z

\o/ ... woot!

Pat: when might we see this live on webpagetest.org? :)

pmeenan · 2017-03-02T22:40:43Z

Probably next week. I want to do some testing first and then since I have ~60 mobile agents I really want to teach the agent code to install and update lighthouse automatically so I don't have to manually configure all of them.

pmeenan · 2017-03-03T14:27:57Z

There go my hopes for an easy install :( Apparently the Node version on the Pi's is 4.x (which is what is in the repo for jessie) so I need to go through and upgrade them all to 7.x anyway. Starting on the testing now and I still plan to have it up and running next week.

feat: add basic lighthouse functionality

b143926

paulirish reviewed Mar 2, 2017

View reviewed changes

ebidel reviewed Mar 2, 2017

View reviewed changes

pmeenan approved these changes Mar 2, 2017

View reviewed changes

style: indentation change and expires removal

db39ffe

pmeenan merged commit 7ce8cd2 into catchpoint:master Mar 2, 2017

patrickhulce deleted the lighthouse_run branch March 2, 2017 18:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add basic lighthouse functionality #825

feat: add basic lighthouse functionality #825

patrickhulce commented Mar 2, 2017 •

edited

Loading

paulirish Mar 2, 2017

patrickhulce Mar 2, 2017

pmeenan Mar 2, 2017

patrickhulce Mar 2, 2017

ebidel left a comment

ebidel Mar 2, 2017

patrickhulce Mar 2, 2017

ebidel Mar 2, 2017

ebidel Mar 2, 2017

pmeenan Mar 2, 2017

patrickhulce Mar 2, 2017

ebidel commented Mar 2, 2017

pmeenan left a comment

pmeenan Mar 2, 2017

pmeenan Mar 2, 2017

pmeenan Mar 2, 2017

ebidel commented Mar 2, 2017 via email

patrickhulce commented Mar 2, 2017

ebidel commented Mar 2, 2017

igrigorik commented Mar 2, 2017

pmeenan commented Mar 2, 2017

pmeenan commented Mar 3, 2017

feat: add basic lighthouse functionality #825

feat: add basic lighthouse functionality #825

Conversation

patrickhulce commented Mar 2, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebidel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebidel commented Mar 2, 2017

pmeenan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebidel commented Mar 2, 2017 via email

patrickhulce commented Mar 2, 2017

ebidel commented Mar 2, 2017

igrigorik commented Mar 2, 2017

pmeenan commented Mar 2, 2017

pmeenan commented Mar 3, 2017

patrickhulce commented Mar 2, 2017 •

edited

Loading