bevacqua / perfschool Goto Github PK

View Code? Open in Web Editor NEW

629.0 12.0 39.0 2.29 MB

:ocean: Navigate the #perfmatters salt marsh waters in this NodeSchool workshopper

Home Page: https://ponyfoo.com

License: MIT License

JavaScript 27.28% HTML 30.52% CSS 42.20%

perfschool's Introduction

perfschool

Find your way through the performance optimization maze in this NodeSchool workshopper

This workshop is based on one of my talks, "High Performance in the Critical Path". The perfschool workshopper was originally written for CampJS V.

Screenshots

Install

Get it from npm

npm install perfschool -g

**perfschool requires you to use Node.js v0.10.x.

Usage

First off, the command below will give you fresh copies of the files you'll need to run the exercises.

perfschool init

Once that's out of the way, just run the command below and choose one of the exercises!

cd perfschool-playground ; npm install ; perfschool

FAQ

Haven't you read this!? PageSpeed Service deprecation

Yes, yes I have. That article talks about PageSpeed Service, a CloudFlare-like CDN service that's going to be shut down. The PageSpeed Insights product and related open-source products are still alive and well (source).

License

MIT

perfschool's People

Contributors

Stargazers

Watchers

perfschool's Issues

Remove psi from the exercises.

As they are bringing it down!

require('psi'): Error connecting to http://localhost:$PORT/insights (ECONNREFUSED)

As soon as I add psi as a required dependency I start getting ✗ Error connecting to http://localhost:50780/insights (ECONNREFUSED) (the port number randomly changes, of course).

Here's the reference solution.js:

'use strict';

var fs = require('fs');
var path = require('path');
var express = require('express');
var psi = require('psi');

var app = express();
var port = process.env.PORT || 7777;

app.get('/', home);
app.get('/insights', insights);
app.listen(port, listening);

function listening () {
  console.log('Listening on port', port);
}

function home (req, res) {
  var file = path.join(__dirname, 'index.html');
  var index = fs.readFileSync(file, 'utf8');
  res.send(index);
}

function insights (req, res) {
  res.end('Not very insightful!');
}

As soon as I comment the PSI line I get

perfschool run solution.js                                                     [0:14:12]

# /insights produces valuable information about page weight
✓ Returns a 200 OK status code
✗ Returns a JSON object
✗ Response has a "resources" property
✗ Response has a "resources.js" property
✗ Response has a "resources.css" property
✗ Response has a "resources.total" property
✗ Response has a "resources.hosts" property

As soon as uncomment — the reported error.

Failed at the [email protected] install script 'node-gyp rebuild'

getting the following error when i try to install at windows box.

54295 error node v0.12.0
54296 error npm v2.5.1
54297 error code ELIFECYCLE
54298 error [email protected] install: node-gyp rebuild
54298 error Exit status 1
54299 error Failed at the [email protected] install script 'node-gyp rebuild'.
54299 error This is most likely a problem with the contextify package,
54299 error not with npm itself.
54299 error Tell the author that this fails on your system:
54299 error node-gyp rebuild
54299 error You can get their info via:
54299 error npm owner ls contextify
54299 error There is likely additional logging output above.

54300 verbose exit [ 1, true ]

Error while i trying to intall

Hello:

I'm installing the package with:

npm install -g perfschool

But i get this instead:

C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\src\win_delay_load_hook.c(34): error C2373: '__pfnDliNot
ifyHook2': redefinition; different type modifiers [C:\Users\nerve\AppData\Roaming\npm\node_modules\perfschool\node_modu
les\contextify\build\contextify.vcxproj]
C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\include\delayimp.h(134): note: see declaration of '__pfnDliNot
ifyHook2'
gyp ERR! build error
gyp ERR! stack Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack at emitTwo (events.js:106:13)
gyp ERR! stack at ChildProcess.emit (events.js:191:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
gyp ERR! System Windows_NT 10.0.14393
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\nerve\AppData\Roaming\npm\node_modules\perfschool\node_modules\contextify
gyp ERR! node -v v6.4.0
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok
C:\Users\nerve\AppData\Roaming\npm
`-- (empty)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "-g" "perfschool"
npm ERR! node v6.4.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs contextify
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls contextify
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\WINDOWS\system32\npm-debug.log
npm ERR! code 1

How can i fix it?

Thank you

Error when trying to init/install

Hi. I get an error whenever I try to install after running perfschool init:

I even tried cd perfschool-playground after the init command and then just manually npm install --save express serve-static and got the same error.

node version: v6.2.1
npm version: v3.9.3

ENOENT on windows

In perfschool windows does not create the folder perfschool-playground.
It can be solved by manually creating it, but I thought it would be nice to open an issue.
Nice work on this!

Can't install with PhantomJS 2.0.1

Hi, as I wrote in title - I can't install this package using npm, because I've got on my disk PhantomJS 2.0.1@development. I don't want to delete 2.x version, I have to use it.

Defer all the things: deferred styles

My solution contains the following code:

var hrefs = [
  'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css',
  'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css',
];

hrefs.forEach(function(href) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.media = 'only x';

  document.head.appendChild(link);

  setTimeout(function() {
    link.media = 'all';
  }, 0);
});

Running the code gives the following error:

# Link tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
✓ Stylesheet has a <noscript> fallback <link> just in case
✗ Link tag is properly loaded and has media type 'all'

# Link tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
✓ Stylesheet has a <noscript> fallback <link> just in case
✗ Link tag is properly loaded and has media type 'all'

If I change my code to:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.media = 'all';

It works :( But I assume it's not deferred at this point.

Failed Installation on Linux Mint (Linux-3.16.0.38 Generic)

Hi, I am trying to install it with npm on a Linux Mint system, but it's failing the build. Here's the install log FYI.

> [email protected] install /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/jsdom/node_modules/contextify
> node-gyp rebuild

make: Entering directory `/home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/jsdom/node_modules/contextify/build'
  CXX(target) Release/obj.target/contextify/src/contextify.o
In file included from ../src/contextify.cc:3:0:
../node_modules/nan/nan.h:261:25: error: redefinition of ‘template<class T> v8::Local<T> _NanEnsureLocal(v8::Local<T>)’
 NAN_INLINE v8::Local<T> _NanEnsureLocal(v8::Local<T> val) {
                         ^
../node_modules/nan/nan.h:256:25: error: ‘template<class T> v8::Local<T> _NanEnsureLocal(v8::Handle<T>)’ previously declared here
 NAN_INLINE v8::Local<T> _NanEnsureLocal(v8::Handle<T> val) {
                         ^
../node_modules/nan/nan.h:661:13: error: ‘node::smalloc’ has not been declared
     , node::smalloc::FreeCallback callback
             ^
../node_modules/nan/nan.h:661:35: error: expected ‘,’ or ‘...’ before ‘callback’
     , node::smalloc::FreeCallback callback
                                   ^
../node_modules/nan/nan.h: In function ‘v8::Local<v8::Object> NanNewBufferHandle(char*, size_t, int)’:
../node_modules/nan/nan.h:665:50: error: ‘callback’ was not declared in this scope
         v8::Isolate::GetCurrent(), data, length, callback, hint);
                                                  ^
../node_modules/nan/nan.h:665:60: error: ‘hint’ was not declared in this scope
         v8::Isolate::GetCurrent(), data, length, callback, hint);
                                                            ^
../node_modules/nan/nan.h: In function ‘v8::Local<v8::Object> NanNewBufferHandle(const char*, uint32_t)’:
../node_modules/nan/nan.h:672:67: error: call of overloaded ‘New(v8::Isolate*, const char*&, uint32_t&)’ is ambiguous
     return node::Buffer::New(v8::Isolate::GetCurrent(), data, size);
                                                                   ^
../node_modules/nan/nan.h:672:67: note: candidates are:
In file included from ../node_modules/nan/nan.h:25:0,
                 from ../src/contextify.cc:3:
/home/alayek/.node-gyp/4.1.0/include/node/node_buffer.h:31:40: note: v8::MaybeLocal<v8::Object> node::Buffer::New(v8::Isolate*, v8::Local<v8::String>, node::encoding) <near match>
 NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                        ^
/home/alayek/.node-gyp/4.1.0/include/node/node_buffer.h:31:40: note:   no known conversion for argument 3 from ‘uint32_t {aka unsigned int}’ to ‘node::encoding’
/home/alayek/.node-gyp/4.1.0/include/node/node_buffer.h:43:40: note: v8::MaybeLocal<v8::Object> node::Buffer::New(v8::Isolate*, char*, size_t) <near match>
 NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                        ^
/home/alayek/.node-gyp/4.1.0/include/node/node_buffer.h:43:40: note:   no known conversion for argument 2 from ‘const char*’ to ‘char*’
In file included from ../src/contextify.cc:3:0:
../node_modules/nan/nan.h: In function ‘v8::Local<v8::Object> NanNewBufferHandle(uint32_t)’:
../node_modules/nan/nan.h:676:61: error: could not convert ‘node::Buffer::New(v8::Isolate::GetCurrent(), ((size_t)size))’ from ‘v8::MaybeLocal<v8::Object>’ to ‘v8::Local<v8::Object>’
     return node::Buffer::New(v8::Isolate::GetCurrent(), size);
                                                             ^
../node_modules/nan/nan.h: In function ‘v8::Local<v8::Object> NanBufferUse(char*, uint32_t)’:
../node_modules/nan/nan.h:683:12: error: ‘Use’ is not a member of ‘node::Buffer’
     return node::Buffer::Use(v8::Isolate::GetCurrent(), data, size);
            ^
make: *** [Release/obj.target/contextify/src/contextify.o] Error 1
make: Leaving directory `/home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/jsdom/node_modules/contextify/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:270:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Linux 3.16.0-38-generic
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/jsdom/node_modules/contextify
gyp ERR! node -v v4.1.0
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok 

> [email protected] install /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/webshot/node_modules/phantomjs
> node install.js

Download already available at /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2
Extracting tar contents (via spawned process)
Removing /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/webshot/node_modules/phantomjs/lib/phantom
Copying extracted folder /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2-extract-1444578603738/phantomjs-1.9.8-linux-x86_64 -> /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/webshot/node_modules/phantomjs/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/webshot/node_modules/phantomjs/lib/phantom/bin/phantomjs

> [email protected] install /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/penthouse/node_modules/phantomjs
> node install.js

Download already available at /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2
Extracting tar contents (via spawned process)
Removing /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/penthouse/node_modules/phantomjs/lib/phantom
Copying extracted folder /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2-extract-1444578608228/phantomjs-1.9.8-linux-x86_64 -> /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/penthouse/node_modules/phantomjs/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /home/alayek/.npm-global/lib/node_modules/perfschool/node_modules/penthouse/node_modules/phantomjs/lib/phantom/bin/phantomjs
npm ERR! Linux 3.16.0-38-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "-g" "perfschool"
npm ERR! node v4.1.0
npm ERR! npm  v2.14.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! This is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls contextify
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/alayek/npm-debug.log

Alternative solution to ENFORCING A PERFORMANCE BUDGET

Going through step four I managed to get optimized images directly from imgur by including a single character "m" at the end of the image id's.

Info here --> https://api.imgur.com/models/image

Similar to looking at the code and seeing bits you don't need to use, I think it is important to examine the api's you are using and find out what you can get for free.

If you are open to this being included I can send a PR with updated copy.