WebPerf A YSlow Alternative for Making Web Pages Faster

At MaxCDN we love Sitespeed.io, an open source tool that helps developers test website speed and performance. So when its creator Peter Hedenskog told us about his and Tobias Lidskog’s latest project the coach, we tried it out immediately. We were so impressed that we invited Peter to tell you about it and show you how it works.

Do you remember what happened 2007?

Apple released the first iPhone, MySpace was popular, and Yahoo open-sourced YSlow.

That was nine years ago, and the web has changed since then: People now use phones to access your site, browsers update themselves regularly, and we have a new version of HTTP.

The point? Rules that applied in 2007 for making a web page fast aren’t the same as they are today. Which is why we built the coach, or why we’re building the coach. The coach will never be finished; she will continue to learn as the world changes.

How the Coach Is Different from YSlow


Chrome will drop support for SPDY with the official release of Chrome 51. The coach knows that. Your site is using HTTP/2. The coach will adjust advice accordingly. And when browsers release new functionality that can make your page render faster (like Chrome shipping Preload), the coach will learn by a new pull request.

The coach will evolve at the same rate as browsers because she is a living project. Yes, YSlow was once the best web page performance test that was open-sourced, but it has been dormant for years. Open pull requests date back to 2013.

How the Coach Helps You Optimize Pages


In the future the coach will be able to help you in ways unknown to me. But how can the coach help you today? Well, since you’re reading this on MaxCDN, let’s talk about caching.

Is your server correctly configured for caching? The coach will help you determine that. It will also show you how long it’s been since you changed a file and compare it with your cache time.

Say that for all assets loaded on your page, the median time since they were changed is 7 weeks. But the median cache time for all assets is one hour. That’s a mismatch that you should look into. The coach will not say that it’s wrong; rather, she’ll point you in the right direction.

The coach will also give you a performance score between 0 and 100. We have benchmarked against YSlow and Page Speed Insights and, in almost all cases, YSlow gives you a higher score than the rest.

As for PSI, results are pretty similar but each web page performance test checks different things. Or at least we think they do. PSI is open source but it’s kind of hard to find the source code.

The Coach Giving Obama Some Tough Love


Below I’m going to “coach” Wikipedia’s mobile page for Barack Obama.

First I’ll use the mobile switch for using a mobile user agent, choose Chrome (you will get slightly different results depending on the browser you choose), and add details (this will give you info about the exact assets that have performance problems).

You can also use –help to get all parameters. I didn’t add this in the test below, but it’s good to include if you need direction on making the improvements that the coach suggests.

Here is the input:

webcoach Barack Obama - Wikipedia, the free encyclopedia --mobile --details -b chrome

And here is the output:

​

Click here to get the full view

So here the coach is giving us best practice advice, accessibility advice, and performance advice.

In terms of best practice, the coach is saying that Wikipedia uses HTTPS and HTTP/2. In terms of accessibility, the coach is saying that images are missing the alt tag. And in terms of performance, well, there’s a lot to be said as this is the coach’s main focus.

Let’s take a look at why this Wikipedia page got a performance score of 87 and not 100:

• The Obama page has 43 requests that don’t get cached by the browser because Wikipedia doesn’t set cache headers. If we fix this, 561.5 kilobytes will be saved if the user decides to view this page again. Setting a cache header is the most important advice the coach provides so this really hurts the performance score.
• We get a warning that the page has five requests with a cache time but they are set to smaller than one month. It’s good to have longer cache headers.
• The page both inlines CSS and does CSS requests inside the head. We should either push the CSS (when we have push support available with HTTP/2) or inline the render blocking CSS. But we should not do both.
• The total JavaScript transfer size is 164.5 kilobytes and the uncompressed size is 583.9 kilobytes. The coach recommends we lower that because 500+ kilobytes of JavaScript takes time to parse on a mobile phone.
• The coach also warns us about two requests with private headers. This advice has low priority because the coach doesn’t know if they should really be private. In some situations, having private headers is a best practice. But for assets that are shareable between users, it’s a big no-no. So you need to figure out whether they’re needed or not.

Coach Your Pages to 100

---

Now it’s your turn to test the pages on your website. Install the coach and test them out. What can you do to get them to 100? Also, if you think the coach is missing any advice during your tests, submit a pull request. We love that!

The post A YSlow Alternative for Making Web Pages Faster appeared first on MaxCDN Blog.

Continue reading...

 

Interesting tool the coach is

install node.js first via addons/nodejs.sh ideally on latest Centmin Mod 123.09beta01 branch

Code (Text):

addons/nodejs.sh install

Code (Text):

addons/nodejs.sh install

---------------------------
Node.js Version: -n
v4.4.4
---------------------------
npm Version: -n
3.9.0
---------------------------

node.js source install completed

install coach

Code (Text):

npm install webcoach -g

test with chrome browser

Code (Text):

webcoach http://centminmod.com --browser chrome --details --description

hit a road block as Chrome binary not found

Code (Text):

webcoach http://centminmod.com --browser chrome --details --description
Error running advice:  WebDriverError: unknown error: cannot find Chrome binary as both Firefox and Chrome need to be installed
[QUOTE]
[SIZE=4][B]Standalone[/B][/SIZE]
You need Node.js 4.3.0 or later to run. And you need Firefox and/or Chrome installed.
[/QUOTE]
  (Driver info: chromedriver=2.21.371461 (633e689b520b25f3e264a2ede6b74ccc23cb636a),platform=Linux 3.10.0-327.18.2.el7.x86_64 x86_64)
    at WebDriverError (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/error.js:27:10)
    at Object.checkLegacyResponse (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/error.js:639:15)
    at parseHttpResponse (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/http/index.js:538:13)
    at /usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/http/index.js:472:11
    at ManagedPromise.invokeCallback_ (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/promise.js:1379:14)
    at TaskQueue.execute_ (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at /usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/promise.js:2820:25
    at /usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/promise.js:639:7
    at process._tickCallback (node.js:369:9)
From: Task: WebDriver.createSession()
    at Function.createSession (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/lib/webdriver.js:329:24)
    at Driver (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/chrome.js:778:38)
    at Builder.build (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/builder.js:464:16)
    at Builder.buildAsync (/usr/lib/node_modules/webcoach/node_modules/selenium-webdriver/builder.js:504:23)
    at Object.module.exports.createWebDriver (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/webdriverBuilder.js:236:34)
    at /usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/seleniumRunner.js:32:40
    at tryCatcher (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/method.js:39:29)
    at SeleniumRunner.startBrowser (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/seleniumRunner.js:32:25)
    at SeleniumRunner.start (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/seleniumRunner.js:41:25)
    at runIteration (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/engine.js:122:21)
    at /usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/engine.js:195:25
    at tryCatcher (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/reduce.js:147:18)
    at Object.gotAccum (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/reduce.js:134:25)
    at Object.tryCatcher (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/util.js:16:23)

Chrome browser install as per instructions at Google Chrome 50 Released - Install on RHEL/CentOS 7/6 and Fedora 23-15

for /etc/yum.repos.d/google-chrome.repo

Code (Text):

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

Code (Text):

yum info google-chrome-stable -q
Available Packages
Name        : google-chrome-stable
Arch        : x86_64
Version     : 50.0.2661.102
Release     : 1
Size        : 46 M
Repo        : google-chrome/x86_64
Summary     : Google Chrome
URL         : https://chrome.google.com/
License     : Multiple, see https://chrome.google.com/
Description : The web browser from Google
            :
            : Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.

install Google Chrome

Code (Text):

yum install google-chrome-stable

FYI, Google Chrome no longer officially supports Redhat/CentOS 6.x. There's a workaround listed at Google Chrome 50 Released - Install on RHEL/CentOS 7/6 and Fedora 23-15

Coach Example Test

Now re-try the coach test again against Chrome browser but there's an error starting Google Chrome

Code (Text):

Couldn't load libexif. libexif.so.12:

missing some package, lets see what it is

Code (Text):

yum provides *\libexif.so -q
libexif-devel-0.6.21-6.el7.x86_64 : Files needed for libexif application development
Repo        : base
Matched from:
Filename    : /usr/lib64/libexif.so

Install libexif-devel

Code (Text):

yum -y install libexif-devel

version of Chrome

Code (Text):

google-chrome --version
Google Chrome 50.0.2661.102

Code (Text):

google-chrome &
webcoach http://centminmod.com --browser chrome --details --description

output from test run of coach command via chrome browser still results in an error

Code (Text):

webcoach http://centminmod.com --browser chrome --details --description
Error running advice:  BrowserError: Failed to start browser in 60 seconds.
    at SeleniumRunner.startBrowser (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/seleniumRunner.js:37:11)
    at SeleniumRunner.start (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/seleniumRunner.js:41:25)
    at runIteration (/usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/engine.js:122:21)
    at /usr/lib/node_modules/webcoach/node_modules/browsertime/lib/core/engine.js:195:25
    at tryCatcher (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/reduce.js:147:18)
    at Object.gotAccum (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/reduce.js:134:25)
    at Object.tryCatcher (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/promise.js:502:31)
    at Promise._settlePromise (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/promise.js:559:18)
    at Promise._settlePromiseCtx (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/promise.js:596:10)
    at Async._drainQueue (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/async.js:143:12)
    at Async._drainQueues (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/async.js:148:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/usr/lib/node_modules/webcoach/node_modules/bluebird/js/release/async.js:17:14)
    at processImmediate [as _immediateCallback] (timers.js:383:17)

webcoach options

Code (Text):

webcoach -h
/bin/webcoach [options] <url>/<file.har>

Options:
  -h, --help     Show help                                                                                                                                                                                                                       [boolean]
  -b, --browser  Browser to run (only applicable when testing a URL).                                                                                                                                                                 [default: "firefox"]
  -f, --format   Output format.                                                                                                                                                                              [choices: "table", "json"] [default: "table"]
  -o, --output   File to write output to.
  --details      Show offending request/responses in table output                                                                                                                                                               [boolean] [default: false]
  --description  Show advice description in table output                                                                                                                                                                        [boolean] [default: false]
  -l, --limit    Show advice with score lower than the limit                                                                                                                                                                                [default: 100]
  --mobile       Access the page as mobile a mobile device. Set UA and width/height. For Chrome it will use device Apple iPhone 6.                                                                                              [boolean] [default: false]
  --screenshot   Take a screenshot of the tested page saved as screenshot.png                                                                                                                                                   [boolean] [default: false]
  -V, --version  Show version number                                                                                                                                                                                                             [boolean]