test111

Процедура с подготовкой материала для дизайнеров иногда становится мучением. А перейдя из дизайнеров в стан фронтэндеров и поработав немного с оптимизацией сайтов, я стал очень щепетильно относиться к этому вопросу.

Быстрые VPS на SSD хостинг от FastVps.ru

Зачастую дизайнеры, сохраняя материал, выкручивают максимальное качество — это не всегда хорошее решение. Чем меньше весят img — тем быстрее грузится сайт. Меньше img — меньше трафика, меньше нагрузка на сервер — все работает быстрее и посетители довольны. Я не буду вдаваться в глубокую теорию, приведу практические примеры из моего опыта подготовки:

  • в PS мой алгоритм быстр и прост: save for web → галка Progressive → поиграть ползунком качества с 50−70% → изменение разрешения до 500–1440px в зависимости от ситуации, куда будет поститься. Таким же принципом настраивается action с качеством 65-70 (беспроигрышный вариант), если материала много;
  • из онлайн сервисов мне дико полюбился Tinypng. Очень крутой инструмент оптимизации как JPEG, так и PNG с хорошим сжатием без заметных потерь в качестве. Если изображение достаточно крупное, оптимизация происходит до 70-80%. Иногда я впадаю в крайность и совмещаю PS и эту штуку, правда доиграться легко, можно попасть на качество. Из похожих проектов: Jpegmini, Сompressor. А для генерации baseurl смело открываем Duri;
  • для Альфреда есть плагин под простым названием Image Optimization от товарища ramiroaraujo. Честно говоря, серьезными результатами не блещет, но спасет, если необходимо быстро сжать кучу изображений и лень заморачиваться с action для PS;
  • для WordPress советовать не буду, но на Losko мы используем WP Smush, пробовали EWWW Image Optimizer — не подошел. За то, что плагин самостоятельно работает в фоновом режиме и не требует лишних действий, ставлю ему плюс. А вот результат оптимизации — не айс.

Нюансы

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

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

GIF следует использовать, когда изображение не многоцветное и нужна анимация.

Кто хочет серьезно вникнуть в этот вопрос, еще в далеком 2006 Сергей Чикуенок в студии Лебедева подробно расписал о работе с изображениями.

Про robots.txt

Для начала вспомним, robots.txt — текстовый файл, который содержит инструкции индексирования сайта исключительно для роботов поисковых систем, чтобы «сообщить» им какие разделы/страницы сайта индексировать, а какие нужно закрыть. Страницы, которые закрыты от посещения, не будут попадать в индекс поисковиков (Yandex, Google и т. д.).

Настройка robots.txt

Обязательным является употребление двух директив: User-agent и Disallow. Первая определяет, какому боту адресовано данное послание, вторая показывает, какую страницу или директорию ресурса запрещено индексировать.

Чтобы задать одинаковые правила для всех ботов, можно в директиве User-agent вместо названия прописать символ «звездочку». Файл robots.txt в таком случае будет выглядеть таким образом:

User-agent: *
Disallow: /private/
Disallow: /random.html

Как можно догадаться, /random.html — это название конкретного файла, индексация которого запрещена, а /private/ — название директории. В таком случае индексация не будет распространяться на все файлы, содержащиеся в ней. Если нужно снять ограничения и разрешить индексацию всех страниц, файл будет выглядеть так:

User-agent: *
Disallow:

Во избежание возникновения проблем с зеркалами сайта рекомендуется добавлять в robots.txt директиву Host, которая указывает боту Yandex на главное зеркало. По правилам написания в записи для User-agent должна быть хотя бы одна директива Disallow (обычно ставят пустую, ничего не запрещающую):

User-agent: Yandex
Disallow:
Host: site.ru

Директива Sitemap указывает на местоположение файла карты сайта (обычно он называется Sitemap.xml, но не всегда). В качестве параметра указывается путь к этому файлу, включая http:// (т.е. его Урл). Например:

Sitemap: http://site.ru/sitemap.xml

Что прячем в роботс?

  • Системные каталоги и файлы. Каждый сайт состоит из множества данных: административной части, файлы темы, картинки. Такие файлы следует также ограничить для просмотра роботам.
  • Страницы регистрации и авторизации. Информация, которая вводится при регистрации или входе на сайт, является конфиденциальной. Поэтому следует избегать индексации подобных страниц.
  • Страницы сайта такие как поиск, корзина, оформление заказа, фильтры, страницы пагинации.

Мой вариант robots.txt для WordPress

Cоздадим в блокноте файл, обзовем его robots. txt и запишем туда следующее:

User-agent: *
Disallow: /cgi-bin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-login.php
Disallow: /wp-register.php
Disallow: /wp-admin
Allow: /wp-admin/admin-ajax.php
Allow: /wp-content/uploads/

User-agent: Googlebot-Image
Allow: /wp-content/uploads/

User-agent: Yandex
Disallow: /cgi-bin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-login.php
Disallow: /wp-register.php
Disallow: /wp-admin
Allow: /wp-admin/admin-ajax.php
Allow: /wp-content/uploads/

Host: www.site.ru

Sitemap: http://site.ru/sitemap.xml

# Не забудьте поменять `site.ru` на ваш сайт.

Проверить правильно ли работают прописанные правила можно на Яндекс Вебмастере и в Search console от Google.

А как у других?

В сети развелось куча «самых правильных» примеров настройки robots.txt для WordPress и Joomla. Что-то повторяется, а где-то полная дичь. Плюнув, забил в поисковике «сео блог», пробил у первых 3 сайтов файл robots - там же ребята навернека «прокачали». И пару посещаемых мною дизайн блогов. Итог: