Блог про блоги от Дмитрия Донченко

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

В основном в Интернете используются следующие форматы изображений: JPG, GIF и PNG.

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

GIF: Чаще всего этот формат изображений используется для отображения анимированных картинок, логотипов или текста изображений. В отличии от полноцветного JPG, GIF может отображать максимум 256 цветов. Можно оптимизировать размер картинок GIF, изменяя количество цветов, при сохранении файла.

PNG: Этот формат изображений, создан для замены GIF. Отличается от GIF тем, что поддерживает 24-битный цвет. Вы можете использовать этот формат, для логотипов, надписей и других простых изображений, в которых необходимо отображать более чем 256 цветов.

Обновлено из комментариев:

• Интересная статья по формату PNG.

Если вам понравился этот блог, вы можете подписаться на обновления блога через RSS ленту, или по E-Mail. Спасибо за визит!

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

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

Для того что бы исправить это, есть несколько советов. Если вы пользуетесь PhotoShop-ом для создания или редактирования картинок для блога, обязательно пользуйтесь функцией “Save for Web” (Сохранить для Web). При сохранении картинки в этом режиме, PhotoShop старается оптимизировать картинку для использования в Интернете. Такая же или похожая функция есть у большинства программ для работы с картинками, обязательно пользуйтесь этой функцией.

Если у вас нет программ для работы с картинками, вы можете скачать бесплатную программу Picasa от Google и пользоваться ей.

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

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

И так, продолжим наши беседы по оптимизации блогов. В прошлых постах, мы уже включили кэширование блога и выяснили что желательно использовать “/” в ссылках на блоге. Сегодня займемся оптимизацией нашего 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 файла закончена, ждите следующий пост, на тему “Оптимизация блога“.

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

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

Блоги которые используют WordPress имеют полезный встроенный функционал, gzip сжатие страниц, для уменьшения трафика между сервером и посетителем. Включить эту функцию можно просто из админ-панели вашего WordPress блога. Находится она в разделе “Настройки“->”Чтение” самая нижняя строчка, “WordPress должен упаковывать статьи (gzip), если браузер запросит это“.

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

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

Но есть один неприятный момент. Замечено что при использовании gzip компрессии на блоге, Яндекс при индексировании выдает ошибку “Передано неверное количество данных” и некоторые страницы вашего блога могут не индексироваться, что весьма неприятно.

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

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

Самое главное при установке этого плагина убедиться что в файле wp-config.php прописаны строчки:

define('ENABLE_CACHE','');
define('WP_CACHE', true);

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

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

Нужно также принять во внимание тот факт что оба варианта вместе не работают и при установке и включении плагина кэширования, он автоматически отключает gzip-сжатие.

Выводы поста:

Оптимизировать блог необходимо не gzip-сжатием страниц, а установкой плагина WP-Super-Cache. Особенно полезно использовать этот плагин в случаях когда ожидается большой приток посетителей на ваш блог.