Все потоки
Поиск
Написать публикацию
Обновить
8.3

Клиентская оптимизация *

Делаем сайты удобнее и приятнее

Сначала показывать
Порог рейтинга
Уровень сложности

Совместный эксперимент команд Яндекс.Почты и Nginx: действительно ли SPDY ускорит интернет?

Время на прочтение7 мин
Количество просмотров67K
Мы в Яндекс.Почте совместно с командой Nginx провели исследование, чтобы на живом примере с подробностями расставить точки над «ё» в вопросе о том, насколько и за счет чего SPDY ускоряет интернет.

Про сам SPDY вы, конечно, знаете. В 2011 году несколько разработчиков компании Google опубликовали черновик нового протокола, призванного стать заменой привычному HTTP. Его основные отличия заключались в мультиплексировании ответов, сжатии заголовков и приоритизации трафика. Первые несколько версий были не вполне удачными, но к 2012 году спецификация устоялась, появились первые альтернативные (не из Google) реализации, доля поддержки в браузерах достигла 80%, вышла стабильная версия nginx с поддержкий SPDY.



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

Есть много интересных исследований вокруг SPDY, в том числе самого Google. Компания-автор протокола показывала, что в их случае SPDY ускоряет загрузку на 40%. Исследование протокола SPDY проводила и компания Opera. Но ни методик подсчета, ни примеров страниц, на которых были достигнуты столь впечатляющие результаты, в этих исследованиях не было.
Итак, что именно мы измеряли и к каким выводам пришли

Список оптимизаций рендеринга DOM, реализуемых на уровне Javascript фреймворка

Время на прочтение13 мин
Количество просмотров27K
С октября 2009 года я занимаюсь разработкой приложения для поиска и прослушивания музыки. Я стремлюсь организовать возможность быстрого взаимодействия пользователя с интерфейсом, и в качестве одного из средств ускорения взаимодействия использую различные способы для быстрой отрисовки страниц.

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

  • Использование CSS и переключение классов вместо перестроения DOM дерева
  • Повсемнестное кеширование выборок элементов ($('div.active_part span.highlighter')), атомарные операции по изменению (вместо всеобщей перерисовки, вместо переделывания больших участков DOM дерева)
  • Минимизации чтений DOM во время записи изменений состояний
  • Кеширование размеров и расположения элементов (это спасает от излишнего вычисления при считывании этих значений при наличии других изменений: чтение во время изменения множества частей дерева крайне негативно сказывается на производительности)
  • Аккуратное, не затягивающееся накопление изменений, необходимых произвести в DOM
  • Прикрепление частей изменяющихся коллекций единовременно (когда, например, в середину списка вставляется 3 новых элемента; createDocumentFragment) в конкретное место (after, before) вместо открепления всей коллекции от DOM и повторного прикрепления (и вместо того, чтобы перерисовывать весь список)
  • Прогрессивный асинхронный рендеринг: картина прорисовывается сразу с небольшим количеством деталей, затем деталей появляется всё больше
  • Клонирование нодов (как часть шаблонизации)
  • Кеширование и использование кеша результатов парсинга DOM шаблонов


image image
изображения из части с заголовком «Прикрепление частей изменяющихся коллекций единовременно...»
Читать дальше →

Минификация CSS и Javascript в Website проекте ASP.NET

Время на прочтение4 мин
Количество просмотров12K
Про минимизацию javascript и css знают все. Ну если кто не знает, то, вкратце, это уменьшение объема файлов за счет удаления комментариев, разметки, переносов строк и прочего. Особенно актуально оно для интернет сайтов, которые при первом же визите пользователя должны порадовать его своей производительностью. Но наш проект, во-первых, работает в локальной сети, а во-вторых, используется на одних и тех же компьютерах изо дня в день, поэтому мы долгое время совсем не задумывались об оптимизации скриптов и стилей. Пока не стали плотно работать с ExtJS.

Созданная страничка со всеми подключенными скриптами и стилями весит больше 5 Мб (около 200 файлов). Одно только сгенерированное DOM-дерево в коде HTML содержит более 500 000 байт. Работать с системой пользователь может начать не раньше, чем через 5 секунд после загрузки страницы (инициализация скриптов, ExtJS и т.п.).

Как оказалось, несмотря на наличие локальной сети у заказчика и частую работу с одними и теми же страницами (должно же быть встроенное кэширование в браузере), иногда с загрузкой страниц возникают проблемы. Поэтому было решено уменьшить количество запросов к серверу и поработать над общей производительностью ExtJS в IE8.
Читать дальше →

Кто быстрее: стартапы или компании-тяжеловесы?

Время на прочтение3 мин
Количество просмотров4.2K
Терпеливо ждать пока загрузится медленный, но очень нужный сайт в эпоху широкополосного доступа получается с трудом, и если раньше 5-6 секунд ожидания не особо смущали, то теперь такой промежуток времени — вполне себе повод для раздражения. Тенденция для нас любопытная, в связи с чем мы и решили проверить какие результаты демонстрируют сегодня компании.
Читать дальше →

Оптимизация JavaScript и jQuery из-под HTML и CSS при разработке сайта

Время на прочтение3 мин
Количество просмотров34K
Доброго времени суток, Хабражители. Хочу поделиться неким опытом (советами) при работе с JavaScript + jQuery (по сути, вместо jQuery можете подставить любой другой JS фреймворк). Статья будет интересна новичкам JS и jQuery, но и динозаврам опытным проходить мимо не стоит, в ней вполне можно найти полезную информацию. В основном, в статье я привожу не однозначные случаи, но и место для «стоТыщРазПовтор» я счёл уместным.

image

Инициализация


Сплошь и рядом встречаю загрузку JS файлов в теге . В большинстве случаев - это не корректно! Почему? В этом случае JS начинает загружаться до загрузки HTML, и как следствие клиент дольше ждёт загрузки информации за которой он пришёл. Размещение скриптов в оправдано только в тех случаях, когда JS используется в качестве контроллера (к примеру, всё содержимое на странице мы достаём поблочно через AJAX запросы, в зависимости от URL или Hash). Если не используем, то гораздо лучше вставлять скрипты перед зыкрытием тэга . JS начнёт загружаться только после того, как посетитель увидит страницу.
Читать дальше →

Аналитика в рознице: сегодня вы не купили презервативы, а магазин уже знает, когда вам пригодится скидка на детское питание

Время на прочтение9 мин
Количество просмотров44K

Вот как-то так это хитро работает

Про вашего будущего ребёнка – это, конечно, утрировано, но все может быть. На практике мы помогаем рознице бороться за каждый рубль с помощью математического аппарата. Вот, например, у вас в бумажнике есть карта лояльности, либо вы расплачиваетесь кредиткой. Это значит, что в целом магазин знает, сколько и каких продуктов вам надо. Дальше можно построить оптимальную модель вашего путешествия по магазину и понять, в какой ситуации вы купите больше. Что где должно стоять, какое молоко вы предпочитаете (вдруг вы готовы брать дорогое и натуральное без колебаний?) и так далее. Смоделировать вас по совокупности данных легко.

Такую же аналитику можно применять ко всем аспектам работы розницы.

Из смешного — один раз система просчитала, что будет выгодно уничтожить примерно полтонны бумаги. Сначала думали, что баг — но начали копать и выяснили, что поставщик даёт скидку за определённый порог закупки. А сеть может не успевать продавать нужное количество бумаги. С учётом стоимости склада, поставки и уровня скидки начиная с порога — проще взять и уничтожить кучу товара, чтобы получать его по цене ниже. Скидка минимум вдвое компенсирует убытки от его потери.
Читать дальше →

Опыт построения b2b-продукта: 3 континента за 6 лет и полведра набитых шишек

Время на прочтение21 мин
Количество просмотров26K
Сегодня нам, компании Maxifier Development, исполняется 6 лет… Ну ладно, соврал, не сегодня. На самом деле случилось это недели две назад, но только сейчас, когда я возвращаюсь из нашего нью-йоркского офиса обратно в родную Самару, наконец-то дошли руки что-то написать по этому поводу.

За шесть лет мы прошли путь от идеи на бумажке до международной компании стоимостью в десятки миллионов долларов. Создали сложный программный продукт в области оптимизации Интернет-рекламы, которым ежедневно пользуются крупные медиа-компании в Европе и Америке и уже подтягивается Россия. Открыли офисы в США, Японии и Англии.

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

Я надеюсь, что теперь мы будем регулярно публиковать статьи, связанные как с нашей предметной областью, так и просто посвященные вопросам разработки, менеджмента, взаимодействия с клиентами и прочим «интересностям» в ИТ. Но в этой, начальной статье хочется просто оглянуться назад, на основные вехи развития нашей компании.
наши скромные завоевания
Читать дальше →

Оптимизация / сжатие SVG-изображений

Время на прочтение2 мин
Количество просмотров44K
Здарствуй Хабр!
Статья посвящена оптимизации изображений формата SVG.



SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.
Читать дальше →

Подтвердите право собственности на сайт в Инструментах для веб-мастеров с помощью Диспетчера тегов Google

Время на прочтение1 мин
Количество просмотров3.1K
Уровень подготовки веб-мастера: любой

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

Выполните следующие действия:

1. На главной странице Инструментов для веб-мастеров нажмите Управление сайтом и выберите Подтвердите право собственности на этот сайт. Если вы ещё не добавили его, нажмите кнопку Добавить сайт справа вверху.

image
Читать дальше →

Лёгкий сайт или как посадить браузер на диету

Время на прочтение14 мин
Количество просмотров145K

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

Zeno Rocha, руководитель проекта.


Читать дальше →

Проблемы кликов-переходов: сколько леммингов тонет?

Время на прочтение7 мин
Количество просмотров14K
Проблема кликов-переходов, лемминги-самоубийцы

Однажды при общении с коллегами из AdRiver выяснилось, что далеко не все клики по рекламным объявлениям становятся переходами на целевой сайт. Для меня было бы нормальным услышать, что теряется 5-10% посетителей (вполне естественные цифры в рамках общей погрешности измерений). Но, как оказалось, потери могут составить до 50%. И мы решили разобраться подробнее, где же происходят утечки, почему обычные, здоровые, адекватные клики не становятся переходами.
Где тонут лемминги?

WebMarkupMin HTML Minifier – современный HTML-минимизатор для платформы .NET

Уровень сложностиСредний
Время на прочтение21 мин
Количество просмотров15K

Логотип WebMarkupMin


В начале 2012 года я работал над серией статей о клиентской оптимизации в ASP.NET MVC для журнала MSDeveloper.RU. Всего было опубликовано 2 статьи: «Сжатие JS- и CSS-файлов» и «Менеджеры ресурсов», но в моих планах было написать еще 2 статьи: одну про оптимизацию графики, а вторую про минимизацию HTML-разметки и GZIP/Deflate-сжатие (далее просто HTTP-сжатие). К сожалению, эти планы не удалось воплотить в жизнь из-за нехватки свободного времени (в тот момент, я запускал проект Bundle Transformer) и последовавшего закрытия журнала.


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


Эволюция HTML-минимизаторов


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


Вопреки расхожему мнению, техники минимизации HTML-кода появились намного раньше, чем аналогичные техники для JavaScript. Уже в конце 1998 года Артемий Лебедев в 17-м параграфе ководства «Паранойя оптимизатора» описывал некоторые техники минимизации HTML-кода.


Читать дальше →

Рейтинг скорости загрузки интернет-магазинов

Время на прочтение4 мин
Количество просмотров24K
Скорость загрузки интернет-магазинов, 2013
Скорость все же имеет значение для интернет-магазинов. Два года назад мы проводили исследование по сайтам ведущих интернет-магазинов, банков и страховых. Результаты были не очень радостные, но примерно четверть сайтов можно было отнести к «быстрым». Сейчас мы решили повторить исследование, ведь если скорость подключения основной аудитории интенет-магазинов изменилась не сильно (все то же безлимитное с ограничение полосы пропускания в районе 5-10 Мбит/с), то количество мобильных пользователей заметно выросло (по последним измерениям, сейчас каждый четвертый пользователь использует смартфон для просмотра сайта). И было интересно узнать, какие критерии маркетинговая команда ведущих интернет-магазинов считает эффективными, за сколько секунд должен открываться успешный интернет-магазин.

Как показало исследование, 85% интернет-магазинов открываются до 4 секунд, при этом 23% открываются до 2 секунд. Это гарантирует как минимальную зависимость эффективности сайта от скорости (скорость уже почти максимально высокая), так и хорошие показатели сайта для мобильных пользователей (сайт открывается достаточно быстро для них).
Подробности и методика

Ближайшие события

Тонкости Rails 4 — Cache Digests

Время на прочтение5 мин
Количество просмотров13K


Гем под названием "cache_digests" (включен по умолчанию в Rails 4) автоматически добавляет цифровую подпись к каждому фрагментному кэшу, основываюсь на представлении (вьюхе). При этом, если страница изменяется, то старый кэш автоматически удаляется. Но остерегайтесь подводных камней!
Читать дальше →

Добавляем иконку загрузки к большим изображениям на CSS

Время на прочтение2 мин
Количество просмотров8.3K
Давайте представим, что у вас на странице имеются большие картинки, и вы хотите, чтобы пользователь знал, что они загружаются. С помощью JavaScript'а можно внедрить анимированную иконку ко всем изображениям, которые еще не загружены, но мы можем предложить вам более простой и чистый способ.

Шаг 1: Найдите анимированную иконку


Существует много сайтов, где вы можете создать свою картинку для загрузчика. Наш любимый этот. Главное не выбирайте иконку, которая будет очень много весить. Вот такую сгенерировали мы:



Шаг 2: Добавьте CSS-правила


Тут совсем немного кода, и вы можете просто скопировать его. Только не забудьте сменить «youricon.gif» на свою картинку.

.load {
    background: url('images/youricon.gif') no-repeat center;
}
Читать дальше →

Телекоммуникационный шкаф или серверная стойка (теория на практике)

Время на прочтение2 мин
Количество просмотров31K
По статистике Яндекс количество запросов на аренду серверных стоек в 4 раза больше, чем аналогичных со словом «шкаф». Вот только странно то, что после звонка клиенту, выясняется, что ему нужна аренда телекоммуникационного шкафа, а не стойки.
Читать дальше →

Вышел Bundle Transformer 1.6.10

Время на прочтение3 мин
Количество просмотров4.7K
Логотипы библиотек Bundle Transformer, в которые были внесены изменения в версии 1.6.10
Новая версия Bundle Transformer характеризуется следующими изменениями: большая часть сборок теперь подписана; в ядре, были исправлены ошибки, возникавшие при обработке путей; были обновлены некоторые модули (BundleTransformer.SassAndScss, BundleTransformer.CoffeeScript, BundleTransformer.TypeScript, BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.UglifyJs, BundleTransformer.Csso и BundleTransformer.WG) и создана новая версия демонстрационного сайта ASP.NET Web Pages.

Рассмотрим основные нововведения данной версии:
Читать дальше →

Отдача мелкой графики

Время на прочтение2 мин
Количество просмотров10K
Холивары про то, где хранить картинки – в базе или в файловой системе – штука не редкая даже для Хабра. Однозначного подхода тут в общем нет и быть не может, но если посмотреть на ситуацию с позиции оптимизации выдачи контента, то разумный компромисс становится чуть более очевиден, на мой взгляд.
Читать дальше →

Синхронизация данных между вкладками браузера

Время на прочтение5 мин
Количество просмотров11K

На основе Cookies, для сайтов с общим наддоменом


Хочу поделиться, как это удалось осуществить для одного проекта. Сложность использования других известных методов, заключалась в том, что проект не был привязан к единому доменному имени, а был локализован на сетке из поддоменов. То есть сайты проекта располагались на доменах третьего уровня. Данное обстоятельство вызывало некоторые неудобства из-за Same Origin Police.


Читать дальше →

Вышел Bundle Transformer 1.6.5

Время на прочтение4 мин
Количество просмотров7.6K
Логотипы библиотек Bundle Transformer, в которые были добавлены изменения в версии 1.6.5
Основным нововведением в новой версии Bundle Transformer стала поддержка языка TypeScript. Кроме того, были внесены изменения в ядро продукта и в следующие модули: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui и BundleTransformer.Csso.

Рассмотрим основные нововведения данной версии:
Читать дальше →

Вклад авторов