— https://pagespeed.web.dev/
— Lighthouse
— Учитываем факт, что веб-версия собирает данные за последние 28 дней, а локальная – в момент замера, т.е. показания будут разные.

— Отчёт – набор рекомендаций для разработчика (а не требований)
— У каждой рекомендации есть подробная документация, объясняющая принципы решения таких проблем
— Не каждую рекомендацию можно внедрить (обусловлено архитектурой проекта)
— Не каждую рекомендацию нужно внедрять (здравый смысл)
— Рекомендация показана только по конкретной странице, и это не значит, что проблемный объект не выполняет важную роль на других страницах.

— Зафиксировать стартовый результат
— Найти точки оптимизации
— Осуществить оптимизацию
— Зафиксировать конечный результат
— Повторить несколько раз

— Если в этом режиме производительность будет приемлемой, то у большинства пользователей она будет приемлемой.

— Не оптимизированы картинки

•  Перед загрузкой картинки на сайт сжимать её

     например при помощи: https://squoosh.app/

• Рекомендуется указывать ширину и высоту картинок

   указывать в теге <img>
     ширина и высота должны быть равны реальным пропорциям файла, а не  отображаемой области
     нужно для ускорения рендеринга страницы

• Использование WEBp

     Создать механизм перекодирования картинок в WEBp
     Через тег <picture> указывать callback картинки JPG
     Обучить контент-менеджера работать в такой парадигме

• Выдавать разные файлы в зав-ти от типа экрана (размер/retina)

     Реализация при помощи тега <picture>

• Разделить картинки на контентные и бэкграундные

     тег <img> имеет приоритет в загрузке над CSS-свойством “background”

— Не оптимизированы шрифты

• Шрифты стоит отдавать в самом прогрессивном формате (WOFF2)

— Избыточно используются JS-библиотеки

• На странице вызывается код, который не используется (выявить такие библиотеки при помощи Lighthouse)

     Эта может быть решена при помощи TreeShaking
     (при условии, что на проекте подключен какой-нибудь bundler)
     Просто убрать этот код, если возможно

— Используются устаревшие библиотеки

• В устаревших библиотеках часто присутствуют уязвимости, что создает риск взлома. Т.к. об этих уязвимостях известно поисковикам – существует риск пессимизации контента.
• Устаревшие библиотеки – обновить

— Не GZIP-ятся какие-то объекты

• Надо гзипить всё, что можно

— Оптимизация CSS

• Если на старте проекта команда не внедрила фреймворк/процесс для оптимизации CSS, то решить эту проблему будет сложно
• Иногда оптимизировать CSS на проекте можно в полу-ручном режиме, например: спарсить сайт и понять, какие CSS-классы не используются.

— Кэшировать всё, что кэшируется
— Использовать современные инструменты сборки
— Использовать CDN
— Знать, что браузер с одного домена грузит объекты максимум в 6 потоков
— Проблема кеширования динамического контента:

• код или контент кэшируется
• после обновления его на сервере – на клиенте может что-то не работать
• чтобы избегать подобных ситуаций:

      используем современные bundler’ы
      например: vite или webpack /webpack mix
      в названии кэшируемых файлов должна присутствовать хэш-сумма – чтобы при изменении файла
      показать браузеру, что файл обновился.

— Использовать, если есть возможность
— Например: первая страница рендерится сервером, а дальше работает SPA

— Избегать избыточного подключения трекеров и других внешних скриптов
— Периодически подчищать систему от таких скриптов
— Использовать отложенную загрузку стороннего кода (если возможно)
— Убедиться, что для внешних подключений используются свойства async (или defer)

— Распространённая проблема: пользователь, до того, как получить страницу переадресовывается несколько раз:

• с http на https
• с www на БезWWW
• с Без / на Со /
• с /page.html на /page
• 301 редиректы
• и т.д.

— Для решения:

• внимательно следить за страницами в sitemap и индексе поисковиков
• Использовать для выявления проблем Google Search Console и Yandex Webmaster
• не допускать в своей системе редиректящих URL в элементах навигации и контенте

— Посмотрите видео: Людоедский интерфейс, Вадим Макеев
— Не используются в HTML-разметке семантически-корректные элементы. Чтобы избегать:

• Использовать HTML-теги по назначению:

     Для заголовков надо использовать <h1>
     Для ссылок <a>
     Для списков <ul>
     Для навигации <nav>
     и т.д.

• Не решать все вопросы <div>’ами

— Не использовать в CSS focus outline: 0 – чтобы не усложнять навигацию по сайту с клавиатуры

• либо можно прописать focus-visible с необходимыми стилями обводки

— На картинках и ссылках отсутствуют alt и aria label

• добавлять

— Запрашивать у пользователя гео-данные и разрешение на допуск уведомлений при загрузке страницы

• когда пользователь использует опцию, для которой нужно это разрешение – тогда и запрашивать.

— Не игнорировать наличие ошибок в консоли

• некоторые ошибки нельзя убрать из консоли, т.к. это обусловлено работой браузера или сторонних библиотек

— Если фреймворк позволяет настроить PWA – сделайте это.