Содержание серии Оптимизация WordPress блога
И так, продолжим наши беседы по оптимизации блогов. В прошлых постах, мы уже включили кэширование блога и выяснили что желательно использовать «/» в ссылках на блоге. Сегодня займемся оптимизацией нашего CSS файла.
CSS файл содержит в себе инструкции по отображению вашего блога. Загружается он каждый раз, когда кто-то открывает любую из страничек на вашем блоге. Поэтому было бы неплохо уменьшить его размер, для уменьшения трафика между сервером и посетителем и соответственно для увеличения скорости отображения страничек.
Оптимизация будет состоять из двух шагов, первый это удаление лишнего кода из CSS файла и второй, это включение сжатия для вашего CSS файла.
Самый простой способ удалить лишний код из CSS это воспользоваться специальным сервисом, который позволяет оптимизировать ваш CSS онлайн. Для этого заходим на сайт CleanCSS, вводим ссылку на ваш CSS файл или просто вставляем код вашего CSS файла в специальную форму и ничего не изменяя в настройках, нажимаем «Process CSS».
Сервис анализирует ваш файл, убирает лишнее, оптимизирует код и на выходе дает вам список изменений, на сколько уменьшился ваш файл и собственно говоря оптимизированный файл. Перед тем как все это проделать, очень важно сделать резервную копию вашего CSS файла, на всякий случай. Что делать с оптимизированным файлом я думаю вы догадаетесь, его нужно просто записать на место вашего рабочего CSS.
Как правило, после использования сервиса, он может уменьшится примерно на 20 — 25% что уже само по себе неплохо и для вас и для ваших посетителей. Мой CSS файл, после оптимизации на этом сервисе, уменьшился на 2,5Кбайта что в принципе не так уж и много, но учитывая то, что он открывается каждый раз, когда кто-то просматривает вашу страничку, при большой посещаемости даже эти 2,5Кбайта будут не лишними.
Приступаем к шагу номер два, компрессия CSS.
Как вы уже знаете, WordPress имеет встроенные средства для организации сжатия страничек перед тем как показывать их посетителям, но сжатие не работает вместе с включенным кэшированием блога. Поэтому от него мы отказались.
Но можно настроить сжатие, отдельно для файла CSS. Это довольно легко сделать, нужно просто установить необходимый плагин. Называется он css-compress. (как установить плагин Wordpres) В настройках ничего сложного нет, потому что и сами настройки отсутствуют. Просто скопируйте файл в папку с плагинами, и в панели управления активируйте плагин. Собственно говоря и все.
На этом, наша с вами оптимизация CSS файла закончена, ждите следующий пост, на тему «Оптимизация блога«.
19.01.2008 - 11:02 дп
попробывал, оптимизировал, и на этом конец пишел моему блогу, ошибка темы, мож чёт сделал не так
19.01.2008 - 7:37 пп
german2009
Очень надеюсь что Ваш блог уже восстановлен и все в порядке.
А на каком именно этапе оптимизации, начались проблемы?
21.01.2008 - 10:52 дп
после того как я оптимизированый файл заменил на сервере
29.01.2008 - 6:59 пп
Да интересно конечно если честно и не знал на днях сделаю
03.02.2008 - 3:21 пп
Я бы посоветовал, в этом случае, специальную «сжималку» для css (или js), которую специально делал. Она никак не изменяет исходный файл, но уменьшает его в 4-7 раз, как повезет. Также я предусмотрел кеширование сжатых стилей или джаваскриптов, которые обновляются только если изменяется дата модификации исходных скриптов, что очень удобно.
Если вам интересно, то вот этот полезный JavaScript и CSS компрессор на PHP:
http://www.ewgenij.net/javascript-and-css-compressor.html
03.02.2008 - 6:28 пп
Да вроде установил все нормально только я где то читал что все эти сжатия негативно влияют на поиск яндекса
03.02.2008 - 6:42 пп
Маловероятно, что яндекс будет искать по файлам стилей :) Хотя этот вопрос лучше оставить дядям из рубрики SEO. Возможны проблемы если сжимать сами страницы, так как яндекс может не уметь работать с gzip, но на дворе 2008 год уже целый месяц, уверен, что он это умеет.
03.02.2008 - 9:28 пп
2Евгений
А чем Ваша специальная сжималка отличается от плагина для WP?
2Gennadij
В случае если страница полностью шифруется gzip то некоторые поисковые боты просто не поддерживают работу с сжатыми страницами, а некоторые поддерживают но не совсем.
А Яндекс очень часто индексируя страницы на которых включен Gzip ругается на то что получен неправильный размер файла или что-то типа того.
03.02.2008 - 9:43 пп
Dmitriy Donchenko, отвечаю :)
1. Я не претендовал на звание уникального генератора идеи сжимать файлы стилей и джаваскрипты гзип методом. Хотя и придумал ее независимо от других аналогов :)
2. Сжимаются не только .css но и .js файлы, хотя это может оцениваться как офтопик, относительно темы поста.
3. Только на шаге номер 2 видно, что проблема рассматривается только для WP. Хотя, она может быть интересна и тем, кто не использует этот скрипт блога.
4. С первого взгляда на предлагаемый плагин видно, что он сжимает стили при каждом запросе, без всякого кеширования. Хотя не могу это утверждать на 100% так как не видел функций идущих от add_filter(…)
5. Извините, если влез куда не надо было влазить. Больше не буду.
04.02.2008 - 1:50 пп
Попробовал воспользоваться сервисом, все отлично — сжал на 52%
Спасибо, буду пользоваться и в дальнейшем
04.02.2008 - 7:44 пп
Ребята давайте сменим тему с жиманием все ясно сжалось не сжалось это дело пятое давайте поговорим об увеличении посещаемости наших блогов ну не самим же друг другу посты писать давайте начнем тему например платная регистрация в каталоге яндекса у меня был сайт я его уже забросил и домена не осталось ну не важно планы были наполеоновские и глобальные и я его зарегал в каталоге яндекса так вот что было приятно замечено когда обновлялся ТИЦ у многих он падал на 30 40 пунктов а уменя нет. Вот такой личный опыт чтобы вылезтина первые страницы Яндеса нужно меого времени или вложить денег на первых порах тогда будет заметен эфект , вот пока все давайте поговорим на эту тему хотя может как говорится «не по теме» говорите не обижусь
08.02.2008 - 11:30 дп
Попробовал CSS Compress на двух своих блогах, на одном работает, а на другом весь дизайн расползается, хотя стили шрифтови увета остаются нормальными%|
15.02.2008 - 1:27 дп
Выложил на блоге данный сервис в русском варианте.
Стоит того чтобы использовать.
29.04.2008 - 9:25 пп
Если сервер настроен правильно, то при переходе на следующую страницу css-файл должен закачиваться снова только если он был изменен. Если же он не изменялся после отдачи предыдущей страницы, то ответ сервера на вызов css-файла должен быть: «304 Not Modified», и браузер должен использовать css-файл, который уже загружен, разве не так?
03.06.2008 - 3:54 пп
Интересная методика для тех кто живет до сих пор на модеме. Два или три кб имеет значение. А так честно говоря не очень методы.
29.04.2009 - 3:04 пп
Возможно вы и правы, но благодаря тому, что все больше и больше упускается из вида качество и оптимизированность кода мы и получаем таких монстров как виста и программы которые считают 2+2, но при этом требуют фрэймворки по 50 мб и сами весят чуть меньше этого (пример конечно не по теме но все же).
Говоря о коде html и css, я все-таки считаю своим долгом сделать код настолько упрощенным и оптимизированным, насколько позволяют мои знания, и даже те несколько килобайт приносят моральное удовлетворение. Кстати говоря, пару раз пропустив свой css через этот оптимизатор, уже при написании нового кода стараюсь не допускать этих мелочей :) (так что польза хоть какая-то да есть).
зы. по моему лучше не заменять оригинальный css тем что выдаст оптимизатор, а посмотреть что он предлагает оптимизировать и сделать это самому в тех местах где считаешь необходимым.
зызы. кроме модема бывают еще телефоны с GPRS и иже с ними :))
зызызы. перегруженные, вечно тормозящие и грузящие проц сайты осточертели по самое нимагу.