Оптимизация скорости загрузки сайта. Советы, рекомендации. Pagespeed

Привет! Оптимизация сайта - крайне важная часть тестирования для веб-разработчика. Сайт должен быстро загружаться, адекватно откликаться на действия пользователя, быть оптимизированным.
К сожалению, любые из доступных онлайн-мерил оптимизации (типа Google Pagespeed) не могут дать верную картину по оптимизации, и разработчикам нужно самостоятельно все тестировать, обращать внимание на скорость загрузки, используя данные онлайн-сервисы лишь как рекомендательные.
В этом видео я расскажу и покажу, какие именно техники и приемы нужно применять, чтобы сделать сайт быстрым. Поехали!

Содержание:
00:00 - Вступление
00:29 - Про Google Pagespeed
06:07 - Про шрифты
08:26 - Про изображения
15:19 - Про Webp и проблемы с ним
19:00 - Про стили в теге style
20:55 - Сжатие и минификация (+ про количество файлов)
23:15 - Кэширование
24:38 - Про спрайты
26:07 - Про внешние ресурсы и async
28:49 - Про lazyload картинок, видео, ютуба
31:15 - Lazyload яндекс-карты
38:05 - Заключение

https://github.com/maxdenaro/maxgraph-youtube-source/tree/master/%D0%9E%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0 - исходники видео на GitHub

https://developers.google.com/speed/pagespeed/insights/ - сервис Pagespeed Insights
https://gtmetrix.com/ - сервис GTMatrix

https://habr.com/ru/post/475152/ - интересное мнение о Pagespeed

https://compressor.io/ - онлайн-сжатие изображений
https://tinypng.com/ - онлайн-сжатие изображений
https://squoosh.app/ - онлайн-сжатие изображений

https://github.com/verlok/vanilla-lazyload - плагин LazyLoad
https://youtu.be/IO8ePLdQ-rY - lazyload для видео с YouTube

https://youtu.be/Hc5ivLLxV4Q - сборка Gulp, где рассматриваются свг-спрайты и прочие техники сжатия.
https://youtu.be/ODWF3h2VDLM - видео про SVG, для лучшего понимания использования данного формата.

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

Понравилось? https://clck.ru/Gr9Ec
Моя страница вконтакте: http://vk.com/maxdenaro
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat
#обучение #оптимизациясайта #pagespeed

Видео Оптимизация скорости загрузки сайта. Советы, рекомендации. Pagespeed канала MaxGraph - cайты как страсть