- Шапка сайта (тэг < head />) замесорена inline скриптами и пр. всё это можно разнести по соответсвующим файлам js и css, оставив только необходимое.
CSS стили разбиты на множество отдельных файлов, некоторые из которых сжаты, а не которые нет (в некоторых файлах всего несколько строк). В итоге на этапе загрузки страница делает множество запросов, чтобы загрузить необходимые стили.
- Нужно объединить разрозненные файлы стилей, минифицировать, а так же применить плагин, группирующий селекторы, использующие одинаковые свойства (например CSSO или подобный)
- Можно так же создать не один общий файл, а несколько, объединённых смыслом:
- стили проекта
- стили сторонних плагинов
Загрузка шрифтов с внешнего сервиса (https://fonts.googleapis.com) тормозит отрисовку сайта.
- Нужно забрать шрифты к себе на сервер и настроить их загрузку с помощью Font Loading API:
- изначально контент будет отображаться с применением системных шрифтов
- предусмотренные дизайном применятся после их загрузки
На странице используется огромное количество скриптов: библиотеки, плагины, аналитика и пр.
- У части тэгов script не проставлены параметры async/defer - нужно добавить
- Нужно реструктурировать порядок загружаемых скриптов: сначала грузить основные библиотеки и скрипты, а затем дополнительные
- Файлы скриптов нужно сгруппировать по аналогии с CSS: свести в один файл код для компонентов сайта, а в другой код используемых библиотек и плагинов.
- Не весь код сжат, в некоторых файлах встречаются закоментированные строчки кода: нужно сжать скрипты, а так же вырезать комментарии (например при группировке стилей перед выкладкой использовать плагин strip-comments или подобный).
- некоторые используемые бибилотеки (forms.js) инициируют повторную загрузку библиотеки jquery. Нужно избавиться от этого поведения, т.к. библиотека загружается отдельно и так.
Возможно, что все описанные проблемы lifehacker.ru от того, что они используют CMS WordPress.