Оптимизация nginx для улучшения показателей в Google Pagespeed

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

И вот, столкнулся и я с проблемой оптимизации бэкэнда. На самом деле, как оказалось, это не самое основное, но я грешил исключительно на него. Оптимизировав скрипты и закэшировав все, что можно было, я конечно уменьшил время генерации, однако время загрузки стилей и javascript’ов осталось непростительно огромным.

Итак, сегодня речь пойдет об оптимизации фронтэнда.

В качестве фронтэнда я небезосновательно использую nginx. Действительно быстрый сервер. Памяти использует минимум, стартует меньше чем за секунду.

Что же такого можно оптимизировать во фронтэнде, спросите вы? Конечно же пользовательский кэш и сжатие.

Начнем с того, что в моей сборке nginx по умолчанию, почему-то не выставлялись заголовки пользовательского кэша. Ладно, это решаемо:

Сжатие gzip использовалось, однако сжимало только mime-type text/html. Хорошо, но стили и скрипты у меня тоже большие.

Чем больше цифра в gzip_comp_level, тем сильнее сжатие, но и ресурсов тратится больше. Поэтому, поэкспериментируйте с этим значением.

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

Но теперь давайте посмотрим, при первой загрузке, сколько выполняется подключений к серверу? Кошмар — много! Но зачем подгружать 10 разных файлов стилей, если мы можем объединить их в один, файл, минифицировать, сжать и отдать клиенту? Правильно, незачем! Этим и займемся. Для начала разберемся, возможно какие-то селекторы мы не используем вовсе, а какие-то просто дублируют друг друга. Естественно такие селекторы удаляем, не забывая править HTML шаблон. Со скриптами такая же ситуация. Делаем то же самое.

А теперь более основательно рассмотрим сам HTML-код. Если есть описание стилей в атрибуте style, то несомненно выносим их в стили. Если есть ненужные элементы, которые затем можно сгенерировать javascript, то тоже удаляем, не забывая, естественно, внести правки в ваш javascript для генерации этих самых элементов.

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

Удалил все двойные символы пробелов, табуляций и переходов строк. Код конечно получился нечитаемым, однако в моем случае выигрыш составил около 1 килобайта только в шаблоне, примерно 3 килобайта в стилях, и 2-3 килобайта в javascript. Теперь, для большей радости мы должны оптимизировать изображения, а все элементы дизайна вынести в один файл и использовать метод CSS-спрайтов.

Желательно, конечно файл стилей, картинки, и upload-картинки вынести на другой хост, например static0.example.com, static1.example.com, static2.example.com, static3.example.com, , однако при небольшом количестве элементов, это не принципиально. В своем же проекте, я сделал зеркала нужных мне папок сервера, и тем самым еще немного ускорил загрузку.

Вот, на первое время и все. Ничего сложного, однако повозится придется, но, поверьте, оно того стоит. Визуально загрузка сайта ускоряется минимум в два раза.

В следующий раз я расскажу о методах ускорения wordpress.