Статьи

Улучшение изображений в WordPress для ускорения работы

Я вырос в небольшом городке в Коста-Рике, где у меня было только 6k / sec интернета (56k было бы мечтой), поэтому, когда дело доходит до оптимизации сайта по скорости, я очень разборчив. Я всегда стараюсь, чтобы сайты загружались как можно быстрее. Я думаю, что в какой-то момент WPExplorer.com имел рейтинг 97-98 Google Page Speed. Конечно, теперь с кнопками социальных сетей и прочим, что мне пришлось приспособиться.

Помимо общего кода вашей темы WordPress, еще одним фактором, который имеет огромное влияние на скорость вашего сайта, являются изображения. В наши дни темы WordPress чрезвычайно «перегружены изображениями», и, конечно же, я возьму на себя часть вины, потому что люблю добавлять избранные изображения везде, где это возможно 🙂

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

Советы по ускорению загрузки изображений

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

  • JPG обычно имеет меньший размер файла, чем PNG
  • При использовании фотошопа обязательно сохраните изображение «для Интернета»
  • Не используйте теги IMG ширины и высоты для изменения размера изображений, по возможности обрезайте их.
  • Обязательно укажите атрибуты ширины и высоты, чтобы браузеру не приходилось выполнять какую-либо работу.

Плагины и сервисы для оптимизации изображений

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

Smush it и плагин WP Smush.it

Улучшение изображений в WordPress для ускорения работы

Smush.it – ​​это потрясающий сервис, созданный Yahoo, который позволяет загружать изображения и удаляет ненужный мета-мусор или сглаживает png, чтобы уменьшить размер файла. Вы можете посетить их сайт, чтобы оптимизировать свои изображения, но еще лучше, они предлагают API, который выполняет оптимизацию (за исключением удаления метаданных JPEG).

Алекс Дунае создал плагин WP Smush.it, который использует API, чтобы вы могли автоматически удалять изображения на своем сайте, работающем на WordPress, при загрузке.

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

ваших сайтов.

PunnyPNG

PunnyPNG – еще один хвастливый сервис сжатия изображений, который я рекомендую разработчикам тем.

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

Использование CDN (сети доставки контента)

Улучшение изображений в WordPress для ускорения работы

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

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

Для разработчиков: используйте рекомендуемое изображение WordPress вместо Timthumb

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

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

Изменение качества миниатюрного изображения JPEG

Я нашел этот супер-классный трюк Глина Муни на Skidoosh.co.uk для изменения качества JPEG в WordPress …

По сути, вы можете добавить простую функцию в файл functions.php, чтобы определить качество JPEG по умолчанию для ваших изображений. Хотя многие люди могут использовать это для повышения качества до 100 (как он предлагает в своем сообщении), вы также можете использовать его для снижения качества и ускорения вашего сайта.

Текущее качество JPEG для миниатюр с измененным размером в WordPress составляет 90, просто добавьте следующее, чтобы изменить значение (допустим, нам нужны действительно дерьмовые изображения с 60% исходным качеством)

add_filter(‘jpeg_quality’, function($arg){return 60;});

Просто измените «возвращаемое значение» на качество, которое вы хотите, чтобы ваши изображения были. И если вы получаете «неожиданную ошибку T_FUNCTION», попробуйте вместо этого следующую функцию:

function jpeg_quality_callback($arg) { return (int)100; } add_filter(‘jpeg_quality’, ‘jpeg_quality_callback’);

Как сделать так, чтобы ваш WordPress загружался быстро?

Есть ли у вас какие-либо другие полезные советы по оптимизации изображений, используемых в вашем блоге, для повышения скорости? Какие еще шаги вы предпринимаете, чтобы ваш сайт работал быстро, а Google и ваши пользователи были довольны?

Примечание: классные люди оставляют комментарии 🙂

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: