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

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

🔥 Поддержать автора:

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🎦 Другие видео:

🎦 Плейлисты:

⏰ Таймкоды:
▶ 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.

Song: "Dj Quads - Birds And The Bees"

#frontend #react #javascript #html #css

[svetv]

Тут даже и не для новичков много полезного, лайк однозначно

[mind]

Не зря я подписан)) очень очень круто и интересно.

[mndevitmndevit]

Пожалуй, это самый настоящий клад) премного благодарен за великолепный контент!

[sawer.v]

Супер! Очень полезная инфа, особенно про ресурсоемкость функций и их методов))

[EugeneKoshelev]

Вау! Это видео просто находка! Много ценных мыслей, спасибо!

[INetreba]

Удивительное качество контента! Спасибо

[evgenym.]

Классный контент. У этого канала большое будущее ;)

[denvir]

очень много полезного для себя увидел - спасибо

[d_r_robot]

Топ инфа, спасибо! Можно побольше вот такого пожалуйста?

[Vitalikzzzz]

Бро подскажи какая у тебя тема для vs code ? Контент топ !

[uiqpxyb]

Очень круто, конечно, но, если я правильно понял, мы сжимаем все, но при этом используем библиотеки, которые имеют вес. Оптимизации не видно, в конечном счете

[fvufgtr]

Привет, спасибо за видео, насчёт первого пункта не согласен. Ты скорее всего взял изображение пнг для сравнение без сжатия, пнг намного лучше как мне кажется сжимается, и при сжатии пнг размер у него все же меньше чем у вебп. Для сжатия пнг юзаю tinyjpg, как и говорил ранее размер все же меньше чем при сжатии webp

[dmitry]

Я попробовал библиотечку knip но она почему-то выдала мне целую кучу Unused exports (62) которые на самом деле используются в других файлах через import. Не могу понять почему так происходит.
Вот например: AUTO_POSTING_PERIODS_ARRAY unknown
Идем на 114 строку файлика src/common/constants.js и видим там следующее:
export const AUTO_POSTING_PERIODS_ARRAY = [
{ value: 'PREVIOUS', name: 'Past' },
{ value: 'NEXT', name: 'Next' },
];