Как мы применили инновационную философию к производительности технологий

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

Клиенты заметят несколько изменений при встраивании своих теговых досок в реальном времени, первым из которых является значительное повышение производительности: наши встраивания теперь загружаются на 220 % быстрее, чем раньше. Во-вторых, существенное уменьшение размера страницы. Общий размер страницы увеличился с колоссальных 3,7 МБ до 795 КБ.

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

Давайте на мгновение перейдем к гик-говорю. Во-первых, мы должны немного рассказать о стеке технологий Tagboard. Мы на 100% Node.js. Это позволяет нам писать JavaScript по всему стеку и облегчает нашим инженерам понимание всех слоев нашего стека.

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

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

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

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

Теперь посмотрим на полученные показатели.

Я лично чрезвычайно впечатлен (и вдохновлен) работой, проделанной командой инженеров над этим проектом.

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

Хотя очень важно следить за тем, чтобы мы оставались инновационными с новыми функциями и продуктами, не менее важно выделять время для такого рода обслуживания продукта, чтобы улучшить общее качество обслуживания клиентов. Мы надеемся, что вы заметите разницу и воспользуетесь преимуществами разницы в производительности.