Быстрее, ещё быстрее: как ускорить загрузку вашего сайта?

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

Для вебмастера это означает, что в оптимизации веб-производительности не бывает мелочей и каждый лишний килобайт бьёт по прибыли. Правило работает и в обратную сторону: Барак Обама привлёк дополнительные 34 миллиона долларов пожертвований, когда его предвыборная страница стала открываться за две секунды вместо пяти. Сегодня мы расскажем, почему сайт может загружаться медленнее, чем хотелось бы, и как с этим бороться.

Разумеется, одним постом эту тему не охватить. Если вы хотите знать всё об эффективном сайтостроении, записывайтесь на наш курс Python для веб-разработки полного цикла. А пока сохраните эту статью в закладки, чтобы при случае быстро проверить все контрольные точки.

Курс «Python для анализа данных»
Идет набор в группу 31 900 ₽

Теоретический минимум

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

Если опустить технические детали, можно поделить процесс на следующие этапы:

  1. Браузер отправляет серверу запрос о предоставлении страницы.
  2. Сервер передаёт соответствующий пакет HTML-данных.
  3. Браузер читает код, разбирает содержимое сайта.
  4. При необходимости клиент загружает CSS-стили, JavaScript и прочие дополнительные элементы.
  5. Браузер отрисовывает страницу (производит рендеринг).
  6. Загружаются изображения.
  7. Пользователь видит искомую страницу.

В зону ответственности вебмастера попадает всё, происходящее на 2–6 шагах. Он выбирает хостинг для быстрой обработки запросов, пишет для сайта лёгкий код без лишних элементов, форматирует изображения, чтобы они не перегружали канал и красиво смотрелись на экране.

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

Доктор, что со мной?

Поговорим о неприятностях, которые могут грозить вашему сайту.

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

Сложный код. Компьютеру, как и человеку, тяжело работать с запутанным HTML- и CSS-кодом. Чем меньше строк, ссылок и сложных операторов, тем быстрее браузер разберётся в структуре и загрузит контент. Кстати, поисковые роботы тоже отдают предпочтение красиво написанным сайтам. Вывод? Оптимизируйте код, удаляйте ненужные символы — займитесь минификацией. Это не только ускорит обработку страницы, но и сократит нагрузку на веб-сервер. Размещайте CSS-код внутри тегов <head>, чтобы он выполнялся сразу после загрузки, а тяжёлый JavaScript — внутри <body>.

Слишком много виджетов и плагинов. Десять лет назад кнопка Like открыла вебмастерам «бесплатный» доступ к аудитории Facebook. Сегодня такие элементы есть практически на любом сайте, ведь никто не хочет оказаться на необитаемом острове посреди интернет-океана. Однако тот же Like-виджет может добавить до 40 дополнительных HTTP-запросов, которые в разы увеличат время загрузки. Это справедливо для любых сторонних сервисов, от рекламных баннеров с партнёрской платформы до регистрационных форм. Тщательно взвешивайте их необходимость. Если ваша аудитория не пользуется Одноклассниками, то и «классы» ставить никто не будет.

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

Неоптимизированные иллюстрации. Этот пункт продолжает предыдущий, но про тяжёлые изображения невозможно сказать слишком много раз. По данным аналитиков, картинки составляют 50–60% от общего веса страницы. Неправильный выбор формата и отсутствие компрессии могут увеличить время загрузки до бесконечности. Создатели эффективных сайтов ищут компромисс между качеством и размером иллюстраций, видят разницу между мобильными устройствами и настольными компьютерами, используют «ленивую загрузку» и глобальные сети доставки контента. Их менее подкованные коллеги перегружают страницы широкоформатными BMP и многокадровыми GIF.

Курс по нейронным сетям
Идет набор в группу 49 900 ₽

Инструментарий вебмастера

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

Время первоначальной загрузки (Time to First Byte, TTFB). Эта проверка покажет, как быстро сервер отвечает на клиентский запрос. Как вы помните, текстовое содержимое загружается гораздо раньше CSS-стилей и графических элементов. Если ваши посетители приходят за базовой информацией, TTFB-тест поможет не потерять эту аудиторию.

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

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

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

текст: Помогаев Дмитрий

Поделиться:
Опубликовано в рубрике PythonTagged

SkillFactory.Рассылка