Плагин – Optimize Images Resizing предназначен для оптимизации изображений на wordpress сайте. Что делает плагин ? Плагин удаляет неиспользуемые изображения, плагин не позволит wordpress создавать размеры изображений, которые не используются на вашем сайте. Плагин позволит освободить пространство на хостинге и улучшить производительность сайта. Наверное мало кто знает, что после загрузки изображения на сайт, система wordpress создаёт ещё три размера загруженного изображения. Размеры указаны на странице: Настройки – Медиафайлы, к каждому изображению создаются ещё 3 копии изображений, только другого размера, на случай того, если вы захотите вставить в запись, например средний или крупный размер изображения.
Как раз для того, чтобы удалить те самые не используемые изображения, которые создаёт wordpress, и нужен плагин – Optimize Images Resizing. Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, перейдите по вкладке: Настройки – Медиафайлы. На странице настройки медиафайлов, у вас появится новое значение Remove image sizes и кнопка Start cleanup. Нажав на кнопку вы удалите все ранее созданные размеры изображений, которые не используются на вашем сайте. И в дальнейшем размеры изображений будут создаваться только при необходимости. Внимание ! Перед тем как нажимать на кнопку Start cleanup, сделайте резервную копию вашего сайта, на всякий случай.
После удаления не используемых изображений, плагин позволит вам создавать дополнительные размеры изображений только при необходимости. Но есть ещё один вариант, для которого плагин не нужен, вам нужно просто в настройках медиафайлов обнулить все размеры и сохранить изменения.
Теперь при загрузке нового изображения, в поле размер будет отображаться только Полный размер.
Изменять размер изображения вы сможете с помощью мыши, нажмите по изображению и перетащите край изображения в нужный вам размер. Таким образом неиспользуемые изображения создаваться не будут.
Вы можете либо использовать плагин, либо просто обнулить все размеры. Если вы обнулили все размеры, то после удаления не используемых изображений, плагин можно будет удалить.
Поделиться ссылкой:
info-effect.ru
Почему происходят потери качества изображения
Нужно иметь в виду, что плагины могут сжимать изображения ухудшая качество картинки.
нечно это порой портит качество изображения, даже видно на глаз, но этого бывает достаточно для пользователя, тем самым выгадав вес изображения. То есть в угоду уменьшения веса изображения в килобайтах, мы теряем качество изображения и как правило это видно на глаз. Так что в некоторых плагинах можно регулировать качество изображения при сжатии, что вы конечно увидите в результате работы вашего плагина. Это и называется потерей качества изображения, и если вас не устраивает качество сжатия то попробуйте найти настройки, которые отвечают за данный параметр.
Так же важно определиться для себя, если вам важно качество изображения, но не важен размер в килобайтах, то сжатие можно установить поменьше, а если вы наоборот хотите уменьшить вес в килобайтах, но плюнув при этом на качество — соответственно нужно установить в плагине сжатие изображения побольше. После установки плагина можно поиграться с этими настройками и подобрать для себя удобный режим сжатия изображения.
На что влияет размер или как говорят вес изображения?
Тут всем однозначно должно быть понятно, что чем больше размер изображения, тем оно дольше грузится, а чем дольше грузится, тем больше время загрузки страницы. Что влечет за собой ухудшения SEO показателей такого сайта. Но многие начинающие блогеры поначалу не знают об этих нюансах и стараются быстрее насытить свой сайт информацией, но изрядно заполнив свой сайт, позже узнают о своей ошибке, но несколько десятков или сотен изображений уже не переделать, либо это займет достаточно много времени. Поэтому, подобные плагины уменьшают вес изображения, как говорится на ходу, так как могут сжать уже загруженное в Вордпресс изображение.
Сжатие изображения с помощью плагинов
Так вот, чтобы уменьшить все ваши изображения на сайте, нужно применить плагин для сжатия изображения, который в автоматическом режиме уменьшит вес изображения на вашем сайте. Даже не важно сколько будет изображений 100 или 1000. Ведь их основная работа заключается в массовом уменьшении веса изображения в пределах вашего сайта, что конечно удобно, когда изображения уже загружены на сайт и ручная переделка не предполагается. Однако удобно исправить допущенную ошибку довольно легким способом.
Давайте для примера возьмем сервис оптимизации изображений на сайте https://optipic.io, где можно сразу проверить оптимизированы ли у вас картинки на сайте. И если сжатия нет, то вам обязательно нужно его установить. Пройдя по ссылке, вы увидите строчку для ввода сайта, где можете проверить сжатие изображений, но пользуясь случаем сразу добавлю, что сервис имеет хорошее сжатие изображений без потери качества и он сможет помочь вам независимо от того какой движок на сайте вы используете.
Раз уж заговорили о сервисе сжатия изображений на сайте, то скажу, что он дает вам 10мб бесплатного трафика для тестирования и если у вас мало изображений, то вы можете им воспользоваться бесплатно, ну а если у вас объем будет больше этого лимита, тогда нужно доплатить исходя из ваших потребностей. Ну а далее давайте перейдем к плагинам для оптимизации сайта, а точнее к оптимизации изображений на сайте.
1. WP Smush или Smush Image Compression and Optimization
Его использование очень простое, достаточно зайти в его настройки и вы увидите:
Где слева видно, что плагин для сжатия изображений wordpress предлагает оптимизировать все изображения, которые требуют этого и просто нажав ОПТИМИЗИРОВАТЬ ВСЁ вы решаете проблему раз и навсегда, а последующие загрузки будут сжимать автоматически. Ну если конечно вы желаете заранее сами сжимать и загружать уже готовую картинку, то это будет лучшим решением.
А справа мы видим отчет о уже сжатых изображениях, где указано общее количество сжатых файлов и цифра общего сжатия. В целом это хорошее решение особенно для ленивых, ведь не все понимают и знают как делать сжатие вручную, а тут поставил подобный плагин и готово. Как видите всё очень просто, это объясняет почти миллион установок в конце 2017 года, что намекает на общее признание.
2. ShortPixel Image Optimizer
Легкий в использовании, всеобъемлющий, стабильный и часто обновляемый плагин сжатия изображений, поддерживаемый дружественной командой, которая его создала и прочая многострочная лабуда от производителей… Но изюминка данного плагина в том, что он сжимает всего лишь 100 изображений в месяц, а потом уже стоимость $5 за 5000 изображений. Нужно сразу понимать, что если у вас на сайте много изображений, то этот плагин не для вас, а так в малых объемах плагин достойный.
К тому же по заявлению разработчиков этот плагин продуман очень хорошо и включает в себя достаточно функций, чтобы предоставить максимум информации для анализа. Но бесплатное ограничение не даёт ему широкого распространения, вообщем для маленьких сайтов.
3. TinyPNG / TinyJPG
Данный плагин для оптимизации изображений wordpress очень простой, я даже сказал бы упрощенный, никаких изысков, просто сжимает и всё. Активируется и работает по коду API. Бесплатный и легко справляется со своей целью. Но есть пару минусов, что сжимается бесплатно 500 изображений, а далее уже платно (по запросу эл. почты); и ещё он очень редко обновляется (более 2 лет), о чем его разработчик сразу предупреждает.
Данный вариант считаю простым для работы, но полуплатным, какое никакое а ограничение. Так что так же для маленьких сайтов.
4. Resize Image After Upload
По названию вроде всё понятно, но почему то он сжимает изображения как раз при загрузке, а не уже загруженные. Почему такая несуразность? пусть отвечают разработчики. Кстати, этот проект поддержали разработчики от плагина ShortPixel, что делает продукт именитым.
А если по сути, то плагин для сжатия изображений wordpress не содержит ничего лишнего, достаточно в настройках указать необходимые параметры (включение/выключение сжатия, максимальны размер изображения, уровень сжатия). Сохраняете настройки и поехали работать.
Он хоть и не раскрученный, но по отзывам нравится многим, наверно потому, что простой, понятный и умеет делать свою работу на автомате.
5. EWWW Image Optimizer
Как и все раскрученные плагины сжатия изображений вордпресс начинают описание его работы как о супер-пупер мастере джедае, мол этакая гроза для не сжатых картинок. Будто бы он в любой позе сделает из говна конфетку и одновременно выпьет стакан кофе на расслабоне. Ну о результатах его работы конечно судить вам.
От себя скажу, что этот плагин сделан достаточно качественно, потому, что вы имеете полноценную возможность управления уровнем сжатия, задержка сжатия, сжатие по расписанию, автоматическое сжатие, и т.д. Сразу видно, что разработчики продумали до мелочей этот плагин и я бы его отнес к профессиональным, т.к. он достоин внимания и он сможет стать полезным даже самым щепетильным пользователям.
Но даже у него есть минусы, он может не установиться и выдать ошибку, например у хостера выключено исполнение EXEC или отсутствуют определенные утилиты, которые нужно доустанавливать. После настроек этот плагин будет прилично оптимизировать скорость сайта и оправдает ваши ожидания.
6. CW image optimizer
По заявлениям разработчика этот плагин похож на WP Smush.it, а по сути это тоже простой плагин, может сжать уже загруженные изображения, обработка здесь же, а не на удаленном сервере, у него минимум настроек направленные на сжатие и всё тут. Так что тем, кто хочет просто сжать и забыть, то это он самый.
Конечно не без минусов, последний раз обновлялась более 3 лет назад, ну наверняка и поддержки никакой, но если у вас работает как надо, то на этот фактор можно не смотреть, а так достойный вариант любителям простоты.
7. Imagify
Этот вариант имеет 3 уровня сжатия, сжимает на этом же сервере, так что довольно простой, но имеет ограничение в 25Мб — примерно 250 изображений в месяц, а всё что свыше нужно платить, поэтому данный вариант будет удобен для маленьких сайтов. А в остальном этот плагин прост и доступен, для тех, кто не любит заморачиваться с настройками, то можете смело ставить.
8. Optimus
Этот плагин уже для сжатия отправляет изображения на свой сервер, который находится в Германии, далее сжимает и отправляет обратно. Может сжимать во время загрузки, сохраняет данные EXIF, сжимает даже миниатюры, может даже преобразовать в новый формат WEbP. У него достаточно функции и сжимает он без потери качества, но у каждой достойной вещи есть один минус — денег хотят.
Поэтому он предлагается в 3 вариантах:
- Бесплатный — сжатие изображении только до 100кб
- Optimis HQ — премиум версия для личного использования, с расширенными возможностями.
- Optimus HQ PRO — для полного профессионального использования, для множества сайтов.
9. Kraken Image Optimizer
Плагин сжимает изображения как новые, так и существующие и при желаний может сжимать без интеллектуальных потерь. Плагин без заморочек и лишних настроек, но есть косячок ))), в бесплатной версии ограничение в 100 мб. А если платите, то за $5 можно обработать 500Мб в месяц. Таким образом, если чуть стоящая вещь, то обязательно будет денежный барьер.
10. SEO Image Optimizer
Помимо сжатия изображений wordpress он может динамически менять ALT и метку. Обладает действительно простыми и понятными настройками и интуитивный интерфейс. Плагин ничего не хранит в базе данных, ведь некоторые гурманы не хотят засорять свою БД. Есть тех.поддержка, что иногда помогает решить проблемы. Так что в целом этот простачок тоже способен выручить вас.
11. Lazy load
А этот плагин не сжимает изображения. Тогда нахер он нужен? ))) Отвечу, даже из назания видно, что это ленивая загрузка, что значит картинки будут загружаться ещё до того как вы прокрутили страницу и картинка попала в видимую часть экрана. То есть картинки попросту загружаются заранее, что будет удобно при открытии. Но важно отметить, что этот плагин будет необходим для большого числа картинок на просматриваемых страницах.
Но тем не менее он очень важен для SEO показателей, поэтому он тоже в теме и помогает ускорить загрузку изображений, как бы там ни было.
12. Compress JPEG and PNG images
Данный плагин для сжатия изображений wordpress обеспечит автоматическое сжатие всех ваших картинок, даже анимированных PNG файлов. Поддерживает многоузловой режим через API. Настройки минимальны: достаточно поставить галочки какие форматы изображений нужно сжать, максимальный обрабатываемый размер, далее получаем ключ API у разработчика и готово.
Но опять обламываем кайф, у данного плагина есть ограничение бесплатного сжатия до 500 картинок в месяц. А всё что свыше, то нужны мани, причем выпендрились: следующие 9500 изображений по $0,009 за каждое изображение. Понятно, что он пойдет для малых потребностей.
13. Prizm Image
Плагин сжимает картинки JPEG, PNG и GIF, причем до 70%. Сразу отмечу, что сжатие происходит на другом сервере и работа идет по ключу API, который нужно получить после установки плагина. Для начала работы нужно выбрать из 3 качество сжатия, выбираете нужный режим работы и тайминг и готово.
И как правило в придачу к хорошему продукту предлагаю ограничение в 1000 изображений в месяц бесплатно, а далее идут тарифы от $5. Но нужно заметить, что в месяц 1000 изображений это уже приличная планка, поэтому этот плагин потянет легко и сайты с гораздо большим объемом изображений.
14. BJ Lazy Load
Этот плагин сжатия изображений удобен тем, что выполняет предзагрузку, т.е. он может загружать изображения до прокрутки видимой части экрана, так же может сжимать изображения. И вот всё бы хорошо, но плагин использует JQuery и JavaScript, поэтому если у клиента не установлен JavaScript, то вместо картинки будет отображаться код вывода картинки, что конечно зачтем как минус.
Настройки незатейливые и всем понятные: выбрать какие изображения подвергнуть сжатию, поддержка FRAME и ещё парочку и готово. Но нужно тут добавить, что по отзывам некоторые не видят сильной прибавки скорости, наверно потому, что используется JS, а в остальном работает у большинства без проблем.
15. Imsanity
Этот плагин сжатия изображений wordpress не сильно отличается от предыдущих, может сжимать уже загруженные картинки и в процессе загрузки, так же можно установить размер изображения для страниц и записей, размер для загруженных изображений, изображений вашей темы вордпресс (логотип, бэкграунд и прочее), далее можно выбрать качество сжатия и конвертировать из BMP в JPEG или нет. Вот такие простоватые настройки.
Этот плагин идеально подойдет для тех, кто не знает как сжимать и не хочет даже вникать, легче поставил этот бесплатный плагин и забыл.
16. Hammy
Нужно начать, что этот плагин на сегодняшний день (конец 2017) не обновлялся уже 4 года, но если до сих пор находятся те, кто его ставит, значит он делает свою работу.
Как для меня, так этот плагин для оптимизации изображений wordpress немного муторный. Суть его работы такова, что он делает замену тегов img на figure, работает только с записями и страницами, но никак не с пользовательскими изображениями. Он работает на jQuery, но если jQuery недоступен, он возвращается к обычному изображению, в котором вы были там, в первую очередь. Но главное в том, что плагин из ваших изображений создает ряд изображений с разными размерами и потом показывает наиболее подходящий размер. Это на мой взгляд удобно для мобильных устройств, что напрямую связано со скоростью загрузки.
17. PB Responsive Images
Этот пациент тоже не обновлялся более 4 лет. Но плагин интересен тем, что он использует шорт-коды, если вы захотите поднастроить по конкретные фотки индивидуальные параметры, то это легко. Более того, плагин обладает некоей логикой, если у вас экран менее чем 700 пикселей, то плагин выдает уже меньшее по размеру изображение, что является хорошей адаптивностью и большим плюсом.
Если у вас есть какие-то тонкие требования, то гибкость плагина позволит это сделать по индивидуальным запросам и если у вас не получилось реализовать желаемое, то можно почитать богатую документацию или на крайняк обратиться на официальный форум, где помогут с решением.
18. CheetahO Image Compression and Optimizer
Плагин для сжатия изображений wordpress работает через удаленный сервер по API (на несколько сайтов), причем сервера быстрые, поддерживает форматы JPEG, PNG, GIF. Используют свой запатентованный алгоритм сжатия и полностью подходит под WOOCOMMERCE. Но как всегда есть ограничение для бесплатной версии — это 500 изображений в месяц, а это значит только для небольших сайтов. ну да этот плагин тоже подойдет для тех, кто ничего не шарит в сжатии и обрезании.
19. Image Optimizer WD – WordPress Image Optimizer
Ну вот сколько уже рассмотрели, ну вроде хрена то надо, только картинки сжимать, ан нет, вот есть еще вариант, но некоторым этого мало. Этот плагин поддерживает сжатие и оптимизацию файлов PNG, JPG, GIF и PDF (только платной версии), а до этого PDF никто не обрабатывал, во как. Разработчики также бьются об заклад, что сжатие до 80% без потери качества, ну а в остальном так же может сжимать загружаемые и уже загруженные изображения, есть 3 режима сжатия, а еще предоставляет статистику по результатам своей работы. Но он может в месяц оптимизировать до 1000 изображений, что даже для среднего сайта вполне прилично.
Но все прекрасы начинаются только в платной версии, но возможности то есть.
20. TP Image Optimizer
Завершает наш хит парад бесплатный плагин, который имеет ряд существенных настроек (для бесплатной версии их много), сжимает до 90%, так же поддерживает JPG и PNG файлы, но для бывалого бойца этот плагин находка, потому, что он не привередливый и имеет круглосуточную тех.поддержку (не знаю как на деле). Если бы у меня стояла цель сжатия, то я бы выбрал этот вариант, потому как он будет удобен и начинающему и бывалому, так как многочисленные бесплатные настройки подойдут абсолютно для всех стандартных вариантов, но не для фанатов искусного сжатия.
Подытожим обзор плагинов сжатия изображений
Вроде что нужно от оптимизации изображений? просто сжать, но просмотрев на параметры каждого, понимаем, что каждый из них хоть чем-то да отличается друг от друга, поэтому решаем что для нас более важно и выбираем по этим параметрам. Я в этом обзоре старался выделить отличительную черту каждого плагина для оптимизации изображений wordpress, чтобы хоть немного была видна разница между ними, что так необходимо в обзорах.
Для себя бы я выделил следующие параметры для отбора:
- Бесплатность
- Количество изображений в бесплатном варианте — подходят ли вам ограничения по объему изображений
- Функциональность по требованиям — какие изображения и в каком формате нужно обработать
- Дополнительные опции — что нужно помимо сжатия и обрезки по размеру
Откровенно хочется, чтобы вам помог мой обзор и прочитав вы определились таки с удобным для вас вариантом. Если есть замечания, возражения или вопросы, то буду рад выслушать в комментариях.
Удачного вам выбора плагина для сжатия изображения!
myborder.ru
Что такое плагины оптимизации изображений WordPress
Так сложилось, что данная система управления содержимым сайта пользуется большим спросом среди обычных людей, ведущих собственные блоги, а также владельцев коммерческих проектов, вроде интернет-магазинов. Для успешной работы здесь предусмотрена возможность привлечения добавления стороннего программного обеспечения, при помощи которого можно добавлять на сайт какие-либо функции. Одним из таких инструментов являются плагины.
Они представляют собой дополнительный функционал, при помощи которого можно реализовать широкие возможности по оптимизации изображений. Данные инструменты могут выполнять широкий круг задач: от самых простых настроек, до сложных преобразований. К примеру, добавить на веб-страницу привлекательный участок дизайна, на котором в автоматическом режиме происходит смена картинок, создать фотогалерею и т. д.
Естественно, пользователи, которые не желают устанавливать что-либо, могут не использовать плагин для оптимизации изображений WordPress, а загружать предварительно обработанные и подготовленные фотографии. Это действительно так, и многие используют данный вариант, предпочитая графические редакторы, установленные на компьютере. Однако при ведении одновременно нескольких проектов, где происходит публикация сразу десяти и более статей ежедневно, самостоятельная оптимизация практически невозможна.
Плагины слайдеры
Найти хороший инструмент для создания слайдера очень сложно. Он представляет собой участок дизайна страницы, на котором происходит автоматическая смена фотографий, и используется по нескольким причинам: во-первых, данные элементы визуально привлекательны и способны повышать интерес посетителей к контенту; во-вторых, можно экономить место, поскольку один такой блок может вмещать в себя сразу несколько анонсов. Как правило, слайдеры – это программный код, а для его создания необходимо разбираться в языках программирования. Но существует и более простой вариант – платная или бесплатная установка специальных плагинов. На сегодняшний день в магазине Вордпресс их насчитывается более 700 штук. Среди наиболее известных и востребованных можно отметить:
- Meta Slider. На сегодняшний день это один из самых популярных инструментов. Общее количество загрузок в официальном магазине Вордпресс составляет два миллиона. Он представлен сразу четырьмя библиотеками для браузеров на персональных компьютерах. Создавать собственные слайды здесь довольно легко: достаточно загрузить картинку, выбрать одну из доступных библиотек, будь то Nivo Slider, Coin, Flex 2 или Responsive. Основной функционал Meta Slider предоставляется бесплатно, однако есть и платные функции.
- Easing Slider. Он не требует много места и позволяет настраивать не только размер, но и продолжительность показа с возможностью создания интерактивного слайд-шоу. В отличие от Meta Slider, здесь можно создавать только один вариант отображения.
- Smooth Slider. Его можно разместить абсолютно в любом месте веб-ресурса. Smooth обладает функциями адаптивного дизайна, то есть может легко подстраиваться под правильное отображение на различных устройствах, будь то компьютер, планшет или мобильное устройство. Также здесь существует выбор сразу шести версий перехода. В связи с постоянными обновлениями, он часто может работать некорректно.
- vSlider Multi Image Slider. В отличие от предыдущих вариантов, плагин дает возможность настраивать неограниченное количество слайдеров. Чтобы научиться правильно его использовать, веб-мастер может ознакомиться с видеоинструкцией, либо воспользоваться специальным форумом.
Плагины для увеличения фото WordPress
Многие платформы, включая Вордпресс, имеют огромное количество специальных инструментов для увеличения картинок. Эта функция очень удобна не только для новичков, которые не обладают навыками программирования, но и профессиональным веб-мастерам, желающим создать эффективную функцию на сайте и при этом сэкономить время. Плагины дают такую возможность: они делают все в автоматическом режиме, а все что необходимо пользователю – установить и активировать их.
- WP Lightbox 2. Это простой и в то же время эффективный инструмент для всплывающих окон. Он не занимает много места, однако, согласно отзывам, может работать с некоторыми дефектами. Например, может не реагировать на нажатие или долго грузиться. WP Lightbox 2 обладает адаптивным дизайном, возможностью сглаживать углы и регулировать размер картинок.
- Lightbox Bank. Он может работать как на ПК, так и на смартфонах. При этом наделен сенсорной навигацией. Стоит отметить, что Lightbox Bank один из немногих плагинов, отличающийся довольно привлекательным оформлением.
- Simple Colorbox. Отлично подходит для тех, кто только создал собственный блог и еще не разобрался в принципах работы. Simple Colorbox максимально упрощает задачи веб-мастера, поскольку полностью исключает какие-либо настройки – достаточно установить и активировать.
- Simple Lightbox. Это также простой плагин увеличения изображения в Вордпресс с несколькими темами оформления, которые различаются оттенками: темная и светлая. У него отсутствуют дополнительные настройки, а использовать его так же легко, как и Simple Colorbox.
Плагины фотогалереи для WordPress
- NextGEN Gallery. Это самое распространенное решение для фотогалереи одним миллионом активных установок. Помощью NextGEN Gallery можно добавлять и просматривать галереи, импортировать meta tags, а также проводить различные виды работ с фотографиями по добавлению, удалению, сортировке и так далее – здесь нет никаких ограничений. Существует несколько версий – бесплатная и по подписке. Во втором случае за покупку полной версии пользователь получает доступ к дополнительным функциям.
- Photo Gallery. Простой и в то же время эффективный инструмент, наделенный огромным количеством бесплатных функций. С его помощью можно загружать фотографии из видеохостингов, будь то Vimeo или YouTube. Но при этом пользователь может проявить фантазию при формировании галереи, выбирая формат на собственное усмотрение: миниатюры, слайды и т. д. Photo Gallery обладает адаптивным дизайном и может корректно работать на различных платформах. Также существует платная версия, позволяющая: во-первых, интегрировать работу с популярными социальными сетями, во-вторых, совмещать фото- и видеоматериалы.
- Gmedia Photo Gallery. Плагин фотогалереи для WordPress дает возможность работать с визуальным контентом разными способами: от его загрузки и импорта медиафайлов, до формирования слайд-шоу и добавления подробных описаний. Данное решение окажется лучшим, если пользователю необходимо разместить на сайте свои лучшие изображения. Главной особенностью Gmedia Gallery является возможность работы со всеми мобильными операционными системами.
- Lazy Loader. Это уникальное решение. Оно дает возможность загружать большое количество изображений без потери скорости загрузки веб-страниц. Принцип работы Lazy Loader следующий: когда пользователь заходит на сайт, модуль игнорирует фотографии до тех пор, пока тот не приступит к их просмотру (это определяется прокручиванием ленты).Lazy Loader играет важную роль в формировании позиций при ранжировании в поисковых системах, продвигая веб-страницы на верхние позиции поисковой выдачи.
Плагины для сжатия изображений WordPress
EWWW Image Optimizer – лучшее решение для сжатия картинок без потери качества. Он пользуется большим спросом, а общее количество установок уже достигло 700 тысяч. Его популярность объясняется тем, что это единственный плагин, осуществляющий сжатие файлов непосредственно на сервер веб-мастера. Несмотря на то, что основные функции в EWWW Image Optimizer предоставляются бесплатно, однако есть ситуации, требующие внесения денежной платы. Альтернативой является плагин сжатия изображений WordPress TinyPNG. С его помощью можно оптимизировать до пятисот картинок ежемесячно.
Зачем нужны плагины
Как уже отмечалось, изображения – одна из главных составляющих качественного и интересного контента: если они хорошие, общая привлекательность веб-страницы увеличивается, если они плохого качества – посещаемость будет ниже, а показатель отказов, то есть закрытия вкладки, – стремительно возрастет. Независимо от того, какое их количество применяется, важно чтобы все они были хорошо оптимизированы. Этот процесс представляет собой процедуру уменьшения размера. Он необходим, прежде всего, для того, чтобы увеличить скорость загрузки без потери качества.
Несмотря на обилие различных плагинов для картинок WordPress, web-мастерам довольно сложно выбрать вариант, который бы удовлетворил их.
Необходимость их применения заключается в том, что поскольку визуальная составляющая веб-ресурса не может игнорироваться при создании успешного проекта, авторам блогов очень трудно как-либо выделиться среди сотен контентмейкеров, которые публикуют статьи схожих тематик. К несчастью, сама система Вордпресс в решении данной проблемы не оказывает практически никакой помощи (то есть здесь отсутствуют подходящие для этого инструменты). Все что предлагает система – формирование миниатюр для постов.
Плагины дают возможность создавать применять различные визуальные решения. Среди огромного выбора в официальном официальном магазине Вордпресс можно найти различные варианты, будь то загрузчики, галереи или слайд-шоу.
Когда веб-мастер загружает картинку на веб-ресурс, Вордпресс автоматически создает для нее дополнительные размеры. Выбирать их можно в специальном разделе «Настройки медиафайлов».
Здесь у пользователя есть несколько вариантов: либо обрезать все пропорционально, либо доверить всю работу системе, без возможности внести собственные корректировки. Помимо этого здесь присутствует встроенный редактор, который также дает возможность оказывать влияние на размер.
semantica.in
Вступление
Здравствуйте! Уже давно не стоит вопрос, что нужно оптимизировать на сайте для «поисковой любви», а что может и так сойти. Действительность такова, что оптимизировать нужно всё (общие советы по оптимизации сайта). Причем одно цепляется за другое и все сотни правил индексации и ранжирования, работающие в поисковых алгоритмах, давно переплелись в единый клубок. Например, фотографии на сайте нужно оптимизировать обязательно.
Три части оптимизации изображений WordPress
Если посмотреть расширенный анализ скорости загрузки сайта в сети, это можно сделать любым специальным онлайн сервером, то увидим, что львиная доля времени загрузки занимают неоптимизированные фотографии.
Кроме, влияния на скорость загрузки, а она сейчас поисковиками отслеживается очень внимательно, в фотографию можно добавить ключевые слова, которые будут читаться поисковиками и влиять на позиции статьи по запросу. Разделим оптимизацию фотографий WordPress на три части:
- Оптимизация до добавления фото на сайт;
- Оптимизация при добавлении фото в статью;
- Массовая оптимизация фото на сайте без выгрузки.
Оптимизация изображений WordPress (SEO) при вставки в статью, анкоры изображений
При добавлении изображения на любой сайт, можно задать: анкор фотографии (анкор ссылки фотографии), её описание, заголовок и размер. Для поисковиков особое значение имеет анкор. Анкор фотографии задается атрибутом alt.
Полная HTML структура добавления фото в wordpress, выглядит так.
Без подписи фото:
<a href="http://domen.ru/wp-content/uploads/2015/09/foto.jpg"><img class="alignnone wp-image-1934 size-medium" title="Заголовок фотографии" src="http://domen.ru/wp-content/uploads/2015/09/foto-448x252.jpg" alt="Анкор фотографии" width="448" height="252" /></a>
С подписью фото:
<a href="Http://domen.ru/wp-content/uploads/2015/09/foto.jpg"><img class="wp-image-1934 size-medium" title="Заголовок фотографии" src="http://domen.ru/wp-content/uploads/2015/09/foto-448x252.jpg" alt="Анкор фотографии" width="448" height="252" /></a> Подпись фотографии
В WordPress все атрибуты фотографии, в том числе и анкор, задаются в визуальном режиме:
Атрибуты добавляются в режимах «Добавить медиафайл» или в режиме «Редактировать фото».
Правила для анкора фотографии
- Атрибут alt (анкор) для изображения должен быть уникальным.
- В статье, желательно, чтобы один анкор фотографии (атрибут alt) должен включать прямой ключ (ключевую фразу) статьи.
- Если хотите сгенерировать анкоры автоматом, идем на Majento.ru (Majento взят примера и не претендует на уникальность) в генератор анкоров.
Вывод 1
В системе WordPress полностью решен вопрос с оптимизацией кода изображений. При желании можно в визуальном режиме заполнить все необходимые атрибуты изображения важные для её оптимизации, а система сама поставит размер фото в тегах:
Оптимизация изображений до добавления на сайт
Оптимизацию изображений нужно начинать до добавления на сайт. И главное, это уменьшить объем фотографии без потери качества.
На помощь в этом вопросе придут программы по уменьшению размера файлов изображений. Здесь несколько правил:
- Наиболее легкие фотографии в расширении jpeg.
- Формат png и скриншоты в pnp самые тяжелые.
Для постоянной работы с фотографиями нужно попробовать несколько программ и выбрать парочку из них для постоянной работы. Я использую следующие программы по редактированию и сжатию фотографий:
- Стандартный инструмент Microsoft Office (отличное сжатие при изменении размера до 448x);
- Отличная программа Fast Stone Image Viewer (http://www.faststone.org/). Это отличный редактор с возможностью хорошего группового сжатия и изменения формата фото;
- Программа Caesium (https://saerasoft.com/caesium/). Это бесплатная программа, с отличным одиночным или групповым сжатием фотографий в формате jpeg.
- Рекомендую программу FileOptimizer (sourceforge.net/projects/nikkhokkho/files/latest/download). в отличие от Ceasium эта программа на Windows сожмет любые форматы картинок.
Вывод 2
Сжимать фотографии нужно до добавления на сайт WordPress.
Массовая оптимизация изображений Вордпресс
С помощью WordPress можно оптимизировать всю медиабиблиотеку WordPress, без выгрузки фотографий.
Для оптимизации фотографий уже помещенных в медиабиблиотеку WordPress используем плагин: EWWW Image Optimizer (протестирован на версии 4.4.2.). Плагин простой, но рабочий периодически обновляется. Плагин Cloud (2) позволяет оптимизировать фотографии с использованием облачных технологий и сжимает фото, без смены формата. Этот плагин платный, 0,005 $ за фото до 1000 фото.
Устанавливаете плагин стандартно, можно из панели WordPress на вкладке Плагины→Добавить новый→Поиск по имени.
После активации плагина он готов к работе, но можно пройтись по настройкам (Настройки→ EWWW Image Optimizer) Настройки на русском, опасные настройки выделены словом «Внимание!». Кстати, есть функция переформатирование фотографий из png и gif в jpeg. После настроек открываем страницу плагина и запускаем процесс оптимизации.
Через некоторое время, смотрим результаты сжатия фотографий. Отмечу, что я всегда сжимаю фото до сайта, однако плагин EWWW Image Optimizer умудряется «выжать» из каждой фото, от 5% до 20 %.
Вывод 3
WordPress, при помощи дополнительного плагина (плагинов), позволяет оптимизировать фотографии всей медиабиблиотеки сайта, в любой момент.
Общие выводы и советы
Как видите, оптимизация изображений WordPress не сложна. Игнорировать её не нужно, ведь фото основная причина медленного сайта. В довесок еще несколько советов по использовании фото на сайтах WordPress.
- Старайтесь выбирать векторные форматы изображений. Их качество не зависит от разрешения и размеров, из-за этого они отлично смотреться на больших мониторах и разных устройствах.
- Для SVG-ресурсов: сжимайте их, удаляете XML-разметку, проверьте настройку GZIP сжатие для SVG файлов.
- Для растровых фото: выберете свой масштаб и свой формат для растровых фото, избегайте GIF, сжимайте фото перед добавлением на сайт (63 Приложения для обработки фото без потери качества: здесь), не бойтесь снижать качество фото, уменьшайте по мере возможности цвет (оптимально 256 цветов), удаляйте ненужные метаданные (EXIF).
- Освободите браузер от необходимости масштабировать фото, для этого либо уменьшайте фото-файлы до вставки на сайт, либо используете плагины типа lightbox или эффект lightbox без плагина. Если большие картинки будет масштабировать браузер, производительность сайта значительно снизится.
- Автоматизируйте работу с фото с помощью тематических постоянно обновляемых плагинов.
В завершении статьи, напомню, что для облегчения сайта, можно очистить библиотеку и/или удалить неиспользуемые фотографии плагином Media Cleaner.
©www.wordpress-abc.ru
www.wordpress-abc.ru
По данным HackerTarget.com 20.9% сайтов из списка Alexa (104 684 из 500 000) работают на CMS WordPress. Из небольшого движка для блогов WordPress вырос в универсальную платформу для разработки сайтов, породив целую экосистему.
Компания Aberdeen Group провела исследование, согласно которому увеличение времени загрузки сайта на 1 секунду имеет следующие последствия:
- уменьшение количества просмотров страницы на 11%;
- снижение удовлетворенности покупателей на 16%;
- снижение рейта конверсии посетителей в покупателей на 7%.
40% мобильных покупателей покинут интернет магазин, страницы которого загружаются дольше 3 секунд.
В этой статье мы затронем тему оптимизации WordPress. Для лучшего раскрытия темы в будущих статьях мы проводим конкурс: пришлите нам рекомендации по оптимизации WordPress, не вошедшие в эту статью. Автору наиболее полных и полезных советов по оптимизации будет предоставлена VPS 1024 на год. В конце статьи ссылка на регистрацию бесплатной Cloud VPS для экспериментов с оптимизацией WordPress.
Тестирование производительности WordPress до оптимизаций
Давайте определим время загрузки сайта. Для тестирования воспользуемся сервисом GTMetrix.
Получено время загрузки страницы по сети 2.62 секунды.
Также проверим сайт сервисом WebPageTest. Результаты проверки ниже.
Время первой загрузки сайта 2.112 секунды. Время повторной загрузки сайта: 1.325 секунд.
Оптимизируем тему WordPress
Сжимаем графику без потерь
Для оптимизации изображений в теме WordPress (а заодно и всех медиа файлов) установите плагин WP Smush.it. Далее перейдите в раздел Media панели администрирования WordPress и нажмите Bulk Smush.it. Используемая графика будет сжата без потерь.
Используйте CSS–спрайты
Можно уменьшить число запросов к серверу, используя CSS–спрайты. Таблица спрайтов — одно большое изображение мелких графических элементов сайта. Благодаря CSS можно отображать каждый элемент по отдельности, используя свойство background-position.
Основное преимущество спрайтов — однократная загрузка всех элементов сразу и уменьшение числа HTTP-запросов.
Для создания спрайта можно воспользоваться сервисом spriteme.org. Переместите ссылку SpriteMe в панель закладок браузера. Откройте оптимизируемый сайт и нажмите на SpriteMе в панели закладок.
Справа откроется окно сервиса с предложением создания спрайтов из картинок темы WordPress. Нажмите Make sprite для создания. Также вы можете переместить в это окно и другие картинки для объединения в спрайт. После нажатия на Make sprite проверьте, что тема WordPress не изменилась и все элементы управления на месте. SpriteMe работает не идеально и в случае проблем придется делать спрайты самостоятельно. Если все прошло хорошо, нажмите export CSS. Откроется новое окно с CSS, которые нужно изменить на сайте. Скачайте полученный спрайт и сохраните в папку вашей темы WordPress. Откройте в любом текстовом редакторе css используемой темы. По правилам, предоставленным Sprite Me, найдите изображения, которые объединены в спрайт, и замените на спрайт с CSS. После редактирования CSS проверьте, что дизайн сайта не изменился. При редактировании чужих шаблонов процесс отладки CSS может занять некоторое время.
Если SpriteMe не помог вам, можно сгенерировать спрайты из набора изображений темы с помощью сервиса CSS Sprite Generator. Сервис хорош тем, что позволяет загрузить сразу набор изображений, а не загружать картинки по отдельности, как предлагает CSS-sprites.com.
Руководства по использованию CSS спрайтов, сгенерированных самостоятельно, приведены в статьях: CSS Background Image Sprites: A Beginner’s Guide и Creating easy and useful CSS Sprites.
Оптимизация изображений WordPress
При загрузке картинок на сайт не забывайте отрезать неиспользуемое пространство картинки (например белый фон), уменьшать размер картинки до необходимого в блоге. Если вы загружаете картинки большего размера и используете атрибуты width и height – картинки будут загружаться дольше. Также всегда заранее определяйте эти атрибуты при загрузке картинок.
Форматы файлов
До загрузки изображений проверьте, что они сохранены в оптимальном формате. Наиболее подходящие форматы PNG (8/24bit), JPG, GIF (для маленьких картинок). Иллюстрации с небольшим количеством цветов хорошо сохраняются в PNG 8bit. Фото и изображения с большим количеством цветов хорошо сохраняются в JPEG (используйте при сохранении наименьшее качество, которое не портит визуально изображение). Данный совет может показаться банальным, но он позволяет в разы уменьшить объем загружаемых картинок.
Сохранение с максимальным качеством (494.5 кб):
Сохранение со средним качеством (94.34 кб):
Gravatar и аватарки
Использование Gravatar замедляет производительность сайта. Если отображение аватарок не нужно, его можно отключить в разделе Settings->Discussion панели администрирования WordPress.
Можно пойти другим путем:
- кешировать аватарки gravatar по cron;
- кешировать аватарки в комментариях;
- хранить одну копию изображения аватарки на пользователя для тех, у кого аккаунт не ассоциирован с gravatar.
Для этого необходимо установить плагин FV Gravatar Cache.
После установки FV Gravatar Cache необходимо в настройках плагина включить выполнение операции по cron:
Здесь же можно сразу запустить выполнение задачи.
jQuery Image lazy load
JQuery Image lazy load WP позволяет загружать картинки только в момент, когда пользователь просматривает их на экране. Функция может не работать при использовании кеша, генерирующего статические файлы. Для включения этой возможности установите плагин jQuery Image Lazy Load WP. Были проведены тесты конкурирующих плагинов BJ Lazy Load и Lazy Load, но результаты у этих плагинов оказались хуже, чем у JQuery Image lazy load WP в среднем на 0.40 секунды на тестируемых сайтах.
Не стоит использовать картинки с текстом
Добавление картинок только с текстом на сайт — не очень хорошая идея. Это увеличивает количество запросов к серверу и не дает поисковым системам корректно читать текст в картинках. Если возможно — используйте текст, стилизованный в CSS в логотипах. Google предоставляет богатый набор шрифтов для использования в вебе, который поможет во многих случаях отказаться от картинок с текстом.
Очистка сайта
Отключите неиспользуемые расширения. Это поможет уменьшить нагрузку на CPU хостинга. Установите уже упомянутый выше P3 плагин, который позволит увидеть, какие плагины потребляют больше памяти и оказывают негативное влияние на производительность сайта в целом.
Отключите Pingback и Trackback (опционально)
Pingback – тип комментариев, который создается, когда вы ссылаетесь на другой пост. Сославшись на другой пост в комментарии автор поста увидит pingback в своих комментариях.
Trackback – тип комментариев со специальной ссылкой. Обычно блоги, которые хотят принимать trackback, размещают ссылку в конце постов. Ссылка вставляется в другой блог и используется для комментариев в оригинальном посте.
Если эти возможности вам не нужны, можно их отключить, освободив тем самым немного ресурсов сервера. В панели администрирования WordPress перейдите в раздел Settings->Discussion и отключите «Attempt to notify any blogs linked to from the article» и «Allow link notifications from other blogs (pingbacks and trackbacks)». Не забудьте сохранить изменения.
Уменьшите количество спама в комментариях
Использование плагина Akismet, который включен в инсталляцию WordPress по умолчанию позволяет значительно снизить объем спама в комментариях и в итоге снизить нагрузку на сервер.
Кеширование и минификация
Ограничьте поиск DNS до 1-5 различных имен хостов
До установки браузером сетевого соединения с веб-сервером, браузер разрешает название сайта в ip–адрес. DNS записи могут быть закешированы браузером клиента и операционной системой. Если правильная запись по-прежнему в кеше клиента, задержек не возникает. Тем не менее, если клиенту необходимо выполнить поиск DNS по сети, задержки могут быть достаточно большими, в зависимости от расположения DNS сервера. Уменьшить время поиска DNS важнее, чем другие виды запросов.
Каждый раз, когда вы запрашиваете ресурсы (картинки, CSS–файлы, JavaScript–файлы и т.д.) с других имен хостов, вы увеличиваете количество поисков DNS для ваших посетителей сайта.
Если имя хоста в другом домене или поддомене — это увеличивает количество поисков DNS.
pic1.sitename.ru ≠ pic2.sitename.ru ≠ google.com
Ограничьте количество ресурсов, откуда берете контент до 4-5 максимум.
Чтобы увидеть все внешние ресурсы, используемые на вашем сайте, откройте Firebug в Firefox на сайте и перейдите в раздел NET->ALL.
Более подробно об этом правиле в разделе Yahoo! для разработчиков.
Сделайте JavaScript и CSS внешними
Вынесите JavaScript и CSS во внешние файлы, когда это возможно. Это позволит собрать из разных CSS–файлов один и объединить JavaScript файлы.
Положите ссылки на CCS файлы сверху, а ссылки на JavaScript файлы снизу
Большинство браузеров сначала парсят JavaScript файлы, размещенные сверху до загрузки других ресурсов, так как JavaScript может изменять функциональность страницы. Это может снизить параллелизацию загрузки контента.
Если вы положите скрипты сверху, ваши посетители могут наблюдать пустую страницу до окончания загрузки JavaScript. Это может плохо повлиять на производительность. Поэтому скрипты следует размещать снизу страницы.
CSS-файлы должны быть размещены сверху страницы в header. Если это не так, возможно также негативное влияние на параллелизацию загрузки.
Включение кеширования и минификации
Установите и активируйте Use Google Libraries. Некоторые JavaScript библиотеки, распространяемые с WordPress также хостятся в Google AJAX Libraries API. Плагин позволит WordPress использовать CDN от Google вместо использования файлов из вашей инсталляции WordPress. Более детально о преимуществах такого подхода рассказано в статье «3 reasons why you should let Google host jQuery for you».
Также установите и активируйте плагин W3 Total Cache. Для активации эффективного кеширования в памяти нужно на сервер установить Memcached. Мы используем Облачные VPS от Infobox с Ubuntu 14.04.
Устанавливаем Memcached:
apt-get install memcached Редактируем конфиг <strong>/etc/memcached.conf</strong>: #/etc/memcached.conf #Memcached будет работать, как демон -d #Место для хранения логов logfile /var/log/memcached.log #Объем оперативной памяти под хранилище -m 256 #Используемый порт -p 11211 #Слушаем localhost -l 127.0.0.1 Перезапускаем Memcached
/etc/init.d/memcached restart Компилируем и устанавливаем модуль поддержки Memcached для PHP
apt-get install php5-dev libmemcache-dev pecl download memcache tar xzvf memcache-2.2.7.tgz cd memcache-2.2.7/ phpize && ./configure --enable-memcache && make cp modules/memcache.so /usr/lib/php5/20121212/ echo 'extension=memcache.so' >> /etc/php5/apache2/php.ini /etc/init.d/apache2 restart Для работы минификации в W3 Total Cache необходимо установить Java.
apt-get -y install software-properties-common add-apt-repository ppa:webupd8team/java apt-get update apt-get install oracle-java8-installer Определить расположение java можно командой
which java Также для минификации нам потребуется yuicompressor.
wget https://github.com/downloads/yui/yuicompressor/yuicompressor-2.4.7.zip unzip yuicompressor-2.4.7.zip cd yuicompressor-2.4.7 apt-get -y install ant ant cd build mkdir /usr/share/yuicompressor mv yuicompressor-2.4.7.jar yuicompressor.jar cp yuicompressor.jar /usr/share/yuicompressor/ Перейдите в панель администрирования WordPress в раздел Performance->Minify (если такого раздела нет — перейдите в раздел плагинов, найдите W3 Total Cache и нажмите Settings).
Включите Rewrite URL structure.
Активируйте оптимизации HTML и XML:
Оптимизации для JavaScript:
Оптимизации для CSS:
Теперь настроим в разделе Performance->Page Cache:
Далее в разделе Performance->Browser Cache:
Если вы используете CDN – отключите компрессию. В CDN уже есть компрессия.
Оптимизации для CSS, JavaScript и Media в разделе Browser Cache:
Используйте CDN
CDN позволяет получать статический контент (такой, как картинки, CSS–файлы и JavaScript–файлы) из различных локаций мира. У ваших посетителей контент будет открываться быстрее с сервера, расположенного ближе к нему географически. CDN оптимизирована для обработки статического контента быстрее, чем большинство хостингов. Также CDN уменьшает нагрузку на сеть к главному серверу и снижает вероятность падения сервера от избыточной нагрузки. Eще одна особенность CDN – улучшение паралеллизации загрузки данных. Большинство браузеров имеют ограничения по ресурсам, которые они загружают с одного хоста (домена или поддомена). Даже если на вашей странице 10 картинок, браузер будет загружать параллельно только по 2 картинки.
Тем не менее мы по-прежнему не хотим проблем с поиском DNS. Google дает нам совет:
Вы не должны использовать 1 хост меньше чем для 6 ресурсов. Меньше чем 2 ресурса на хосте — совсем плохо. Вы никогда не должны использовать больше, чем 5 хостов (не считая серверов, над которыми вы не имеете контроля, например серверов, обрабатывающих рекламу для вашего сайта).
Убедитесь, что ни один хост не обрабатывает более 50% нагрузки от всех хостов.
Настройка CDN
В данном примере мы будем настраивать CDN от CloudFlare. Установите плагин CloudFlare.
1. Создайте аккаунт у CloudFlare
2. Добавьте ваш сайт:
3. Настройте уровни производительность и безопасности, а также выберите тарифный план (бесплатный план не поддерживает SSL и имеет другие ограничения).
4. Измените ваши DNS–сервера.
Включите в разделе управления DNS от CloudFlare CDN для вашего домена (клик по иконке с облаком, чтобы иконка стала оранжевой).
После этого в разделе Plugins->CloudFlare установите правильные данные для доступа к сети CDN от CloudFlare: имя домена, email и ключ API.
habr.com