Обновить
32K+

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

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

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

Как мы ускоряли комментарии Хабра

Время на прочтение16 мин
Охват и читатели17K
image

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

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

Этому есть несколько причин. Во-первых, Хабр стал одностраничным приложением (SPA, Single Page Application) на Vue, то есть теперь переходы между страницами рисуются на клиенте с помощью JS вместо классического серверного рендеринга (Server-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых девайсах могут тормозить.

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

В октябре мы постепенно выкатывали на часть пользователей обновлённую версию комментариев, над которой трудились последние полгода. Наши новые комментарии должны рендериться быстрее и доставлять удовольствие всем, а не только обладателям топовых MacBook Pro c M1 Max.

Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Читать дальше →

Jivosite больше не снизит Google Speed

Время на прочтение4 мин
Охват и читатели6K

Передо мной возникла одна задачка - повысить Google Speed на одном из интернет-ресурсов.

Задачка ещё та, учитывая то, что большинство пунктов выполнена, но при этом просадка капитальная. А всё из-за чего? Куча метрик, яндекс информеры (оцени Я.Маркет, рейтинг Я.Маркет) и... Jivosite.

Читать далее

Как у нас в Slack проектируются API

Время на прочтение10 мин
Охват и читатели6.7K

Более пяти лет назад мы запустили платформу Slack, предоставив разработчикам легкий способ создавать приложения в Slack и публиковать их в нашей App Directory. Сегодня миллионы пользователей переносят свою работу в Slack, и их приложения, создаваемые более чем 885 000 активными разработчиками, действующими на этой платформе – залог дальнейшего улучшения совместной работы в Slack. 

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

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

Я не утверждаю, что Slack всегда проектировал API хорошо. У нас были ошибки, и платформа определенно могла бы быть удобнее для разработчиков. Но мы признаем эти ошибки и определяем, как их исправить – иногда даже дополнительно упирая на то, чтобы придерживаться какого-то выбора, сделанного в прошлом, тогда как сейчас мы бы с этим выбором не согласились — и в целом можем улучшить для разработчика опыт работы с платформой.

Читать далее

Нужна система с низкими задержками? Выбираем Java вместо C++

Время на прочтение7 мин
Охват и читатели19K

Все разработчики знают, что есть два способа сделать дело: первый — вручную, медленно, нервно, сложно, либо второй – автоматизировано, быстро и еще сложнее.

Например, я мог бы продолжить писать эту статью о том, почему стоит использовать Java вместо C++ при программировании систем с низкой задержкой. Либо мог бы обучить ИИ, чтобы он сделал это за меня. Второй подход, в конце концов, сэкономил бы мне массу времени – искусственный интеллект генерировал бы за меня тысячи статей в секунду – но редактор вряд ли обрадовался бы услышать, что на подготовку первой статьи мне нужно два года.

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

Читать далее

Async/await в TypeScript

Время на прочтение8 мин
Охват и читатели53K

Если вас заинтересовала эта статья, то вы, наверное, несколько разбираетесь в асинхронном программировании на JavaScript и, возможно, интересуетесь, как оно работает в TypeScript.

Поскольку TypeScript – это надмножество JavaScript, async/await там работает точно также, но с некоторыми дополнительными бонусами и безопасностью типов. TypeScript позволяет запрограммировать безопасность типа ожидаемого результата и даже проверить, нет ли ошибок, связанных с типом. Поэтому баги отлавливаются на ранних стадиях разработки программы.

Читать далее

Почему мы отменили гарантию на дизайн

Время на прочтение3 мин
Охват и читатели7.1K

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

Читать далее

Как устранить баг с конвейерами в Factorio

Время на прочтение5 мин
Охват и читатели14K
Factorio — это игра про строительство фабрики, в которой множество конвейерных лент. Реализующий эти ленты код является чудом оптимизации, однако, к сожалению, он не может справляться со всеми конструкциями.

Проблема с суши-конвейером


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

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

Соседняя очередь всегда движется быстрее

Время на прочтение13 мин
Охват и читатели30K

Вы не используете очередь? Вы просто не умеете её готовить. Но прежде чем этому научиться, нужно разобраться, что это вообще такое и где это применяется. Потому что большинству достаточно 10 000 запросов в секунду, а это дает любой брокер. Но если вам нужно больше, придется погрузиться в очереди достаточно глубоко.

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

Читать далее

Насколько быстрее Java 17?

Время на прочтение4 мин
Охват и читатели14K

Решение задачи по составлению расписания турнира с разъездами (TTP) — один из вычислительных тестов в нашем наборе

Позавчера вышла Java 17 с кучей новых функций и усовершенствований. Большинство из них требуют изменения кода. Кроме производительности. Просто заменяете JDK — и получаете бесплатную прибавку производительности. Но насколько большую? Стоит ли она того? Для этого мы провели бенчмарки JDK 17, JDK 16 и JDK 11.
Читать дальше →

Неожиданные причины торможения программ и систем

Время на прочтение29 мин
Охват и читатели54K

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

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

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

Личный кабинет: обрабатываем жалобы клиентов B2B и B2C

Время на прочтение3 мин
Охват и читатели3.7K

Бизнесы работают с клиентами через встречи, звонки, SMS, сайты и сообщения в социальных сетях. Чем больше этого общения вынесено в онлайн — тем оно быстрее для клиента и дешевле для бизнеса.

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

Читать далее

Автоматизация учёта в 1С

Время на прочтение4 мин
Охват и читатели6.3K

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

По результатам обсуждений собрали основной бриф:

Читать далее

Как разработчики Factorio оптимизировали код игры

Время на прочтение11 мин
Охват и читатели16K

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

Дядя Боб


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

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

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

Как провести технический аудит сайта через Screaming Frog?

Время на прочтение9 мин
Охват и читатели23K

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

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

Читать далее

USB over IP: удалённое администрирование

Время на прочтение5 мин
Охват и читатели19K

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

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

Читать далее

«Компилятор всё оптимизирует»? Ну уж нет

Время на прочтение11 мин
Охват и читатели13K
Многие программисты считают, что компиляторы — это волшебные «чёрные ящики», на вход в которые можно подать хаотичный код, а на выходе получить красивый оптимизированный двоичный файл. Доморощенные философы часто начинают рассуждать о том, какие фишки языка или флаги компилятора следует использовать, чтобы раскрыть всю мощь магии компилятора. Если вы когда-нибудь видели кодовую базу GCC, то и в самом деле могли поверить, что он выполняет какие-то волшебные оптимизации, пришедшие к нам из иных миров.

Тем не менее, если вы проанализируете результаты работы компиляторов, то узнаете, что они не очень-то хорошо справляются с оптимизацией вашего кода. Не потому, что пишущие их люди не знают, как генерировать эффективные команды, а просто потому, что компиляторы способны принимать решения только в очень малой части пространства задач. [В своём докладе Data Oriented Design (2014 год) Майк Эктон сообщил, что в проанализированном фрагменте кода компилятор теоретически может оптимизировать лишь 10% задачи, а 90% он оптимизировать не имеет никакой возможности. Если бы вам интересно было узнать больше о памяти, то стоит прочитать статью What every programmer should know about memory. Если вам любопытно, какое количество тактов тратят конкретные команды процессора, то изучите таблицы команд процессоров]

Чтобы понять, почему волшебные оптимизации компилятора не ускорят ваше ПО, нужно вернуться назад во времени, к той эпохе, когда по Земле ещё бродили динозавры, а процессоры были чрезвычайно медленными. На графике ниже показаны относительные производительности процессоров и памяти в разные годы (1980-2010 гг.). [Информация взята из статьи Pitfalls of object oriented programming Тони Альбрехта (2009 год), слайд 17. Также можно посмотреть его видео
(2017 год) на ту же тему.]

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

Улучшаем производительность сайта с помощью PageSpeed от Google

Время на прочтение5 мин
Охват и читатели20K


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

Одним из инструментов для анализа качества и usability страницы с составлением отчёта является PageSpeed Insights (далее просто PageSpeed).

Какие вопросы я затрону в статье:

  • что такое PageSpeed;
  • как измеряется и оценивается производительность;
  • лирическое отступление: critical render path;
  • способы оптимизации PageSpeed;
  • для чего это нужно?

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

Проблемы рендера семи тысяч элементов на Vuetify

Время на прочтение8 мин
Охват и читатели12K

На момент написания статьи я готовился к диплому и писал дипломный проект для нужд Московского Политеха. Моей задачей был перенои существующего функционал из PHP-таблицы во что-то современное с кучей проверок, после чего дополнить данный функционал. Движок - Nuxt, материал-фреймворк: Vuetify.

После написания таблицы и импорта 150+ проектов я впервые столкнулся с проблемой, что я рендерю слишком много, как для движка, так и для самого браузера. Таблицы Vuetify не подходили для моего решения: пришлось начать думать и погружаться. Погрузимся вместе со мной?

Погружаемся

И еще несколько полезных библиотек для Python (с примерами)

Время на прочтение9 мин
Охват и читатели21K

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

Хотелось бы рассмотреть несколько интересных на мой взгляд библиотек.

Ознакомиться

Сравнение производительности CSS и CSS-in-JS в реальном мире

Время на прочтение7 мин
Охват и читатели25K
Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.



Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.
Читать дальше →