Оптимизация скорости загрузки сайта фотографа

Оглавление:

  1. Хостинг
  2. Оптимизация изображений
  3. Кэширование

 

1. Хостинг

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

Делать обзор хостеров я не буду, отмечу только, что из всех, с кем мне довелось работать, по соотношению скорость/удобство админки/цена/поддержка моими фаворитами виртуального хостинга для России являются beget и timeweb. Все свои сайты я уже больше трех лет держу на Beget.

 

2. Оптимизация изображений

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

Проблему усугубляет поддержка ретина-экранов, для которых для красивой презентации изображений требуется в два раза большее разрешение и, как следствие, больший вес. Правильно оптимизированная картинка в идеале должна весить не более 400-700 кб для размера 2400 px по длинной стороне. Этого можно добиться двумя способами:

  • Оптимизация с помощью графического редактора (фотошоп или лайтрум)
  • Оптимизация с помощью плагинов для WordPress

 

Оптимизация с помощью графического редактора

Она заключается в уменьшении разрешения вашего изображения, скажем, до 2400 px по длинной стороне и правильном сохранении: File — Export — Save for Web. Далее я выставляю качество 65 для джепега.

Обратите внимание, что картинка весит 589 кб вместо 2мб после оптимизации без визуальной потери качества.

 

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

 

Оптимизация с помощью плагинов

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

Но он хорош в том случае, когда вы хотите уменьшить вес уже загруженных неоптимизированных картинок. Так часто бывает, когда вы не сделали это перед заливкой на сайт. Разберем этот способ на примере плагина Compress JPEG & PNG images.

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

Плагин позволяет бесплатно оптимизировать только 500 загруженных изображений в месяц. Это не означает 500 загруженных фотографий. При загрузке на сайт WordPress создает  три (зависит от используемого шаблона) копии изображения — миниатюры, средний и большой размер, которые используются в шаблоне в зависимости от ситуации. Итого получаем на каждую картинку 4 размера, включая оригинал. Обычно, весит неприлично много только оригинал, так что отметим только его:

 

Далее идем в Медиафайлы — Bulk Optimization. Там увидим, сколько картинок не оптимизировано. И начинаем процесс. Если запаса в 500 изображений не хватает, то, возможно, имеет смысл отдать пару-тройку баксов, ибо скорость показа сайту клиенту важнее этой мелочи.

 
Таким образом, вы убиваете сразу двух зайцев — ускоряете время загрузки сайта и уменьшаете занимаемое место на хостинге.
На этом про оптимизацию изображений всё.

 

3. Кэширование

Здесь я расскажу про два способа кэширования — посложнее и попроще.

 

Способ попроще — использование плагина  WP Super Cache от создателей WordPress

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

 
Далее ставим галочки и нажимаем Обновить:
 

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

 

Способ посложнее, но более подходящий для небольших сайтов — использование Memcache

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

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

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

 

Шаг 1 — Включаем кэширование на сервере

Переходим в Сервисы — Memcached — и здесь включаем кэширование:

 

Шаг 2

Скачиваем с репозитория разработчиков WordPress файл object-cache.php и с помощью ftp или файлового менеджера Beget помещаем его в папку wp-content:

 

Шаг 3

Открываем wp-config.php, лежащий в корне сайта и вписываем туда строчки:

define( 'WP_CACHE_KEY_SALT', 'ay' ); 
$memcached_servers = array( '127.0.0.1:11211' );

 
ay — замените (или оставьте) на ваше усмотрение. Это что-то типа префикса, чтобы отделить кэши одного сайта от другого, если у вас таковых несколько на одном сервере, и для всех используется Memcached.

Получится как-то так:

 
На этом настройка Memcached завершена.

Использовать плагин WP Super Cache (и пр.) в связке с Memcached смысла нет, поэтому задействуйте что-то одно, а лучше второй способ.

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

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