feature_request(performance): load scripts by click/tap

[Kristinita]

1. Запрос

Было бы неплохо иметь возможность загрузки всех скриптов, необходимых для работы Google Translate Custom Widget (GTCW), при клике/тапе по любому из флагов, а не при загрузке веб-страницы.

По моему мнению, лучше, если это было бы реализовано в поведении по умолчанию, но если нет — неплохо было бы иметь опцию.

2. Пример желаемого поведения

2.1. Первое посещение страницы

Посетитель сайта заходит на веб-страницу с GTCW → никакие скрипты, необходимые для работы GTCW (кроме, конечно, скрипта, проверяющего наличие необходимых кук и запускающего загрузку других скриптов по клику/тапу), не загружаются.

2.2. Клик/тап по флагу

Посетитель кликает или тапает по любому из флагов:

1. Загружаются скрипты:

   https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
   js/google-translate.js

2. После загрузки скриптов веб-страница переводится на нужный язык. Например, если пользователь кликнул по флагу Франции, то после загрузки скриптов страница сразу переводится на французский язык.

3. При последующих кликах/тапах по флагам поведение GTCW остаётся таким же, как и сейчас.

2.3. Посещение других страниц сайта

Посетитель переходит на другую страницу сайта с GTCW, → скрипт на странице проверяет, существуют ли у посетителя необходимые куки:

Если посетитель сайта прежде не кликал/тапал по флагам и/или он очистил куки для сайта:

    реализуется поведение из п. 2.1, то есть скрипты, необходимые для работы GTCW, не загружаются.

Если посетитель сайта прежде кликал/тапал по флагам и он не очищал куки для сайта:

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

3. Причина желательности реализации запрошенного поведения

Производительность сайта.

Демо-страница GTCW на PageSpeed Insights:

Клик по Открыть карту эффективности на странице PageSpeed Insights:

element.js и скрипты, которые element.js тянет за собой, имеют гигантский совокупный размер, например, в разы превышающий размер всех остальных вместе взятых скриптов на страницах моего сайта. В примере с демо-страницей GTCW, как мы видим, эти скрипты более чем на секунду заблокировали первую отрисовку страницы. Неплохо было бы, если б скрипты для GTCW загружались только тогда, когда они нужны — т.е. когда посетитель сайта собирается переводить страницу.

Кроме того, GTCW нужен не всем посетителям, а на некоторых сайтах, возможно, необходим лишь меньшинству пользователей. С добавлением GTCW на сайт есть риск из-за замедления загрузки страницы потерять больше посетителей, чем приобрести. Загрузка по умолчанию гигантских скриптов, необходимых не всегда и не всем — вряд ли оптимальный вариант.

4. Примечание

Я не утверждаю, что требуется именно такая реализация, какая у меня описана в разделе 2. Если поведение, где скрипты GTCW не загружаются при первом посещении сайта и для пользователей, которым они не нужны, можно реализовать другим, лучшим способом, это было бы отлично.

Спасибо.

[get-web]

Одно из решений, которое можно быстро внедрить:

Найти:

document.addEventListener("DOMContentLoaded", (event) => {
  /* Подключаем виджет google translate */
  /* Connecting the google translate widget */
  let script = document.createElement("script");
  script.src = `//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded`;
  document.getElementsByTagName("head")[0].appendChild(script);
});

Заменить на:

document.addEventListener("DOMContentLoaded", (event) => {
  /* Подключаем виджет google translate */
  /* Connecting the google translate widget */
  setTimeout(() => {
      let script = document.createElement("script");
      script.src = `//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded`;
      document.getElementsByTagName("head")[0].appendChild(script);
  }, (!Cookies.get("googtrans")) ? 5000 : 0);
});

Если куки нет, то загрузка виджета произойдет через 5 секунд после загрузки сайта, гуглу это понравится.