Блог по оптимизации вебсайтов

Сапожники без сапог

2014-05-07 | Моська

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

Незнание основ производительности веб-страниц проявляют даже такие монстры, как студия А. Лебедева, что уж говорить об остальных. Хотя... действительно, почему бы не изучить список самых крупных студий рунета на этот предмет. Я взял за основу "единый Рейтинг веб-студий" от ruward.ru. И протестировал каждый сайт с помощью нашего сервиса.

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

В целом мы имеем довольно печальную картину.

Штрафные очки Навыки Количество студий
0 гуру 0
1-30 инженер 39
30-60 студент 25
60-90 школьник 9
90+ нет навыков 27

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

Я очень хотел найти хорошие примеры...

...и закрывал глаза не только на мелкие, но и на средние недостатки. Но, к сожалению, мне удалось подтвердить навыки оптимизации только у трех студий. Вот этот краткий список:

Название студии Место в рейтинге Топ 100
Текарт 14
Promo Interactive 20
ДизайнДепо 75

Еще раз...

Я смог обнаружить навыки оптимизации веб-страниц по скорости загрузки только у трех из ста самых крупных веб-студий рунета.

Как-то нужно примириться с этими результатами, но не получается. Ведь речь идет не о блогерах-любителях, не о фрилансерах, не об админах на фирмах, которых заодно нагрузили делать корпоративный сайт. Это профессиональные игроки рынка, многие из которых насчитывают десятки или даже сотни работников. За спиной каждой такой студии большой опыт и длинный список реализованных проектов.

Ну есть же какие-то приличия, профессиональная гордость. Если ты программист, то ты должен писать оптимальный код. Если ты дизайнер, то ты должен оптимизировать медиа-файлы. Если ты админ, то должен настраивать веб-серверы на оптимальную производительность. Если вебмастер широкого профиля, то должен уметь понемногу все. Это ведь не так и сложно. Даже стремные индийские блогеры уже давно описали эту нехитрую науку в бесконечности своих быдло-статей. Тысячи раз.

Хотя... в эпоху расцвета лояльного идиотизма фразу "профессиональная гордость" уже как-то неприлично произносить.

Второй по численности является группа с полным отсутствием навыков оптимизации - 27 студий из 100. И это далеко не аутсайдеры. Многие из них входят в первую четверть топ-листа. То есть это элита рунета.

Чемпион мира

По количеству штрафных очков с большим отрывом лидирует студия Астроним. Когда я увидел результаты этого сайта, я понял, что об остальных писать уже нет смысла. Эта российско-белорусская студия существует уже около 14 лет. У них большое портфолио проектов и вполне респектабельные бедолаги-клиенты.

Думаю цифры все скажут лучше меня.

Рейтинг PageSpeed Insights - 1/100.

Google PageSpeed Insights

Признаться, я думал, что уже видел самый худший сайт, который "удружила" своему клиенту студия А. Лебедева. Но тот получил 25/100. Как я ошибался!

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

Интересно, может эти бедняги прогнали сайт через PageSpeed, увидели 1/100 и решили, что это очень круто, что мало - это как раз хорошо. Немного перепутали просто.

Наш сервис дает 901 штрафное очко.

Optimin

Это тоже рекорд. Большего значения я еще не видел.

Основная проблема сайта - большое количество изображений, при полном отсутствии оптимизации. Некоторые файлы в 50 раз больше, чем должны быть. Удивительно, но этот недостаток довольно легко исправляется. В грубой форме это можно вылечить парой команд. Буквально за 15 минут. Ну а пока в их колхоз еще не прислали учебное пособие по оптимизации изображений, страница весит 27 МБ. Процесс ее загрузки прямо таки завораживает, даже на быстром канале.

К этому они прибавляют стандартный набор идиотизмов, как то:

  • отключенный keep-alive при большом объеме статики;
  • отсутствие HTTP-сжатия;
  • не заданы кэш-заголовки;
  • использование JPEG там, где положено использовать PNG.

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

Ущерб

Проверим наличие сайта на первых десяти страницах выдачи поисковиков.

Фраза Google.ru Yandex.ru
создание сайтов нет нет
разработка сайтов нет нет
дизайн сайтов нет нет

На этот раз даже более толерантный Yandex не стерпел.

Интересно, потому ли Астроним в рейтинге 2014 года опустился на 22 позиции по сравнению с 2013.

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

Справедливости ради...

...приведу несколько других участников этого соревнование за "худший сайт веб-студии", с точки зрения оптимизации по скорости загрузки:

Ну и?

Что тут сказать. Когда вокруг идиоты - это не только общая беда, но и возможности для самых активных. Есть шанс пробиться в лидеры, предлагая клиентам все то же самое плюс производительность. Если все самые активные еще не свалили.

- Глеб

Исследуем eldorado.ru

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

Наша Моська на этот раз набрела на сайт крупнейшей торговой сети по продаже бытовой техники http://www.eldorado.ru.

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

Это кажется невероятным

На этой странице АКИТ лежит любопытный документ, в котором генеральный директор "Эльдорадо" говорит: "Оборот интернет-канала в среднем составляет 9% от выручки компании, за август 2013 г. этот показатель уже достиг 12%. Сумма онлайн заказов доходит и до 100 млн. рублей в день."

Это похвально. Однако Моська не хвалит. Моська лает.

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

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

Протестируем время загрузки в популярных сервисах

Pingdom говорит, что этот сайт медленнее, чем 85% сайтов, прошедших тест.

Pingdom

WebPageTest.org загрузил сайт за 9 секунд.

GTMetrix.com за 12 секунд.

И нужно учитывать, что хоть тестирование идет с американских серверов, это все-таки тестирование сервер-сервер, на супербыстрых каналах.

Лично я, когда мне нужно что-то купить из "бытовухи", чаще пользуюсь услугами таких сайтов на мобильнике, чем на компьютере. Даже будучи подключенным к Wi-Fi, мой телефон потратил на загрузку сайта "Эльдорадо" 11 секунд. Когда я отключил Wi-Fi, и попытался загрузить с помощью мобильного интернета, то через полминуты бросил это дело, так и не дождавшись.

Уровень оптимизации

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

Рейтинг гугловского PageSpeed Insights - 51/100.

Google PageSpeed Insights

Наш сервис тоже дает невеселую картину.

Optimin

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

Смотрим дальше...

Optimin

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

47 хостов! Это огромное количество DNS запросов. А между тем DNS-кэш в браузерах сравнительно короткий. Даже при скором повторном посещении, когда вся статика будет еще в кэше, браузер все равно должен будет выполнить десятки DNS запросов, многие из которых блокируют загрузку страницы. Да зачем вообще могут понадобиться столько хостов на таком сайте?

Но это еще не самое смешное. Опция Keep-Alive включена для хоста www.eldorado.ru, который дает всего 5 элементов и ВЫКЛЮЧЕНА для static.eldorado.ru, который дает 118 элементов! Это для статики! Есть конечно мнение, что Keep-Alive не всегда выгодно включать для динамики, но специально не включить для статики... это что-то совсем новое в сайтостроении. Браузер должен тратить время на открытие и закрытие отдельного HTTP соединения для загрузки каждой несчастной картинки.

Эти две проблемы сами по себе уже способны убить весь мобильный трафик на eldorado.ru, но, как это ни удивительно, на сайте есть еще более безумные ошибки.

Ад скриптов и редиректов

Из отчета видно, что львиная доля штрафных очков приходится на количество скриптов на странице. 63 JavaScript-элемента. Да что с ними такое, они хотели выиграть какое-то пари, кто может поставить больше скриптов на сайт? Или может это какой-то тайный чемпионат JavaScript-мазохистов?

Optimin

И тут же видна ошибка номер один! Я считаю, что это самая главная проблема сайта.

Когда вам нужно загрузить элемент, вы его просто грузите по URL, правильно? А вот разработчики eldorado.ru предпочитают задать неправильный URL, а на сервере поставить редирект. Им так лучше.

Таких редиректов на главной странице я насчитал 67, и тест Optimin добросовестно поставил каждому 2 балла. Всего 134 балла в сумме приходится на эту ошибку, которую можно исправить за 15 минут. В сочетании с избыточным количеством хостов и выключенной опцией Keep-Alive, эта ошибка - последний гвоздь в гроб мобильного трафика. Я уже не говорю, что редиректы нарушают логику кеширования.

Но это еще не все

Разработчики сайта знают, что такое URL fingerprinting, а именно, они добавляют время модификации к URL-ам таблиц стилей и скриптов, как тут:

http://www.eldorado.ru/bitrix/js/main/core/css/core.css?1341055283

Этот прием предназначен для агрессивного кешированмя. Но они почему-то ставят время жизни (Cache-Control) равным 259200 секунд, что соответствует 3-м суткам. Зачем? В данном случае можно ставить до года. Месяц - норма.

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

Есть и особо тяжелые случаи...

Картинка с сайта, формат - JPEG, размер - 397836 байт

Оригинал

Как она должна быть, формат - PNG-8, размер - 15098 байт

Сжатая версия

Это в 26 раз меньше!

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

Несмотря на то, что сайт медленный, он все же не такой убитый, как сайт Райффайзенбанк, который стараниями студии А. Лебедева был, по всей видимости, совсем лишен трафика от google.ru. Эльдорадо повезло, что их сайтом занимается не студия номер 1 в России. Поэтому ущерб не включает значительную потерю трафика от поисковой системы Google. Они не перешли границу, за которой Google убирает сайт из выдачи.

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

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

В ситуации медленный канал + медленный сайт возникает два сценария, в зависимости от скорости соединения:

  1. соединение очень медленное, и невозможно загрузить даже первую страницу из-за ее чрезмерной тяжести;
  2. соединение медленное, и не получается просмотреть то количество страниц, которое достаточно для принятия решения о покупке.

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

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

Попробуем очень грубо прикинуть возможный ущерб. Продажи "Эльдорадо" в 2012 году составили 112 млрд рублей (за 2013 год данных не нашел). Если оборот интернет-канала доставляет 12% в этой сумме, то это 13.44 млрд в год. И эта цифра не учитывает те продажи, которые были вызваны посещением сайта и последующим визитом "ногами", без покупки онлайн. А я думаю таких еще больше, чем онлайн продаж. Ну пусть даже мы говорим только об онлайн продажах... Принимая во внимание информацию из исследований, ссылки на которые я приводил в предыдущей статье, я осмелюсь предположить, что плохая оптимизация сайта снижает выручку eldorado.ru не менее, чем на 10%. Это составляет 1.3 млрд рублей выручки в год. И это по самым-самым скромным подсчетам.

- Глеб

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

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-е место — среди крупнейших российских банков по объему потребительского кредитования.

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

- Глеб

Сжатие PNG для Web

С форматом JPEG уже давно все более или менее понятно. Оптимизировать JPEG-файл для публикации на сайте означает сжать его до уровня качества от 50% до 80%, что подразумевает сжатие с потерями. Почти никому не приходит в голову выкладывать фотографии в формате JPEG, сжатые без потерь. Но JPEG годится далеко не для всяких изображений. Фактически, он годится только для фотографий.

Для всего остального есть PNG. Этот формат существует уже много лет и поддерживается всеми браузерами. Однако у многих даже не возникает мысли, что с ним нужно работать аналогично тому, как это происходит с форматом JPEG. Перед публикацией PNG-файлы тоже следует сжимать. Под сжатием PNG я подразумеваю преобразование полноцветного PNG файла в PNG-8 с палитрой не более 256 цветов.

PNG-32, размер - 72879:

PNG-24

PNG-8, размер - 25096:

PNG-8

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

Эта позиция отражена в нашем тесте для веб-страниц и в инструменте для сжатия изображений.

Чем сжимать?

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

Если для вашего редактора нет плагина, который использует последнюю версию pngquant, то самое лучшее решение - из редактора сохранять файлы как полноцветный PNG, а затем, с помощью специальных утилит или онлайн-сервисов, конвертировать их в формат PNG-8. Я рекомендую использовать те программы, которые заявляют, что используют библиотеку pngquant. Что касается онлайн-сервисов, они почти все ее используют. Разница может быть только в версии и параметрах. Например, известный сервис TinyPNG сильно убивает полупрозрачность, потому что использует pngquant в режиме совместимости с IE6 (это видно по результатам). Но не следует думать, что все ограничивается только применением pngquant. Чтобы достичь идеального результата, нужна целая комбинация программ, с правильно подобранными параметрами.

Однако, идеальный результат нужен далеко не всегда. Если необходимо массовое автоматическое преобразование в PNG-8, то следует применять консольную утилиту pngquant. Если вы оптимизируете элементы интерфейса, и вам нужно максимальное сжатие, то для этого вам подойдут следующие инструменты:

  1. ImageAlpha - только для Mac OS
  2. Color Quantizer - для Windows
  3. Pngyu - для Windows и Mac OS
  4. Photoshop-плагин - только для Mac OS
  5. Optimin - онлайн-инструмент

В общем и все. Остальные программы и сервисы, что я пробовал, не выполняют работу должным образом. Например программа RIOT, которая хороша для JPEG, использует старую библиотеку для PNG и, вообще, тонет в каких-то ошибках, при попытке сжать PNG. Онлайн-сервисов существует много, но ни один, кроме Optimin (и его клонов), не позволяет вручную сокращать палитру. А между тем, ручное сокращение палитры - обязательная функция для такого инструмента.

Сравнение инструментов

Но все равно всегда интересно сравнивать разные инструменты в работе. Давайте испытаем упомянутые выше и несколько других, не включенных в список. Добавим следующие онлайн-сервисы в наше сравнение:

  • TinyPNG - самый популярный сервис
  • Kraken.io - платный, есть бесплатная версия с ограничениями
  • PunyPNG - платный, бесплатная версия не дает скачивать PNG-8, только показывает размер

Есть еще сайт http://www.8bitalpha.com, но качество его преобразования настолько низкое, что я не включаю его в список вариантов.

Чтобы не было подозрений, что я специально подбирал "выгодные" изображения, чтобы наш сервис показал себя в лучшем виде, я беру образцы со страницы Google, посвященной испытанию формата WebP. Только на этот раз я беру не фотографии, как в статье про JPEG, а изображения с прозрачностью, что больше характерно для PNG.

https://developers.google.com/speed/webp/gallery2

Вот эти файлы: 1, 2, 3, 4, 5.

К сожалению, не получилось установить плагин для Photoshop на Mac OS, из-за каких-то проблем совместимости с версией системы.

Вот окончательный список инструментов для тестирования:

  1. ImageAlpha
  2. Color Quantizer
  3. Pngyu
  4. TinyPNG
  5. Kraken.io
  6. PunyPNG
  7. Optimin

Везде, где это возможно, я выбирал 256 цветов. Нужно отметить, что Optimin вычисляет для каждого изображения максимальную палитру, которая ему необходима для преобразования с приемлемыми потерями, и устанавливает слайдер на этот уровень. Но при тестировании я каждый раз поднимал слайдер до 256. TinyPNG, Kraken.io и PunyPNG всегда преобразуют полную палитру в 256. Если загрузить в эти сервисы PNG-8, то Kraken.io и PunyPNG его не трогают, а TinyPNG продолжает уменьшать до полной деградации. Поэтому TinyPNG нельзя применять повторно. Optimin не предлагает уменьшать палитру, если она уже меньше 256.

Я нигде не ставил флаг совместимости с IE6, так как это сильно портит полупрозрачность. Хотя и может уменьшить размер изображения, если таких пикселей много. К сожалению, TinyPNG по умолчаню делает файлы в режиме совместимости с IE6, что дает ему некоторую фору при сравнении размеров сжатых файлов. В программах я всегда выбирал максимальное сжатие. В частности, ImageAlpha, для дополнительной оптимизации, требует установки программы ImageOptim, того же автора. Я добросовестно скачал ее и установил. Качество полученных изображений почти не отличалось, за исключением тех, что сжал TinyPNG, по причинам, озвученным ранее. В частности, этот сервис больше всего испортил изображение номер 3.

Результаты

Исходное изображение 1

Инструмент Размер %
ImageAlpha 12873 26.78
Color Quantizer 12280 25.55
Pngyu 13062 27.18
TinyPNG 12021 25.01
Kraken.io 12435 25.87
PunyPNG 13428 27.94
Optimin 11836 24.63

Исходное изображение 1

Инструмент Размер %
ImageAlpha 13482 45.55
Color Quantizer 11803 39.88
Pngyu 13526 45.70
TinyPNG 12748 43.07
Kraken.io 12654 42.76
PunyPNG 14014 47.35
Optimin 12278 41.49

Исходное изображение 1

Инструмент Размер %
ImageAlpha 9466 26.91
Color Quantizer 9065 25.77
Pngyu 9595 27.28
TinyPNG 8970 25.50
Kraken.io 9003 25.60
PunyPNG 9779 27.80
Optimin 8670 24.65

Исходное изображение 1

Инструмент Размер %
ImageAlpha 7858 28.04
Color Quantizer 7904 28.20
Pngyu 8006 28.57
TinyPNG 7773 27.73
Kraken.io 7780 27.76
PunyPNG 7970 28.44
Optimin 7717 27.54

Исходное изображение 1

Инструмент Размер %
ImageAlpha 20065 19.96
Color Quantizer 20143 20.04
Pngyu 19584 19.48
TinyPNG 18664 18.57
Kraken.io 18694 18.60
PunyPNG 20788 20.68
Optimin 18467 18.37

Выводы

Как я и ожидал, Optimin почти все изображения сжал лучше всех. Исключение составляет лишь изображение номер 2, где его обогнала программа Color Quantizer. Если специально не ставить 256 цветов, а позволить сервису выбрать палитру самостоятельно, то можно выиграть еще несколько процентов в размере. Но в целом, все инструменты показали себя неплохо.

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

В повседневной работе, конечно, лучше пользоваться программами, которые устанавливаются на компьютер. Программа Color Quantizer сжимает лучше других, однако она мне показалась слишком сложной для понимания. Поэтому я рекомендую ImageAlpha и Pngyu. Если нужна автоматическая обработка изображений, то однозначно требуется консольная утилита pngquant. Не советую использовать pngnq из-за плохого качества преобразования. Из онлайн-сервисов для этой работы годится только Optimin (и его клоны). Все-таки часто нужно вручную уменьшать размер палитры, а больше никакие сервисы не позволяют это делать, на данный момент. Кроме того, он все равно сжимает лучше всех.

- Глеб

Онлайн-сервисы для оптимизации JPEG

Рассмотрим существующие онлайн-инструменты для оптимизации/сжатия JPEG. Вот все сайты, которые я смог найти, просмотрев множество статей на эту тему:

  1. http://www.jpegmini.com/
  2. http://kraken.io/
  3. http://www.smushit.com/
  4. http://www.imageoptimizer.net/
  5. http://www.webresizer.com/resizer/
  6. http://jpeg-optimizer.com/
  7. http://punypng.com/
  8. http://tools.dynamicdrive.com/imageoptimizer/
  9. http://compressnow.com/
  10. http://www.jpegreducer.com/

Из них 1,2,7 - платные сервисы, которые имеют бесплатные версии с ограничениями. Остальные - бесплатные.

В этот список я, само собой, не включил наш сервис http://optimin.ru и его клоны на английском языке.

Пригодность для веб-оптимизации

С точки зрения оптимизации для веб, существует только одно требование к таким сервисам. Кандидаты должны иметь в своих возможностях сжатие с потерями, качеством 50-80%. Все, что больше 80% - избыточно для публикации в интернет. Если конечно ваш сайт не посвящен профессиональной фотографии. Цифры 50-80% уже много раз обсуждались в сети, интересующиеся могут убедиться сами. При этом желательно иметь возможность задавать качество вручную.

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

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

  2. Kraken.io имеет серьезные ограничения на размер файла в бесплатной версии - 1MB. Что уже делает его мало полезным, если вы не намерены платить. По уровню искажений удалось определить, что Kraken.io сжимает JPEG с фиксированным качеством - 95%. Это делает его бесполезным для наших целей.

  3. SmushIt от Yahoo - не умеет сжимать с потерями. Эффект от его работы мизерный. Он совершенно бесполезен.

  4. ImageOptimizer.net - предоставляет программу для скачивания и веб-интерфейс, который... не работает.

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

  6. JPEG-Optimizer - как и предыдущий инструмент, считает, что лучше вас знает, какого размера должно быть ваше изображение, по умолчанию уменьшает его до 400 пикселов. Позволяет задавать качество, и есть возможность снимать флажок resize. Поэтому оставим и его.

  7. PunyPNG - обладает какими-то совсем уж смешными ограничениями в бесплатной версии. Несмотря на заявленный предел в 500KB, на все мои попытки закачать хоть какой-то файл в диапазоне от 100KB до 300KB, этот сервис отвечал, что превышена квота. Поэтому исключаем его из дальнейшего рассмотрения.

  8. DynamicDrive - не позволяет задавать качество, но выдает несколько вариантов закаченного изображения в разном качестве, что делает его вполне пригодным.

  9. CompressNow - позволяет задавать качество, но почему-то наоборот. 20% означает 80%. При этом все файлы переименовывает в image.jpg. Но мы его оставим для дальнейшего изучения.

  10. JpegReducer - аналог DynamicDrive.

Итак, для веб-оптимизации пригодны: 1 (условно), 5, 6, 8, 9, 10.

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

Алгоритм сравнения

  1. Сжать файл с помощью JPEGMini.
  2. Загрузить исходный файл в другой компрессор и подобрать то качество сжатия, при котором искажения вдоль четких контуров совпадают с тем, что выдал JPEGMini.
  3. Пользуясь качеством, определенным на шаге 2, сжать исходный файл другими сервисами.
  4. Сравнить размеры сжатых файлов.

Исходные фотографии

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

https://developers.google.com/speed/webp/gallery1

Исходные изображения в формате PNG я преобразовал в JPEG с качеством 100%. Вот эти файлы: 1, 2, 3, 4, 5.

Тест

Первая фотография, размер - 308238:

Оригинал

Я прогнал первую фотографию через JPEGMini, потом, сравнивая искажения (по береговым линиям реки), определил, что JPEGMini сжал ее на уровне 89-90%. На этом этапе уже понятно, что JPEGMini не годится для веб-оптимизации, т.к. его сжатие не всегда укладывается в заданные параметры (50-80%). Но так как этот сервис очень раскрученный, не будем его исключать из теста.

Вариант JPEGMini, размер - 80236:

JPEGMini

Вариант Optimin, качество 90%, размер - 65128:

JPEGMini

Вот результаты сжатия первого изображения с помощью разных сервисов, при качестве 90%.

Сервис Размер %
JPEGMini 80236 26.03
WebResizer 89165 28.93
JPEG-Optimizer 69986 22.71
DynamicDrive 89071 28.90
CompressNow 90446 29.34
JpegReducer 88628 28.75
Optimin 65128 21.13
RIOT 65433 21.23

* RIOT - это не онлайн-сервис. Это очень эффективная программа для сжатия JPEG, работающая, к сожалению, только под Windows. Я привожу результаты работы этой программы просто для информации, в качестве эталона.

Второе изображение было сжато JPEGMini с качеством примерно 85-86%. Но не все сервисы позволяют задавать такую цифру (не попадает в шаг), поэтому тестирую только те, что позволяют.

Сервис Размер %
JPEGMini 117795 28.18
WebResizer 125782 30.09
JPEG-Optimizer 106879 25.57
CompressNow 106584 25.50
Optimin 98211 23.50
RIOT 98924 23.67

Фотография 3 - интересный случай. Она размыта больше других, и на ней трудно найти четкие контуры, чтобы сравнивать искажения. Но все же, я смог достаточно надежно, как мне кажется, определить, что JPEGMini сжал ее с качесвом 75-77%. Помогли ветви дерева на фоне неба. Я заметил, что это нормально для JPEGMini, резко снижать качество на размытых фото, и с этой логикой трудно поспорить.

Сервис Размер %
JPEGMini 354150 24.64
WebResizer 330638 23.01
JPEG-Optimizer 286097 19.91
CompressNow 286353 19.93
Optimin 267616 18.62
RIOT 268539 18.69

Выводы

Как видно из таблиц, Optimin значительно опережает остальные сервисы. С другими фото картина повторяется. По результативности с Optimin может сравниться только хороший софт для компьютеров. Это удивительно. Ведь создать эффективный инструмент не так и сложно. Нужно лишь подобрать правильную последовательность применения нескольких свободно распространяемых программ, что и было сделано на Optimin. Самое интересное, что эти сервисы, созданные, видимо, домохозяйками, прошедшими трехмесячные курсы программирования на бирже труда, висят в топе гугля годами. И о них бесконечно пишут статьи.

Следует особо отметить "достижения" JPEGMini. В моих экспериментах с этим сервисом, я столкнулся с удивительным фактом. Судя по всему, перед сжатием изображения, JPEGMini пропускает его через шумоподавление. Волоски на руках исчезают, удаленная трава и удаленные кирпичные стены покрываются проплешинами. Эффект очень похож на то, что бывает при применении "patch-based image denoising". Если прогнать изображение через легкое шумоподавление, то это не сильно убьет контуры. Зато алгоритм сжатия JPEG будет намного эффективней, потому что во многих местах размываются резкие перепады цвета. Тем более удивительно, что JPEGMini сжимает фото настолько неэффективно. Автоматическое определение качества сжатия в этом сервисе представляется как "новая супертехнология", но алгоритм определения сильно хромает. Вполне возможно, что он основан на информации из того же шумоподавления. Боюсь, в лице JPEGMini мы видим очередную лже-технологию. Но, как я и говорил ранее, JPEGMini не поможет вашему сайту просто потому, что предназначен больше для уничтожения домашних фото-коллекций. Его сжатие неприемлемо для веб-оптимизации. Для ускорения сайтов потребуется что-то более эффективное.

Найти нужный софт для компьютера, я полагаю, не проблема. Если вы используете Windows, то можно установить бесплатный RIOT. Для Linux я бы порекомендовал консольную программу JPEGOptim. Из онлайн-инструментов, объективно, для веб-оптимизации подходит только Optimin (и его клоны). И не только потому, что это наш инструмент :-) Я действительно не видел более удобного и эффективного онлайн-инструмента для того, чтобы уменьшать размер фото до минимума.

- Глеб