Pull to refresh
0
Web-payment.ru
Отраслевое финтех СМИ

Кое-что о весе страницы

Reading time 2 min
Views 120K
Original author: Chris Zacharias
Три года назад, когда я работал веб-разработчиком на 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 я получил ценный урок о состоянии интернета в остальной части света. Многим из нас посчастливилось жить в широкополосных регионах, но значительная часть мира все еще не имеет этого удобства. Если ваш код с клиентской стороны остается коротким и легким, вы буквально получаете возможность открывать для своего продукта новые рынки.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+140
Comments 68
Comments Comments 68

Articles

Information

Website
web-payment.ru
Registered
Founded
Employees
2–10 employees
Location
Россия