Как я могу исправить проблемы с производительностью на моем сайте

Question

Я работаю над улучшением своего углового 6 балла SPA SEO . Я использую аудиты Lighthouse для определения конкретных / серьезных проблем, которые приводят к плохой работе, чтобы получить лучший балл.

Вот обновленный аудит моего сайта (https://www.v -check.co.il ), работающий на мобильном телефоне:

Как вы можете видетьодна большая проблема - First Contentful Paint , которая также связана с другой проблемой - "Минимизация работы основного потока" . Я прочитал статьи, связанные с этими проблемами, и большинство из них уже сделано.

Однако я вижу проблему с моими основными файлами javascript. Я запускаю - webpack-bundle-analyzer , чтобы посмотреть, что происходит в моем коде, и получил это изображение:

IЯ уже использую отложенную загрузку, следовательно, вы можете увидеть, например, самый большой файл на red , относящийся к пользовательскому модулю, который загружается только после входа в систему, поэтому он не актуален, однако, mainфайл на зеленый всегда загружается, а также файл purple с именем: "lazy-public-script.js" .

Я не уверен, сколько я могу сэкономить от этого. Я думал об удалении библиотеки моментов из основного файла, а также ленивой загрузке файла перевода, который вы видите как he.json , en.json , и даже попытался минимизировать lazy-public-script.js file.

Все еще не эксперт в области производительности, и я не уверен, правильно ли я атакую ​​этот вопрос.

ДругойИдея, которая пришла мне в голову, состоит в том, чтобы создать действительно небольшой модуль, который будет содержать только необходимые HTML и CSS и тем самым устранять необходимость в lazy-public-script.js до тех пор, пока пользователь не будет нуждаться в этом.

Буду признателен за любую помощь в правильном доступе к этим вопросам.

Answer 1

Рендеринг на стороне сервера

Наибольшее влияние на повышение начальной производительности и показателей SEO будет иметь использование рендеринга на стороне сервера (SSR). SSR значительно увеличит количество краски с первым содержимым, что очень важно для SEO.

SSR помогает двумя существенными способами:

1. Уменьшает начальный размер пакета, исключая время выполнения Angular.
2. Посылая клиенту уже предварительно обработанный HTML-код.

Оба из них сокращают время первого наполнения (FCP) и время интерактивного (TTI).

Ознакомьтесь с официальной документацией для получения подробной информации: https://angular.io/guide/universal

Производство / Minified Build

Похоже, загружаемые скрипты не минимизированы, что не должно бытьслучай, если вы делаете производственную сборку (ng build --prod). Минимизированные сценарии значительно уменьшают размер пакета. Также рекомендуется развертывать только производственную сборку конечного продукта.

Ленивая загрузка изображений (откладывать закадровые изображения)

После этого, как показали проверки Lighthouse, существуютмного изображений на этой странице, которые загружаются изначально. Откладывание изображений до тех пор, пока они не понадобятся, улучшит показатели FCP / TTI.

Вы, кажется, уже используете некоторую ленивую загрузку, но, похоже, она не выполняет работу, как это наблюдалось в DevTools. Проверьте этот пакет для более "угловой" нативной "ленивой загрузки": https://www.npmjs.com/package/ng-lazyload-image.

Размеры изображения (изображения правильного размера)

Помимо размеров пакета, вы можете посмотреть на уменьшение размеракартинки. Как указывает Lighthouse, существует потенциальная экономия в размере 1 с.

Это относится как к размеру файла, так и к размерам изображений.

Например, это изображение расположено в /assets/images/pages/regular/sections/header/1.webp:

1. 223Kb - вы можете поиграть с различными форматами файлов (PNG / JPEG) и качеством сжатия, чтобы уменьшить размер файла как есть.
2. 1920x1100 - размерностьизображение, вероятно, может быть значительно уменьшено, учитывая, что это изображение на самом деле намного меньше на экране, на котором оно используется (внутри экрана iPhone).

Вы, вероятно, можете уменьшить это изображение до 40-50Kbиспользуя два из этих пунктов. То же самое предложение для изображения в /assets/images/pages/regular/sections/header/main-photo.webp - размеры и размер файла могут быть значительно уменьшены.

Существуют и другие предложения (как указано в Lighthouse, например, удаление неиспользуемого CSS), но эти три, приведенные выше, дают преимущество. в SEO и производительности. Опять же, рендеринг на стороне сервера был бы самым первым делом.

Answer 2

Первое использование Lazy Loading: только добавление домашнего компонента в модули приложения и загрузка другого компонента в качестве отложенной загрузки.

Второе использование Angular универсальный для повторного использования на стороне сервера и seo

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