10 лучших способов оптимизации css стилей

Когда сайт уже готов, часто возникает вопрос об его ускорении что тянет за собой оптимизацию CSS, картинок, JavaScript кода и html.

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

Так я решил научиться основам SEO продвижения, потому что уже тогда создать сайт было не проблемой. После уже пошло программирование, а дальше я остановился как оказалось на любимом деле, это верстка.

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

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

Всегда используйте DevTools для поиска узких мест на сайте

Банальный момент, когда мы вставляем наш сайт в какой-то там Google Page Insights и смотрите что он показывает, а показывает он много красного текста.

Оптимизируйте то, оптимизируйте это, в общем много советов, а как их решать, не всегда понятно. Понятно только то, в какую сторону смотреть – допустим изображения очень большие к примеру, нужно оптимизировать, или css нужно ужать ну и все в таком роде.

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

Дальше заходим в DevTools – я к примеру, использую Google Chrome, чтобы зайти в эту опцию, просто нажми F12, там у нас есть ну много всего, но сейчас конкретно нам нужна вкладка Network.

В ней фильтруем CSS. И получаем такую картинку:

Минификация CSS

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

способы минификации css

Я выделил скорость с которой загружается сайт, у меня это 6 секунд – о боже, 6 секунд, на загрузку всего сайта, это очень много. По там же можно увидеть размеры файлов, скорость с которой он был загружен браузером, ну и где он находится. Берем какой-то сервис по сжатию css. Я например советую CssPortal, там просто столько всего, что глаза разбегаются, но по факту там ну капец сколько всяких настроек.

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

результат минифицированого файла

Хм… результат мне нравится 3 секунды, правда это не идеальный результат, но только из-за одного css, такое прибавление – это большой плюс.

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

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

CSSnano Дополнительное решение для верстальщиков

Я решил пойти дальше и использовал крутой ресурс cssnano – он позволяет не только минифицировать css но и те моменты на которых верстальщики могут не экономить, он тоже включает свой список.

По факту, этот крутой инструмент оставляет всю семантику и при этом удаляет все ненужное, даже если вдруг вы где-то повторяетесь (бывает и такое), или пишете много кода как например когда, не задумываясь верстальщик пишет такой код

margin-top: 10px;
margin-right: 13px;
margin-bottom: 12px;
margin-left: 11px;

  Который по факту можно записать так:

margin: 10px 13px 12px 11px;

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

Используй современную верстку FlexBox и Grid верстку

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

Grid и FlexBox это те вещи которые помогут тебе сделать крутую структуру сайта, причем с минимальным количеством кода, ну и с большим количеством понимания самого кода.

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

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

Самое главное то, что на сегодня очень большое количество браузеров, которыми сегодня пользуются люди в интернете, составляет около 93.85%. Это правда не 100 процентов, но все же это очень огромное количество, и если ты еще не используешь Grid и FlexBox, то просто начни и не пожалеешь.

Ты можешь и не знать, о чем речь сейчас, но я все поясню.

@imports – мы используем внутри css;
А <Link /> - внутри html;

Думаю, ты знал! К примеру, для меня @imports кажется очень крутым и практичным решением, но как оказалось, для браузера его обрабатывать сложнее нежели стили, указанные через <link />

В целом при создании верстки с помощью Angular, я не могу отказаться от использования @imports, но в целом это и не нужно, а все из-за того, что мы используем SPA. Но сейчас не про это.

Собственно, я имел ввиду, что если вдруг ты имеешь возможность заменить использование @imports на <link />, то сделай это, и твой сайт будет быстрее работать. Это может быть доли секунд, но при большой посещаемости и это крутая может даже чувствоваться.

Заменяем картинку на css эффект

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

Советую глянуть на сайт colorzilla, там есть крутой инструмент который можно лишь настроить, а на выхлопе получить css код, который в итоге можно скопировать и вставить.

Удобно, быстро и бесплатно – правда круто?

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

Всегда при верстке избегай правила! important

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

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

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

CSS рефакторинг

Эту фишку я использую в последнее время довольно таки часто, особенно на старых своих проектах. За это время я понял несколько банальных вещей:

  • Иногда сделать рефакторинг бывает практически невозможно, хотя реально;
  • Всегда есть что-то что можно улучшить и облегчить без исключений;
  • Если ты часто меняешь какие-то стили на сайте, то появляется ненужный css;
  • Бывают случаи, когда мы стили закрытых страниц ставим в таблицы общих стилей – желательно такие стили отделить и использовать только там, где они действительно нужны.

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

Делите css на куски и используйте там как где это нужно

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

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

Браузер загружается медленнее, поисковая система итак не видит страницу профиля, в общем ну все теряет логику. Если есть возможность просто подели по кускам весь css.

Таким образом файл в сто килобайт может стать 10-ю файлами по 10кб. Круто? Естественно, ведь сайт начнет грузится быстрее.

Удали ненужные шрифты

Я как-то залез в код этого самого блога. Оказалось, тут было подключено 3 три разных шрифта.

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

В итоге, это дало небольшой плюсик к загрузке страниц.

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

Укажите на элемент, который будет анимирован

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

Так и браузер, пришел загрузить страницу, а тут еще и анимацию заставили подгрузить и выполнить. А что если его предупредить об этом? Тогда он и подготовится, и оптимизирует это дело.

Сделать это можно с помощью правила will-change.

Его поддерживает лишь 92% процента браузеров, но те, которые не поддерживают будут просто игнорировать. В общем выйдет, ты пытался ему сказать, а он проигнорировал. Сам виноватJ

Старайся избегать использование изображений Base64

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

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

И что в итоге?

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

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

Оставьте комментарий