jamtuson

Охх и извращения.
Используйте rem вместо пикселей. Версия для слабовидящих будет скейлиться благодаря увеличению font-size для html

https://tympanus.net/codrops/2019/10/14/how-to-cre...

Не сделать на css и с png так красиво. Будет очень кривая пародия.
Возьмите несколько 3d моделей листиков, создайте сцену, загрузите модель в three.js и заанимируйте плавную анимацию слева на право с радомной задержкой каждого листика

upd. если надо проще, то вырезаете видео на 5 секунд и крестите переход с pjax
видео будет весить очень мало. метров 4-5 и тормозить не будет

1. Менять картинки на webp очень сложно. Можно обойтись оптимизированными изображениями. Там, где можно использовать jpg используйте jpg, а иначе png/svg.
Если картинки высокого разрешение, то можно использовать встроенную ленивую загрузку изображений
2. Создайте критичные стили и грузите их в теги style прям в шапку. Остальные все стили переносите в футер. Можно и шрифты туда же. Если шрифты тяжелые, то можно использовать асинхронную загрузку шрифтов
3. Настройте кеширование всего и вся: стили, запросы, изображение, скрипты. Если wp у вас, то достаточно будет плагина.
4. Всякие метрики/аналитики, если возможно, тоже грузить в футере.

1. Создаете canvas элемент.
2. Строите линию из точек с интервалом n между ними.
3. Объединяете их кривой Безье
4. Определяете положение курсора на интервале
5. Отрезок нужного размера заменяете шумом 3-x кривых Безье

1. Верстаете обычный блок(без скосов)
2. Конвертируете блоки в канвас https://html2canvas.hertzen.com/
3. Создаете кривую в канвасе и делаете clip() элементам
4. Подменяете блоки на canvas - элементы

Потому что анимируешь max-height
Тебе стоит получать высоту твоего меню и уже от этого плясать.

Все фигня. Ускорить верстку можно на порядок, если не смотришь на экран после каждого изменения.

Учитесь верстать определяя на глаз цвета, отступы, размер шрифтов и большинство вещей.
Когда верстаете, то у вас в голове должна быть картинка того, что вы пишите в css и чем больше профессионализм, тем меньше расхождения между реальностью и картинкой в голове.
Остальные вещи не так ускоряют верстку, как такой навык

Задавать изображение не через img, а через фон(background-image).

Очень похоже на barbajs