RUVDS.com corporate blog
Website development
JavaScript
ReactJS
Comments 20
+3
Почти 60% посетителей сайта покидают его в том случае, если его загрузка занимает более 3 секунд. 80% таких посетителей на сайт уже не возвращается.

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

0
Особенно бесит, когда анимация сделана ради анимации, и приходится либо ловить ссылку мушкой, либо ждать завершения «вау я у мамы дезигнер» выпендрежа.
0
Тут ещё смотря что имеется в виду под загрузкой.
Если я зашёл и у меня белый экран, то да, секунда 2-3 и человек закроет. (но лично я проверю расширение NoScript).
В вот, если появится хотя бы полоска загрузки, или ещё что-то указывающее что сайт загружается, и надо подождать, то ок.
0

styled-componets v3 были в 3 раза медленнее обычного css. Половина этих лагов связна с поддержкой тем, который мы даже не использовали. И используя styled-components стоит понимать что вместо обычного 'div' строки, которая уходит в недра react, получается class MyCustomDivWithStyles extends React.Component. Это тысячи новых классов на пустом месте, если использовать везде.


Если в проекте уже используется styled-components, то можно убрать его на верхних уровнях дерева (всякие layouts и тп) и прилично ускорить приложение. Те styled-components плюс минус нормально работает для всяких Button, а для MainLayout — дикий ужас.

0

Только уже давно вышла v4, которая значительно быстрее.
Уже почти вышла пятая версия: 50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes!


Честно говоря, проблема с множествами однотипными компонентами решается их мемоизацией. Этот самый MainLayout значительно ускорился, когда я добавил React.memo().

0

Может быть у меня психологическая травма после переписывания styled-components на css. Но это увеличило время первого рендера (react.memo) тут не поможет с 800мс до 200мс.

0

Не важно, первый рендер тоже будет ускорен. Вы же не используете на странице каждый раз каждый элемент с новым набором props? Всякие тормозящие обертки из <Box> или <Grid> будут закешированы после первого же использования в корне лэйаута.

0

Кстати, когда вы получали свою травму (no offence), как вы переделывали динамические свойства? Каждый раз использовали state? Или написали свой переключатель (классов и/или инлайн-стилей)?

-1
получается class MyCustomDivWithStyles extends React.Component

Используйте функциональные компоненты и makeStyles
0
Начните со встроенной в Chrome вкладки Audits (там Google Lighthouse)
0
Я — большой любитель Material Design. Для React написана замечательная Material-библиотека, которая называется material-ui. У этой библиотеки есть лишь одна проблема. Это — её размер. Она очень велика. Даже если пользоваться лишь отдельными её компонентами, в бандл попадёт её реализация механизма CSS-in-JS, а это — примерно 30 Кб минифицированного кода. Каковы альтернативы? Я решил построить собственные компоненты, стилизуя их в процессе создания приложения.

Обнять и плакать. babel-plugin-import

0

Так он же выше и пишет, что "пользоваться лишь отдельными её компонентами". Что мол сборка-минимум уже 30 KiB

+2
Хотел бы добавить, что проблем добавляют сторонние скрипты типа яндекс метрик и вконтактов, залинкованные синхронно. К примеру в Украине эти ресурсы заблокированы и сайты с такими линками не грузятся практически вообще. И сколько не ускоряй React, пользователь уйдет.
+3

Я отдаю себе отчет в том, что это перевод, но все же мне кажется, что в первой фразе поста:


Почти 60% посетителей сайта покидают его в том случае, если его загрузка занимает более 3 секунд. 80% таких посетителей на сайт уже не возвращается.

утеряно начало с упоминанием британских ученых.

0

Еще можно вот такое чудо сделать и выйграть дофига килобайтов


.babelrc


presets: [
  ['@babel/react', {pragma: 'h'}]
]

webpack.config.js


plugins: [
  new webpack.ProvidePlugin({
      h: ['react', 'createElement']
  })
]
0

а маленьким шрифтом со звёздочкой не стоило добавить: "на ранних этапах создания приложения"? :)


Хак с Pragma-h после gZip уже не будет таким впечатляющим. А вот вырезание prop-types должно дать ощутимый прирост.

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

Посмотреть этот слайдер в действии можно здесь.
Да что уж, охрененно выглядит, просто охрененно!</sarcasm>
Демонстрация в ФФ
Only those users with full accounts are able to leave comments. , please.