Tôi là Duyệt

Guess.js

Aug 9, 2019

Guess.js là một tập các thư viện và công cụ giúp sử dụng dữ liệu và thuật toán để cải thiện UX của trang. Thư viện gồm các thuật toán sử dụng nội dung trang và dữ liệu Google Analytics, sử dụng predictive analytics để cải thiện hiệu năng tải trang thông qua <link rel="[prerender/prefetch/preload]">, quyết định xem nên tải tài nguyên nào trước. Dự đoán người dùng bấm vào link nào tiếp theo từ trang hiện tại.

Preloading tài nguyên là một cách hay để cải thiệu hiệu năng trang. Tuy nhiên preloading mọi thứ sẽ khiến lãng phí băng thông, đặt biệt là với mobile, guess.js sẽ giúp bạn điều này.

Guess.js

Bạn có thể xem thông báo ra mắt chính thức của Guess.js bởi Addy Osmani và Ewa Gasperowicz tại Google I/O 2018:

Cài đặt Guess.js vào Gatsby

Với plugin gatsby-plugin-guess-js Guess.js sẽ tự động dữ liệu từ Google Analytics lúc build để tạo model predict, trang nào có xác suất được người dùng bấm vào nhiều nhất từ trang hiện tại.

Plugin sẽ làm 2 việc:

  • Khi generate HTML pages, tự động thêm <link prefetch> cho các tài nguyên của các trang có xác suất cao sẽ được user xem tiếp. Có nghĩa là ngay khi người dùng vừa truy cập, trình duyệt sẽ tự động tải các trang tiếp theo dưới background.
  • Khi một người dùng đã xem một vài trang, plugin sẽ tiếp tục dự đoán các trang tiếp theo nữa và prefetch tài nguyên.

Cài đặt

npm install --save gatsby-plugin-guess-js

Mở file gatsby-config.js

// 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("2018-1-1"),
          endDate: new Date(),
        },
      },
    },
  ],
}

Tích hợp với CI

Việc tích hợp với CI sẽ có thể có lỗi vì plugin sẽ hiện thông báo đăng nhập vào tài khoản Google Analytics để lấy dữ liệu, bạn có thể cài đặt jwt để tự động truy cập dữ liệu

// 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,
        // Set Google Analytics jwt with Google Service Account email and private key
        jwt: {
          client_email: `GOOGLE_SERVICE_ACCOUNT_EMAIL`,
          private_key: `GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY`,
        },
        // The "period" for fetching analytic data.
        period: {
          startDate: new Date("2018-1-1"),
          endDate: new Date(),
        },
      },
    },
  ],
}

References

Buy Me a Coffee at ko-fi.com