Как ускорить работу сайта. Часть 1

Проблемы могут быть далеко не на вашей стороне. Сейчас, например, у многих пользователей качество связи стало нестабильным. Дело в том, что люди массово перешли на удалёнку и работают из дома, а провайдеры обслуживают физические и юридические лица по-разному. Если в договоре с фирмой заявлена скорость 100 мегабит, то она железно будет 100 мегабит, потому что для клиента выделен именно такой канал. Но к «гражданским» подход иной — заявленная скорость тут скорее пороговое значение.

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

Итак, какие узкие места есть на вашей стороне, и как их можно расширить, чтобы сайт работал шустрее.

Оптимизировать картинки

Высокодетализированные изображения в формате JPEG с разрешением 5000×5000 — это очень круто. Но на сайте этого великолепия никто не заметит. Зато все заметят, что сайт тормозит, потому что каждая картинка будет весить с добрый десяток мегабайт. Их нужно сжать, чтобы они не забивали канал связи и оперативную память устройства пользователя.

Это можно сделать вручную с помощью дизайнерских инструментов, например, в Photoshop. Но существует и специальный софт. Например, под Linux есть специальные консольные утилиты, которые оптимизируют картинки целыми пакетами по заданным настройкам. Например, jpegtran и pngquant. Ещё есть jpeg-recompress и optipng.

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

Провести рефакторинг

Одна из самых частых причин тормозов — это говнокод. Под этим техническим термином подразумевается код, который вполне работающий, но неоптимальный.

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

Лечится это только одним средством — рефакторингом. Это когда переписывают код так, чтобы при такой же функциональности он стал лаконичнее, легче, быстрее.

Оптимизировать JS и CSS

Файлы JS отвечают за обслуживание действий, которые совершает пользователь на веб-странице. Файлы CSS — за стиль, то есть за внешний вид этой страницы. Сайт может тормозить из-за того, что эти файлы не оптимизированы.

Например, файлы JS и CSS могут быть элементарно несжаты, в частности, не удалены лишние пробелы и переносы строк.

Современные инструменты сборки умеют автоматически сжимать файлы JS и CSS. Например, можно использовать сборщик на базе борщик на базе Webpack и Gulp. В том числе они убирают комментарии, которые нужны только на этапе разработки. То есть процесс оптимизации частично автоматизирован. 

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

Ещё один способ для оптимизации — создание нескольких точек сборки. Для простых сайтов используют один файл JS и один файл CSS. Но если сайт сложный, типа интернет-магазинов, то подобное решение сильно снижает производительность.

В подобных проектах слишком разные страницы: каталоги, текстовые страницы, промо и так далее. Файлы, которые обслуживают всё это многообразие, будут слишком большие. Поэтому для таких сайтов делают один общий файл JS, где прописаны только скрипты, которые встречаются на всех страницах. И по отдельному — для каждого типа страниц.

Если пользователь заходит в каталог, у него подгружается не всё сразу, а только общий и JS-файл для каталогов. JS для текстовых страниц в этот момент не нужен, и он не загружается. В результате всё выполняется быстрее, и меньше забивается канал связи. То же и с файлами CSS.

Настроить кэш

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

Если всё сделать правильно, то эта картинка сохранится в локальном кэше на устройстве пользователя. Когда пользователь зайдёт на сайт в следующий раз, браузер уже не будет вытягивать её из интернета.

Чтобы ненароком не подсунуть пользователю устаревший контент, браузер может отправить короткий запрос, были ли изменения в этом файле. Файл тот же — берётся из кэша. Файл изменился — заново скачивается.

Есть разные стратегии кэширования, которые подбирают под особенности проекта.  Чаще всего его настраивают для картинок, потому что они занимают большую долю трафика. Но если сайт меняется очень редко, то можно закэшировать весь HTML.

Разработчики языка PHP позаботились о нас и тоже придумали полезный кэш. Интерпретатор переводит строку кода в свой байт-код, который кэшируется с помощью специального модуля. В следующий раз, когда запускается этот же скрипт, готовый байт-код берётся из кэша. Нет интерпретации, поэтому исполнение проходит быстрее.

Есть кэш у CMS. Например, в Bitrix. Также его можно организовать и при разработке мобильного приложения — там возможности очень широкие, можно подобрать решение практически под любые задачи.

Удалить вредоносный код

Никогда нельзя исключать ситуацию, что ваш продукт заражён. Уязвимости могут быть в операционной системе, ПО, сайте или фрэймворке/CMS, на базе которого он работает. Причём выявляют их всё быстрее и быстрее.

Если раньше находили уязвимость в каком-нибудь «Битриксе», об этом трындели на весь интернет месяцами, это было событие. Сейчас поиск уязвимостей автоматизирован. Злоумышленники давно уже приспособили под это дело ботнеты и нейросети, поэтому они находят новые дыры раньше, чем разработчики успевают латать старые.

Проблема вредоносного кода всё острее и острее, и она требует дополнительного бюджета. В тарифах хостинг-сервисов обычно есть услуга по мониторингу вирусной активности. В новых версиях «Битрикса» есть проактивная защита. Но это всё не панацея. Нужно периодически проверять всё вручную.

Так например, недавно к нам обратился клиент с проблемой: сайт дико тормозит. Мы оптимизировали настройки, но всё равно сайт почему-то жрал много ресурсов. В такой ситуации логично начать искать вредоносный код, и мы его нашли — кто-то использовал ресурсы сервера, чтобы майнить крипту. Майнер удалось деактивировать, и тормоза прошли.

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