ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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)です。

yankouskia/psi-local: Use PageSpeed Insights locally

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2