5. Скорость загрузки сайта
Небольшая, но важная заметка про то, почему сайт должен грузиться быстро и не быть слишком “толстым и тяжелым”.
Лирическая пауза: однажды мне удалось поднять посещаемость сайта, перенеся его на новый, быстрый и качественный хостинг. После переключения серверов, как после взмаха волшебной палочкой, счетчики показали стремительный рост аудитории. Проблема была в том, что старые серверы работали очень медленно и скорость загрузки сайта была низкой, а иногда сайт вообще не грузился для отдельных пользователей. Очевидная проблема была не очевидна, т.к. в целом сайт работал стабильно, а вопросом скорости никто не занимался.
Современный пользователь не любит и не будет ждать, пока загрузится сайт. Счет идет на секунды, если не на доли секунд. Сайт тормозит — сайт не интересен.
Поэтому мы должны понимать простую истину — сайт должен быть доступен, должен грузиться быстро и не должен весить слишком много при первой загрузке.
5.1. Доступность сайта из разных стран
Есть замечательный сайт host-tracker.com — мы просто вбиваем имя сайта и смотрим:
- время отклика сервера,
- скорость загрузки в целом,
- скорость загрузки из разных стран.
Зачем это нужно? Дело в том, что трафик от пользователя до сайта проходит множество серверов и пунктов обмена трафиком, поэтому для крупных международных проектов создаются кластеры из серверов, часть из которых находится в разных географических зонах, и, например, пользователи из Америки получают “тяжелый” контент с серверов в США, а пользователи из Японии — с серверов в Японии. Поэтому, если мы имеем дело с серьезным проектом или держим прицел на рост в дальнейшем, нелишним будет проверить, как обстоят дела с этим вопросом сейчас.
Пример:
На примере сайта “Ведомостей” мы можем сделать несколько выводов:
- Сайт грузится достаточно быстро.
- Сайт грузится быстро из разных точек планеты (хороший хостинг).
- Пользователи из Москвы получают очень быстрый ответ (видимо, хостинг в Москве).
5.2. Скорость загрузки сайта
Как быстро загружается та или иная страница, какие элементы тормозят ее загрузку и чем это грозит?
Инструментов много. Я использую Tools.pingdom.com — он дает очень точную и подробную картинку.
При помощи этого теста можно проверять как главную страницу сайта, так и отдельные страницы. Он определяет время от первого обращения до полной загрузки и разбивает страницу на отдельные элементы, показывая, где именно находится узкое место.
Тормозить загрузку могут:
- сторонние виджеты, счетчики и скрипты;
- неоптимизированные запросы к БД и их большое количество;
- собственный тяжелый контент.
Пример:
Сравним 3 главных страницы сайтов Lenta.ru, Lifenews.ru и Fishki.net.
Как мы видим, “легкая” “Лента” грузится быстрее, посылает меньше запросов к серверу и весит меньше. Все логично.
А вот результат с Lifenews и Fishki немного другой. Fishki весят больше, посылают больше запросов, но грузятся быстрее почти на 1 секунду, чем Lifenews. Причин может быть несколько — надо смотреть детали.
На этом же сайте мы можем посмотреть, что именно тормозит загрузку (контент, скрипты или таблицы стилей). А может быть, все сразу. Эта опция уже для вдумчивых пользователей:
Пожалуй, о скорости сайта все. Берегите своих пользователей, оптимизируйте загрузку, используйте кеш и хороший хостинг.
6. Как сайт отображается в браузерах
Правильное отображение и функционирование сайта в различных браузерах называется кроссбраузерностью.
“Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями” (Википедия).
Обычный пользователь не задумывается над тем, как сайт выглядит в Chrome и Internet Explorer и есть ли между этим отображением какая-то разница. А вот разработчики тратят много времени и сил, чтобы сайт корректно работал под любым браузером и платформой.
Зайдите, например, сюда и посмотрите многообразие браузеров. Удивительно, но кто-то еще выходит в интернет с браузера Mozilla 1!
Для первого анализа достаточно просто проверить качество отображения в самых популярных браузерах, уделив особое внимание разным версиям Internet Explorer. Именно этот браузер ведет себя наиболее капризно и не прощает ошибок разработчиков.
Инструменты:
- http://browsershots.org/ — позволяет получить скриншот из конкретного браузера и даже выбрать его версию и ОС, в которой браузер запущен.
- http://netrenderer.com/ — проверяйте, как выглядит сайт в Internet Explorer.
- https://browserling.com/ — позволяет не только получить скриншот, но и побродить по сайту.
Это неполный список, существует масса инструментов, но для первого анализа вполне достаточно.
Пример:
Вот как выглядит мой простой сайт в разных браузерах.
7. Мобильный трафик
Мобильный трафик растет и будет расти большими темпами. Полистайте отчет KPCB про интернет-тренды, который они опубликовали в мае 2014 года.
Сайты должны подстраиваться под мобильных пользователей, предлагая им удобный формат для их платформы. Поэтому во время анализа нужно проверить наличие мобильной, планшетной версии или адаптивного дизайна и наличие возможности перехода на обычный формат сайта.
Если у сайта не реализованы эти механизмы (особенно если сайт крупный), если у сайта нет приложения — задайте себе вопрос: почему? Их срочную реализацию я бы добавил к возможности для роста.
Самый простой способ проверки — открыть сайт на мобильном устройстве. Смотрим, как отображается сайт на обычном мониторе и на планшете, смартфоне.
Пример:
Lenta.ru обычного человека:
Lenta.ru мобильного человека:
Если нет возможности проверить с устройства, то чаще всего мобильная версия доступна по этому же адресу на поддомене m или pda, например: http://m.lenta.ru или http://pda.lenta.ru.
Адаптивный дизайн проверяется изменением размера окна браузера — вывод и количество элементов на странице сайта должно меняться.
Пример:
У сайта ria.ru — хороший адаптивный дизайн, который меняет представление сайта в зависимости от размера монитора (разрешения).
Мобильные приложения. Правильно, если сайты сами предлагают посетителям с мобильных устройств установить их приложение. Например, Sports.ru:
Оценить количество мобильного трафика можно с помощью:
- Google Analytics — вкладка “Аудитория” / “Мобильные устройства”.
- Li.ru — вкладка “Разрешения” (экранов).
Пример:
Lenta.ru. Пометил красным разрешения, которые, скорее всего, относятся к мобильным устройствам. Или у вас есть знакомые с монитором 240×320 px?
Любые замечания и уточнения буду рад видеть в комментариях.