Browsertime に
- 補足
sitespeed.io の測定項目の 一部に なっている ため、 sitespeed.io を インストールすると Coachも インストールされます。
今回はCoachを 単独実行して、 メトリクスを 取得しています。
参考
インストール と 実行
Coach には、npm
を
Docker 上で
コマンド1発で
ブラウザに
Firefoxを 使用して 実行 docker run sitespeedio/coach \ https://www.sitespeed.io -b firefox
ブラウザに
Chromeを 使用して 実行 Chrome をdocker run --privileged --shm-size=512m \ sitespeedio/coach https://www.sitespeed.io
使用する 際は、 --privileged
を指定して、 docker コマンドを 実行する 必要が あるようです。
--privileged
については 以下が 参考に なりました。
Docker privileged オプションについて - Qiita レポートを
json形式で 出力する docker run --rm -v "$(pwd)":/coach \ sitespeedio/coach https://www.sitespeed.io -b firefox -o advice.json -f json
OUTPUT
browserをfirefox で 実行した 場合、 以下のようなOUTPUTが 取得できます。
console出力が見やすいです。
実際の出力は 結構長いため 割愛してます。 ........ │ Score per type │ ├─────────────────────────┬──────────────────────────────────────────────────────────────────┤ │ Advice │ Score │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Performance │ 98 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Best practice │ 85 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Accessibility │ 94 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Total average │ 95 │ └─────────────────────────┴──────────────────────────────────────────────────────────────────┘
指定可能な オプション
Documentが
HELP出力
COMMAND
docker run sitespeedio/coach -h
OUTPUT
Google Chrome 60.0.3112.78 Mozilla Firefox 54.0 Starting Xvfb ... /usr/src/app/bin/webcoach.js [options] <url>/<file.har> Options: -h, --help Show help [boolean] -b, --browser Browser to run (only applicable when testing a URL). [default: "chrome"] -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] --noColor Do not print color information. [boolean] [default: false] --preScript Task(s) to run before you test your URL (use it for login etc). Note that --preScript can be passed multiple times. --viewPort Set the browser viewport to WIDTHxHEIGHT. --sortBy Define sort option for advices. [choices: "name", "score"] [default: "name"] -V, --version Show version number [boolean]
Table形式に 整形
Option情報を
OPTION名 | 説明 | デフォルト値 |
---|---|---|
-h, –help | HELPを表示する | - |
-b, –browser | 起動するブラウザ | chrome |
-f, –format | 出力フォーマット テーブル形式かJson形式を指定(table,json) | table形式 |
-o, –output | ファイル出力する際のファイル名 | - |
–details | Adviceの対象になったresource名を出力するか/否か | false |
–description | Adviceの説明を表示するか/否か | false |
-l, –limit | アドバイスを表示するの得点の下限(デフォルトだと100点未満を表示) | 100 |
–mobile | Mobileデバイスとしてページにアクセスするか否か | false |
–screenshot | スクリーンショット(png形式)を取得するか否か | false |
–noColor | カラー付きで情報を表示しない | false |
–preScript | ページ表示前に実行するscript | - |
–viewPort | WIDTHxHEIGHTでviewportを設定する | - |
–sortBy | アドバイスの表示順序のソート方法(name,score) | nameでソート |
-V, –version | version情報を表示する | - |
自サイトに 対して、 コマンドを 実行して 修正可能な 部分を 修正する
コマンドの 実行
サマリー表示用、
サマリー表示用(blogに
載せる 用)
ブラウザ firefox
、スコアで<wbr>ソート
を指定して 実行。 docker run sitespeedio/coach \ http://www.monotalk.xyz -b firefox \ --sortBy score
詳細表示用
ブラウザ firefox
、スコアで<wbr>ソート
、リソース名の<wbr>表示
、アドバイスの<wbr>説明を<wbr>表示
を指定して 実行。 こちらで 指定すると 実際に アドバイスを 受けた 箇所が 詳細に 出力されます。 docker run sitespeedio/coach \ http://www.monotalk.xyz -b firefox \ --details \ --description \ --sortBy score
サマリー表示の アウトプット(抜粋)
レポートの
現状だと
Total average は、
├─────────────────────────┴──────────────────────────────────────────────────────────────────┤ │ Best practice advice │ ├─────────────────────────┬───────────────────────────────────────────────────────┬──────────┤ │ httpsH2 │ The page is using HTTPS but not HTTP/2. Change to │ 0 │ │ │ HTTP/2 to follow new best practice and make the site │ │ │ │ faster. │ │ ├─────────────────────────┴───────────────────────────────────────────────────────┴──────────┤ │ Accessibility advice │ ├─────────────────────────┬───────────────────────────────────────────────────────┬──────────┤ │ labelOnInput │ There are 2 input(s) that are missing labels on a │ 80 │ │ │ form. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ headings │ The page is missing a h2 and has heading(s) with │ 90 │ │ │ lower priority. │ │ ├─────────────────────────┴───────────────────────────────────────────────────────┴──────────┤ │ Performance advice │ ├─────────────────────────┬───────────────────────────────────────────────────────┬──────────┤ │ cacheHeaders │ The page has 11 request(s) that are missing a cache │ 0 │ │ │ time. Configure a cache time so the browser doesn't │ │ │ │ need to download them every time. It will save 746.5 │ │ │ │ kB the next access. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ privateAssets │ The page has 8 request(s) with private headers. The │ 30 │ │ │ main page has a private header. It could be right in │ │ │ │ some cases where the user can be logged in and served │ │ │ │ specific content. But if your is static it should │ │ │ │ never be private. Make sure that the assets really │ │ │ │ should be private and only used by one user. Else │ │ │ │ make it cacheable for everyone. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ javascriptSize │ The total JavaScript transfer size is 218.2 kB. This │ 50 │ │ │ is too much. You need to remove as much as possible. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ compressAssets │ The page has 4 request(s) that are served │ 60 │ │ │ uncompressed. You could save a lot of bytes by │ │ │ │ sending them compressed instead. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ assetsRedirects │ The page has 2 redirect(s). 2 request(s) are from │ 80 │ │ │ other domains, it could be 3rd-party assets that do │ │ │ │ redirects that they really don't need :( │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ cacheHeadersLong │ The page has 14 request(s) that have a shorter cache │ 86 │ │ │ time than 30 days (but still a cache time). │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ avoidScalingImages │ The page has 1 image(s) that are scaled more than 100 │ 90 │ │ │ pixels. It would be better if those images are sent │ │ │ │ so the browser don't need to scale them. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ fastRender │ The page has 1 render blocking CSS request(s) and 1 │ 90 │ │ │ blocking JavaScript request(s) inside of head. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ inlineCss │ The page loads 1 CSS request(s) inside of head, try │ 90 │ │ │ to inline the CSS for first render and lazy load the │ │ │ │ rest. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ optimalCssSize │ https://www.monotalk.xyz/static/CACHE/css/5ebef948ce… │ 90 │ │ │ size is 27.8 kB (27816) and that is bigger than the │ │ │ │ limit of 14.5 kB. Try to make the CSS files fit into │ │ │ │ 14.5 kB. │ │ ├─────────────────────────┴───────────────────────────────────────────────────────┴──────────┤ │ Score per type │ ├─────────────────────────┬──────────────────────────────────────────────────────────────────┤ │ Advice │ Score │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Performance │ 70 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Best practice │ 94 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Accessibility │ 97 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Total average │ 78 │ └─────────────────────────┴──────────────────────────────────────────────────────────────────┘
各アドバイスに 対する 対応する /無視の 判断と 対応方法
アドバイスは、Performance
、Best practice
、Accessibility
に
各アドバイスを無視する
、後で<wbr>対応する
、対応を<wbr>検討する
、対応する
に
Best practice advice > httpsH2
HTTPS を
HTTP/2を後で<wbr>対応する
と
Accessibility advice > labelOnInput
Form の
以下のような
プレースホルダと
入力フォームの
しかしながら、対応を<wbr>検討する<wbr>
と
Accessibility advice > headings
h2 タグが
対象ページは、
対応する
と
HTML5 ドキュメントの
文書構造を
Performance advice > cacheHeaders
Cache-Control のCache-Control: no-cache, no-store, must-revalidate
等付与されている
過去に、
その
対応する
と
- 対応方法
HTTPサーバーは、Apache で、 mod_expires - Apache HTTP サーバ バージョン 2.4 を 使用しています。
対象のfontは woffなので 以下を httpd.confに 付与しました。 # # Add MIME-types for Font # AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff .woff2 AddType image/svg+xml .svg <ifModule mod_expires.c> ExpiresActive On ... # Font ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ... </ifModule>
Performance advice > privateAssets
Cache-Control
にprivate
ヘッダーが
Mainページは
これは、無視する
と
Performance advice > assetsRedirects
外部の
現在リダイレクトが無視する
と
Performance advice > javascriptSize
javascript の
圧縮と無視する
と
Performance advice > compressAssets
静的コンテンツを
fontの対応する
と
- 対応方法
Fontの圧縮指定を httpd.confに 付与しました。 <IfModule mod_deflate.c> # Webフォントの圧縮 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-woff </IfModule>
Performance advice > cacheHeadersLong
Cache の
一部短い対応する
と
対象リソースの
Performance advice > avoidScalingImages
チェックした
ブラウザは
すぐに後で<wbr>対応する
と
Performance advice > fastRender
レンダリングを
async,defer が
こちらは無視する
と
Performance advice > inlineCss
head内で
fastRender
と
こちらは後で<wbr>対応する
と
Performance advice > optimalCssSize
css の
どうも
2つに後で<wbr>対応する
と
修正後、 コマンドを 再度実行
以下、
変わってないです。
fontにfewFonts
と
├─────────────────────────┴───────────────────────────────────────────────────────┴──────────┤ │ Score per type │ ├─────────────────────────┬──────────────────────────────────────────────────────────────────┤ │ Advice │ Score │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Performance │ 70 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Best practice │ 94 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Accessibility │ 97 │ ├─────────────────────────┼──────────────────────────────────────────────────────────────────┤ │ Total average │ 78 │ └─────────────────────────┴──────────────────────────────────────────────────────────────────┘
まとめ
Coach を
以下まとめます。
sitespeed.io は、
Coach を 内部で 使用して おり、 Coach単独でも 実行できる。 実行結果は、
Consoleに Table形式で 出力も しくは、 json形式で 出力できる。 YSlow を
測定項目を 2017年versionに updateしていて、 HTTP/2 か 否か等が チェックできる。 PageSpeed Insights の
対策済の サイト等は 更に 得点を あげるのは 難しい。 (実際対策は したが かわらなかった。 )
イントラネットの
サイト公開前から
また、
以上です。
コメント