По исследованиям httparchive , загрузка сайтов становится всё медленнее и медленнее, несмотря на появление новых процессоров и расширение интернет-канала. Это связано с тем, что размеры и количество файлов с каждым годом увеличивается. Вполне логично, ведь сложность проектов с каждым годом возрастает.
Размер передаваемых данных от сервера к пользователю вырос с 481KB до 2098KB. CSS-файлы увеличились с 17Kb до 71Kb, а количество CSS-файлов выросло с 3 до 7. Все типы файлов — картинки, шрифты, JavaScipt-файлы — увеличись в размерах, да и вообще их стали больше использовать.
Прежде чем начать оптимизацию сайта, нужно понять, какие проблемы есть у проекта. На этот вопрос поможет ответить Lighthouse , который встроен в браузер Google Chrome. Также можно воспользоваться его веб-версией .
Далее нужно определить приоритеты оптимизации. Посмотрите отчёт Lighthouse и узнайте, где у вас больше всего проблем. Начните с проблемных мест, которые отнимают больше всего времени на загрузку. Обратите внимание, что в каждом отчёте есть ссылки на статью с подробной информацией о том, как делать оптимизацию по выявленной проблеме.
Проанализируйте ваш сайт и решите, какие данные наиболее важны для вашего пользователя — текст, картинки или видео. Чаще всего это текст, но у вас может быть видеохостинг, который содержит только видео. В таком случае отдайте предпочтение видео.
В голове составьте минимальную карту сайта. Она состоит из первого экрана и контента ниже него. Отдайте предпочтение по оптимизации ресурсам, которые попадают на первый экран.
Например, на первом экране у вас может быть hero-картинка или галерея. В этом случае оптимизируйте все картинки, которые находятся в первом экране. Остальные картинки тоже нужно оптимизировать, но этим можно заняться чуть позже. Важнее первое впечатление о сайте.
Помните, что время загрузки сайта — один из наиболее важных показателей, которые влияют на поведение пользователя. Чем быстрее будет загружаться ваша страница, тем больше будет просмотров и кликов.
