Логотип

Оптимизация нашего сайта

Оптимизация

За два прошедших года рейтинг нашего сайта на сервисе PageSpeed Insights компании Google по позиции "скорость на мобильных устройствах" упал с 96 до 74, а по позиции "скорость на компьютерах" с 99 до 92, "оптимизация для мобильных устройств" оставалась на уровне в 100 из 100. Есть сведения, что данный рейтинг учитывается в поисковой выдаче, поэтому было принято решение оптимизировать сайт.

После оптимизации:

PageSpeed Insights 100 из 100

 

Были проведены следующие действия:

  1. Icon Font заменен на современный SVG в виде XML библиотеки. Конечно это вызвало отказ от поддержки древних браузеров таких как Internet explorer 8 и 9 версии, а так же от мобильных устройств на ОС Android 2.3 и ниже, но их ниша на рынке столь мала, что гнаться за поддержкой не используя новые технологии бессмысленно;

  2. CSS оптимизирован и частично переписан с помощью SCSS (Sassy CSS). Из основных страниц сайта был вырезан фреймворк Bootsrtap 3, так как использовался от него самый минимум, итоговый сжатый CSS стал весить 18КБ против 136КБ. JavaScript так же был сокращен с 110КБ до 82КБ. Был оптимизирован HTML код;

  3. CSS разделен, стили отвечающие за верхнюю часть были оптимизированы до 3КБ и вынесены в тег head. Стили отвечающие за нижнюю часть страницы загружаются асинхронно и не блокируют отображение верхней части;

  4. Подключена асинхронная загрузка CSS и JavaScript. Загрузка верхней части страницы занимает 225 миллисекунд, загрузка всей страницы от 400 до 1400 миллисекунд;

  5. Изображения дополнительно сжаты (для примера на главной странице с 121КБ до 48КБ). С помощью CSS спрайтов удалось сократить число запросов на 5, что на самом деле не играет особой роли после перехода на HTTP 2.0.

  6. Ошибка со скриптом от Google Analytics: "Используйте кеш браузера для следующих ресурсов: analytics.js (2 часа)" и других, была решена загрузкой его с хостинга, а поддержка актуальной версии скрипта с помощью планировщика задач CRON.

Итого на примере главной страницы удалось:

  • Сократить число запросов с 22 до 15;

  • Сократить общий размер страницы с 263КБ до 130КБ;

  • Увеличить скорость отображения страницы с 753 до 225 миллисекунд;

  • Получить 100 из 100 в Google PageSpeed Insights.

Скриншоты тестов:

Для мобильных
Для компьютеров