Потратил целый день на оптимизацию производительности CSS-селекторов
Трис Мадфорд делится поучительной историей о том, как они с коллегой нашли во вкладке Performance в девтулзах галочку «Enable CSS selector stats (slow)» и увидели, что работа с селекторами занимает целых 270 мс.
Трис слышал, что в современном мире париться по поводу производительности селекторов вообще не стоит, поэтому его сильно смутило такое большое значение. Он переписал всякие непроизводительные селекторы на классы и атрибуты, запустил аудит ещё раз, увидел экономию в 230 мс, обрадовался. Затем проверил то же самое на WebPageTest — а там изначально было около 12 мс, а стало около 10 мс.
Выводы:
- Всегда проверяйте не лабораторные замеры, а RUM (Real user monitoring). Трису это позволило понять, что он потратил целый день почти впустую.
- Галочка «Enable CSS selector stats (slow)» реально замедляет сам процесс профилирования, поэтому её нельзя воспринимать как часть замеров общего перфоманса, слишком большое влияние. Надпись «slow» как будто должна была натолкнуть на правильные мысли, но я бы тоже ошибся, потому что обычно эта надпись говорит про то, что само профилирование будет идти дольше.
- С одной стороны перфоманс селекторов и правда почти никак не влияет на общий перфоманс страницы. Но если вы разрабатываете сервис, где каждая миллисекунда загрузки стоит больших денег бизнесу, то всё-таки 2 мс Трису удалось выиграть всего за день.
https://www.trysmudford.com/blog/i-spent-a-day-making-the-website-go-2ms-faster/
Трис Мадфорд делится поучительной историей о том, как они с коллегой нашли во вкладке Performance в девтулзах галочку «Enable CSS selector stats (slow)» и увидели, что работа с селекторами занимает целых 270 мс.
Трис слышал, что в современном мире париться по поводу производительности селекторов вообще не стоит, поэтому его сильно смутило такое большое значение. Он переписал всякие непроизводительные селекторы на классы и атрибуты, запустил аудит ещё раз, увидел экономию в 230 мс, обрадовался. Затем проверил то же самое на WebPageTest — а там изначально было около 12 мс, а стало около 10 мс.
Выводы:
- Всегда проверяйте не лабораторные замеры, а RUM (Real user monitoring). Трису это позволило понять, что он потратил целый день почти впустую.
- Галочка «Enable CSS selector stats (slow)» реально замедляет сам процесс профилирования, поэтому её нельзя воспринимать как часть замеров общего перфоманса, слишком большое влияние. Надпись «slow» как будто должна была натолкнуть на правильные мысли, но я бы тоже ошибся, потому что обычно эта надпись говорит про то, что само профилирование будет идти дольше.
- С одной стороны перфоманс селекторов и правда почти никак не влияет на общий перфоманс страницы. Но если вы разрабатываете сервис, где каждая миллисекунда загрузки стоит больших денег бизнесу, то всё-таки 2 мс Трису удалось выиграть всего за день.
https://www.trysmudford.com/blog/i-spent-a-day-making-the-website-go-2ms-faster/