Как стать автором
Обновить
10.52

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

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

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

Как я сделал SPA в два раза быстрее

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

Существует огромное множество статей про оптимизацию загрузки веб-сайтов, но часто они обходятся лишь общими советами или абстрактными примерами. В этой статье я хочу поделиться своим опытом комплексной оптимизации реального проекта с конкретными примерами, в данном случае SPA, написанном на Vue 3 с использованием Vuetify для части UI компонентов и Firebase для авторизации.

Немного контекста: я работаю frontend-разработчиком в компании, которая в основном занимается разработкой MVP (Minimum Viable Product), но так же и разработкой и поддержкой долгоживущих продуктов. Как раз у MVP бывает много проблем, потому что минимум времени уделяется под рефакторинг и оптимизацию, а проблемы между проектами повторяются, потому что часто используется один стартовый шаблон.

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

Читать далее

Оптимизация бэкенда приложения с примерами на Symfony. Часть 1

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

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

В текущей статье, рассмотрим темы - n+1, пагинация и индексы. Приятного чтения!

Описание приложения

Рассматриваемый проект - это веб-журнал посещений различных мест людьми с возможностью выгрузки и загрузки журнала в формате XML. Пользователь может загрузить журнал посещений в формате XML через форму на странице /upload, и на основе информации из файла будет заполнена база данных. Вся информация о посещениях будет отображаться на главной странице /index. Экспорт из системы осуществляется через команду, которая преобразует информацию из системы в формат XML и выгружает ее в файл (data.xml).

Читать далее

Вовлеченность посетителей сайта: на что влияет, как измерить и как повысить — 4 рабочих способа

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.2K

Про важность вовлечения аудитории в социальных сетях поговорили уже все — повторяться не будем. А что насчет сайта? В статье расскажем, какую роль вовлеченность играет в web продвижении, на какие метрики обращать внимание при продвижении сайта и какая есть корреляция между вовлеченностью и продажами. 

Читать далее

8 шагов по внедрению проекта по управлению нормативно-справочной информацией (НСИ) и расчет окупаемости ROI

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

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

Несмотря на убытки, вызванные некачественными данными, бизнес часто откладывает проект по внедрению системы управления НСИ как дорогостоящий. Я приведу расчет ROI (return of investment – коэффициент рентабельности инвестиций) для телеком-компании, которая уже на 2 год может выйти на окупаемость 192% с опорой на пошаговый план внедрения, который позволит не затянуть проект.

Читать далее

Название имеет значение: как получить оптимизацию, переименовав браузер

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

Всем привет! Меня зовут Максим Смирнов, я руковожу командой, которая работает над производительностью Яндекс Браузера и отвечает за его графическую подсистему. В этой статье я расскажу об одном неочевидном улучшении, которое наша команда внедрила в Браузер для Windows. Если описать его в двух словах, то нам удалось улучшить стабильность и производительность браузера, убедив драйверы видеокарт, что наше приложение — это Google Chrome.

Читать далее

5 лучших практик для успешной стратегии управления мастер-данными

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

Задумывались ли вы, во сколько вашему бизнесу обходятся ошибки в справочниках компании? По данным Gartner — ведущей мировой исследовательской компании, неверные данные о клиентах могут стоить компании 30% ее годового дохода. С точки зрения информационных технологий, данные о клиентах относятся к мастер‑данным или, как они еще называются, — основным данным.

Поделюсь тем, что такое мастер‑данные, почему ими важно управлять и как с помощью внедрения стратегии управления мастер‑данными (master data management — MDM) сократить потери бизнеса.

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

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

Читать далее

“Вы просто не умеете его готовить”, или 10 вредных советов для мониторинга NPS

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

С момента выхода в свет нашумевшей статьи Фреда Райхельда «Одна цифра, которую вам нужно знать для роста» прошло уже почти 20 лет. За это время мир клиентского опыта стал немыслим без мониторинга лояльности клиентов NPS (Net Promoter Score).

В этом материале команда Customer Experience (СX) GlowByte, в которую вселился Григорий Остер, даст вредные советы о том, как сделать ваш индекс NPS высоким и бессмысленным. Они подробно расскажут о том, какие подводные камни в измерении NPS видят академические исследователи, и что можно предпринять, чтобы нивелировать их проявление.

Читать далее

Js, трюки, наблюдения, бенчмарки и как Лиса уничтожает Хром. Я протестировал всё, что вам было лень

Время на прочтение4 мин
Количество просмотров26K
Картинка, конечно, стронгли анрилейтед

Разные трюки я тестировал на Google Chrome 107.0.5304.107 и Mozilla Firefox 107.0 на Windows 10.

Чтобы результаты всегда были железно воспроизводимыми, я отключил все С-State’ы, ядра зафиксировал на 5 ГГц.

У меня 9900К, это Coffee Lake c AVX256, какие оптимизации применит Jit для вашего процессора — я не знаю, результат на вашем компьютере может отличаться от моего, в т.ч. из-за микроархитектуры процессора.

Скорость парсинга кода тоже входит в бенчмарк, поэтому браузер с быстрым парсером будет впереди.
Читать дальше →

Пять шаблонов загрузки данных для повышения быстродействия сайтов

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

Фреймворки вам требуются не для всего, но в случае их использования есть ряд способов, позволяющих добиться максимального быстродействия. В данной статье речь пойдёт о пяти шаблонах загрузки данных, которые при уместном применении позволят значительно повысить производительность приложений или сайтов.
Читать дальше →

Запись в БД некой ИС (информационной системы), которая хочет ПБ (поработать бесплатно) или новые «записки шизоидов»

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

Мотивированный ИТ-шник, он же реципиент почки, хочет что-то поменять в стране в плане трансплантации органов (лист ожидания).

Суть вопроса: какая информационная система (ИС) в РФ подбирает и распределяет донорские органы? В идеале, покажите код (возьмите на работу на 0.01 ставки, вдруг я на что-то сгожусь, как мотивированный разработчик или тестировщик в прошлом).

Читать далее

7-zip — нет времени спешить

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

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

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

Что делает обычный эникейщик в подобной ситуации? Конечно же берет в руки первый подвернувшийся профайлер.

Читать далее

Первый клиент нашего приложения. Часть 3

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

Как при помощи внедрения нашего приложения сеть салонов мебели уменьшила расходы на печать на 30%, «сняла капкан» с ноги сотрудников и забыла о том, что с оборудованием бывают проблемы

Читать далее

Представляем specialist — пакет для оптимизаций Python-кода

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

Specialist


Specialist использует высокоточную информацию о местоположении (fine-grained location), чтобы наглядно показать пользователю, где и как новый адаптивный интерпретирующий транслятор (specializing adaptive interpreter) CPython 3.11 оптимизирует ваш код. Подробности об инструменте — к старту курса по Fullstack-разработке на Python.


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

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

11 – 13 февраля
Epic Telegram Conference
Онлайн
27 марта
Deckhouse Conf 2025
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Ввод-вывод — уже не узкое место

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

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

Один из моих уточняющих вопросов такой: «Что является узким местом производительности вашей программы?» Многие отвечают что-то типа «считывание из входящего файла».

На самом деле, написать эту статью меня вдохновил ответ на чей-то вопрос в Gopher Slack: «Я заметил, что много дополнительной работы приходится на разделение строки и тому подобное, но обычно всё это намного быстрее ввода-вывода, поэтому нас это не волнует».

Я не стал спорить… и пока не проанализировал производительность задачи с подсчётом слов, думал так же. Ведь всех нас этому учили, правда? «Ввод-вывод — это медленно».

Но это больше не так! Дисковый ввод-вывод мог быть медленным 10-20 лет назад, но 2022 году последовательное считывание файла с диска выполняется очень быстро.
Читать дальше →

Как привлечь разработчиков компании к исследованиям клиентского опыта

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

Этим летом команда «ВТБ Онлайн» проводила много исследований для изучения сложившегося клиентского опыта и оптимизации сервиса. Обычно в этих процессах активно участвуют product owner, СJE и бизнес-аналитики. Но тут к product owner напрямую обратился разработчик команды «Мобильного банка» с просьбой подключить его к исследованиям и проектированию клиентских сценариев. 

Постепенно всё больше разработчиков, тестировщиков и системных аналитиков интересовались не только результатами исследований, но и самим процессом. Так начал складываться новый формат работы, который требовал внимания и организации. Меня зовут Вера Нещадина, я лид-исследователь платформы «ВТБ Онлайн». Подробнее в статье расскажу, как мы опробовали новый для себя вид работы в команде и помогли коллегам разобраться в исследованиях на системном уровне.

Читать далее

Как мы делали свое приложение. Часть 2

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

Как мы отказались от аутсорсинга и создали свою команду

Читать далее

Как найти утекшие объекты в дампах памяти Chrome DevTools

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

Утечки памяти в WEB приложениях могут сильно подпортить представление пользователей о ваших продуктах. О том, как тестировать на утечки памяти есть много туториалов. Однако, мало диагностировать наличие утечки - надо ее суметь отладить и исправить. В своей статье мы поделимся алгоритмом, как в нашей компании мы автоматизированно проводим первоначальную отладку утечек памяти и находим ключевые объекты, которые помогают нам в дальнейшем упростить отладку и исправление ошибки.

Читать далее

Резиновый десктопный адаптив: как сделать большие экраны одинаковыми

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

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

Читать далее

Статусы присутствия в 3CX – используем UC правильно

Время на прочтение4 мин
Количество просмотров807

Веб-клиент 3CX – это интерфейс пользователя / оператора колл-центра 3CX, который в последнее время получает множество улучшений. Но в этой статье мы хотим рассказать про различные статусы присутствия пользователя, которые устанавливаются в веб-клиенте. Используют ли ваши сотрудники эти статусы эффективно?

Далее

Как сделать программу на Go быстрее на 42%, изменив один символ

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

Если вы прочитали заголовок и подумали «ну, ты, наверно, сделал сначала что-то глупое», то вы правы! Но что такое программирование, как не упражнения в глупых ошибках? Поиск глупых ошибок — это и есть самое большое удовольствие!

Также стоит заранее сделать оговорку о бенчмаркинге: ускорение на 42% было замерено при выполнении программы с моими данными и на моём компьютере, поэтому относитесь к этому результату с долей скепсиса.

Что делает программа?


codeowners — это программа на Go, выводящая владельцев каждого из файлов в репозитории согласно набору правил, указанному в файле GitHub CODEOWNERS. Правило может гласить, что всеми файлами с расширением .go владеет команда @gophers, или что всеми файлами в папке docs/ владеет команда @docs.
Читать дальше →

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