Google Insight показывает очень низкую производительность в приложении angular

Я запускаю приложение angular, которое показывает очень низкий балл в аналитике страниц Google (13 на мобильных устройствах и 43 на компьютерах). Я запускаю это на сервере Nginx, и все проблемы со сжатием и кешированием решаются со стороны Nginx, но все же он показывает очень низкий балл в понимании страницы. На странице только одно изображение, и оно уже сжато.

Ошибки заключаются в удалении неиспользуемых файлов javascript и css. Но файлы, которые они показывают с ошибкой, - это файлы сборки, которые генерируются из производственной сборки angular. Я не понимаю, почему эти файлы не используются. Скриншот с ошибками прилагаю сюда. Пожалуйста, помогите мне решить эти проблемы.  введите описание изображения здесь введите описание изображения здесь  введите описание изображения здесь


person Vivek    schedule 22.08.2020    source источник


Ответы (2)


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

Что вы хотите сделать, так это разделить свой JavaScript на существенный и второстепенный.

Существенно все, что требуется для рендеринга / использования всего, что появляется над сгибом (контент, который появляется без прокрутки). Все остальное несущественно, поскольку страница может отображаться без него и загружаться в фоновом режиме.

Все дело в воспринимаемой скорости, сайту может потребоваться столько же времени для загрузки в целом, но если вы разделите свой JS таким образом, он будет загружаться намного быстрее, что повысит коэффициент конверсии и т. Д. . так далее.

Для этого вам придется либо вручную найти весь необходимый JS и упаковать его отдельно, либо использовать такой метод, как встряхивание дерева, чтобы удалить неиспользуемый код, а затем использовать разделение кода, чтобы в первую очередь обслуживать JS с высоким приоритетом (указанная статья была первой, которую я нашел о разделении кода в Angular, вам придется провести собственное исследование для этого. боюсь, поскольку я незнаком с рабочим процессом Angular).

Ленивая загрузка JS

Ниже приведен простой метод отложенной загрузки любого несущественного JS после того, как вы его определили, который работает вплоть до IE9.

var dfr = function () {
    var n1 = document.getElementById("ds");
    var r1 = document.createElement("div");
    r1.innerHTML = n1.textContent;
    document.body.appendChild(r1);
    n1.parentElement.removeChild(n1);
};

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf)
    raf(function () {
        window.setTimeout(dfr, 0);
    });
else
    window.addEventListener("load", dfr);
<head>
  <noscript id="ds">
    <script src="some-script-that-is-not-essential.js"></script>
  </noscript>
</head>

person Graham Ritchie    schedule 22.08.2020
comment
Привет, @Graham Ritchie, спасибо за вашу помощь. Он только что увеличился на 5 пунктов. Сейчас 49. Могу я сделать что-нибудь еще, кроме этого? - person Vivek; 22.08.2020
comment
Это зависит от того, используете ли вы для рендеринга страницы Angular или просто Angular для обработки данных. Если сайт будет отображаться без JS, вы можете добавить к скриптам defer или async (асинхронный режим сложнее, если ваш сайт зависит от порядка загрузки зависимостей). Затем вам нужно начать заниматься другими вещами на сайте, такими как встраивание критического CSS и т. Д. Также с учетом начального времени ответа сервера похоже, что вы либо запрашиваете базу данных, либо создаете что-то на лету, кеширование страницы - хороший шаг в этом направлении. - person Graham Ritchie; 22.08.2020
comment
Я уже удалил все ненужные js и CSS из файлов index.html, а также добавил async и difer в скрипты, но ничего не помогает - person Vivek; 22.08.2020
comment
Затем вам нужно посмотреть количество запросов, вес страницы и т.д. Для запросов попробуйте объединять файлы до тех пор, пока вы не получите в общей сложности 8 запросов (из-за времени приема-передачи и максимального количества одновременных запросов 8) и т.д. - person Graham Ritchie; 22.08.2020

Проблема в Zone.js - Zone.js замедляет работу приложения на скорости страницы Google, у меня такая же проблема (в течение многих лет). Вы также можете попробовать, отключив zone.js в полифиллах, а затем добавив файл zone.js в активы и загрузив его как тег скрипта в index.html, и вы увидите проблему, а затем отключите тег zone.js и запустить маяк.

Протестируйте скорость страницы Google:

  1. обычный zone.js в полифиллах.
  2. Zone.js в активах с тегом скрипта в index.html (на голове) - обязательно отключите на полифиллах
  3. Отключить zone.js при отключении на полифиллах и / или index.html
person jcdsr    schedule 28.01.2021
comment
Взгляните на эту статью, команда angular понятия не имеет github.com/angular/ angular / issues / 32103 - person jcdsr; 28.01.2021