Antiobesity

[ermouth]

Новый год начался как полагается – нападением беспощадного холодильника на беззащитного меня ) Когда первого утром завтракал шампанским с конфетами, невольно вспомнил Легенду об Уленшпигеле, тот фрагмент, где Ламме откармливал толстого монаха в клетке. Перечитал, зажёвывая роман пирожными, ггг.

Интересно, что в этом году у меня осталось нетронутым особенно много крепкого алкоголя класса А – вполне по-новогоднему я нажрался ещё 29-го и после этого как-то не хотелось. Бокала-двух шампанского стало хватать – старость, ога ) Гости тоже, кста, кто вино, кто – шампанское, кто водку. Интересно, тенденция.

Посмотрел всяких фильмов, которые давно собирался или посмотреть, или пересмотреть. Из того, что внезапно в настроение пришлось – “Римские каникулы”, неожиданно очень новогоднее кино. Что точно не надо смотреть – русское “Страна Оз”, просто УГ.

Теперь собсно про obesity.

Мне попалась прекраснейшая публикация, местами очень смешная (“…Howard Taft, America's greatest president by volume…”), о неоправданной раздутости современных веб-ресурсов.

http://idlewords.com/talks/website_obesity.htm, настоятельно советую.

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

Я сейчас наш сайт переделываю, и пребывая под впечатлением решил уложить лэндинг в 100Кб трафика. Целиком. Там в публикации есть прекрасный фрагмент:

I want to share with you my simple two-step secret to improving the performance of any website.

1. Make sure that the most important elements of the page download and render first.

2. Stop there.

You don’t need all that other crap. Have courage in your minimalism.”

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

Забавно, но у меня ощущение, что это прекрасное правило – упрощать – придётся в 2016 распространить совсем не только на контент.

С наступившим, френды )

Comments

[grayscaler.livejournal.com]

Сделал бы кто-нибудь умный плагин к фаерфоксу, чтобы безбожно косил лишний javascript, а оставлял разумно необходимый. Только что вот главная livejournal подвисла секунды на три и весь фаер ни на что не реагировал. Нахрена? Что в плане UX это даёт? Там контента с гулькин хер, мне нужен только он, даже по модему НЕОБХОДИМОЕ загрузилось бы меньше чем за секунду.

[morfizm.livejournal.com]

Я тебе дам один совет, который может дополнить твой порыв уложить лэндинг в 100кб и ускорить ещё в разы. Твои сайты подтормаживают в рендеринге из-за того, что слишком много динамического контента. Лэндинги должны быть в статике.

Причём, в идеале, должно быть поменьше автоматического layout-а. Обозреватель не должен загружать *все* картинки прежде, чем понять, как их расставить, и не должен загружать *всю* таблицу прежде, чем понять, какой она должна быть ширины. Всё это можно прописывать в HTML on the server-side, и рендериться будет в разы быстрее. table, tr и td тэги имеют width и height, можно прописывать в пикселях. Img тэги тоже имеют атрибуты width и height. Никаких style:float, etc.

Ещё - поищи всевозможные тулы для симуляции очень медленного коннекта. Это поможет видеть проблемы своими глазами, а не только полагаться на телеметрию.

[ermouth.livejournal.com]

Я, кажется, уложусь в 50Кб на всё, уже почти сделал. Битмапы будут заинлайнены, иконки в svg.

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

[morfizm.livejournal.com]

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

*) Note: это просто из общих соображений совет, я не знаю, как именно сделано у тебя. Из того, что я помню, были только эффекты излишней динамики: (а) после начального ренденринга у тебя всё съезжало, и это было некрасиво, (б) страница загружалась белая и потом после какой-то задержки появлялся контент.

50kb с заинлайнеными картинками это очень хорошо. Покажи результат.

[ermouth.livejournal.com]

> 50kb с заинлайнеными картинками это очень хорошо. Покажи результат.

Покажу. У меня ещё килобайт 7 остаётся, я туда Тетрис запихаю пасхальным яйцом )

[morfizm.livejournal.com]

lol :)

На тебе 4k tetris:
http://codeincomplete.com/posts/2011/10/10/javascript_tetris/
:)

[morfizm.livejournal.com]

140 byte tetris! Это сильно.
http://developers.slashdot.org/story/12/02/19/1351213/tetris-in-140-bytes

Но урезанный функционал.

[morfizm.livejournal.com]

"Если делать сразу для мобилы и десктопа, то, по-моему, не следует делать элементы больше, чем какой-то кусок по высоте"

и это, кстати, сразу означает, что нельзя делать боковые "navigation bars", т.к. они требуют огромный всеобъемлющий элемент, в который их нужно вписать, и это сразу создаст проблемы с прогрессивным отображением.

[morfizm.livejournal.com]

На самом деле, такая простейшая вещь как незаданная ширина таблицы, приведёт либо к некрасивой перерисовке, либо к задержке рендеринга "пока всё не загрузится". Если же у обозревателя есть *вся необходимая информация* для отображения первых строк таблицы с нужной шириной, то хороший обозреватель будет отображать сразу, даже если другие строки таблицы ещё не подгрузились. Проценты это тоже зло. Фиксированные размеры в пикселях рулят.