Выполняем оптимизацию веб-сайта для ускорения загрузки

Без сомнения, скорость загрузки сайта очень важна для проекта любого уровня. Сейчас, даже когда у всех есть достаточно широкие каналы связи, задержка может быть весьма ощутима. Если даже не со стороны клиента, так сервера. Отдача гигабайта статики в сутки может весьма ощутимо нагрузить недорогой VPS. Так или иначе, вопросы оптимизации стоит затронуть особо по следующим причинам:

1. Уменьшение трафика;
2. Ускорение загрузки страниц;
3. Уменьшение нагрузки на сервер;
4. Уменьшение занятого дискового пространства;

Прежде всего, проведём анализ сайта на основные моменты посредством PageSpeed Isights

https://developers.google.com/speed/pagespeed/insights/

Итак, наибольший выигрыш дают следующие советы:

• Включение кэширования ETag или Last-Modified. Делается это в конфиге, настраивается кэш, срок хранения (3-5 дней для статики норм);
• Включение сжатия GZIP для js, css. Не советую включать для изображений и другого тяжелого контента – выгода минимальна, а нагрузка на сервер возрастёт;
• Сокращение размера js, css. Есть сервисы, позволяющие оптимизировать код без потери функциональности, убираются лишние пробелы, отступы. Переименовываются переменные на более короткие. В CSS так же убираются переносы строк, пробелы, переименовываются селекторы и т.д. Иной раз можно уменьшить размер кода на 30-40%; В пересчёте на размер текстовых файлов js и css конечно не очень много (десятки килобайт обычно), но тем не менее, это + к скорости.
• Оптимизация изображений. На самом деле на этом шаге можно сэкономить очень много мегабайт. Я сейчас провожу оптимизацию, но уже есть определённые результаты.

Ставим приложение и переходим в каталог uploads сайта.

# apt-get install jpegoptim
# apt-get install optipng
# find . -name '*.jpg' | xargs jpegoptim -m85 --strip-all
# find . -name '*.png' | xargs optipng -o5 -preserve

Исходное состояние (287 Мегабайт):

root@151-248-118-182:/…/wp-content/uploads# du
41M ./2012
20K ./userphoto
59M ./2014
97M ./2013
15M ./2011
76M ./2015
287M .

После прохода jpegoptim (260 Мегабайт):

root@151-248-118-182:/…/wp-content/uploads# du
34M ./2012
20K ./userphoto
55M ./2014
86M ./2013
12M ./2011
74M ./2015
260M .

После прохода optipng (221 Мегабайт):

root@151-248-118-182:/…/wp-content/uploads# du
33M ./2012
20K ./userphoto
45M ./2014
76M ./2013
12M ./2011
57M ./2015
221M .

Итого, мы сэкономили примерно 66 мегабайт (23%). Считаю, что это очень хороший результат.

Вам так же понравится:

Посещаемость сайта растет! Делаем стресс-тест для сайта Как сжать изображение для веб-сайта Как сохранить видео с другого сайта Подводим статистику посещаемости сайта (ноябрь 2014) Продвижение сайта – непростой процесс