Быстрые сайты лучше зарабатывают и привлекают больше пользователей — это факт. Неудивительно, что все чаще в последнее время можно услышать вопрос: « Но как же сделать свой сайт быстрее? ».
Тут сразу стоит отметить, что не существует универсальной инструкции, которая мгновенно сделает Ваш сайт быстрым и «сообразительным». Сайты-то разные. Они по-разному структурированы, используют разные модули и шаблоны, работают на разных «движках», следовательно, подходить к каждому такому «пациенту» нужно строго индивидуально, чтобы направленные на увеличение скорости действия принесли положительный результат, а не испортили дело.
Однако существуют некоторые общие правила, которым подчиняются практически все сайты. Конечно, результата «как по-волшебству» Вы не получите, но применение этих рекомендаций однозначно принесет ожидаемый эффект, если Вы наберетесь терпения и подойдете к вопросу грамотно. Об этом мы и поговорим.
Само собой, проверка скорости — это первое, что нужно сделать. Проанализировать скорость можно самостоятельно на www.webpagetest.org: просто введите адрес своего сайта, а остальное система сделает сама. По итогам проверки Вы получите диаграмму, которая отражает скорость загрузки данных.
Что из этого Вам нужно? Время загрузки HTML-документа, первое отображение страницы (в виде вертикальной зеленой линии), окончательное отображение страницы (в виде вертикальной синей линии). Нашли все нужное? Тогда идем дальше.
Вам нужны пять основных показателей:
1. Скорость загрузки документа HTML.
2. Время, за которое начинает отображаться страница.
3. Количество объектов, которые подгружаются между началом и концом загрузки страницы.
4. Время, за которое страница отображается полностью.
5. Загрузка объектов после отображения страницы.
Разберем каждый из них по-отдельности.
Время загрузки HTML-документа (First Byte в табличке сервиса). Скорость ответа сервера оказывает наибольшее влияние на пользовательские ожидания. Она складывается из времени установления IP-адреса сервера (это от 50 до 300 мс), соединения с ним (от 20 до 100 мс), получения данных по сети (от 50 до 100 мс). Итого на ответ от сервера остается всего 200–350 мс, причем желательно сделать так, чтобы ответ пришел за 200 мс, ведь по остальным показателям мы на всякий случай предполагаем самое худшее. Помните, что вечно ждать загрузки сайта пользователь не станет, а просто закроет его и пойдет к более «шустрым» конкурентам.
Что делать? Скорость сервера — вот, что тут важно. Нужно улучшать производительность сервера или изменить его месторасположение, если время загрузки HTML-страницы превышает 800 мс. Тут нужно вспомнить, на каком хостинге находится Ваш сайт, и в случае обнаружения проблем на этой стороне, принять волевое решение и сменить площадку.
Начало отображения страницы (Start Render в таблице WebPageTest) — это когда «белый экран» меняется на сам сайт со всеми его стилями. Желательно сделать так, чтобы страница отображалась за 1–1,5 с, а если не получается, то стоит посмотреть, что задерживает загрузку. Возможно, стоит убрать JavaScript в «подвал» странички, разобраться со стилями, которые не нужны при первом посещении, настроить отложенную или асинхронную загрузку, выдавать файлы из архивов, минимизировав их содержание. В любом случае, Ваша задача — сократить время «белого экрана», потому что большинство «отказов» связано именно с ним.
Количество объектов до полной загрузки — строго говоря, речь идет о «мясе», всевозможных картинках, виджетах, счетчиках, анимациях, которые делают Ваш сайт интересным, и которые мотивируют пользователей немедленно что-либо купить или воспользоваться услугой. Парадоксально, но все перечисленное может воспрепятствовать этому.
Мы хотим, чтобы наш сайт загружался быстрее. Имеет смысл оптимизировать изображения, например, при помощи «облачных» сервисов, убрать или объединить некоторые скрипты или сжать их без потери качества — либо применить и то и другое. Неплохо работает в данной ситуации CDN, Content Delivery Network, — платформа, которая направлена на ускорение доставки к конечному пользователю цифрового контента. Да, придется пожертвовать примерно 50–100 мс на то, чтобы «достучаться» до сервера, однако загрузка с него пойдет быстро.
Полная загрузка сайта (Load Time) должна происходить примерно за 4 секунды. Получилось? Здорово! Можно остановиться. Однако, если полная загрузка все еще не укладывается в 4 с, имеет смысл обратиться к дополнительным мерам. Например, настроить «ленивую загрузку», когда сначала загружаются изображения с главной страницы, а на других они догружаются только после полной загрузки сайта.
Отложите все, что не связано с первым взаимодействием пользователя с сайтом. Анимации, скрипты и развлекательно-интерактивные элементы можно догрузить и потом. Важно, чтобы впервые зашедший на сайт человек максимально быстро получил нужный ему функционал, будь то ссылки, изображения или каталог.
Разберемся с некоторыми техническими моментами, чтобы в полной мере понять проблему скорости. Допустим, одна картинка на сайте «весит» 200 Кб. Немного, скажете Вы, ведь и на компьютере, и на сервере есть десятки и сотни гигабайт свободного места. У обыкновенного пользователя со скоростью интернета 20 Мбит/сек загрузка такой картинки займет 0,1 с, тогда как у мобильного пользователя со скоростью интернета 2 Мбит/сек загрузка займет уже секунду. Десяток картинок по 200 Кб — уже 10 секунд для человека, который зашел на Ваш сайт со смартфона.
Допустим, для Вас это неактуально — картинок на сайте нет, мобильных пользователей тоже. Но есть один важный момент, актуальный для всех: это «расстояние». Для того, чтобы получить один объект, пользователю требуется подождать, пока браузер затребует у сервера нужные ему данные, а потом подождать, пока сервер эти данные выдаст. Итого — два «времени расстояния».
На среднестатистическом сайте всевозможных объектов может быть около 150 штук, что нужно учитывать при оптимизации.
Одна страница «весит», как правило, около 2–3 Мб. То есть, даже если Вы разобрались с предыдущим пунктом, ее загрузка займет у пользователя около 2–3 секунд, и мы говорим о пользователе компьютера — о мобильных версиях вообще можно забыть.
Что делать? Оптимизировать размеры. Тексты можно сжать, картинки — оптимизировать при помощи, к примеру, программы Image Catalyst, которая организует комплексное сжатие PNG, JPEG и GIF-файлов без потери для качества. Если же картинок у Вас много, можно прибегнуть к отложенной загрузке, которую обеспечивают плагины Unveil и LazyLoad.
Не стоит забывать и о шрифтах, каждый из которых по весу равен примерно десяти картинкам. Удалите из них неиспользуемые символы, и Вы снизите «вес» примерно в 5–10 раз.
Виджеты тоже могут быть причиной медленной работы сайта, особенно если берутся со сторонних ресурсов. Каждый «чужой» код — разного рода голосования, кнопки социальных сетей, аналитика и статистика — добавляет серверу «время ожидания». Каждый сторонний виджет может «съедать» до 2–3% конверсии сайта, поэтому в случае, если пользы он не приносит, смело его удаляйте.
На основании анализа сайта Google Page Speed Insights генерирует инструкцию, которая неплохо помогает в решении самых очевидных проблем с загрузкой сайта. Если же Вам нужен более деликатный подход (и гарантированный результат), то Вы можете обратиться со своим вопросом к специалистам, которые помогут отыскать оптимальное решение.
Для одного из клиентов мы сделали полный редизайн сайта, после которого на сайте появилось множество интерактивных сервисов, делавших сайт красочным, функциональным, конверсионным, но сильно замедлявших скорость загрузки. При быстрой скорости ответа сервера (0,3 - 0,4 сек.) загрузка отдельных страниц доходила до 15 сек., что было критично, тем более, что большой процент посетителей заходил из мобильной версии. Оптимизация картинок, шрифтов и скриптов было применена еще на стадии разработки — основные «пожирателями» времени оказались сторонний виджет обратного звонка, подгрузка роликов из YouTube, загрузка интерактивных карт. Что было сделано: загрузка интерактивных адресов на карте была отложена до момента прокрутки к ним экрана, YouTube-ролики были заменены на эскизы с ссылками на ролики в модальном окне, настроена отложенная загрузка виджета обратного звонка (после загрузки страницы). Как результат, были выиграны почти 11 сек.. После проведенной оптимизации скорость загрузки составила 4,5 сек.
