Избегайте «расточительного» CSS в ваших проектах

Кажется, что веб-дизайнеры постоянно стремятся оптимизировать свои творения. В краткосрочной перспективе это улучшает производительность. В долгосрочной перспективе это также может упростить техническое обслуживание.

Довольно часто это означает оптимизацию изображений, внедрение кэширования страниц и доставку файлов через сеть доставки контента (CDN). Это все действенные меры. Но один момент, которому не уделяется достаточного внимания, — это потенциальное раздувание CSS веб-сайта.

Хотя вы можете минимизировать свои таблицы стилей или передавать их через CDN, можно сделать больше. В частности, избавление от ненужной разметки, которая не используется, и ужесточение стилей, которые все еще актуальны.

Лучше всего это делать с самого начала процесса сборки. Но также можно облегчить нагрузку на существующие веб-сайты. Давайте рассмотрим связанные с этим проблемы, а также некоторые инструменты и методы, которые могут ускорить работу веб-сайта.

Борьба с раздуванием, встроенным в темы и фреймворки

Раньше считалось, что веб-сайты были созданы с нуля. Это был отличный подход, поскольку дизайнеры могли включать только те стили и сценарии, которые были необходимы. Если все сделано с осторожностью, этот процесс может привести к точно настроенному веб-сайту.

Конечно, есть ряд причин, по которым многие из нас отказались от этой практики. Это просто неэффективно с точки зрения временных и бюджетных ограничений.

Современные веб-сайты часто строятся поверх готового продукта. Это может быть CSS-фреймворк, такой как Bootstrap, или сложная тема WordPress. В некоторых случаях тема CMS может даже включать фреймворк.

Эти продукты должны быть универсальными. Включение всего, что вам может понадобиться, значительно ускоряет разработку. К сожалению, этого нельзя сказать об их влиянии на производительность.

Итак, что можно сделать, чтобы улучшить ситуацию?

Используйте компонентные или упрощенные фреймворки, где это возможно

Теоретически можно получить преимущества фреймворка, избегая при этом раздувания. Этого можно достичь с помощью пакетов на основе компонентов, которые позволяют загружать определенные функции, оставляя другие. Вышеупомянутый Bootstrap допускает такой тип настройки — до определенной степени.

Другой альтернативой является Tailwind CSS, который предоставляет базовые стили и предполагает, что вы будете строить на их основе. Если вы ищете отличную отправную точку, а не более законченный продукт, это может подойти.

Нет ничего плохого в использовании фреймворка. Но ищите тот, который либо: а) позволяет выбирать, какие компоненты загружать, либо; б) предлагает базовую таблицу стилей, которую можно легко настроить. В любом случае, ваш проект выиграет от снижения нагрузки.

Что делать с темами CMS?

Такие продукты, как коммерческие темы WordPress, могут быть сложными, поскольку они часто включают в себя множество стилей — нужны они вам или нет.

Вполне возможно, что конкретная тема будет хорошо организована до такой степени, что будет достаточно просто удалить из очереди таблицы стилей, которые вам не нужны. Может быть даже панель параметров темы, которая позволяет сделать это несколькими щелчками мыши. Впрочем, это скорее исключение, чем правило.

Лучший способ избежать раздутой темы — создать свою собственную. Например, стартовая тема WordPress предложит некоторые базовые CSS-стили, которые вы можете настроить. Это помогает обеспечить более компактную таблицу стилей и снимает, по крайней мере, небольшую часть накладных расходов, связанных с CMS.

Наведите порядок в существующих таблицах стилей

Смещение нашего фокуса на существующий веб-сайт, расхламление и рефакторинг CSS можно выполнить одним из двух способов:

Просмотр стилей вручную

Запуск вашего любимого редактора кода и открытие таблиц стилей вашего сайта — всегда хорошее начало. Да, это может быть утомительным опытом. Но это также эффективный способ позаботиться о низко висящих плодах.

Нет необходимости тщательно изучать каждую строку CSS. Вместо этого идея состоит в том, чтобы найти любые элементы, которые, как вы знаете, не используются или не так эффективны, как могли бы быть.

Например, предположим, что вы запускаете веб-сайт WordPress, на котором есть некоторые пользовательские стили, перезаписывающие стили плагина. Что делать, если вы больше не используете этот конкретный плагин? В этом случае стили можно легко удалить.

Или, возможно, есть несколько стилей, которые вы используете только время от времени, например, во время зимних каникул. Возможно, стоит переместить эти стили в отдельный файл и вызывать их только при необходимости.

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

Если дизайну вашего сайта больше пары лет, вы можете быть удивлены тем, сколько лишних стилей вы можете найти.

Используйте автоматизированный инструмент

Существует ряд инструментов, которые сканируют ваш сайт (или, по крайней мере, его часть) и выдают список неиспользуемых CSS. Однако не задерживайте дыхание в ожидании совершенства.

Подобно автоматизированным инструментам доступности, неиспользуемые сканеры CSS могут дать вам ограниченное количество информации. Поэтому лучше относиться к результатам с недоверием и использовать их в качестве ориентира, а не окончательного ответа на ваш вопрос.

Крис Койер из CSS-Tricks написал выдающуюся статью по этому конкретному вопросу, которую стоит прочитать. Он не только тестирует некоторые из этих инструментов, но и рассматривает более серьезные проблемы, такие как медиа-запросы.

Однако, если вы хотите попробовать один или несколько из этих инструментов, вот несколько наиболее популярных вариантов:

• JitBit
• ОчиститьCSS
• ОчиститьCSS
• Неиспользуемый CSS

Сочетание автоматизированного инструмента и ручной проверки, вероятно, является лучшим способом действий. Выполнение обоих даст вам более полную картину потенциальных оптимизаций производительности. Вы можете не уловить каждый элемент, но все же есть возможность оказать ощутимое влияние. Вы можете сделать некоторые до и после тестирования с помощью такого инструмента, как GTmetrix, чтобы увидеть результаты.

Когда дело доходит до CSS: не тратьте зря, не хочу

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

На это стоит обратить внимание с самого начала проекта. Стремясь уменьшить вес таблицы стилей, вы помогаете оптимизировать свой сайт до последней капли.

Если ваш веб-сайт уже доступен всему миру, есть еще положительные шаги, которые вы можете предпринять. Просмотрите CSS и найдите элементы, которые нужно упростить или удалить. Используйте один из множества автоматизированных инструментов, чтобы найти элементы, которые вы могли пропустить.

Суть в том, что сокращение вашего CSS до самого необходимого — не идеальный процесс. Тем не менее, это все еще стоит вашего времени и усилий.