Быстрее — выше. Как эффек­тив­ность сайта зави­сит от ско­ро­сти его загрузки

Современный интернет стал невероятно быстрым. Эпоха dial-up и ADSL уже давно закончилась (а для многих даже не начиналась) и мы вообще забыли, что сайты могут “грузиться” долго по техническим причинам. Тем не менее, сам параметр скорости загрузки страницы никуда не делся и играет важную роль в ранжировании сайтов поисковиками.

Как скорость загрузки влияет на количество пользователей

• Поисковые системы продвигают наиболее быстрые сайты. Даже если на сайте проведена прекрасная SEO-оптимизация, но скорость загрузки хромает, гугл с яндексом заметят это и снизят его позиции в поисковой выдаче.
• Быстрая скорость загрузки улучшает пользовательский опыт и, как следствие, продажи. Посетители не тратят время на долгую загрузку и весь процесс работы с сайтом протекает “как по маслу”. Это существенно сказывается на конверсии.
• Отсутствие тормозов свидетельствует об оптимальной работе сайта с технической стороны. Если страницы загружаются быстро, значит на сайте нет “мусорных” скриптов, тяжелой графики, а также ошибок и нагромождений в коде.

Каким сайтам скорость нужна как воздух

• Интернет-магазины. Когда вы продаете в онлайне, нельзя заставлять покупателя ждать. Ничто так не приводит в бешенство потенциального клиента, как постоянно “подвисающая” страница и с трудом загружающиеся изображения.
  Корпоративные сайты. Сайт организации — лицо компании. Неважно, насколько дорог, свеж и красив дизайн — если страницы загружаются медленно, это станет пятном на репутации.
• Новостные и развлекательные порталы. Современный пользователь привык “проглатывать” новости пачками. Поэтому, долг таких сайтов — обеспечить моментальное отображение контента. Иначе пользователь навсегда запомнит тормозящий портал и больше никогда туда не вернется.
• Любой мобильный сайт. Доля мобильного трафика уже перешагнула отметку 50% и продолжает расти дальше. Позаботиться о таких пользователях и оптимизировать скорость загрузки на мобильных устройствах — мудрый и дальновидный шаг. Особенно с учетом того, что по статистике мобильное соединение с интернетом не всегда такое быстрое и стабильное, как на десктопах.
  Но даже если речь идет об одностраничнике, личном или корпоративном блоге — улучшить скорость загрузки все равно не помешает. Это тот самый случай, когда переборщить не получится и чем быстрее, тем лучше.

Как увеличить скорость
Начать стоит с диагностики, чтобы проверить, какие именно факторы замедляют загрузку сайта. Для этого есть прекрасный инструмент Google PageSpeed Insights. Введите в строке адрес сайта и немного подождите, через несколько секунд появится оценка. Если вердикт зеленого цвета — беспокоиться не о чем. Сайт загружается быстро и исправлять там особо нечего, ну разве что просто довести до совершенства в приступе перфекционизма.

Пятерка с плюсом по меркам Google PageSpeed Insights

Если же оценка в красных тонах — впереди много работы.

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

Шаг 1. Графика на сайте должна “похудеть”
Тяжелые изображения — распространенная причина медленной загрузки страниц. При этом, чтобы решить данную проблему и уменьшить “вес” страниц в два и больше раз, не нужно идти на великие жертвы. Чаще всего файлы изображений необоснованно “раздуты” и можно добиться их приемлемого размера без каких-либо визуальных потерь. Для этого:

• Используйте правильный формат картинок. PNG более функционален и так любим дизайнерами за эффект прозрачности. Но если в нем нет необходимости, выбирайте JPEG — он “весит” гораздо меньше.
• Не налегайте на максимальное качество изображений. JPEG, сохраненный в максимальном и низком качестве чаще всего выглядит одинаково, но при этом их объем на диске различается в несколько раз.

Изображения внешне неотличимы, но их “вес” разнится почти в 3 раза

• Используйте векторный формат SVG. Векторная графика автоматически масштабируется, поддерживается всеми современными браузерами и очень мало “весит”. К сожалению, она не подходит для всех видов изображений — в векторе чаще всего отрисовываются простые картинки, фигуры, кривые или текст. Но там, где изображения в формате SVG допустимы, используйте их, а не JPEG и тем более PNG.
• Оптимизируйте графические файлы. Это можно сделать вручную в Adobe Photoshop, но удобнее использовать специальные программы и сервисы, вроде OptiPNG, JPEG-Optimizer, PngCrush или IMGonline.

Шаг 2. Удалите все лишнее
Если сайт буквально увешан баннерами, плагинами и модулями — неудивительно, что пользователям приходится долго ждать его загрузки. Уберите все ненужные баннеры. Они не только снижают скорость загрузки, но и могут внешне опошлить внешний вид сайта, если перебрать с их количеством. Различные неэффективные модули тоже должны отправиться на свалку — так вы уменьшите количество запросов от браузера клиента к серверу, тем самым ускорив загрузку сайта.

Шаг 3. Оптимизируйте JavaScript и CSS

• Сторонние скрипты очень влияют на скорость загрузки. Поэтому всегда отключайте ненужные или неэффективные скрипты.

Обилие скриптов существенно увеличивает время загрузки сайта. Источник: developers.google.com

• Если большого количества JavaScript и CSS-элементов не избежать, подгружайте их с разных доменов или поддоменов. Таким образом одновременно задействуется сразу несколько каналов загрузки вместо одного. В некоторых случаях, особенно когда клиент и сервер находятся на большом физическом удалении, желательно использовать CDN (Сеть доставки контента). Так вы сможете загружать данные с наиболее близкого к пользователю сервера.
• Всегда сжимайте код JavaScript и CSS-элементов при помощи сервисов вроде Online JavaScript/CSS/HTML Compressor. Оптимизация происходит за счет упрощения переменных и функций, а также удаления лишних или случайных элементов кода (пробелы, комментарии, пустые строки). На функционале скрипта и сайта это никак не скажется.