Блог | Тестируем вебсайт РайффайзенБанк

2014-04-18 | Моська

Пора немножко погавкать на слона :-)

Чтобы самим учиться избегать ошибок, которые делают гиганты.

Сегодня изучим плод совместной работы веб-студии номер 1 в России и всем известного авторитетного коммерческого банка Райффайзенбанк. А именно, сайт http://www.raiffeisen.ru

Сначала, краткое отступление. Небольшой рассказ, как я вообще заинтересовался проблематикой оптимизации сайтов.

Однажды, во время очередной краткосрочной поездки в Европу, я попытался зайти на сайт немецких железных дорог, чтобы посмотреть расписание движения поездов из Мюнхена в Зальцбург. В Мюнхене трудно найти бесплатный Wi-Fi в "заведениях". Видимо немцы считают, что ничто не должно отвлекать туристов от поедания сосисок с пивом, с чем я полностью согласен. Поэтому я воспользовался роумингом от МТС. Большая ошибка. Когда я вернулся, меня ожидал счет-сюрприз, в котором мою любознательность наказали на 4500 рублей.

Я был в шоке. Ведь во время того грандиозного сеанса связи я посмотрел лишь несколько простеньких страниц. Простеньких, но, как выяснилось потом, очень больших. Каждая примитивная с виду страница была размером не меньше 2 МБ. Это было несколько лет назад. Тогда такие размеры страниц еще не были нормой. Тогда я и засел за программирование. Через два месяцы была готова первая версия теста, который долгое время использовался только для внутренних нужд нашей небольшой веб-студии. В процессе многочисленных испытаний нашего теста на известных сайтах, мы открыли целый мир некомпетентности, халатности и просто идиотизма ведущих веб-разработчиков.

Можно многое простить блогеру, начинающему вебмастеру, небольшой веб-студии. Но от компании, в которой работают сотни квалифицированных специалистов, ожидаешь, что они хотя бы не будут совершать серьезных ошибок, равных по последствиям прямой диверсии. Как раз такой случай, по моему мнению, мы видим, когда тестируем вебсайт РайффайзенБанк.

Главная страница raiffeisen.ru, размером больше 6 МБ, грузится долго даже на моем быстром канале с заявленной шириной 25 Мбит/с. Все знают, что в пределах одного офиса или квартиры скорость может существенно снижаться по разным причинам. На открытом воздухе скорость мобильного интернета тоже здорово скачет в разных местах. Как же тогда загрузить эту страницу, в кафе, в транспорте, в условиях роуминга... в туалете, в конце концов. Но самое интересное, что страница не загружается постепенно, как обычно. Вместо этого, при первой загрузке мы очень долго видим совершенно белый экран, словно сайт по каким-то причинам вообще не работает, а потом страница появляется сразу вся.

Протестировав raiffeisen.ru популярными сервисами, получаем по-настоящему удручающие результаты.

Рейтинг гуглевского PageSpeed Insights - 25/100. Я искренне думал, что таких цифр не бывает.

Google PageSpeed Insights

Pingdom говорит, что этот сайт медленнее, чем 92% сайтов, прошедших тест. Это при том, что часто сайты тестируют на этапе разработки, то есть до оптимизации. Вполне может быть, что в оставшихся 8% львиная доля как раз таких сайтов.

Pingdom

Один из самых старых тестов производительности WebPageTest.org загрузил "пациента" за 18 секунд и по всем пунктам поставил низший балл.

WebPageTest.org

Результат тестирования нашим сервисом

Наш тест http://optimin.ru/test/ показывает невиданное количество штрафных очков: 373.

Optimin

И сразу проявляется преимущество нашего инструмента перед всеми остальными. Наш тест - единственный в своем роде. Он представляет результат в виде однородного пофайлового отчета, вся информация содержится на одной странице. Нет никаких раскрывающихся вкладок и меню. Вы просто листаете страницу вниз и просматриваете список элементов страницы и распределение штрафных очков.

Оказывается главная проблема домашней страницы raiffeisen.ru вовсе не в размере. На размер приходится всего 53 очка из 373. Просматривая отчет, можно быстро найти...

Optimin

151 + 75 = 226 очков из 373 приходится на эту исполинскую таблицу стилей.

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

Могу сказать определенно, эта таблица стилей примерно в 10 раз больше чем самая большая, с которой я когда-либо имел дело. Беглый просмотр файла показывает, что в него упрятали 6 увесистых шрифтов с помощью data: URL.

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

  1. Почему бы не прописать эти шрифты в CSS обычным способом. Так они будут грузиться параллельно, а не последовательно. И каждый будет на треть меньше размером, потому как кодировка base64 увеличивает размер файла на 33%. Заодно можно было бы исключить потерю времени на парсинг этого огромного файла браузером.

  2. Неужели все 6 шрифтов действительно нужны на главной?

  3. Почему не включили сжатие.

Но эти вопросы не имеют особого значения, потому что те шрифты просто не нужны, особенно все шесть (один - еще можно понять). Они приносят гораздо больше вреда, чем пользы.

Идем дальше

Вторая по тяжести проблема - неправильная работа с изображениями.

Optimin

Там мы видим две ошибки.

  1. Изображения не оптимизированы для веб. Что подразумевает правильный выбор формата и сжатие с потерями.

  2. Изображения имеют слишком большой геометрический размер, даже если смотреть сайт на обычном (не ретина) экране. Они масштабируются средствами браузера.

Взяв одно из изображений, PL_Flaer06.jpg, я вижу на сайте, что оно отображается с размером 663x530, а сам файл имеет разрешение 1200x960, что в 1.8 раза больше, чем нужно. Даже если просто сжать оригинал с качеством 80%, размер файла можно уменьшить с 205 КБ до 94 КБ, без сильного видимого ущерба. Но если его сначала уменьшить до 663x530, а потом сжать, пусть даже не с 80% качеством, а с 90%, то получим 61 КБ. Что более чем в 3 раза меньше оригинала. Но это далеко не самый тяжелый случай. Например 1200x960_EE.jpg таким образом уменьшается до 13% при качестве JPEG 90%.

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

Optimin

Вот версия, которая используется на сайте, вес - 26002:

logo_rus.png

Вот та же картинке, после сжатия нашим компрессором, вес - 3901:

logo_rus.min.png

15% от оригинала, без какого-либо ущерба для внешнего вида.

Еще немного

Мы уже поняли, что разработчики сайта ненавидят HTTP-сжатие текстовых данных.

Просматривая отчет, также видно, что им глубоко неприятна технология Keep-Alive.

Огромный файл raiffeisen.build.js весом в 545 КБ должно быть управляет марсоходом Curiosity, не меньше.

Заголовки управления кэшем их тоже не очень заботят.

При этом на странице присутствует аж три внешних плагина для статистики. LiveInternet, Yandex.Metrika и Google Analytics. Вполне достаточно было бы Google Analytics. Удивительно, но имея на руках три вида статистики, они в упор не видят проблем своего сайта. Или им плевать? А действительно, кому какое дело?

Возможный ущерб

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

  1. Часть посетителей закрывают страницу (или теряют к ней интерес), не дождавшись загрузки.
  2. Поисковые системы снижают позицию сайта в выдаче, штрафуя за чрезвычайно низкую скорость загрузки.

Ущерб первого типа

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

В статье Forbes приводится несколько исследований. В одном утверждается, что увеличение времени загрузки с 2 до 10 секунд дает потерю 38% посетителей. В другом, что каждая дополнительная секунда загрузки отнимает 11% просмотров страниц и 7% уровня конверсии.

В этой статье собраны результаты нескольких исследований, проведенных крупными компаниями. В частности, Amazon утверждает, что каждые 100 мс задержки уменьшают продажи на 1%. Shopzilla приводит свой опыт оптимизации страниц, который привел к снижению времени загрузки на 5 секунд и увеличению уровня конверсии на 7-12%

Strangeloop утверждает, что AutoAnything удалось увеличить количество продаж на 13%, уменьшив в 2 раза время загрузки страниц.

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

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

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

Было бы очень мило со стороны Райффайзенбанк опубликовать статистику до и после оптимизации сайта, но на это надеяться не приходится.

Ущерб второго типа

О том, что Google снижает поисковые позиции слишком медленных сайтов, не слышали наверно только совсем новички в IT. А изучаемый нами сайт, безусловно, можно отнести к слишком медленным.

Изучим заголовок сайта: "РайффайзенБанк - ипотека, автокредит, потребительские кредиты, кредитные карты, банковские услуги".

Рискну предположить, что это и есть список ключевых фраз, по которому банк желал бы получать трафик из поисковых систем. Давайте проверим, есть ли сайт Райффайзенбанк в выдаче google.ru по какой-либо из этих фраз на ПЕРВЫХ 10 СТРАНИЦАХ ВЫДАЧИ (кто вообще заглядывает дальше 2-й страницы?), затем то же самое в yandex.ru

Фраза Google Yandex
ипотека нет 1 страница
автокредит нет 1 страница
потребительские кредиты нет 1 страница
кредитные карты нет 1 страница
банковские услуги нет 6 страница

Как и ожидалось, Yandex плевать на скорость сайта. А вот Google относится к этой характеристике вполне серьезно. Каких только банков в выдаче Google я не видел... Все крупные там есть, это точно. И еще масса мелких. Но нет Райффайзенбанк. Конечно, выдача сильно зависит от местоположения и много от чего еще... но не настолько же, чтобы сайта не было на первых 10 страницах. Значит вывод напрашивается вполне определенный: Google наказывает raiffeisen.ru за низкую скорость загрузки.

Доля Google в поисковом трафике России в 2013 году оценивалась в 33.9%, Yandex - 53.4%. Что-то мне подсказывает, что среди посетителей сайтов, посвященных банковским услугам, доля Google должна быть выше среднего. Поэтому ущерб второго типа я бы оценил в 40-50% недополученного поискового трафика.

А между тем...

По результатам 2013 года, у Райффайзенбанк:

11-е место — среди крупнейших российских банков по сумме чистых активов; 5-е место — среди крупнейших российских банков по объему средств частных лиц; 10-е место — среди крупнейших российских банков по объему потребительского кредитования.

Как вы думаете, каков совокупный годовой ущерб в денежном выражении? Я боюсь даже предполагать... возможно, сотни миллионов рублей. Но мы этого никогда не узнаем.

- Глеб