Как проверить и оптимизировать скорость загрузки сайта

Яндекс. Метрика — доступный и несложный сервис, позволяющий отследить самые важные параметры посещения: глубину просмотров пользователями, проведенное на сайте время, показатели конверсии, количество отказов и общую результат.

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

Google Chrome тоже дает своим пользователям подобную услугу в самом браузере. Чтобы ей воспользоваться, надо открыть страницу, которой требуется измерение скорости серверного ответа, кликнуть по ней правой кнопкой мышки и далее выбрать «Посмотреть код». В появившемся окне необходимо выбрать вкладку Network, сочетанием клавиш Ctrl+F5 вызвать диаграмму Ганта, которая покажет данные загрузок.

• Глубина просмотра дает понимание о том какие страницы открывались по запросу пользователя за одно посещение. Зависит этот показатель от удобства навигации, качества контента, соответствия наполнения контентом ожиданиям юзера.
• Время, проведенное на сайте — это один из поведенческих факторов. Оно учитывает совершенные на нем действия: переход по разделам, скроллинг, тапы по ссылкам, переходы со страницы на страницу.
• CTR или «конверсия» высчитывает соотношение количества людей которые просто открыли сайт к тем которые совершали на нем активные действия. Показатель важен для понимания эффективности рекламы и работы маркетинговых инструментов.
• Отказы напрямую зависят от времени загрузки страницы. Если пользователь провел на нем незначительное время (по умолчанию оно составляет 15 секунд) , не совершил за него активных действий — такой визит будет расценен как «отказ».Этот показатель сложен к оценке: пользователь может закрыть ее из-за долгой загрузки, из-за того что первая попавшаяся ему на глаза информация не соответствует ожиданиям, потому что не понравилось оформление или количество всплывающих рекламных окон.

Возможно он в первые секунды увидел ответ на свой вопрос и закрыл сайт — так тоже бывает. Однако технически такой быстрый уход будет расценен как «отказ».

Технический аудит стоит начать с проверки времени отклика сервера. Это параметр показывает сколько времени проходит с момента отправки запроса до момента начала получения ответной информации. Хорошим результатом считается время, не превышающее 1 секунду.

Время до отрисовки сайта определяется пользователями как «время загрузки» — это промежуток между кликом по ссылке и началом показа визуальной части. По подсчетам специалистов это время не должно превышать 3-х секунд — именно столько готов терпеть среднестатистический пользователь.

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

Есть сервисы для измерения скорости загрузки сайта, способные демонстрировать скорость его отрисовки посекундно. Самые часто используемые — WebPagetest, Dareboost.

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

Очень часто так происходит: сначала пользователь изучает представленную текстовую информацию,  после того как убедился что она соответствует его требованиям, обращается за пояснением или уточнением к видео или схемам.

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

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

• Подобрать хостинг с каналами связи хорошего качества , большими серверными мощностями;
• Взять в аренду выделенный сервер, пользоваться только им, без обращений к сторонним;
• Произвести оптимизацию баз данных, что значительно ускорит общую загрузку сайта;
• В обязательном порядке применять кэширование для страниц и скриптов;

Увеличение скорости загрузки требует хороших знаний технических , часто, навыков разработки. Читайте подробнее о том, как происходит диагностика сайта по многим параметрам.

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

Изображения. Они много весят, но разбавляют текст,  используются повсеместно для красоты и объема. Люди так устроены: страницу сплошных букв плохо воспринимают, даже если она несет в себе именно ту информацию, за которой они обратились к поиску.

Для облегчения загрузки сайта без потери его привлекательности нужно разумно использовать картинки: их размер должен соответствовать тому, который будет отображаться на странице. Изображения в стандартных форматах JPEG или PNG имеют оптимальный вес, их можно сжать практически, при этом их качество не теряется.

WebP тоже замечательный емкий формат, однако сервисы Яндекс его не принимают, для сайтов на платформе Яндекса подходит только первый формат.

«Ленивая загрузка» — это способ при котором изображения не появляются на странице не сразу все, а поэтапно, когда до них доберется просматривающий ее юзер.

Если на сайте имеется много разных мелких картинок (таких как графики, иконки или прочие яркие разбавляющие текст элементы) для облегчения загрузки их нужно собрать в единый файл. Это связано с тем что графика грузится отдельным потоком,  если каждая маленькая картинка будет занимать свой поток не хватит каналов, а у пользователей — терпения.

Каждый скрипт или CSS тоже занимают при загрузке по отдельному потоку, потому нужно первым делом проверить их на актуальность. Часто некоторое количество скриптов не давно не используется, но они все равно грузятся, занимая потоки. Google PageSpeed Insights стандартно пишет в рекомендациях о возможности их сведения в один файл, однако на практике такое малоосуществимо.

А вот CSS свести в один файл вполне возможно, это действие освободит некоторое количество потоков.

Отлично если есть возможность поместить маловажные скрипты в нижней части сайта, непосредственно перед закрывающим тегом.

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

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

Турбо-страницы — изобретение Яндекса, разработанное в первую очередь для мобильных устройств. Такая «облегченная» версия значительно быстрее загружается. На адаптированной под экран мобильного устройства странице не показывается ничего лишнего, только текст, изображения и видео.

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

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

AMP страницы — это Google. У Гугла ранжирование Google Mobile Friendly напрямую связано с наличием адаптивной версии, и без ее наличия верхних строчек в поисковике не достигнуть.

Работать с AMP сложнее: для вставки картинок потребуется отдельный тэг  <amp-img>, страница должна содержать с себе код <linк rel=«amphtml» href=«www.site.com/url/to/amp/document.html»>, иначе сайт не будет распознаваться поисковиком как легкая версия. Обратный (ответный) код вида <linк rel=«canonical» href=«www.site.com/url/to/full/document.html»> так же необходимо прописать.

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

Итоги

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

Оптимизация скорости работы сайта прорабатывается на этапе проектирования ресурса и реализовывается в грамотной разработке быстрого интерфейса — подробнее об услуге.

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

Пример технического аудита сайта — на видео