Оптимизация блога: Оптимизируйте CSS файл своего блога.
Содержание серии Оптимизация Wordpress блога
- Компрессия или кэш?
- Оптимизация блога: Оптимизируйте CSS файл своего блога.
- Оптимизация блога: Оптимизируйте размер картинок в блоге
- Оптимизация блога: О форматах изображений.
- Оптимизация блога: Указывайте размеры изображения
- Оптимизация блога: краткие версии постов.
- Оптимизация блога: следите за обновлениями
- Оптимизация блога: сделайте ревизию плагинов
- Оптимизация блога: уменьшите количество запросов к базе данных
- Используйте “/” в своих ссылках.
И так, продолжим наши беседы по оптимизации блогов. В прошлых постах, мы уже включили кэширование блога и выяснили что желательно использовать “/” в ссылках на блоге. Сегодня займемся оптимизацией нашего 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 файла закончена, ждите следующий пост, на тему “Оптимизация блога“.
Если вам понравился этот блог, вы можете подписаться на обновления блога через RSS ленту, или по E-Mail. Спасибо за визит!
Суббота, Январь 19th 2008 в 11:02 дп |
попробывал, оптимизировал, и на этом конец пишел моему блогу, ошибка темы, мож чёт сделал не так
Суббота, Январь 19th 2008 в 7:37 пп |
german2009
Очень надеюсь что Ваш блог уже восстановлен и все в порядке.
А на каком именно этапе оптимизации, начались проблемы?
Понедельник, Январь 21st 2008 в 10:52 дп |
после того как я оптимизированый файл заменил на сервере
Вторник, Январь 29th 2008 в 6:59 пп |
Да интересно конечно если честно и не знал на днях сделаю
Воскресенье, Февраль 3rd 2008 в 3:21 пп |
Я бы посоветовал, в этом случае, специальную “сжималку” для css (или js), которую специально делал. Она никак не изменяет исходный файл, но уменьшает его в 4-7 раз, как повезет. Также я предусмотрел кеширование сжатых стилей или джаваскриптов, которые обновляются только если изменяется дата модификации исходных скриптов, что очень удобно.
Если вам интересно, то вот этот полезный JavaScript и CSS компрессор на PHP:
Воскресенье, Февраль 3rd 2008 в 6:28 пп |
Да вроде установил все нормально только я где то читал что все эти сжатия негативно влияют на поиск яндекса
Воскресенье, Февраль 3rd 2008 в 6:42 пп |
Маловероятно, что яндекс будет искать по файлам стилей
Хотя этот вопрос лучше оставить дядям из рубрики SEO. Возможны проблемы если сжимать сами страницы, так как яндекс может не уметь работать с gzip, но на дворе 2008 год уже целый месяц, уверен, что он это умеет.
Воскресенье, Февраль 3rd 2008 в 9:28 пп |
2Евгений
А чем Ваша специальная сжималка отличается от плагина для WP?
2Gennadij
В случае если страница полностью шифруется gzip то некоторые поисковые боты просто не поддерживают работу с сжатыми страницами, а некоторые поддерживают но не совсем.
А Яндекс очень часто индексируя страницы на которых включен Gzip ругается на то что получен неправильный размер файла или что-то типа того.
Воскресенье, Февраль 3rd 2008 в 9:43 пп |
Dmitriy Donchenko, отвечаю
1. Я не претендовал на звание уникального генератора идеи сжимать файлы стилей и джаваскрипты гзип методом. Хотя и придумал ее независимо от других аналогов
2. Сжимаются не только .css но и .js файлы, хотя это может оцениваться как офтопик, относительно темы поста.
3. Только на шаге номер 2 видно, что проблема рассматривается только для WP. Хотя, она может быть интересна и тем, кто не использует этот скрипт блога.
4. С первого взгляда на предлагаемый плагин видно, что он сжимает стили при каждом запросе, без всякого кеширования. Хотя не могу это утверждать на 100% так как не видел функций идущих от add_filter(…)
5. Извините, если влез куда не надо было влазить. Больше не буду.
Понедельник, Февраль 4th 2008 в 1:50 пп |
Попробовал воспользоваться сервисом, все отлично – сжал на 52%
Спасибо, буду пользоваться и в дальнейшем
Понедельник, Февраль 4th 2008 в 7:44 пп |
Ребята давайте сменим тему с жиманием все ясно сжалось не сжалось это дело пятое давайте поговорим об увеличении посещаемости наших блогов ну не самим же друг другу посты писать давайте начнем тему например платная регистрация в каталоге яндекса у меня был сайт я его уже забросил и домена не осталось ну не важно планы были наполеоновские и глобальные и я его зарегал в каталоге яндекса так вот что было приятно замечено когда обновлялся ТИЦ у многих он падал на 30 40 пунктов а уменя нет. Вот такой личный опыт чтобы вылезтина первые страницы Яндеса нужно меого времени или вложить денег на первых порах тогда будет заметен эфект , вот пока все давайте поговорим на эту тему хотя может как говорится “не по теме” говорите не обижусь
Пятница, Февраль 8th 2008 в 11:30 дп |
Попробовал CSS Compress на двух своих блогах, на одном работает, а на другом весь дизайн расползается, хотя стили шрифтови увета остаются нормальными%|
Пятница, Февраль 15th 2008 в 1:27 дп |
Выложил на блоге данный сервис в русском варианте.
Стоит того чтобы использовать.
Вторник, Апрель 29th 2008 в 9:25 пп |
Если сервер настроен правильно, то при переходе на следующую страницу css-файл должен закачиваться снова только если он был изменен. Если же он не изменялся после отдачи предыдущей страницы, то ответ сервера на вызов css-файла должен быть: “304 Not Modified”, и браузер должен использовать css-файл, который уже загружен, разве не так?
Вторник, Июнь 3rd 2008 в 3:54 пп |
Интересная методика для тех кто живет до сих пор на модеме. Два или три кб имеет значение. А так честно говоря не очень методы.
Среда, Апрель 29th 2009 в 3:04 пп |
Возможно вы и правы, но благодаря тому, что все больше и больше упускается из вида качество и оптимизированность кода мы и получаем таких монстров как виста и программы которые считают 2+2, но при этом требуют фрэймворки по 50 мб и сами весят чуть меньше этого (пример конечно не по теме но все же).
Говоря о коде html и css, я все-таки считаю своим долгом сделать код настолько упрощенным и оптимизированным, насколько позволяют мои знания, и даже те несколько килобайт приносят моральное удовлетворение. Кстати говоря, пару раз пропустив свой css через этот оптимизатор, уже при написании нового кода стараюсь не допускать этих мелочей
(так что польза хоть какая-то да есть).
зы. по моему лучше не заменять оригинальный css тем что выдаст оптимизатор, а посмотреть что он предлагает оптимизировать и сделать это самому в тех местах где считаешь необходимым.
)
зызы. кроме модема бывают еще телефоны с GPRS и иже с ними
зызызы. перегруженные, вечно тормозящие и грузящие проц сайты осточертели по самое нимагу.