Технологический уровень сайта

5. Скорость загрузки сайта

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

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

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

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

5.1. Доступность сайта из разных стран

Есть замечательный сайт host-tracker.com — мы просто вбиваем имя сайта и смотрим:

  • время отклика сервера,
  • скорость загрузки в целом,
  • скорость загрузки из разных стран.

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

ht_2
Смешная картинка для привлечения внимания

Пример:

На примере сайта «Ведомостей» мы можем сделать несколько выводов:

  1. Сайт грузится достаточно быстро.
  2. Сайт грузится быстро из разных точек планеты (хороший хостинг).
  3. Пользователи из Москвы получают очень быстрый ответ (видимо, хостинг в Москве).

ht_1

5.2. Скорость загрузки сайта

Как быстро загружается та или иная страница, какие элементы тормозят ее загрузку и чем это грозит?

Инструментов много. Я использую Tools.pingdom.com — он дает очень точную и подробную картинку.

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

Тормозить загрузку могут:

  • сторонние виджеты, счетчики и скрипты;
  • неоптимизированные запросы к БД и их большое количество;
  • собственный тяжелый контент.

Пример:

Сравним 3 главных страницы сайтов Lenta.ru, Lifenews.ru и Fishki.net.

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

А вот результат с Lifenews и Fishki немного другой. Fishki весят больше, посылают больше запросов, но грузятся быстрее почти на 1 секунду, чем Lifenews. Причин может быть несколько — надо смотреть детали.

speedtest

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

speedtest2

Пожалуй, о скорости сайта все. Берегите своих пользователей, оптимизируйте загрузку, используйте кеш и хороший хостинг.

6. Как сайт отображается в браузерах

Правильное отображение и функционирование сайта в различных браузерах называется кроссбраузерностью.

1377878675_brousers_01

«Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями» (Википедия).

Обычный пользователь не задумывается над тем, как сайт выглядит в Chrome и Internet Explorer и есть ли между этим отображением какая-то разница. А вот разработчики тратят много времени и сил, чтобы сайт корректно работал под любым браузером и платформой.

Зайдите, например, сюда и посмотрите многообразие браузеров. Удивительно, но кто-то еще выходит в интернет с браузера Mozilla 1!

Для первого анализа достаточно просто проверить качество отображения в самых популярных браузерах, уделив особое внимание разным версиям Internet Explorer. Именно этот браузер ведет себя наиболее капризно и не прощает ошибок разработчиков.

Инструменты:

  • http://browsershots.org/ — позволяет получить скриншот из конкретного браузера и даже выбрать его версию и ОС, в которой браузер запущен.
  • http://netrenderer.com/ — проверяйте, как выглядит сайт в Internet Explorer.
  • https://browserling.com/ — позволяет не только получить скриншот, но и побродить по сайту.

Это неполный список, существует масса инструментов, но для первого анализа вполне достаточно.

Пример:

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

brouser

7. Мобильный трафик

Мобильный трафик растет и будет расти большими темпами. Полистайте отчет KPCB про интернет-тренды, который они опубликовали в мае 2014 года.

Сайты должны подстраиваться под мобильных пользователей, предлагая им удобный формат для их платформы. Поэтому во время анализа нужно проверить наличие мобильной, планшетной версии или адаптивного дизайна и наличие возможности перехода на обычный формат сайта.

Если у сайта не реализованы эти механизмы (особенно если сайт крупный), если у сайта нет приложения — задайте себе вопрос: почему? Их срочную реализацию я бы добавил к возможности для роста.

Самый простой способ проверки — открыть сайт на мобильном устройстве. Смотрим, как отображается сайт на обычном мониторе и на планшете, смартфоне.

Пример:

Lenta.ru обычного человека:

lenta_dec

Lenta.ru мобильного человека:

Lenta_m

Если нет возможности проверить с устройства, то чаще всего мобильная версия доступна по этому же адресу на поддомене m или pda, например: http://m.lenta.ru или http://pda.lenta.ru.

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

Пример:

У сайта ria.ru — хороший адаптивный дизайн, который меняет представление сайта в зависимости от размера монитора (разрешения).

ria

 

Мобильные приложения. Правильно, если сайты сами предлагают посетителям с мобильных устройств установить их приложение. Например, Sports.ru:

app

Оценить количество мобильного трафика можно с помощью:

  • Google Analytics — вкладка «Аудитория» / «Мобильные устройства».
  • Li.ru — вкладка «Разрешения» (экранов).

Пример:

Lenta.ru. Пометил красным разрешения, которые, скорее всего, относятся к мобильным устройствам. Или у вас есть знакомые с монитором 240×320 px?

mobile

Любые замечания и уточнения буду рад видеть в комментариях.