Построение сайта, продвижение, работа в сети

Оптимизация CSS стилей в WordPress

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

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

Оптимизация CSS с помощью плагина

Есть плагины, которые совмещают возможность объединения и минификации скриптов и оптимизации стилей. Один из них JS & CSS Script Optimizer. Находим его в каталоге WordPress, скачиваем, устанавливаем и активируем.

Плагин JS & CSS Script Optimizer

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

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

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

Настройка плагина JS & CSS Script Optimizer

Открываем настройки плагина JS & CSS Script Optimizer.

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

Здесь плагин включаем — Enable plugin, директорию для хранения кэша файлов и путь к нему оставляем как есть.

Далее ставим галочку Ignore external JavaScript, то есть игнорировать внешние скрипты с других доменов. Упаковать Java скрипты, это решение на ваше усмотрение, потому что они могут перестать работать.

Настройки плагина оптимизации

Затем идут пункты объединения скриптов в футере и хедере или перенести их в футер, тоже на усмотрение в каждом отдельном случае по своему.

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

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

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

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

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

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

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

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

Посмотрим, что изменилось на сайтах сервисов developers.google.com и tools.pingdom.com. Можно заметить, что число запросов уменьшилось и уменьшилось также время загрузки объединенных CSS файлов и Java скриптов, то есть результат достаточно хороший  и меньше осталось проблем, которые еще нужно решить.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Поиск Яндекса
Группа Компьютерная грамотность
Подпишитесь на новости

Введите ваш email адрес:

Media Markt
Gyrotown