Оптимизация Frontend приложений (23 совета) | Оптимизация Web, полный курс 2024 [для новичков]

✏️ Написать web приложение - дело не самое сложное. А вот сделать так, чтобы оно быстро работало на дешевом Android смартфоне - задача посложнее. В этом видео я расскажу о 23 простых советах, как можно оптимизировать сайт, не прилагая особых усилий, чтобы получить прирост производительности.

🚀 Получить опыт реальной разработки можно тут: https://preax.ru/?i=8fe0b919&erid=LjN...
Помощь во всем • ревью вашего кода • стримы • и многое другое
Реклама ООО «ПРЕАКС ПЛЭТФОРМ» ОГРН 1237700372755, ИНН 9727035595

🚀 Telegram:
https://t.me/kakieToYroki
https://t.me/kakieToYrokiChat

🔥 Поддержать автора:
https://www.donationalerts.com/r/kake...

📚 Ссылки:
Исходный код: https://github.com/R1ON/optimization
Статья про link preload: https://habr.com/ru/articles/445264/

🎦 Другие видео:
🟣 React с полного 0 до реального проекта:    • React с полного 0 до реального проекта. Пр...  
🔵 Chrome Dev Tools полный курс:    • Chrome Dev Tools полный курс [2024]  |  Pe...  
🟢 Полный Roadmap по всему Frontend:    • Как долго учить HTML, CSS, JavaScript, Typ...  
🟡 Как стать MIDDLE FRONTEND?:    • Как стать MIDDLE FRONTEND? [Roadmap 2024]  
🟠 TypeScript базовый курс:    • TypeScript базовый курс (Практика React + ...  

🎦 Плейлисты:
🟣 HTML:    • Уроки по HTML для НАЧИНАЮЩИХ  
🔵 CSS:    • Уроки по CSS для НАЧИНАЮЩИХ  
🟢 SVG:    • SVG для НАЧИНАЮЩИХ  
🟡 JavaScript:    • Уроки по JavaScript для НАЧИНАЮЩИХ  
🟠 TypeScript:    • TypeScript  
🔴 React:    • React для НАЧИНАЮЩИХ  

⏰ Таймкоды:
▶ 00:00 | Введение
▶ 01:03 | Оптимизация картинок
▶ 02:17 | Lottie анимации
▶ 03:42 | Оптимизация шрифтов
▶ 05:06 | Оптимизация svg
▶ 06:26 | Lazy loading для картинок
▶ 07:25 | Библиотека knip
▶ 08:53 | Box-shadow
▶ 10:07 | Сортировка
▶ 11:01 | Один цикл для массива
▶ 12:09 | Один цикл для объекта
▶ 14:02 | Аналоги библиотек
▶ 15:14 | removeEventListener
▶ 16:12 | Lighthouse
▶ 17:01 | Link preload
▶ 17:48 | Async / defer
▶ 19:22 | Debounce / throttle
▶ 21:31 | Виртуализация
▶ 23:40 | Оптимизация сети
▶ 24:17 | MessagePack
▶ 25:58 | Web worker
▶ 28:05 | Optimistic update
▶ 29:40 | Lazy loading для скриптов
▶ 31:06 | Итоги

🔊 Музыка:
"Ghostrifter Official - Lost In Thought" is is under a Creative Commons (CC BY-ND 3.0) license.
http://creativecommons.org/licenses/b...
https://youtube.com/channel/UCoRhkLds...
Music powered by BreakingCopyright:    • 📚 Study + Lofi (Free Music) - "LOST IN THO...  

Song: "Dj Quads - Birds And The Bees"
   / djquadsoffi.  .
Music provided by BreakingCopyright:    • [Non Copyrighted Music] @DjQuadsOfficial  ...  


#frontend #react #javascript #html #css