Ускорение сайта — что дает, как измерить и как самому ускорить сайт

18 Апрель, 2016

Здравствуйте, читатели блога KtoNaNovenkogo.ru. Меня зовут Николай Мациевский, я занимаюсь скоростью сайтов уже 9 лет и хочу передать вам накопленный опыт и знания, чтобы вы смогли сделать ваши сайты еще быстрее и еще лучше.

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

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

Множество сервисов предлагают измерить «скорость сайта», но, по факту, они измеряют время ответа сервера. Очень немногие сервисы, буквально единицы, могут дать реальные показатели времени отрисовки страницы и времени полной загрузки (потому что для их расчета нужен реальный браузер). К таким сервисам относится, например, Айри.рф или WebPageTest.

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

Что дает скорость сайта


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

Зависимость конверсий от скорости загрузки сайта

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

Улучшить индексацию сайта увеличив время ответа сервера

В-третьих, скорость сайта является мощным фактором повышения доверия и лояльности посетителей. В частности, The Guardian (один из крупнейших новостных сайтов) сумел увеличить ежедневную посещаемость сайта на 35%, в том числе, за счет исключительной скорости на мобильных устройствах.

Увеличение посещаемости за счет увеличения скорости сайта на мобильных устройствах

Что измерять

Не все измерения одинаково хороши, и для грамотной работы со скоростью сайта нужно понимать, в какой части сайта у него проблемы. Для начала, нужно измерить время ответа сервера (насколько шустро отвечает ваш хостинг). Это можно сделать при помощи сервисов Ping Admin, Host Tracker или WEBO Pulsar. Если среднее время ответа по любому сервису больше 500 мс (0,5 секунд) — то потенциально возможны проблемы на стороне хостинга, и на их решение нужно выделить время.

Если с хостингом все ок, то двигаемся дальше — к времени отрисовки (DOMReady). Нужно понять, есть ли потенциальные проблемы с отрисовкой сайта на экране браузера, есть ли дополнительные задержки на стадии «белого экрана». Для этого воспользуемся сервисами Айри.рф или WebPageTest.

Каждый из них выдаст диаграмму загрузки сайта в браузере, на ней ищем фиолетовую вертикальную линию — это будет время окончания отрисовки сайта. Вторая вертикальная линия (синяя) будет означать время полной загрузки. Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая — раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд — тогда смотрим ниже, как это исправлять.

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

Хорошим подспорьем в нахождении и решении проблем будет сервис Google PageSpeed Insights, который выдаст готовые рекомендации к применению (главное, не увлекаться дальше оценки 90, иначе толку будет нуль, а времени потрачено — уйма).

Как исправлять проблемы


Теперь в зависимости от того, где вы обнаружили проблемы в скорости сайта, ваши действия будут следующими:

  1. Проблемы на стороне хостинга. Проверьте, установлен ли у вас веб-сервер nginx, подключено ли кэширование кода (OpCode кэш), установлены ли кэширующие плагины к движку сайта и оптимизированы ли таблицы базы данных (MySQL). Каждый из пунктов (а иногда — и все вместе) может приводить к задержкам на стороне сервера. Также нелишним бывает проверить время ответа с отключенными плагинами: может быть, какой-то плагин или модуль на вашем сайте создает неоправданно большую нагрузку.
  2. Проблемы на уровне отрисовки страницы. Здесь вариантов решения может быть еще больше, и хорошо поможет уже упомянутый Google PageSpeed Insights. Он подскажет, есть ли проблемы с большим количеством стилей или скриптов. Если проблемы есть, то необходимо решение (модуль, плагин или сервис), который объединит все файлы в несколько. Также поможет отключение неиспользуемых модулей/плагинов (это вообще универсальное решение проблем скорости — отключить все).

    Дополнительно нужно проверить, оптимизированы ли шрифты на сайте. Если нет, то нужно исключить из них неиспользуемые символы (глифы).

    И наконец, просмотреть, какие коды (виджеты) используются на сайте. Часто недоступность сторонних сервисов кодов приводит к существенному замедлению загрузки сайта.
  3. Проблемы с полным временем загрузки сайта. Если с предыдущими пунктами все более-менее здорово, то можно переходить к долгой загрузке сайта после отрисовки и до события onload. Здесь потенциальных проблем меньше (браузер уже разобрался с рендерингом), и они менее критичны для пользователя (страница уже есть на экране браузера, ее можно изучать). Если сторонние коды и(ли) виджеты вы еще не проверили — то самое время это сделать. Большое количество кодов статистики, кнопок и комментариев тормозят загрузку сайта. Может быть, какие-то из них можно отключить.

    Еще одной, не менее распространенной причиной «тормозов» и «тяжести», может быть большое количество (или неоптимизированные) изображения. Проверьте, что на хостинг вы залили оптимизированные версии файлов (в этом поможет Image Catalyst). Если на странице 100 и более картинок, то лучше будет установить плагин LazyLoad — чтобы изображения загружались в «ленивом» режиме. Также стоит проверить, что реальные размеры изображений совпадают с используемыми на сайте (иногда бывает, что очень большое изображение вставляют в маленьком масштабе: это «забивает» загрузку сайта неиспользуемым графиком).

    Если с изображениями все ок, то проверьте, подключено ли на странице видео. Наиболее оптимальным вариантом будет загрузка видео после загрузки страницы (по событию onload), иначе дополнительные запросы существенно замедлят сайт.

После обнаружения всех проблем скорости сайта фронт работ может быть внушительным. Можно сделать его самостоятельно, а можно воспользоваться одним из тарифов Айри для вебмастеров и применить оптимизацию скорости сайта за 25 рублей/день.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Скорость загрузки сайта

Комментарии и отзывы

Стелла

да... Статья хорошая, но явно не для новичков. Лично у меня после ее прочтения появилось еще больше вопросов, чем было их раньше. Например, как мне может помочь буржуйский Image Catalyst? — ничегошеньки не поняла.

Подписаться не комментируя