Гайд по профилированию React приложений

Работаем с React Profiler API для улучшения производительности: https://proglib.io/w/466251d0

#react #performance

​5 техник сплиттинга бандла и ленивой загрузки в React

Реальные примеры с использованием Webpack: https://proglib.io/w/32f612ee

#performance #react

Изучение вкладки Network в Chrome Dev Tools

Учимся изменять производительность веб-приложений с помощью вкладки Network: https://proglib.io/w/9db306dc

#performance

​Оптимизация производительности фронтенда

Хороший лонгрид на выходные:

Часть 1. Critical Render Path
Часть 2. Event loop, layout, paint, composite

#performance

​Управление памятью в JavaScript

Статья рассказывает об управлении памятью и принципах работы сборщика мусора, а также о том, как избежать наиболее распространенных видов утечек памяти: https://proglib.io/w/0ec1c5e3

#performance

​Observer vs Scroll Lazy Loading

Ищем лучший способ загрузки изображений: https://proglib.io/w/26ef4be7

#performance #interface

Как прибирать за собой и почему важно это делать? (Vue/React)

Утечки памяти могут привести к замедлению и падению вашего приложения. Разбираемся, как их избежать: https://proglib.io/w/f33f4384

#performance

Паттерны для Web Vitals

UX-паттерны, оптимизированные с учетом метрик Web Vitals: https://proglib.io/w/b4777c5c

#performance #interface

Лучшие практики для шрифтов

Оптимизация шрифтов для Core Web Vitals: https://proglib.io/w/6b6b2d6f

#performance #webvitals #bestpractices

Разбираемся с мемоизацией в JavaScript

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

https://proglib.io/w/7cc4d18d

#performance

Приемы оптимизации веб-графики в 2021 году

Статья рассказывает о ряде практик, позволяющих оптимизировать загрузку и отрисовку изображений на сайте: https://proglib.io/w/1dd96a03

#performance

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

Автор разбирает:

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

https://proglib.io/w/84141ada

#performance

Утечки памяти в приложениях

Искать утечки памяти в веб-приложениях очень непросто, поэтому почти никто это и не делает.

👉 fuite - это CLI-утилита, которая поможет найти утечки памяти на вашем сайте: https://proglib.io/w/a9767bdd

👉 Detached Elements - новый инструмент в Microsoft Edge DevTools, который тоже умеет обнаруживать утечки, связанные с DOM-элементами вне основного дерева документа: https://proglib.io/w/525096f4

Много утечек нашли? 😏

#performance

Ленивая загрузка компонента в Angular без роутинга

Ленивая загрузка компонентов - это очень полезная функция. В Angular - это простая процедура, реализованная через роутинг. Но, что если вы не хотите использовать роутер или нужно загрузить компонент программно?

https://proglib.io/w/475d7d90

#performance #lazy #angular

​Актуальные форматы изображений в вебе

PNG, WebP или AVIF? Как выбрать формат и правильно подготовить изображение для использования: https://proglib.io/w/d2adfc35

#performance

5 способов уменьшения размера пакетов JavaScript

5 способов уменьшить размер пакетов JavaScript, чтобы избавиться от проблем с производительностью: https://proglib.io/w/bac7390f

#performance #tools

​Оптимизация видео по размеру и качеству

Добавление видео в приложение может повысить вовлеченность и удовлетворенность клиентов. Но при проблемах с воспроизведением обычно происходит прямо противоположное. Разбираемся, как этого избежать: https://proglib.io/w/877f475b

#performance