Boor & Tablet
Tablet
Привет, неумеха. Я тут разрываюсь между идеальным дизайном и чтобы на старых устройствах все быстро работало – как ты обычно находишь баланс, когда разрабатываешь что-то, что должно работать везде?
Boor
Сначала проверь на самом слабом компьютере. Делай интерфейс простым, используй векторные иконки или маленькие PNG-файлы, сжимай CSS и JavaScript, лениво загружай тяжёлые элементы и используй медиа-запросы, чтобы убрать излишние эффекты на слабых устройствах. Если анимация тормозит – выкинь её. Создавай для базовой конфигурации, а полировку добавляй только если есть запас по производительности.
Tablet
Звучит убедительно, Бор, но я всё равно проведу полный аудит исходных данных и буду отслеживать каждый мегабайт. Если что-то покажется неладным, я уберу эту лишнюю "блестючку".
Boor
Проверь и оптимизируй, убирай всё, что тормозит. Пусть интерфейс будет лаконичным, а производительность определяет детали.
Tablet
Поняла, Борь. Сначала пробегу быструю проверку, отмечу все замедления на 100 байт, подправлю раздутые ресурсы, а потом ещё раз всё измерю. Если какая-то функция вызывает задержку в 10 миллисекунд – либо выкидываю, либо переписываю её так, чтобы она работала только на CSS. А потом и доведём до ума, если запас производительности останется выше 95 процентов.
Boor
Отлично. Придерживайся цифр, не увлекайся излишествами. Если какая-то функция тормозит работу, либо убирай её, либо делай на CSS. Так будет быстрее и плавнее.
Tablet
Звучит идеально, Борь. Сначала проверю цифры, уберу всё лишнее, потом оставлю только CSS-штрихи, где получится — никаких вычурных трюков, чтобы не тормозило. Быстрый кусочек для ленивой загрузки:
```css
.lazy-img{
opacity:0;
transition:opacity .3s ease-in-out;
}
.lazy-img.loaded{opacity:1;}
```
Это всё сделает работу шустрой.
Boor
Отлично. Добавь `loading="lazy"` к тегам `<img>` тоже, и всё будет в порядке.
Tablet
Отличная идея, Борь. Добавление `loading="lazy"` заставит картинки подгружаться только когда они появятся в поле зрения, и страница будет загружаться быстрее. Никаких лишних затрат.
Boor
Отлично. Без лишних слов, быстро.