addyosmani / tmi Goto Github PK

TMI (Too Many Images) - discover your image weight on the web

License: Apache License 2.0

JavaScript 100.00%

tmi's Introduction

tmi - too many images

Discover your image weight on the web

Find out the image weight in your pages, compare to the BigQuery quantiles and discover what images you can optimize further.

Install

$ npm install --global tmi

Usage

$ tmi --help

  Usage
    $ tmi <url> [options]

  Options
    --verbose    Detailed summary
    --key        Google API Key. By default the free tier is used
    --strategy   Strategy to use when analyzing the page: mobile|desktop
    --locale     Locale results should be generated in
    --threshold  Threshold score to pass the PageSpeed test

  Example
    $ tmi todomvc.com --strategy=desktop

Verbose mode

Verbose mode will show you a detailed summary of which images needs improving.

Good test URLs

Local testing

We plan on adding support for testing localhost and local files in the very near future. Until then, ngrok should be able to help get you mostly there.

API

See psi if you need a programmatic API for PageSpeed Insights.

License

tmi's People

Contributors

Stargazers

Watchers

tmi's Issues

Unhandler error event

$ tmi http://redrobin.com

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOENT, open '/usr/local/lib/node_modules/tmi/data/bigquery.csv'

With the latest version. Reported by @igrigorik and just verified as busted. Looking into it now.

This script doesn't seem to gather all the images from the target URL. For example, when trying it on theverge.com it returns only 70 KB, when in fact there is over 1.1 MB of images downloaded from that request.

Fix the breaking unit test

Output still expects the CLI reports coming back from PSI whilst TMI has a different structure to output. Update tests to reflect this.

does this work on angular apps?

CLI prints "psi" usage

/usr/local/bin/tmi -> /usr/local/lib/node_modules/tmi/bin/cli.js
[email protected] /usr/local/lib/node_modules/tmi
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])
% tmi                                                                                                                               ~
Discover your image weight on the web

Usage:
  $ psi <url>
  $ psi <url> --key=<key>
  $ psi <url> --verbose

Optional, supply other arguments.
See https://developers.google.com/speed/docs/insights/v1/getting_started for description
  $ psi <url> --key=<key> --prettyprint=<true> --userIp=<userIp> --locale=<locale> --strategy=<desktop|mobile>

no output at all !

For some urls there is no output at all, not even an error message, nothing, nada !

Accept unhttped url

Typing $ tmi kud.io should go to http://kud.io.

Cant run tmi properly

I tried many attempts, wasted few hours and I cant run tmi properly.
Can u please post a simple example to run it via gulp or grunt?
I tried many variations, here's the latest one
tmi().process(config)
which evalutes to TypeError: Cannot read property 'pageStats' of undefined

Does tmi checks images referenced from CSS?

Averages suck, why compare to average?

Filesize is long tail distribution, using average is at best meaningless, and at worst, completely misleading.. since a single outlier can skew the value. At a minimum, we should be using medians.

Even better, we should be capturing quantiles - e.g. you're in the 90% quantile, your site is performing worse than 90% of other sites when it comes to image weight, vs. you're in the 10% quantile, your site is in the top 10% percent for image size.

http://bigqueri.es/t/calculate-medians-for-latest-http-archive-run/7 (getting a median)
http://bigqueri.es/t/whats-the-distribution-of-requests-per-page/21/3?u=igrigorik (example on how to get quantile values from HA)

Test app behind login?

I have an app that requires you to login first before you can use it, and when using tmi, it only checks the landing page where login happens, but I'd like to test the rest of the Backbone app behind the wall. Is this possible?

Can't use tmi at all

Unfortunately I can't use tmi at all. There is an error message right at the start.

I installed the package with yarn 1.9.4 on node 10.11.0 and tried several URLs with and without the protocol. Everytimes I get the same error message:

› tmi google.com --verbose
TypeError: Cannot read property '0' of undefined
    at Output.process (/Users/mirkoschubert/.config/yarn/global/node_modules/tmi/index.js:147:44)
    at psi.then.res (/Users/mirkoschubert/.config/yarn/global/node_modules/tmi/cli.js:31:8)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I look into it when I find the time. 😏

Running TMI behind proxy

I noticed I get a connection timeout and I believe it is because I am working behind a corporate proxy.

tmi www.google.com --verbose
connect ETIMEDOUT

I can use npm behind the proxy because it has options to set up the proxy connection.

Elaborate median and percentile info in verbose output

I'm slightly ashamed to admit that I don't know what this means:

Median mobile site image weight
17 kB

nor this:

+4.59 MB compared to sites in the 25th percentile

The --verbose output could perhaps elaborate that part? I could submit a PR, I just don't know what this output means and would appreciate pointers. 😅 I read #8, but it didn't help me fully understand.

Feedback when request, timeout / url does not exist?

The first domain I plugged into tmi I had a typo in the url. I thought it was broken until I tried another url.

I think it could be great to add some sort of message when an http request doesn't return a response and/or times out. A message like "Could not reach http://tpyo.com at this time." might be sufficient in providing feedback to clue a user of the lack of response/typo.

Crash with no images

$ tmi http://brycebaril.com

TypeError: Expected a number
    at prettyBytes (/usr/local/lib/node_modules/tmi/node_modules/pretty-bytes/pretty-bytes.js:18:10)
    at Object.exports.process (/usr/local/lib/node_modules/tmi/output.js:97:50)
    at /usr/local/lib/node_modules/tmi/index.js:27:12
    at /usr/local/lib/node_modules/tmi/node_modules/gpagespeed/index.js:24:12
    at Request._callback (/usr/local/lib/node_modules/tmi/node_modules/gpagespeed/node_modules/googleapis/lib/transporters.js:90:7)
    at Request.self.callback (/usr/local/lib/node_modules/tmi/node_modules/gpagespeed/node_modules/googleapis/node_modules/request/request.js:123:22)
    at Request.emit (events.js:98:17)
    at Request.<anonymous> (/usr/local/lib/node_modules/tmi/node_modules/gpagespeed/node_modules/googleapis/node_modules/request/request.js:1047:14)
    at Request.emit (events.js:117:20)
    at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/tmi/node_modules/gpagespeed/node_modules/googleapis/node_modules/request/request.js:998:12)