psi-local - ローカルサイトにPageSpeed Insightsを適用する
Webページの表示速度が遅くて良い理由はありません。ユーザ体験はもちろん、Eコマースサイトなどでは売り上げに直結するほどです。Googleも表示速度を検索順位の指標に組み込んでおり、その指摘を行ってくれるサービスとしてPageSpeed Insightsを提供しています。 しかしこのPageSpeed Insightsは外部に公開した後でしか使えません。そこで開発中でも使えるようにするのがpsi-localです。
psi-localの使い方
psi-localを使ったテストスクリプトです。JSONオブジェクトが次のように返ってきます。
$ node test.js
{ kind: 'pagespeedonline#result',
id: 'https://a335d185.ngrok.io/',
responseCode: 200,
title: 'DeviceConnect Users',
ruleGroups: { SPEED: { score: 51 }, USABILITY: { score: 99 } },
pageStats:
{ numberResources: 14,
numberHosts: 4,
totalRequestBytes: '1017',
numberStaticResources: 10,
htmlResponseBytes: '19354',
cssResponseBytes: '102764',
javascriptResponseBytes: '432220',
otherResponseBytes: '50111',
numberJsResources: 5,
numberCssResources: 4 },
formattedResults:
{ locale: 'en_US',
ruleResults:
{ AvoidLandingPageRedirects: [Object],
AvoidPlugins: [Object],
ConfigureViewport: [Object],
EnableGzipCompression: [Object],
LeverageBrowserCaching: [Object],
MainResourceServerResponseTime: [Object],
MinifyCss: [Object],
MinifyHTML: [Object],
MinifyJavaScript: [Object],
MinimizeRenderBlockingResources: [Object],
OptimizeImages: [Object],
PrioritizeVisibleContent: [Object],
SizeContentToViewport: [Object],
SizeTapTargetsAppropriately: [Object],
UseLegibleFontSizes: [Object] } },
version: { major: 1, minor: 15 } }
見て分かると思いますが、ngrok.ioを使ってlocalhostの内容を外部に公開しています。その結果、PageSpeed Insightsが行えるという訳です。ページ自体の表示速度はチェックできませんが、どういった点において修正すべきかをpageStatsからチェックできるでしょう。
psi-localはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。