Тотальный разбор лендинга на сайте Мэра Москвы с точки зрения веб-разработчика

У вашего броузера проблема в совместимости с HTML5

Разбираем то, как сделан лендинг на сайте Мэра Москвы - http://mos.ru/2030.
Нас интересует внутреннее устройство, подходы к решению задачи и то, какие проблемные места имеются.

Содержание:

00:00 Введение.
00:32 Результаты PageSpeed.
01:21 Начинаем разбор с разметки. Тег html и скрипт, меняющий его классы. Локальное переопределение с помощью DevTools Chrome.
05:23 Возможная оптимизация картинок техникой Lazy Load.
07:31 CMS NetCat, использованная при создании этого лендинга и зачем оно тут надо.
09:17 Удаление Local Overrides и масштабирование десктопной версии с помощью rem. Переключение на моб.версию.
11:49 Про прелоадер сайта. Тег base и как это влияет на загрузку ресурсов. Директива для старых IE. Viewport, title, description, OpenGraph. Скрипты в head.
15:59 Проблема дублирующихся загрузок шрифтов из-за iframe’ов.
17:36 Стили для внедренных стилей хедера и футера на React’е.
18:41 Стилевой файл основного содержимого, его состав.
20:14 Дублирующиеся handler.js и counter.js.
22:00 Скрипты push-уведомлений, библиотеки для распознавания отпечатков пальцев, метрика Яндекса.
22:54 Что такое rel=“preload”, rel=“prefetch”, rel=“preconnect”, rel=“dns-prefetch” и, вкратце, как работает.
26:47 Оставшиеся подключения скриптов и стилей в head.
27:26 Начинаем разбор body. Структура. Скрипты и в конце. Блок с iframe’ами.
29:56 Библиотека skrollr.js и кратко как она работает в контексте данного лендинга.
32:38 Как устроен блок #2 с анимированными поездами.
35:50 Блок Цели.
36:07 Блок с переворачивающимися в псевдо-3D карточками и связанный с этим небольшой баг.
38:53 Слайдеры на owl-carousel в других блоках
39:10 Окончательно смотрим на весь лендинг в режиме десктоп и мобайл.
40:26 Вопросы от PageSpeed Insights к производительности сайта и как их потенциально можно решить.
46:33 Заключение

????????????
Стань спонсором канала и получи бонусы: https://www.youtube.com/channel/UCt36CWL85NGtOgUMZ2X6x5g/join

????????????
Avocode - лучше обезболивающее для того, кому приходится верстать из PSD, AI, XD, Sketch и Figma. Регистрируйся и получи скидку 10% на первую покупку, введя в соответствующем поле промо-код ‘nikita’: https://avocode.com/pricing

Обучающие ролики по Avocode: http://makeweb.me/avocode-lessons-yt-desc

✊✊✊
Персональные уроки по веб-разработке: http://makeweb.me/lessons-video
Отзывы: http://makeweb.me/lessons-feedback
Связаться: https://vk.com/write-96139053 / [email protected]

✍✍✍
Присоединяйся к нашему Telegram-чату тут http://makeweb.me/telegram-mw-1 или, если не работает, тут http://makeweb.me/telegram-mw-2
Или по имени чата в поиске - @makewebme