gatsby-plugin-guess-js を使う

MANABIYA #2 - teratail developer days - | Peatix に行った時に聞いた話の中で、Guess.js についての話題がありました。Web X AI でページを先読みするライブラリということで、気になっていたのですが、gatsby の plugin の存在に気づいたのでので試しに使ってみました。
結果を以下に記載します。

---

Guess.js について

gatsby-plugin-guess-js | GatsbyJS に以下のような記載があります。

• HTML ページを生成すると、ユーザーが訪問する可能性のあるページにリソースのが自動的に追加される。
• ユーザーがサイトを読み込んで他ページにアクセスすると、プラグインはどのページが訪問されているか予測し続け、リソースの先読みも行う。

guess/client.ts at master · guess-js/guess
を見る限り、現在、ページパスと、前のページパス、ページVIEWを使って算出しているように思いました。
「簡単な方法」として guess-js/guess: Libraries & tools for enabling Machine Learning driven user-experiences on the web に記載されています。

Google Analytics のデータを元に機械学習で作成したモデルが使用する方法についての参考文献のリンク集がありますが、guess-ga には機械学習の実装は今のところはないようです。
参考文献のリンク先は興味深くて一通り眺めてみると面白いかもしれません。

---

前提

• gatsby の version
  

  gatsby  -v
  2.4.5        
  

  npm list --depth 0      
  % npm list --depth 0      
  gatsby-starter-material@2.0.0 /xxxx/Bitbucket/portfolio
  ├── cli-glob@0.1.0
  ├── eslint@5.9.0
  ├── eslint-config-airbnb@17.1.0
  ├── eslint-config-prettier@3.3.0
  ├── eslint-plugin-import@2.14.0
  ├── eslint-plugin-jsx-a11y@6.1.2
  ├── eslint-plugin-react@7.11.1
  ├── font-awesome@4.7.0
  ├── gatsby@2.0.40
  ├── gatsby-image@2.0.19
  ├── gatsby-plugin-catch-links@2.0.6
  ├── gatsby-plugin-feed@2.0.9
  ├── gatsby-plugin-google-tagmanager@2.0.6
  ├── gatsby-plugin-lodash@3.0.2
  ├── gatsby-plugin-manifest@2.0.7
  ├── gatsby-plugin-netlify-cms@3.0.6
  ├── gatsby-plugin-nprogress@2.0.6
  ├── gatsby-plugin-offline@2.0.12
  ├── gatsby-plugin-react-helmet@3.0.1
  ├── gatsby-plugin-sass@2.0.3
  ├── gatsby-plugin-sharp@2.0.12
  ├── gatsby-plugin-sitemap@2.0.2
  ├── gatsby-plugin-twitter@2.0.7
  ├── gatsby-remark-autolink-headers@2.0.10
  ├── gatsby-remark-copy-linked-files@2.0.6
  ├── gatsby-remark-images@2.0.6
  ├── gatsby-remark-prismjs@3.0.3
  ├── gatsby-remark-relative-images@0.2.0
  ├── gatsby-remark-responsive-iframe@2.0.6
  ├── gatsby-source-filesystem@2.0.8
  ├── gatsby-transformer-remark@2.1.11
  ├── gatsby-transformer-sharp@2.1.8
  ├── gh-pages@2.0.1
  ├── lodash@4.17.11
  ├── moment@2.22.2
  ├── netlify-cms@2.1.3
  ├── node-sass@4.10.0
  ├── prettier@1.15.2
  ├── prismjs@1.15.0
  ├── react@16.6.3
  ├── react-disqus-comments@1.4.0
  ├── react-dom@16.6.3
  ├── react-helmet@5.2.0
  ├── react-md@1.9.0
  ├── react-share@2.4.0
  ├── react-twitter-widgets@1.7.1
  ├── remark-cli@6.0.1
  ├── remark-preset-lint-recommended@3.0.2
  ├── stylefmt@6.0.3
  ├── stylelint@9.8.0
  ├── stylelint-config-standard@18.2.0
  ├── uglifyjs-webpack-plugin@2.0.1
  ├── url-join@4.0.0
  └── write-good@0.13.1
  

---

インストール 、ビルド

• npm でインストール
  

  npm i gatsby-plugin-guess-js
  

• gatsby-config.js に 設定を追加する
  VIEW_ID には、Google Analytics のサイトの VIEW_ID を設定します。
  minimumThreshold 最小値ですので抽出対象とする下限値をコントロールする値かと思われますが、ドキュメントが見当たりませんでした。
  

  // In your gatsby-config.js
  module.exports = {
    plugins: [
      {
        resolve: "gatsby-plugin-guess-js",
        options: {
          // Find the view id in the GA admin in a section labeled "views"
          GAViewID: `VIEW_ID`,
          minimumThreshold: 0.03,
          // The "period" for fetching analytic data.
          period: {
            startDate: new Date("2017-1-1"),
            endDate: new Date(),
          },
        },
      },
    ],
  }
  

• サイトをビルド、Google のアカウントで認証を通す
  以下、コマンドでサイトをビルドします。
  

  gatsby build
  

  ビルド中にブラウザが立ち上がり、Google のアカウントでの認証を求められます。
  
  guess-js にアクセス許可を与えます。
  
  成功すると謎の手が表示されます。
  
  しばらく待つとビルドが進みます。
  

  Generated public/sw.js, which will precache 7 files, totaling 373415 bytes.
  info Done building in 302.305 sec
  

---

ビルド後の変化

cms.js に、Guess.js の記述が追加されました。
実際にページを表示してみたのですが、<link prefetch> の記載もなく、何か読み込まれている雰囲気は感じられませんでした。
ページ VIEW が少なすぎるのかもしれません。
Webpack の plugin もあるので、このサイトに組み込んでみて、後日比較してみようかと思います。

---

参考

以下、記事作成時に参考にした記事になります。

• resouce hintsとpreloadを使ってリソースの取得を最適化する | 69log

以上です。