Реальный пиарCmsWordpress → Оптимизация CSS в Page Speed

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

как оптимизировать сайт

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

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

Давайте дальше продолжим пытаться увеличивать скорость загрузки сайта с помощью такого инструмента как Page Speed, который устанавливается как дополнение к Firebug. В принципе, наверное, зря я сказал в предыдущей статей, что Page Speed сам ничего для ускорения сайта сделать не может, а только дает рекомендации на что именно следует обратиться свое внимание в первую очередь. Оказывается и сам Page Speed на что-то может сгодиться.
Оптимизация (сжатие) CSS в Page Speed для повышения скорости загрузки сайта
Все объявления
ЯндексДиректСамостоятельное создание сайта
Программист не нужен - сделай сам. Быстрая система создания сайта CMS Amiro
Адрес и телефон · www.amiro.ru

В прошлой статье мы подробно рассмотрели, как установить Page Speed и как можно настроить оптимальным образом кеширование статических объектов (изображений, скриптов, CSS файлов) в браузерах пользователей. После произведенных нами настроек Web сервера, Page Speed уже перестал ругаться на сильное снижение скорости загрузки сайта именно из-за «Leverage browser caching»:

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

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

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

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

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

А так выглядит мой CSS после его оптимизации средствами Page Speed:

Итак, для оптимизации CSS и ускорения тем самым скорости загрузки сайта, вам нужно будет скачать по ссылке «Save as» сжатую средствами Page Speed версию вашего файла CSS. Скачали?

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

Но кроме основного файла CSS, который обычно идет вместе с используемой вами темой оформления (шаблоны Joomla, темы WordPress, темы SMF), в окне Page Speed вы можете увидеть так же и те файлы CSS, которые используются установленными у вас плагинами и расширениями. В принципе, вы можете точно так же сжать (оптимизировать) эти файлы CSS, как было рассмотрено чуть выше. Тем самым вы еще немного ускорите работу своего сайта.


Источник: http://www.wordpresser.ru

Рекомендуем



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


jQuery активно использует WordPress Основными причинами перехода сайта документации с wiki на WordPress стала более логичная система управления контентов в WordPress, а так же скорость, каждая страница новой документации кэшируется и сжимается при помощи gzip, разработчики пишут, что очень впечатлены приростом производительности по сравнению с wiki


Что такое Joomla! Наконец-то незнакомые с программированием люди могут получить систему полного управления своими сайтами, не тратя непомерных средств на программное обеспечение с закрытым кодом