Оптимизация CSS


Содержание

Оптимизация загрузки CSS

Несмотря на то, что введение технологии CSS стало серьезным новшеством, которое до сих пор практически не имеет недостатков, важно понимать, как использование скриптов CSS может влиять на скорость загрузки веб-страницы, особенно когда речь заходит о ее визуализации. При этом это может оказывать прямое влияние на SEO оптимизацию в Белореченске. А оптимизированный сайт имеет более высокие позиции в поисковой выдаче. Если доставка CSS плохо оптимизирована, браузер будет вынужден ждать, пока не будут загружены и обработаны эти таблицы стилей, прежде чем полностью отрендерить (и, таким образом, отобразить посетителям) страницу. Вот почему важно оптимизировать доставку CSS и знать о подводных камнях, которые могут замедлить работу веб-страницы.

Объединяйте скрипты CSS

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

Сжимайте новые скрипты CSS

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

Повысьте приоритет стилей для первоочередного контента

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

  • Сначала определите, является ли ваш новый объединенный скрипт CSS большим или маленьким по размеру. Если скрипт маленький, то вставьте его в тег head страницы. Как правило, загружать в отложенном режиме скрипты CSS небольшого размера не имеет смысла, так как вы не получите от этого никакой выгоды.
  • Извлеките критически важный CSS код. Обычно, это те стили, которые важны для корректного отображения первоочередного контента. Хороший способ сделать это – использовать пакет Node.js от Addy Osmani, который может выполнить эту задачу в автоматическом режиме. Этот метод требует доступа по SSH, поэтому он подойдет не для всех. Другие варианты – это использовать один из онлайн-генераторов CSS или просто сделать это вручную.
  • Теперь, когда у вас есть критически важный для рендеринга код CSS, поместите его в HTML тег head. Остальные стили загрузите в отложенном режиме внизу страницы.

Старайтесь не использовать CSS директиву @import

Директива @import позволяет импортировать внешние CSS файлы в код CSS скрипта. Это плохо для скорости загрузки веб-страницы, так как директива @import загружает каждый внешний файл по отдельности, а не параллельно с другими файлами, необходимыми для рендеринга конкретной страницы. Это также создает ненужные HTTP-запросы.

Старайтесь не использовать атрибут STYLE в HTML тегах

Следует убрать весь CSS, который используется в теле HTML (например:

), и переместить эти стили в тег head. Внутритеговые стили могут негативно сказываться на скорости загрузки страницы, так как они блокируют рендеринг.

Оптимизация и сжатие CSS в Page Speed — как отключить внешние файлы стилей и объединить их в один для ускорения загрузки

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу нарушить традицию (писать во все рубрики равномерно) и предложить вашему вниманию вторую часть статьи про то, как повысить скорость загрузки сайта, которую можно прочитать тут.

Дело в том, что гораздо проще писать, что называется, по горячим следам, а не вспоминать потом: «а как я смог это сделать?», что бывает довольно затруднительно, особенно по прошествии некоторого времени.

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

Оптимизация и сжатие CSS в Page Speed

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

После произведенных нами настроек Web сервера, этот плагин уже перестал ругаться на сильное снижение скорости из-за «Leverage browser caching»:

Следующая по важности рекомендация и одновременно замечание, которое теперь присутствует в его окне при анализе скорости загрузки моего блога — это «Minify CSS» (оптимизация, сжатие файлов со стилевым оформлением, про которые вы можете почитать подробнее в статьях моего справочника по CSS, находящегося здесь).

По сути, Пейдж Спид указывает на то, что практически все стилевые файлы, которые подгружаются в браузер посетителя вместе с web страницей моего блога, могут быть существенно оптимизированы (сжаты) для снижения их веса.

Если щелкнуть по плюсику рядом с «Minify CSS», то откроется список объектов, которые желательно было бы подвергнуть оптимизации (сжать):

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

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

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

Судите сами, так выглядел он до того, как мне удалось его сжать в Page Speed:

А так выглядит после его оптимизации:

Итак, для этого вам нужно будет всего-навсего скачать по ссылке «Save as» сжатую версию. Скачали?

Теперь подключаетесь по FTP, заходите в ту папку где у вас живет оригинальный файл таблиц стилей (см. путь в окне Page Speed) и заменяете старый не сжатый на новый (тот, который вам оптимизировали), не забыв дать ему такое же название, как и у оригинала, иначе таблицы каскадных стилей работать не будут. Усе, наслаждаетесь теми миллисекундами, на которые ускорилась загрузка вашего сайта.

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

Как объединить внешние CSS в один общий файл

Но самым оптимальным вариантом было бы объединить все внешние CSS в один, а уже потом его сжать средствами Page Speed. Это будет идеальный вариант, позволяющий выгадать еще несколько миллисекунд в скорости загрузки. Собственно, и сам плагин подсказывает именно такой вариант в поле «Combine external CSS»:

Здесь он нам предлагает объединить все найденные им внешние файлы (внешние скрипты тоже можно будет объединить в один — «Combine external JavaScript»), подгружаемые в браузер посетителей, в один общий, но при этом нужно будет обязательно отключить все лишние файлы стилей. Проблема возникает в том, что многие из них создают и подключают плагины или другие расширения вашего движка.

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

Если functions.php вы не найдете, то можете его просто создать, например, в редакторе Notepad++ и загрузить в папку с темой оформления WordPress. Но, наверняка, он все же найдется. В него вам нужно будет добавить небольшой кусочек PHP кода, такого вида:

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

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

Вроде бы все просто — отключили и все, можно про это забыть. Так, да не так. Предварительно ведь еще нужно найти в коде каждого WP плагина (в котором отключаем подгрузку стилей) тот регистр, который отвечает за их подключение.

Если вы внимательнее посмотрите на приведенный выше код, то заметите строки, где перечислены эти самые регистры:

Т.е., например, для замечательного WordPress плагина постраничной навигации WP-PageNavi регистр будет называться «wp-pagenavi», а для плагина Comment Form Quicktags — «cfq». Если вы используете те же самые расширения, что и я, то можете не лазить в их PHP код, а позаимствовать регистры из приведенного кода.

Илон Маск рекомендует:  Что такое код cpdf_set_viewer_preferences

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

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

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

Наверное, вы представляете о чем идет речь. Такое CSS свойство может, например, иметь такой вид:

Запись url(flags.png) означает, что картинку под названием flags.png нужно будет искать в той же самой папке, где находится сам файл таблиц каскадных стилей. Но дело в том, что когда вы скопируете содержимое всех стилей плагинов, то в них наверняка будут использоваться такие вот относительные пути до изображений.

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


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

Кстати, после того, как у вас весь стилевой код будет находиться в одном общем файлике, не забудьте его еще раз сжать через Page Speed, найдя в его окне строку под названием Minify CSS и щелкнув по плюсику рядом с этой надписью, а затем скопировав оптимизированный файлик «Save as». Далее замените им оригинальный файл в папке с используемой вами темой оформления WordPress.

Отключение внешних CSS для ускорения сайта на примере

Давайте теперь на конкретном примере я попробую показать, где нужно искать название регистра WordPress плагина, позволяющего отключить подгрузку его стилевого оформления. Собственно, для поиска нужного регистра нам нужен будет файлик с расширением PHP из папки с этим плагином. Вообще, все они живут в одной и той же папке:

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

Как видите, у меня выбран вид, который был во второй версии плагина, а цветовая схема SyntaxHighlighter используется дефолтная. Теперь мне нужно будет перейти в его папку, подключившись к блогу по ФТП:

скопировать содержимое двух CSS файликов, которые мы планируем отключить: shCore.css и shThemeDefault.css , т.к. именно на них нам показывает пальцем Page Speed (ну, и в настройках у меня выбрана дефолтная тема, для которой, вполне логично, нужен CSS с соответствующим названием).

После этого открываете на редактирование:

Затем осуществляете поиск с помощью возможностей Notepad++, о всех достоинствах которого тут читайте. Искать нужно что-нибудь содержащее «CSS». В syntaxhighlighter.php это будет участок кода:

Смотрим, какие именно регистры позволят нам отключить подгрузку стилей shCore.css и shThemeDefault.css . Копируем их названия (в моем случае это будут: syntaxhighlighter-theme-default и syntaxhighlighter-core ) и добавляем в functions.php (из папки с вашей темой оформления) две дополнительные строчки в описанный чуть выше кусочек кода:

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

Как упороться по оптимизации скорости загрузки страниц

При оптимизации скорости загрузки сайта я анализирую результаты автоматического тестирования в сервисах Google Lighthouse, Google PageSpeed Insights и Webpagetest.org и только потом готовлю рекомендации. Эти же инструменты мы будем рассматривать в статье.

Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

Важно помнить, что сайт состоит не только из главной страницы, но и многих других. Оптимизация всего ресурса начинается с исследования каждой типовой страницы. Например, на этом сайте я использую два шаблона: главная и статья. При анализе скорости загрузки нужно анализировать каждую такую шаблонную страницу. Нельзя забывать про «маловажные», которые не приносят трафика — поисковая система оценивает как показатели отдельных страниц, так и всего сайта в целом.

Статья поделена на несколько блоков для удобной группировки задач по оптимизации. Также постарался распределить их по сложности исполнения (хаха, нет).

Содержание:

Оптимизация изображений

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

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

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

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

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

При возможности, для части изображений страниц рекомендуется использовать отложенную загрузку (Lazy Load), которая позволит первоначально загрузить только те изображения, которые видны пользователю при открытии страницы. Все последующие изображения будут догружаться по мере скроллинга.

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS


Загружать только те CSS, которые используются на странице. Браузеру не следует загружать лишние правила или отдельные файлы таблиц стилей, если они не используются на рассматриваемой странице. Подробная рекомендация представлена на данной странице официальных рекомендаций от Google.

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

Лучше отказаться от загрузки небольших CSS файлов. Если отдельный документ CSS содержит 10-20 строк кода, содержимое этого файла рекомендуется встроить сразу в html код с помощью тега . Это позволит сократить время обработки правил CSS, минуя стадию загрузки отдельного файла (опять же, оптимизация серверных реквестов).

Использование только файлов CSS и тега

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

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

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

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

Оптимизация JS

Аналогично файлам CSS, браузер может задерживать время отображения контента страниц сайта из-за загрузки и обработки файлов JS. Большинство рекомендаций повторяются, однако есть дополнения.

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

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

Встраивание JS скриптов в HTML-код

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

Как оптимизировать CSS?

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

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

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

Во-первых, обязательно используйте обобщённые свойства. Вы можете сэкономить несколько строчек, если вместо margin-bottom, margin-left, margin-right и margin-top будете использовать один margin со значениями четырёх предыдущих, например: body < margin: 10px 2px 10px 5px; >.

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

Никто не сомневается в важности комментариев. Устранив их полностью, вам будет сложнее найти нужную часть кода без плагина Firebug. Но не стоит забывать, что львиную долю содержимого файла style.css занимают именно они. Для того, чтобы исправить это недоразумение, рекомендуется использовать более краткие описания. К примеру, вместо ///* длинного лирического отступления */// можно использовать запоминающееся /* Logo */.

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

Оптимизация CSS своими силами

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

Оптимизация (сжатие) CSS — отличный способ уменьшить вес сайта — в браузер конечного пользователя будет отдаваться меньше данных, за счет минимизации кода и стилей в CSS-файлах. Не важно, сколько объема занимают на вашем сайте CSS стили, в любом случае, 50 и более % их содержимого можно просто удалить (!) без какого-либо ущерба для вашего сайта, что, безусловно, является важной составляющей в оптимизации скорости сайта.

Оптимизацию CSS можно и нужно проводить на любой платформе. В зависимости от ПО сайта, это можно реализовать с помощью плагинов и модулей для вашей CMS. Также это можно реализовать с помощью онлайн-инструментов.

Оптимизация CSS в WordPress

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

  • удаляют комментарии из CSS
  • удаляют новые и пустые строки, двойные пробелы, табуляции и т.д.
  • объединяют однотипные стили
  • переводят значения цветов в короткие (#ffffff и #fff — работают одинаково хорошо)
  • используют GZIP компрессию для оптимизированного CSS

Среди популярных плагинов можно назвать:

Кстати, оптимизацию CSS целесообразно проводить вместе с JavaScript. И два последних плагина работают как раз в обоих направлениях (умеют оптимизировать JS наравне с CSS).

Оптимизация CSS онлайн-инструментами

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

Онлайн CSS оптимизатор представляет собой онлайн-инструмент для сокращения размера файла каскадных таблиц стилей. Просто укажите ссылку к файлу стилей или загрузите стили в специальное окно. Примерами онлайн оптимизаторов CSS могут служить:

http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cy-pr.com/tools/css/
http://www.css-school.ru/optimiser/
http://www.pagecolumn.com/tool/css_compressor.htm
http://www.online-code.net/minify-css.html
http://csscompressor.com
http://www.askapache.com/online-tools/compress-css/
http://refresh-sf.com
и т.д.

Проверка валидности CSS

Популярный и признанный онлайн сервис проверки валидации CSS от W3C может найти все ошибки в стилях и автоматически сгенерировать валидный файл стилей для Вашего сайта. Валидный — значит «удовлетворяющий спецификации CSS«. В сервисе можно указать url сайта (в таком случае будут подгружены и проверены все подключаемые CSS файлы), полный путь к требуемому CSS файлу или CSS стили текстом.

Сервис оптимизации CSS от W3C: очистит невалидный код из стилей Вашего сайта

Не забудьте сделать резервную копию CSS файла перед тем, как Вы его перезапишете «валидной версией» от сервиса W3C. Сервис осуществляет проверку Ваших стилей на соответствие спецификации CSS2.1 или CSS3 и некоторые старые темы и шаблоны могут пострадать от результата валидации! Поэтому, старательно все проверьте, заботясь о своих
посетителях!

10 инструментов для оптимизации CSS


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

StyleStats

Сервис StyleStats собирает и анализирует статистику CSS для любого сайта. Показывает ошибки и дает советы по их устранению.

Critical Path CSS Generator

Онлайн-инструмент для ускорения и оптимизации скорости загрузки сайта.
Все мы сталкивались с проблемой ожидания отрисовки страницы, пока не загрузятся все подключаемые скрипты и стили. Иногда на тяжелых сайтах для подгрузки всех файлов требуется много времени. С помощью сервиса Critical Path CSS Generator можно обойти эту проблему. Он позволяет сгенерировать CSS код таким образом, чтобы при открытии страницы мгновенно загружалась часть до так называемого газетного изгиба (первый экран). Такой метод положительно сказывается на поисковой оптимизации.

Helium

Helium — инструмент в виде скрипта для обнаружения неиспользованного CSS на страницах веб-сайта. Он работает на основе javascript и запускается в браузере.

CSS Ratiocinator

CSS Ratiocinator автоматически переформирует ваш CSS и cгенерирует новую таблицу стилей с более элегантным и лаконичным кодом очистив при этом лишние свойства, которые наследуются дочерними элементами. Скрипт формирует новые таблицы стилей на основе дерева элементов (DOM). В итоге должен получиться чистый и оптимизированный код CSS.

Recess

Это простой и привлекательный инструмент для оптимизации CSS, построенный на основе LESS.

CSS Lint

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

Parker

Parker представляет собой инструмент для анализа таблицы стилей CSS. Он считывает показатели ваших таблиц стилей и сообщает об их сложности.

css2scss

С помощью этого инструмента можно конвертировать код CSS в SCSS или SASS.

mincss

Скрипт, который убирает все лишнее из вашего CSS кода.

Как ускорить загрузку JS скриптов, CSS и HTML сайта WordPress: плагин Autoptimize

Вступление

Плагины WordPress, отличные инструменты улучшить функционал сайта, имеющие один существенный недостаток. Плагины увеличивают, а в некоторых случаях, значительно увеличивают, скорость загрузки страниц сайта.

Почему плагины увеличивают скорость загрузки

Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.

Особенно «ругается» на это поисковик Google, а на сервисе проверок скорости загрузки сайта ( https://developers.google.com/speed/pagespeed/insights/ ), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.

Как решается проблема стилей и JS на WordPress

Теоретически, проблему нескольких JS скриптов и нескольких стилей CSS можно решить их объединением. На практике, можно использовать популярный и работающий плагин Autoptimize.

Плагин Autoptimize «обучен» сжимать JS скрипты стили объединив их в один файл.

Принцип работы плагина Autoptimize (оптимизировать JS и CSS WordPress)

Плагин Autoptimize помогает оптимизировать JS и CSS WordPress следующим образом. Перед выводом страницы, плагин обходит HTML код страницы и находит все js файлы. Найдя их, он их вырезает и пишет их в общий файл. Ссылку на этот файл плагин размещает в конце страницы. То же действо плагин проводит с фалами стилей css, но ссылки на них плагин ставит в начале страницы.

Недостатки плагина Autoptimize

Все слепки с оптимизируемых файлах плагин хранит в кэше плагина [wp-content/cache/autoptimize] . Со временем эта папка разбухает и может наблюдаться обратный эффект, скорость загрузки начинает расти. Я такую проблему не замечал, но читал на некоторых сайтах.

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

Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe.

Настройка плагина Autoptimize

Я уверен, вы знаете, как установить плагин. Страница плагина: https://ru.wordpress.org/plugins/autoptimize . Настройки плагина элементарные, но всё-таки пройдемся по ним.

  • После активации плагина, для удобного доступа к настройкам плагина в меню консоли «Настройки» появиться отдельный пункт.
  • Вверху страницы есть маленькая ссылка, она откроет дополнительные настройки.

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

Важно понимать! Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.

  • Если у вас много комментариев, есть кнопка сохранения HTML комментариев.
  • Особо интересна, бесплатное использование CDN Options. Если вы используете CDN технологии, можно указать ваш //cdn.example.com/.

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

оптимизировать JS и CSS WordPress: Настройки плагина Autoptimize

Как увеличить размер cash хранилища Autoptimize

Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.

Решение проблемы вы можете найти на сайте автора. Я его озвучу и подтвержу из практики.

Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:


Устанавливают плагин «Code Snippets» ( https://ru.wordpress.org/plugins/code-snippets/ ). Он нужен для простого добавления произвольного кода на свой сайт WordPress, без добавления пользовательских фрагментов в файл functions.php .

С помощью плагина вставляю один из следующих Snippet (на выбор):

Размер кеша 1Гб

Размер кеша 10Гб

Этим я увеличиваю размер cash хранилища Autoptimize до 1 Gb или до 10 Gb.

Альтернативные плагины (плохо обновляются)

  • JS & CSS Script Optimizer ( https://wordpress.org/plugins/js-css-script-optimizer/ )
  • Better WordPress Minify ( https://wordpress.org/plugins/bwp-minify/ )

На этом всё! Я надеюсь вам удалось оптимизировать JS и CSS WordPress и ускорить его загрузку.

Онлайн оптимизатор CSS

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

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

5 советов для супер быстрого CSS

Задумывались ли Вы о размере CSS вашего сайта? Если ваша таблица стилей растет, это может негативно сказаться на отрисовке страницы замедлив ее.

  • 3 лучших инструментов для тестирования веб-производительности

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

Вот пять советов, которые помогут вам добиться этого.

01. Используйте селекторы с небольшим уровнем вложенности

Это можно записать более кратко:

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

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

02. Используйте сокращенные свойства

Использование сокращенного CSS ускорит ваш сайт

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

Здесь очень много CSS! Давайте приведем это в порядок:

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

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

font — это не единственная сокращенная запись, доступная вам. Например, margin так же имеет сокращенную запись вместо более длинных свойств, таких как margin-top, margin-right и т.д.

Свойство padding работает так же. Для получения дополнительных возможностей для уменьшения вашего CSS, Mozilla Developer Network предлагает полезный список сокращенных свойств.

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

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

03. Используйте предварительную загрузки ресурсов

Указание ресурса для предварительной загрузки может дать браузеру фору на загрузку CSS вашего сайта. Вы можете установить его как тег в HTML:

Или как HTTP-заголовок в конфигурации вашего сервера:

В обоих этих сценариях preload дает браузеру фору на погрузку /css/styles.css. Использование предварительной загрузки в HTTP-заголовке предпочтительнее, так как это означает, что браузер обнаружит подсказку ранее в заголовках ответов, а не позже в теле ответа.

Еще одна причина для использования предварительной загрузки в HTTP-заголовке заключается в том, что он инициирует событие push-сервера на большинстве реализаций HTTP/2. Server push — это механизм, посредством которого активы предварительно выталкиваются клиенту при создании запросов на контент, и он предлагает преимущества производительности, аналогичные вложению CSS. Server push не доступен по протоколу HTTP/1. Однако использование предварительной загрузки в среде HTTP/1 может повысить производительность.

04. Сбор излишних стилей с помощью csscss

csscss будет анализировать любые файлы CSS, которые вы ему даете, и даст знать, какие наборы правил дублировали декларации

Может проверить ваш CSS для дублирования правил с помощью проверки избыточности. Например, возьмите инструмент csscss на основе Ruby.

Пользователи Ruby могут установить его с помощью:

После установки вы можете проверить свой CSS для избыточность следующим образом:

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

Вы можете перемещать повторяющиеся правила под один селектором:

Вы будете удивлены тем, сколько свободного пространства может сэкономить этот процесс в крупных проектах.

Используйте параметр —help, чтобы увидеть больше команд, которые вы можете использовать, чтобы изменить настройки.


05. Уменьшение размера с помощью cssnano

cssnano принимает ваш отформатированной CSS и запускает его через множество целенаправленных оптимизаций

Вы можете использовать cssnano — node и инструмент PostCSS. cssnano не только минимизирует CSS, но и делает много целенаправленных оптимизаций, которые могут еще больше уменьшить размер CSS.

Установите его в своей системе с помощью npm:

Затем используйте его для оптимизации CSS:

Если вы не любитель работы с командной строкой, можете автоматизировать cssnano с системой сборки. Вот как использовать cssnano в gulpfile:

Задача buildCSS считывает CSS, который вы пишете в css/styles.css, затем передает оптимизированный вывод в каталог css/optimized. Задача watch запускает buildCSS всякий раз, когда происходят изменения в css/styles.css.

Задачу watch можно вызвать в терминале следующим образом:

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

21 способ оптимизировать ваш CSS и ускорить ваш сайт

Если код ничего не делает, избавьтесь от него

Устранение ненужных частей вашего разметка, очевидно, вызывает огромный выигрыш в скорости. Браузер Google Chrome имеет эту функциональность из коробки. Просто перейдите в «Просмотр»> «Разработчик»> «Инструменты разработчика», откройте вкладку «Источники» в последней версии и откройте меню команд. После этого выберите Показать покрытие и полюбуйтесь на окно анализа покрытия, выделяя неиспользуемый код на текущей веб-странице.

03. Делайте это более удобным способом

Используйте веб-аудит производительности для простой обрезки избыточного кода

Навигация по линии Анализ по линии не обязательно удобен. Chrome Web Performance Audit возвращает похожую информацию — просто откройте ее на панели инструментов, выберите «Просмотр»> «Разработчик»> «Инструменты разработчика»> «Аудиты» и дайте ей поработать. Когда закончите, появится список проблемных элементов.

04. Помните о проблемах

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

05. Встроенный критический CSS

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

06. Разрешить антипараллельный анализ

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

07. Замена изображений на CSS

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

08. Используйте сочетания цветов

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

09. Устраните ненужные нули и единицы измерения

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

10. Устранить лишние точки с запятой

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

11. Используйте текстурный атлас

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

12. Преследуйте px

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

13. Избегайте дорогих свойств

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

14. Удаление пробелов

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

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

16. Использовать автоматическое сжатие

Опытная команда Yahoo создала приложение, которое обрабатывает множество задач сжатия. Он поставляется в виде файла JAR, доступного здесь, и может быть запущен с выбранной JVM.

17. Запустите его из NPM

Если вы предпочитаете интегрировать продукт в Node.JS, посетите npmjs.com/package/yuicompressor. Хранилище в плохом состоянии содержит набор файлов-оболочек и JavaScript API.

18. Keep Sass et al. в проверке

Sass может стать излишне сложным, поэтому оптимизируйте его, если можете

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

19. Настройка кеширования

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

20. Разрушьте кеш

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

21 , Не забывайте об основах

Оптимизация CSS — это только часть игры. Если ваш сервер не использует HTTP / 2 и сжатие gzip, много времени теряется во время передачи данных. К счастью, решить эти две проблемы обычно просто. В нашем примере показано несколько настроек наиболее часто используемого сервера Apache. Если вы оказались в другой системе, просто обратитесь к документации по серверу.

Илон Маск рекомендует:  Что такое код printer_end_doc
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL