NB: Мы не претендуем на идеальность, и не принуждаем всех следовать этим путем, мы только рассказываем про опыт внутри нашей компании.

Я Олег Биргер, руководитель центра развития клиентского опыта. Я помогаю создавать продукты и сервисы так, чтобы они достигали лучшего результата для клиентов и выгодным для компании способом. Основная моя цель – направлять, поддерживать и сопровождать продуктовые команды и их работу таким образом, чтобы продукт получился востребованным и помогал клиентам в решении их задач наилучшим способом.



Чтение текста займет 16 минут

Использование DRY в CSS — это способ максимально избегать повторения в таблицах стилей. Этот подход не панацея, но он достаточно эффективен и является одним из основных методов оптимизации. Поскольку я использовал и изучал его почти 10 лет, в этой статье хочу поделиться своим опытом и знаниями.

А если вам будет интересна тема оптимизации CSS, то я рассказал об основах в моей небольшой книге "CSS Optimization Basics".

Существует огромное количество генераторов статических сайтов (Static Site Generator, SSG). Очень сложно принять решение о том, какой именно выбрать. Существует множество полезных статей, которые могут помочь сориентироваться в (популярных) SSG. Правда, чтение подобных материалов не упростит, неким волшебным образом, принятие вышеозначенного решения.

Я решил помочь тем, кто занят выбором SSG. Мой коллега составил список вопросов, призванный упростить подбор генератора статических сайтов. К этому списку прилагается сводка по популярным SSG. Там не хватает лишь оценки того, как разные SSG показывают себя в деле.



Все SSG объединяет то, как именно организована схема их работы. А именно, они принимают некие данные на вход и пропускают эти данные через шаблонизатор. На выходе оказываются HTML-файлы. Обычно этот процесс называют сборкой проекта (build).

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

При этом наша цель — не просто найти самый быстрый SSG. Репутация «самого быстрого» уже закрепилась за Hugo. Я имею в виду то, что на сайте проекта сказано, что Hugo — это самый быстрый в мире фреймворк для создания сайтов. А значит — так оно и есть.

В этом материале приведено сравнение производительности популярных SSG. А именно, речь идёт о времени сборки проектов. Но самое важное здесь — это глубокий анализ того, почему те или иные инструменты показывают определённые результаты. Ошибкой будет, не обращая внимания ни на что, кроме времени сборки проектов, выбрать «самый быстрый SSG» или сразу отказаться от «самого медленного». Давайте поговорим о том, почему это так.

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

1. Как работать с Video и Audio с максимальной точностью.
2. Как оптимально обрабатывать данные с такой скоростью.
3. Как оптимально обрабатывать данные, приходящие по websocket.

Перед рассмотрением каждого вопроса, хочу дать немного контекста.

Перечень услуг, акции, интерфейсы мобильных приложений, тарифы у разных банков сейчас похожи как две капли воды. Хорошие идеи, появившиеся у лидеров рынка, через считанные недели реализуются другими банками. Волна самоизоляций и карантинных мероприятий превратилась в шторм и надолго запомнится особенно тем бизнесам, кто его не пережил и прекратил свое существование. Те, кто выжил – затянули пояса и ждут более спокойных времён, чтобы снова инвестировать, считает Леонид Перминов, руководитель направления «Контактные центры» компании CTI. Во что? По его мнению, в автоматизацию обслуживания клиентов за счет внедрения различных диалоговых роботов на основе искусственного интеллекта. Предлагаем вам материал, опубликованный Материал также опубликован в печатной и онлайн-версии Национального банковского журнала (октябрь 2020).

Изображение взято с сайта www.aerotime.aero

Всем привет, меня зовут Семён, я руковожу разработкой партнёрских сервисов в ДомКлике. Недавно, работая над оптимизацией загрузки страниц, я наткнулся на интересную заметку от Cloudflare о приоритизации потоков при работе с CDN. Я заинтересовался и решил проверить, поддерживает ли наш CDN эту опцию стандарта HTTP/2? Тех, кому интересно узнать больше, прошу под кат, где мы рассмотрим механизм приоритизации HTTP/2-потоков и протестируем работу некоторых CDN.

instant.page — это небольшой скрипт, позволяющий ускорять навигацию по сайту с помощью just-in-time предзагрузки. Когда пользователь наводит курсор на ссылку, страница предзагружается в фоне, и при переходе по ссылке открывается моментально. По тому же принципу работает InstantClick, но он предоставляется уже как отдельная библиотека на pushState и Ajax, с дополнительными модулями вроде прогресс-бара предзагрузки.

Всем привет. В предыдущих статьях мы говорили о базовых вещах оптимизации: раз и два. Сегодня я предлагаю с разбега окунуться в одну часть из тех задач, которыми занимается команда архитектуры фронтенда в hh.ru.

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

• Перфоманс приложения
• Инфраструктура: сборка, тесты, пайплайны, раскатка на продакшене, инструменты для разработчика (например бабель-плагины, кастомные eslint правила)
• Дизайн-система (UIKit)
• Переезд на новые технологии

Если покопаться, можно найти много интересного.

Поэтому, давайте поговорим о перфомансе. Команда фронтенд архитектуры ответственна как за клиентскую часть, так и серверную (SSR).

Я предлагаю посмотреть на метрики и разобраться, как мы реагируем на различные триггеры. Статья будет разбита на 2 составляющие. Серверную и клиентскую. Графики, код и кулстори прилагаются.

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…

В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.

Дружим Angular с Google

Google ненавидит SPA

Когда мы говорим про современные интернет магазины, мы представляем себе тяжелые для понимания серверы, рендрящие тысячи статических страничек. Причем именно эти тысячи отрендеренных страниц одна из причин почему Single Page Applications не прижились в электронной коммерции. Даже крупнейшие магазины электронной коммерции по-прежнему выглядят как куча статических страниц, для пользователя это нескончаемый цикл кликов, ожидания и перезагрузки страниц.

Привет, Хабр!

Мы давно обходили вниманием тему браузеров, CSS и accessibility и решили вернуться к ней с переводом сегодняшнего обзорного материала (оригинал — февраль 2020). Особенно интересует ваше мнение об упомянутой здесь технологии серверного рендеринга, а также о том, насколько назрела необходимость в полноценной книге по HTTP/2 — впрочем, давайте обо всем по порядку.

Здравствуйте, меня зовут Дмитрий Карловский и я… тот ещё токсичный перец. Недавно я источал свои альфа-флюиды на Альфа-банк. Ребята в ответ поступили достойно, и не стали атаковать меня в личку объяснениями, как сильно я не прав, а завели задачу на гитхабе. И даже что-то пофиксили, сделав часть моих претензий несостоятельными. Но не ту часть, где SSR портит всё.

Время утекло, пыль улеглась, и тут история получает продолжение: недавно ко мне обратился продюсер контент-студии Хабра с предложением пропесочить их Торт. Что ж, расчехляем вентилятор!

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.

Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube

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

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

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

1. Зачем думать о производительности
2. FMP, TTI + подробнее в докладе
3. Critical render path, DOM, CSSOM, RenderTree
4. Шаги по улучшению производительности первой загрузки + подробнее в докладе

Учитывая возможные сложности с дорогой на собеседование в одну известную фирму, я запланировал один час как запас времени. Два поезда не пришли и запас времени быстро закончился. В приглашении вместо номера телефона и емейла была ссылка на корпоративный сайт, где можно отправить сообщение любому работнику.

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

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

Позже я заметил, что технологии стали подводить всё чаще и стал меньше на них полагаться.

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

Привет, Хабр! Меня зовут Влад, я лид направления Web Performance в Тинькофф.

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

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

Ведущие игроки IT-индустрии продолжают обращать внимание на важность производительности, проводят масштабные исследования и эксперименты, разрабатывают новые концепции, инструменты и API. А в ближайшем будущем Google и вовсе будет учитывать основные показатели производительности в поисковой выдаче.

Пользователям нравятся отзывчивые интерфейсы, а бизнесу — прибыльные проекты. И если производительность играет в этом не последнюю роль, то почему бы не заняться ее оптимизацией?

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

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

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

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

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

Объяснение я нашел в книге Рэймонда Иммельмана «BOSS: Бесподобный или Бесполезный». В этой книге в формате бизнес-романа рассказывается о том, что поведением людей управляет контекст. И зная этот контекст, можно с высокой вероятностью предсказать, как человек себя поведет в той или иной ситуации.

Что я подразумеваю под «контекстом», я расскажу вам под катом.

Привет Хабр! В предыдущих частях цикла (раз, два) мы рассматривали тайловую архитектуру мобильных GPU, а также классифицировали различные семейства GPU, представленные у пользователей. В этой части мы рассмотрим приемы, которые помогут писать быстрые шейдеры для мобильных GPU.

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

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

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