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

✏️ Написать web приложение - дело не самое сложное. А вот сделать так, чтобы оно быстро работало на дешевом Android смартфоне - задача посложнее. В этом видео я расскажу о 23 простых советах, как можно оптимизировать сайт, не прилагая особых усилий, чтобы получить прирост производительности. 🚀 Получить опыт реальной разработки можно тут: https://preax.ru/?i=8fe0b919&erid=LjN8JxK8H Помощь во всем • ревью вашего кода • стримы • и многое другое Реклама ООО «ПРЕАКС ПЛЭТФОРМ» ОГРН 1237700372755, ИНН 9727035595 🚀 Telegram: https://t.me/kakieToYroki https://t.me/kakieToYrokiChat 🔥 Поддержать автора: https://www.donationalerts.com/r/kakeitoyroki 📚 Ссылки: Исходный код: https://github.com/R1ON/optimization Статья про link preload: https://habr.com/ru/articles/445264/ 🎦 Другие видео: 🟣 React с полного 0 до реального проекта: https://youtu.be/NDPiaUfsnLA 🔵 Chrome Dev Tools полный курс: https://youtu.be/THO33-LlXGA 🟢 Полный Roadmap по всему Frontend: https://youtu.be/WZAZXHe6wxg 🟡 Как стать MIDDLE FRONTEND?: https://youtu.be/_xtR5pdf8nU 🟠 TypeScript базовый курс: https://youtu.be/gL0mYPjwoII 🎦 Плейлисты: 🟣 HTML: https://www.youtube.com/playlist?list=PL6NCtzCz-4pQX0CZIwP7i0_mamieywtyw 🔵 CSS: https://www.youtube.com/playlist?list=PL6NCtzCz-4pQZ-uueXnuIcQMs085CAhty 🟢 SVG: https://www.youtube.com/playlist?list=PL6NCtzCz-4pRcotLgtXTbNZqE0g_AqjMk 🟡 JavaScript: https://www.youtube.com/playlist?list=PL6NCtzCz-4pTxrzj7Iy4W9fAi60YmwXFl 🟠 TypeScript: https://www.youtube.com/playlist?list=PL6NCtzCz-4pTj3s71Mbx5RZNPkh7pe7Wb 🔴 React: https://www.youtube.com/playlist?list=PL6NCtzCz-4pR_xzjVY6wpSTppLdJJmUqF ⏰ Таймкоды: ▶ 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: https://youtu.be/u5QBqjuMUaQ Song: "Dj Quads - Birds And The Bees" https://www.youtube.com/c/DjQuadsOffi... Music provided by BreakingCopyright: https://youtu.be/ZNadyNG6U-s #frontend #react #javascript #html #css