Отраслевое финтех СМИ
117,60
рейтинг
24 декабря 2012 в 19:49

Маркетинг → Кое-что о весе страницы перевод

Три года назад, когда я работал веб-разработчиком на YouTube, один из старших инженеров начал разглагольствовать о слишком большом весе видеостраницы. Страница была раздута до 1,2MB и содержала десятки запросов. Этот инженер так и заявил: если целые клоны Quake пишутся с объемом до 100KB, у нас просто нет оправданий! Я согласился с ним и был в восторге от нового проекта, решив сделать страницу просмотра YouTube с весом ниже 100 КВ. В этот вечер, в автобусе, едущем из Сан-Бруно, я написал код прототипа. Я решил ограничить функциональность базовым минимумом: видеоплеер, пять похожих видео, кнопка «Поделиться», инструмент разметки и десять комментариев, загружаемых с помощью AJAX. Я назвал проект “Feather” (англ. — перышко).

Даже при таком ограниченном наборе функций страница весила около 250 КБ. Я углубился в изучение кода и понял, что наше средство оптимизации (т.е. Closure compilation) не способно исключить код, который никогда реально не используется на самой странице (чего и следовало ожидать от любого инструмента в сложившихся обстоятельствах). Единственным способом дополнительно сократить код было вручную оптимизировать спрайты CSS, Javascript и изображения. Три дня стараний — и я получил гораздо более удачное решение. И все равно это было не 100 КБ. Я совсем недавно закончил написание кода видеоплеера HTML5, и поэтому решил включить его вместо гораздо более увесистого Flash player. Бамс! 98KB, и всего 14 запросов. Я снабдил код некоторыми базовыми возможностями мониторинга и запустил его исполнение в части нашего трафика.

Через неделю сбора данных пришли цифры,… и они меня сильно озадачили. Среднее время ожидания под Feather в действительности ВЫРОСЛО. Я уменьшил общий вес страницы и число запросов до десяти, как это было раньше, но по какой-то необъяснимой причине цифры говорили о том, что с Feather видео грузится ДОЛЬШЕ. Этого просто не могло быть! Я снова полез в цифры, но после повторного тестирования браузера все равно ничего не мог понять. Я уже готов был бросить этот проект, а мое мировоззрение висело на волоске от пропасти, когда моего коллегу осенило: география!

Когда мы изобразили данные на карте и сравнили их с итоговыми цифрами, разбитыми по регионам, обнаружился непропорциональный подъем трафика из мест типа Юго-Восточной Азии, Южной Америки, Африки и даже отдаленных районов Сибири. Дальнейший анализ показал, что в этих местах среднее время загрузки страницы под Feather было больше ДВУХ МИНУТ! А это значит, что для загрузки обычной видео-страницы чуть больше мегабайта нужно было ДВАДЦАТЬ МИНУТ! Эта задержка происходила до того, как можно было показать первый кадр видеопотока. Соответственно, все население просто не могло использовать YouTube, потому что нужно было неимоверное количество времени, чтобы что-то посмотреть. Под Feather, хоть и нужно было ждать две минуты, чтобы увидеть первый кадр видео, все же появлялась реальная возможность просмотра. Через неделю слух о Feather распространился в этих регионах, и наши цифры полностью изменились. Многие люди, не имевшие раньше возможности пользоваться YouTube, внезапно получили такую возможность.

Благодаря Feather я получил ценный урок о состоянии интернета в остальной части света. Многим из нас посчастливилось жить в широкополосных регионах, но значительная часть мира все еще не имеет этого удобства. Если ваш код с клиентской стороны остается коротким и легким, вы буквально получаете возможность открывать для своего продукта новые рынки.
Автор: @cigulev Chris Zacharias
Web-payment.ru
рейтинг 117,60
Отраслевое финтех СМИ
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (68)

  • –43
    Совсем скоро вес страницы не будет иметь значения.
    • +30
      Скорее всего рост скорости подключения интернета будет пропорционален росту веса страниц и по сути все останется так же. Мы это можем наблюдать уже сейчас на примере потокового HD видео.
    • +12
      Криворукие разрабы всегда будут. Так что проблемы останутся
      Было бы неплохо, чтобы в ВУЗах давали больше дисциплин, направленных на улучшение качество кода у студентов. Насколько я знаю, этим часто пренебрегают. Хотя я возможно ошибаюсь
      • +13
        Ввести предмет Перфекционистика?
        • 0
          Лучше организовать обратную связь с «благодарными» пользователями в виде ласкового электрического разряда ))
          • +3
            Взрывающийся заряд на шею, как в одной известной утопии.
            • 0
              Собственно, государственный чиновник — такой же человек, принимающий решения, как и менеджер в проекте (или вообще «разработчик», в маленьком проекте). Обратная связь — это то, чего нам так часто не хватает для счастья.
              • 0
                Ещё для счастья часто не хватает приёмника этой самой обратной связи.
                • 0
                  «надёжность цепи определяется надёжностью самого слабого звена» ©
          • 0
            Вспомнилось, как будучи несколько моложе, я часто мечтал, чтобы рядом со мной сидел Билл Гейтс и я мог его «мотивировать» после каждой ошибки тогда еще 98-й винды. Дети жестоки.
            • +1
              Или хвалить, если что-то сделано замечательно, верно? А то тут все предлагают только одни кнуты, а "пряники в наше государство завезти забыли" (с).
        • +8
          скорее предмет — «говнокод»
          Нельзя научить хорошему коду сразу (если не понимать под хорошим кодом только комментирование и форматирование). Для этого необходимы глубокие знания (чего у студентов обычно ещё нет и не скоро появится).
          А вот показать как делать нельзя гораздо проще, слава богу, говнокода хватает в тех же лабораторках. Остаётся только систематизировать и наглядно продемонстрировать. На самом деле говнокод гораздо проще описывается и систематизируется чем код заслуживающий названия талантливый, так как посредственность всегда однобока а талант многогранен.

      • 0
        Я вам даже больше скажу: «работает, но иногда подглючивает» — это нормальная ситуация при сдаче лабы. «Попробуйте ввести другие данные… о, видите — теперь работает!», и преподаватели закрывают на это глаза. Что уж говорить о качестве кода.
        • 0
          Помню, половина группы ушла со сдачи лабораторки по С после просьбы преподавателя «покажите main»
    • +30
      Хорошая попытка, %недобросовестный_разработчик%.
      • –10
        Так он же из Челябинска! Это все объясняет.
        • +11
          Да нет же! Я люблю челябинцев и Челябинск.
        • +1
          Это ничего не объясняет.
    • 0
      Совсем скоро — это когда планета полностью будет покрыта сетями LTE?
      • +1
        Может быть, он просто не знает, что 21 декабря уже прошло и думает, что грядет конец света?
        • 0
          Или по старому стилю считал.
  • +19
    • +1
      Эта история меня после первого прочтения так сильно проняла, что аж страшно стало. :)
      С одной стороны был горд за своего собрата, а с другой — забеспокоился за психику :)
      • 0
        Самое страшное что у меня была ситуация когда приходилось упаковывать байты в 8 килобайт, вроде все нормально :)
      • +22
        Гыгы, вы читали, а я в нее практически попал. Когда сотни плат уже готовы, комплектуха на сотни тысяч закуплена, а у меня буквально десяток байт не впихивается в 8ми килобайтную мегу. И времени переписать большую часть кода нет. Много я тогда кирпичей высрал. Но утрамбовал.
    • +1
      Комментарий мой лишний, но плюсануть не могу. Просто спасибо за прекрасную историю.
  • +4
    Я снабдил код некоторыми базовыми возможностями мониторинга и запустил его исполнение в части нашего трафика.

    Вообще странно они тестили, обычно при запуске новой фичи ее открывают как раз для одной страны или региона. Сделали бы так сразу и путаницы удалось бы избежать.
  • 0
    Если смотреть в реальность (а не в маркетинговые планы) то всегда разница в доступности будет прямо пропорциональна популярности. Возможно для Интернет-магазина это не имеет значения поскольку ему не нужны клиенты из труднодоступных регионов, а для новостного портала или развлекательно-информационного сервиса — это жиненно важный критерий.
    • +4
      «Клиентом из труднодоступного региона» может (п)оказаться человек из твоего же города, зашедший в магазин с планшета или смартфона.
    • +2
      Скорее наоборот. Клиент в большом городе может зайти в нормальный магазин и купить, а вот с «задворков»… или покупать через интернет или через местных посредников, если такие вообще найдутся.
  • 0
    Ну не знаю как вам, а мне идея понравилась, я ее специально активировал и мне очень нравится, что на странице нет ничего лишнего.
  • +14
    Интересно, а какой смысл использовать YouTube с каналом 8кбит/с?
    • +9
      наверно больший, чем без канала? ;-)
    • +4
      Интересно, какой смысл ездить на автомобиле, если не можешь себе позволить бентли?

      • +5
        Простите, но вас в слове бензин аж три опечатки.
        • –3
          Писать без ошибок научитесь, пожалуйста. Кнопка «просмотреть» помогает избежать попыток неудачно сострить.
  • +13
    Как-то странно пытаться оптимизировать страницу, основной функционал которой (видео) будет весить в десятки раз больше.
    Т.е. да, сэкономили 900кб, чтобы пользователь мог побыстрее затупить на ожидании видео в 200мб.
    • +4
      Иногда достаточно посмотреть первые 30 секунд, чтобы понять будете вы его дальше смотреть или нет. Сам долгое время сидел GPRS/EDGE и иногда лазил на сайты с видео.
      • +2
        Какое-то время умудрился даже попользоваться ютубом с диалапа.
        • +11
          Насколько я помню, то были очень мрачные времена…
          • 0
            Даунлод мастер на ночь помогает)
    • 0
      Можно как минимум пользоваться поиском, читать описания видео и комментарии. А если уж что-то заинтересовало сильно, тогда оставить на час загружаться (и да, 320×240 весит значительно меньше 200мб, а удовольствия доставляет почти столько же).
  • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      А еще часто делают ошибку, когда в некоторых cms загружаемое изображение не ужимается по размеру, а клиенты, не знаю об этом, загружают полноценные 5-10Мп фотографии. В итоге получаем такую галерею из 10 фотографий в несколько десятков мегабайт.
      • 0
        Этим кстати, не знаю почему, очень многие сайты в китайском интернете страдают.
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Думаю, потому, что в Китай сразу пришел широкополосный интернет. Они с проблемой узкого канала не знакомы.
          • 0
            О да, такой широкополосный… О чем вы говорите? Не путаете с Кореей и Японией?
    • +8
      Я как-то замерил 10 МБ на microsoft.com. Причем для Internet Explorer отдавался более лёгкий вариант.
      • +12
        Это были хаки для не-IE браузеров.
  • 0
    Сегодня только наткнувшись на mincss, и прочитав описание, задумался: а ведь действительно, слишком много лишних и неиспользуемых классов болтается в css(особенно если используется какой-то фреймворк), и надо бы воспользоваться этой штуковиной и заодно поискать хорошие альтернативы ей для js.
  • +3
    Ну не знаю… я взял за правило такую вещь во время сборки проекта (а чего — достаточно все 1 раз настроить и горя не знать):
    1. Шаблоны минимизируются и умещаются в 1 строку
    2. CSS жмется и сливается в 1 файл
    3. JS жмется и сливается в 1 файл (не весь… кроме, например, виз редактора)
    4. png + jpeg тоже жмутся (pngout + jpegmin)
    5. Иногда дополнительно в CSS пихаются картинки. Выборочно. Обычно такие, которые весят менее 1-2кб и вызываются часто.
    6. При отдаче статики и непосредственно контента все гзипуется и кешируется.

    Я, конечно, перфекционист, но всему есть предел. Я чего только не перепробовал помимо этого, но пока все это давало смехотворный выигрыш в скорости по сравнению с тем, что дает то, что я перечислил выше. ИМХО: важно не перегнуть палку.
    • +2
      А rails3 всё делает сам (там есть такие чудесные штуки, как SASS, CoffeeScript, Сompass)…
      • +1
        Вся соль в «ИМХО: важно не перегнуть палку», а не в перечислении того, «как я крут».
        • +4
          Вся соль в том, чтобы ЭВМ делала всю рутину за программиста, который должен тратить своё драгоценное время на алгоритмы, написание качественного кода и внутреннюю оптимизацию.
          • +1
            Внутренняя оптимизация программиста — это многопоточность? Типа, курю, пью кофе, сплю и пишу на хаскеле одновременно?

            ;-)

            • +1
              Нет, хаскель тут ни при чем. Тут, скорее, желание явить миру новость: товарищ овладел рельсами! ))
              • 0
                Все в жизни когда-то случается в первый раз. Я вот который год ими пару раз в неделю овладеваю.
          • +1
            Вся соль в «а чего — достаточно все 1 раз настроить и горя не знать». А не в «камент не читай @ сразу отвечай».
    • 0
      В этом списке нет отложенной загрузке виджетов + предзагрузки ресурсов
  • +3
    Теперь я смогу смотреть видео на YouTube.

    Включить Feather
    • 0
      У меня противоречивые чувства от этого перышка. Но теперь буду знать, когда потребуется. Хотя можно было бы пойти еще дальше — и прикрутить одностраничный интерфейс.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Opera Turbo можно оставить?
      • +1
        Опера Турбо не освобождает от ответственности
  • +1
    Помню в далёкие времена, когда у меня был только GPRS пользовался я программами типа Handycache и Proxomitron и знал практически всё о начинке сайтов, которые тогда посещал. Потом обзавёлся широкополосным интернетом и на много лет забыл про них, и как-то однажды пришлось воспользоваться опять. Сказать, что я был удивлён количеством мусора грузившегося при заходе на каждый сайт — значит ничего не сказать: каждая страница грузит десяток другой многосоткилобайтных яваскриптов и стилей, десятки картинок, иногда сотни сторонних ресурсов — какие-то счётчики, баннеры, кнопочки расшарить и т.д., неудивительно, что даже на 100Мбитных каналах странички грузятся по минуте.
    • +1
      Handycache (помимо просто кэширования ещё и режет рекламу) + TrafficCompressor или tunnel.net. Да, были времена… :)

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

Самое читаемое Маркетинг