Я просматривал документацию GatsbyJS поздно вечером, когда наткнулся на раздел под названием Повышение производительности. Как и следовало ожидать, я видел разделы по SEO, кешированию и аудиту, все из которых я уже изучил, но был также раздел о реализации guess.js. Прочитала пару строк и тут голова взорвалась 🤯.

Что такое guess.js?

Автоматическая, динамическая, интеллектуальная предварительная выборка для более быстрой загрузки страниц.

Это гадалка. Когда мой сайт создается, он загружает данные Google Analytics за последние три месяца для моего сайта. Он использует это для создания модели машинного обучения. Всякий раз, когда пользователь переходит на одну из моих страниц, он использует эту модель, чтобы сделать обоснованное предположение, на какую страницу пользователь перейдет и будет предварительно выбирать эту страницу. Он также принимает во внимание тип подключения клиента, чтобы определить, следует ли выполнять предварительную выборку ресурса.

Почему это круто?

Значительная часть мира по-прежнему использует сети 3G. Среднее время загрузки страницы для этих сетей составляет 19 секунд. Используя guess.js, мы можем предсказать, на какую страницу перейдет пользователь, и предварительно загрузить эту страницу. И это не только внутренние страницы, если я размещу ссылку на этот средний пост в блоге на своем сайте, он тоже может предварительно загрузить его!

Это означает, что хотя время загрузки остается прежним, опытное время загрузки намного меньше (а иногда даже незначительно). Все, что улучшает пользовательский опыт моего сайта, - это моя книга.

Если у вас сейчас медленная сеть и вы хотите увидеть ее в действии, вы можете проверить мой сайт, хотя это не так уж много, так как это фоновый процесс.

Разве это не излишество?

Совершенно верно, но если вы не можете опробовать эти вещи на своем личном веб-сайте, где вы можете?

Как я это реализовал

Как, кажется, со всем в мире GatsbyJS - для этого есть плагин! Но на этот раз у меня сразу не вышло. Я сделал следующие шаги:

1. Создайте учетную запись службы Google через консоль разработчика Google.

Перейдите к https://console.developers.google.com/, нажмите Учетные данные в левом ящике. Щелкните Создать учетные данные, затем Учетная запись службы. Заполните форму с соответствующим именем, и все готово. Обязательно сохраните файл json с закрытым ключом сервисного аккаунта и адресом электронной почты, они вам понадобятся позже.

2. Предоставьте сервисному аккаунту доступ к ресурсу вашего сайта в Google Analytics.

Перейдите на https://analytics.google.com, нажмите Администратор, нажмите Управление пользователями собственности. Добавьте только что созданный сервисный аккаунт, используя его адрес электронной почты. Запишите свой идентификатор представления аналитики, он понадобится вам позже.

3. Настройте некоторые переменные среды.

Возьмите всю информацию, которую вы сохранили в процессе, и добавьте ее в файл .env в корне вашего проекта. Не знаете, что такое .env? "Кликните сюда". Если вы выполнили этот шаг правильно, в вашем файле .env должны быть эквивалентные ключи:

GUESS_EMAIL=YOUR_SERVICE_ACCOUNT_EMAIL_GOES_HERE
GUESS_PRIVATE_KEY=YOUR_PRIVATE_KEY_GOES_HERE
VIEW_ID=YOUR_ANALYTICS_VIEW_ID_GOES_HERE

Примечание. Если вы используете конвейер CI / CD, вам также придется хранить там эти переменные среды!

Теперь, чтобы получить доступ к этим значениям в нашей конфигурации, нам нужно загрузить их в файл gatsby-config.js. Возьмите следующий фрагмент и добавьте его в начало файла:

require("dotenv").config({
  path: `.env`,
})

4. Установите плагин догадки для gatsby.

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

Добавьте плагин в конфигурацию gatsby:

{
    resolve: `gatsby-plugin-guess-js`,
    options: {
      GAViewID: process.env.VIEW_ID,
      jwt: {
        client_email: process.env.GUESS_EMAIL,
        private_key: process.env.GUESS_PRIVATE_KEY,
      },
      period: {
        startDate: A_DATE_IN_THE_PAST,
        endDate: new Date(),
      },
    },
  }

5. Попробуйте запустить его!

Если это сработает круто! Пропустить этот шаг. Если же вам, как и мне, не повезло, ничего не получится. У меня была ошибка, которая выглядела так:

npm ERR! error:0906D06C:PEM routines:PEM_read_bio:no start line

Оказывается, догадке не понравился мой закрытый ключ, так как он содержал «\ n», который он странно отформатировал. Чтобы исправить это, мне пришлось использовать небольшое регулярное выражение в моей конфигурации плагина gatsby при установке моего закрытого ключа:

{
    resolve: `gatsby-plugin-guess-js`,
    options: {
      GAViewID: process.env.VIEW_ID,
      jwt: {
        client_email: process.env.GUESS_EMAIL,
        private_key: process.env.GUESS_PRIVATE_KEY.replace(/\\n/g, "\n"),
      },
      period: {
        startDate: A_DATE_IN_THE_PAST,
        endDate: new Date(),
      },
    },
  }

На этом этапе все готово! 🚀