Оптимизация сайта СК «Выбор»

Фактические показатели

До

Фактическая скорость загрузки: 18 секунд
Загружаемые ресурсы: 40 мб
Баллы ПК pageSpeed: 55
Баллы МБ pageSpeed: 26

После

Фактическая скорость загрузки: 4.96 секунд
Загружаемые ресурсы: 4.5 мб
Баллы ПК pageSpeed: 58
Баллы МБ pageSpeed: 94

Работа

Сжал css и javascript файлы.
Оптимизировал изображения. Сократил вес сайта с 800мб до 400мб.

css

С помощью инструментов проанализировал css, который нужен для верхней части страницы и собрал его из css файлов. Вставил в head. Остальные css файлы подключаются при загрузке страницы полностью.

javascript

Перенес подключение javascript из шапки в подвал.

На сайте было подключено 3 jquery файла, я оставил только один.

Slick, b-lazy библиотеки подключалиcь локально — заменил их на cdn-аналоги.

В карусели slick был установлен параметр lazy, который обеспечивает ленивую загрузку изображений.

Установлена библиотека b-lazy и все изображения на главной странице и в каталоге теперь загружаются по мере прокрутки. Почему не на всем сайте? Главная и каталог — основные страницы с изображениями, на остальных страницах их очень мало.

В видео-отзывах оптимизирована загрузка библиотек для отображения youtube-видео. Каждый тег iframe подхватывает скрипт от youtube, который сильно грузит страницу.

Оптимизировал это так: тег iframe создается только тогда, когда был клик по «Просмотреть отзыв». Это позволило здорово сэкономить при загрузке и в целом по поведению сайта. Бывает медленной загрузки и не ощущается, но сайт подвисает при использовании.

Итог:

Ускорил загрузку в 3.6 раз
Уменьшил размер в 9 раз
Улучшил «отклик» сайта. Переход на некоторые страницы часто даже не ощущается.

Для такой насыщенной картинками, видео страницы 2−4 секунды для загрузки — отличный результат. Учитывая то, что первый экран страницы загружается менее, чем за секунду.