ОПТИМИЗАЦИЯ CSS

Быстрая прогрузка сайта - это не только субъективное удобство для отдельно взятого пользователя, но и экономия трафика и один из важных факторов ранжирования в поисковой выдаче. Недаром говорят время - деньги: чем быстрее прогружается контент страницы и элементы дизайна, тем больше вероятность, что вашими услугами воспользуется пользователь.

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

РУЧНАЯ ОПТИМИЗАЦИЯ

• Определение узких мест производительности с помощью панели разработчика: выделить места, где код подгружается медленнее путём тщательного аудита.

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

• Сжимать объёмы комментариев, используя сокращения и перемещение комментариев к элементам с одинаковыми свойствами по возможности. Объедините между собой элементы с одинаковыми свойствами.

• Уменьшить размер CSS файлов. Используйте GZIP для сжатия данных.

• Оптимизация шрифтов: удаление неиспользуемых шрифтов, использование их в меньшем количестве, контроль подгрузки из файлов. Лучше использовать локально установленные шрифты.

• Оптимизация цвета: сокращения число-буквенного кода типа #000000 на #000.

• Оптимизация отступов: уменьшение padding с четырёх сторон на две, если отступы повторяются.

• Избегать правила !important по мере возможностей. Хорошим тоном считается отсутствие его в принципе. Если в коде их несколько, браузеру приходится проводить дополнительную аналитику каждого, что существенно замедляет загрузку страницы.

• Использовать тег <link> вместо @import: браузеру потребуется больше времени, чтобы загрузить по нему дополнительные таблицы стилей.

• Использование критических кодов и отложенной загрузки.

• Использование разделения кода с помощью JS: на основе медиа-запросов, страниц и компонентов.

• Использование градиентов и SVG вместо изображений, когда есть возможность не использовать их, а ограничиться CSS функциями или как заплатку на время подгрузки изображения. Резервируйте места для изображений, не забывая про адаптивность и использование контейнеров.

• Правильно выбранные размеры элементов помогают браузеру экономить время на прогрузке из-за ускорения вычисления макета.

• Используйте CSS спрайты: CSS спрайты – это один файл, содержащий несколько изображений. Они помогают уменьшить количество запросов к серверу и ускорить загрузку.

• Рекомендуется так же использовать ленивую загрузку изображений.

• Не игнорируйте кэширование браузера. Правильно используйте заголовки кэширования на сервере и указывайте его длительность в метаданных файла.

• Использование Content Delivery Network (CDN) или собственный хостинг.

ОПТИМИЗАЦИЯ С ПОМОЩЬЮ СТРОННИХ ПРОГРАММ \ РЕСУРСОВ

• https://www.cy-pr.com/tools/css/ - оптимизатор CSS онлайн

• https://www.cleancss.com/css-minify/ - минификатор CSS

• https://github.com/addyosmani/critical - инструмент для создания критических кодов

• https://github.com/Pustelto/css-split - инструмент для разделения кодов страниц

• https://purgecss.com/ - удаление ненужных CSS

• https://csswizardry.com/2018/11/css-and … rformance/ - статья от Гарри Робертса, специалиста по работе с быстродействием кодов (англ. язык, тоже собраны советы, как здесь, но много авторского контента: здесь как раз в последней части описано разделение кода на основе компонентов)

• https://specificity.keegan.st/ - визуальный калькулятор специфичности кода

• https://onextrapixel.com/a-look-on-what … ble-boxes/ - использование технологии Flexbox

• https://hictech.github.io/cssPlusWebsite/ - структура макетов на Flexbox

• https://www.developerdrive.com/how-to-c … p-by-step/ - использование технологии CSS Grid

• https://aspectratiocalculator.com/ - калькулятор соотношения сторон

• https://transfonter.org/ - по файлу шрифта выдаёт архив с форматами и корректный CSS

• https://zurb.com/playground/motion-ui - работа с анимацией через CSS

• https://una.github.io/CSSgram/ - CSS обработка изображений как в инстаграме

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