ОПТИМИЗАЦИЯ 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 обработка изображений как в инстаграме
Разумеется, оптимизация кода требует грамотного подхода: необходимо учитывать для чего пишется код и каким должен быть сайт на выходе. Часть советов по оптимизации нерелевантна для особых дизайнерских экзерсисов, поскольку базируется на перераспределении загрузки тех или иных элементов, так что, в зависимости от требований к макету, может испортить впечатление от его внешнего вида.