Как мы ускорили свой сайт (а заодно и сотни других)

Знаете ли Вы, любители «этого интересного», что если: Ваш сайт находится на хостинге TimeWeb (из  списка «Рекомендованных хостингов» ) и если Вы включаете CDN в попытке сделать сайт быстрее-то вы сделаете Ваш сайт медленнее.

По крайней мере так будет еще минимум 1 неделю.


А началось все с того, что мне захотелось оптимизировать скорость загрузки нашего собственного сайта (что в свою очередь было навеяно статьей про важность скорости загрузки сайта ). Все-таки сайт студии должен быть образцом во многих отношениях, в том числе и по скорости работы.

Большинство мер по убиранию тормозов у нас уже было проведено:

  • Везде где нужен кеш — он включен
  • Сайт многократно прогонялся по монитору производительности
  • По совету монитора производительности были созданы пара индексов на базе данных (а еще пара была неэффективной и создана не была)
  • Включено объдинение CSS /JS
  • Включен CDN


Поковырявшись в отладчике Google Chrome нашел пару CSS и JS которые не объединялись с остальными файлами. Эта проблема была исправлена быстро.

Напоследок решил посмотреть что выдаст анализатор скорости загрузки сайта sitespeed.ru . А выдал он довольно интересные факты, на которые я  как-то не обратил внимание находясь в отладчике Google Chrome.


Время загрузки Объем загружаемых данных
Первый заход 30.081s 4 963 kb
Повторный заход 22.657s 3 644 kb 

Нужно сказать что при нашей скорости интернета загрузка страницы занимала не больше 3х секунд, но не у всех такой быстрый интернет.

Проблему с объемом данных загружаемых при первом заходе победить несложно — больше всего занимала графика в слайдере. Сжали картинки посильнее и получили выигрыш почти в 2 мегабайта. Дополнительно создали сжатые (.gz) копии сторонних шрифтов.

А вот вторая проблема большого объема скачиваемых при повторном заходе данных — это уже совсем другое. Действительно, если посмотреть в Google Chrome — при повторном открытии картинки с CDN браузер не кешировал ее, а каждый раз скачивал заново. skitch.png-resizeSmall&width=832 (1).png


При выключенном CDN — все кешировалось. skitch.png-resizeSmall&width=832.png

Далее следуют почти 2 недели переписок с поддержкой 1С-Битрикс и TimeWeb. Как они играли мной в  пин-понг пожалуй опущу. В результате всех терок выяснилось следующее:

  1. CDN при забирании статики с вашего сайта запоминает отдаваемые сервером заголовки ответов и при отдаче файла с обратно заголовки в точности повторяет.
  2. Сервер TimeWeb-а отдавал для картинок 2 неверных заголовка
  3. Браузер при получении файлов с CDN почему-то обращал внимание на эти заголовки и  т. к. они были неправильные — не кешировал файлы.

К проблемным заголовкам относились вот эти:

  • Last-Modified : Thu, 20 Jun 2013 09:51:24 GMT
  • Last-Modified : 1371725085 (дубль с неправильным синтаксисом)

После исправления этих заголовков (TimeWeb убрал неправильный) появился вот такой:

  • Cache-Control : no-cache

Он тоже был удален поддержкой TimeWeb.

После этого мы обновили дату изменения всех файлов в папке /upload/ и /bitrix/templates/наш_шаблон_сайта/ и о чудо! Картинки с CDN стали кешироваться.

Описанные меры (сжатие картинок и кеширование статики браузером при получении с CDN) позволило прийти к следующим результатам (по данным все того же sitespeed.ru ):


Время загрузки Объем загружаемых данных
Первый заход 13.998s 2 267 kb
Повторный заход 8.97s 1 362 kb


Внимательный читатель спросит меня, а как же к названию поста относится все что я написал? А очень просто:

  1. Поддержка TimeWeb пообещала удалить неверный заголовок Last-Modified на всех своих серверах.
    «Мы внесли сейчас изменения и подождем неделю, если проблем не возникнет, изменение внесем полностью.« — TimeWeb
  2. Поддержка TimeWeb пообещала удалить неверный заголовок Last-Modified на всех своих серверах.
    «Сейчас эта конфигурация только для вашего сайта. Но мы проанализируем текущую конфигурацию nginx на всех серверах на счет подобных изменений заголовков.« — TimeWeb

Получается что все сайты, которые лежат на TimeWeb и включили функцию CDN скоро получат такую работу CDN, какой она должна быть — с кешированием картинок.

Для тех, кто не хочет ждать, алгоритм действий следующий:

  1. Просим поддержку TimeWeb удалить неверный заголовок Last-Modified
  2. Когда это сделано, проверяем не появился ли заголовок Cache-Control : no-cache и просим удалить его если появился
  3. Обновляем дату модификации всех статических файлов на сайте (выполняем в консоли команду find. -exec touch {} \; находясь в папках /upload/ и папке шаблона сайта)

Как мы в очередной раз убедились у TimeWeb адекватная служба поддержки, которая признает ошибки и исправляет их (а ошибки делают все люди). Поэтому не стесняйтесь к ним обращаться.

Ну и напоследок я провел тест с выключенным CDN.


Время загрузки Объем загружаемых данных
Первый заход 13.757s 2 174 kb
Повторный заход 2.585s 37 kb

Здесь меня ждал неожиданный результат — время загрузки и объем загружаемых данных при повторном открытии уменьшился!!! Как так?

Объяснение этому чуду было следующее: на CDN не отправляются сжатые (.gz) копии стилей/скриптов/шрифтов. А жмутся через gzip они очень хорошо.


Какой вывод мы сделали: следить за размером ваших страниц и файлов нужно — само все хорошо не будет.

К чему пришли:

  •  починили кеширование картинок с CDN на TimeWeb
  • отказались от использования CDN до тех пор пока туда не будут отправляться сжатые копии статических файлов (На основе информации из данного обращения была создана заявка в отдел разработок. Номер обращения в разработку: 40808.)

Комментарии (4)

...
  • Vit
  • 17.02.2016 01:33:59
Подскажите, а как вы сжимали картинки на сервере?
...
Под сжатием картинок я имел ввиду замену конвертацию из PNG (которые подготовил дизайнер и никто не включился что они тяжелые) в JPEG.

Вы вероятно спрашиваете про минификацию изображений - такого не делали. Но вообще встречал 2 подхода:
1) Сжатие картинок используемых в верстке. Делается либо сборщиком верстки (gulp / grunt / enb) либо при использовании контроля версий в момент добавления файлов в репозиторий.
2) Отдельный скрипт на сервере который ночью ищет все картинки и минифицирует их.
Тут все сильно индивидуально, чего-то готового на все случаи жизни не посоветую.
...
  • Vit
  • 17.02.2016 12:16:00
А что по поводу скрипта, кот. ищет на сервере картинки и минифицирует их?
Есть ли такой или как его можно сделать, с помощью библиотеки может какой?
Существует ли такой скрипт для Битрикса? На Битриксе есть много картинок как в медиатеке, шаблонах, так и инфоблока. А для большого сайта, выкачивать их все, сжимать и обратно закидывать слишком долго, да и грузно тоже.
...
Готового нет, но под конкретные нужды можно написать. У более-менее опытного разработчика это займет 5-15 часов. С такой задачей можно обратиться в наш отдел сопровождения http://www.intervolga.ru/support/

Разумеется на разделяемом хостинге с такой задачей делать нечего: сжатие картинок ресурсоемкая процедура, ее разумно делать если у вас собственный сервер/вирт. машина.