Join the community today
Register Now

WebPerf A YSlow Alternative for Making Web Pages Faster

Discussion in 'All Internet & Web Performance News' started by eva2000, May 18, 2016.

  1. eva2000

    eva2000 Administrator Staff Member

    29,033
    6,589
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,782
    Local Time:
    3:21 PM
    Nginx 1.13.x
    MariaDB 5.5
    [​IMG]

    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:

    [​IMG]

    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...
     
    Last edited: May 18, 2016
  2. eva2000

    eva2000 Administrator Staff Member

    29,033
    6,589
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,782
    Local Time:
    3:21 PM
    Nginx 1.13.x
    MariaDB 5.5
    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]
    
    
     
    Last edited: May 19, 2016