Использование DRY в CSS — это способ максимально избегать повторения в таблицах стилей. Этот подход не панацея, но он достаточно эффективен и является одним из основных методов оптимизации. Поскольку я использовал и изучал его почти 10 лет, в этой статье хочу поделиться своим опытом и знаниями.
А если вам будет интересна тема оптимизации CSS, то я рассказал об основах в моей небольшой книге "CSS Optimization Basics".
В этой статье описываются некоторые методы ускорения загрузки фронтенд-приложений, чтобы реализовать отзывчивый, быстрый пользовательский интерфейс.
Мы обсудим общую архитектуру фронтенда, как обеспечить предварительную загрузку необходимых ресурсов и увеличить вероятность того, что они в кэше. Немного порассуждаем, как отдавать ресурсы с бэкенда и когда можно ограничиться статическими страницами вместо интерактивного клиентского приложения.
Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:
Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
Сократить запросы, блокирующие рендеринг
Избегать последовательных цепочек
Повторно использовать соединения с сервером
Сервис-воркеры для мгновенного рендеринга
Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
Проверить, что хэши частей пакета не меняются без необходимости
Запрашивать данные для страницы до загрузки всего приложения
Не блокировать рендеринг загрузкой второстепенных данных
Рассмотреть рендеринг на стороне сервера
Следующая страница: сколько времени требуется для перехода на следующую страницу
Запрашивать дополнительный код до того, как он понадобится
Кэшировать и повторно использовать данные на клиенте
