Оптимизация 4 сайтов

Проблема

Время загрузки сайтов было долгим, показатели тестов скорости — 0/100

Задача

Оптимизировать 4 одностраничных сайта.

Результаты:

Снизил размер сайта в 6 раз: с 3 до 0.5 мб.
Уменьшил время загрузки: с 3.5 до 2 секунд.

Какие шаги были выполнены чтобы ускорения загрузки?

1. Разделение кода оформления. При переходе пользователя на сайт, код оформления будет грузиться не для всей страницы, а только для первой секции сайта. А спустя несколько секунд загрузится оформление и для остального сайта, это называют — критический css. Это позволяет отложить загрузку большого количества стилей при загрузке сайта.

2. Сжатие изображений. Вес изображений без оптимизации довольно большой, некоторые изображения сжимаются на 90% без потери качества, это делается за счет удаления системной информации из файлов изображений.

3. Объединение файлов скриптов и стилей. Чем больше файлов подключается к сайту, тем больше браузеру нужно сделать запросов для корректного отображения сайта, каждый запрос — время, поэтому нам надо упростить работу браузеру и объединить все скрипты в 1 файл и все стили в 1 файл. На каждом из 4 сайтов было по 12 файлов скриптов и по10 файлов стилей. Я сделал по одному.

4. Минификация кода. Код нужно сжимать, делается это с помощью удаления пробелов, сокращения имен переменных, программы для сжатия пытаются по максимуму сократить количество символов в коде. Минификация кода позволяет сжать файл на 10−40% от начального размера.

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

До оптимизации

Размер сайта: 3 мб.
Время загрузки: 3.5 секунды

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

Размер сайта: 0.5 мб.
Время загрузки: 2 секунды

Отзыв

Нужно было адаптировать 4 сайта. У самой времени не было. Данил быстро откликнулся и взялся за работу сразу же в этот вечер. За несколько часов все было готово! Быстро. Качественно. И всегда на связи. Спасибо большое!

Мария Луцева