Оптимизация wordpress сайта на 2022 год

PPI

PPI — это количества пикселей, которые экран может отображать на дюйм. Retina- экраны имеют в два раза больше пикселей по вертикали и горизонтали. Поэтому пространство, которое раньше занимало один пиксель, теперь содержит четыре пикселя.

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

Retina, 398 КБ

Не Retina

Retina-экраны пытаются распределить данные по всей поверхности. Для пустых пикселей они пытаются использовать данные из пикселей, расположенных вокруг них. Чтобы это исправить, нужно предоставить WordPress более плотные изображения.

Создайте ленивую загрузку

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

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

А реализовать его можно с помощью плагина для WordPress — любого из этого списка.

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

Автоматическое Изменение Размера Изображения

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

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

Эта функция существенно сокращает избыток от вашего самого большого изображения

Smush также дает вам возможность сохранить копию исходного изображения. Эта функция существенно сокращает избыток от вашего самого большого изображения.

Кроме того, вы можете воспользоваться функцией «Отложенная загрузка» и CDN — загрузкой изображений на быструю CDN от WPMU DEV с функциями многоуровневого сжатия и автоматического изменения размера. Это основной инструмент для улучшений скорости загрузки вашей страницы, с помощью снижения нагрузки на сервер.

Как отредактировать изображение

Разработчики WordPress были достаточно любезны, чтобы представить функцию, позволяющую Вам изменять изображения, которые уже загружены в библиотеку медиафайлов WordPress. Чтобы сделать что-то дополнительное на картинке, просто выберите ее в списке медиа-библиотеки и нажмите кнопку «Редактировать (Edit Image)» под ней.

Теперь Вы можете обрезать, повернуть и перевернуть изображение, не загружая его еще раз. Есть также кнопки отмены и повтора, которые позволят Вам исправить ошибки во время редактирования. Этот инструмент, очевидно, не является заменой для Photoshop, но он делает чудеса для небольших быстрых исправлений.

Масштабирование

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

Обрезка

Чтобы обрезать изображение, нажмите на него, и переместите курсор, чтобы сделать свой выбор. Удерживая клавишу Shift во время выбора, Вы сможете сохранить соотношение сторон. Если захотите изменить его, смените соотношение сторон на правой стороне экрана. Например, используйте соотношение 1:1, чтобы сделать квадратную селекцию, или измените его на 4:3, 16:9 или на что-нибудь еще, как захотите. После того, как сделаете свой выбор, можно быстро его подстроить, выбрав размер в пикселях. Минимальный размер диапазона — это размер миниатюры, заданный в настройках медиафайла.

Применить изменения

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

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

Фотошоп, Иллюстратор и некоторые другие программы Adobe имеют инструмент оптимизации изображений.

Откройте файл и перейдите File — Export — Save for Web.

Если вы хотите сохранить изображение в формате png, выберите PNG-8, выберите количество цветов изображения и метаданные, которые вы хотите оставить в конечном файле:

Изображение s.salvador с сайта Freepik Фотошоп — Сохранить для веб — png

Если вы будете сохранять в png, то под выбором формата есть настройки модели. Я использую эти настройки, вы можете попробовать другие:

Selective
Adaptive

No Dither
Diffusion
Pattern

No Dither хорошо справляется с разными цветами, но плохо с градиентом. Pattern хорошо с градиентом, но хуже с цветами, на некоторых цветах появляются артефакты.

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

Если вы хотите сохранить изображение в формате jpg, то выберите JPEG, выберите качество изображения или готовую настройку и метаданные, которые вы хотите оставить в итоговом файле:

Изображение edvaldocostacordeiro с сайта PixabayФотошоп — Сохранить для веб — jpeg

Бесплатные альтернативы Фотошопу — программы GIMP и Paint.net.

ImageOptim

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

Альтернатива для Windows — Trimage.

JPEG Mini

Jpegmini.com использует технологию компрессии, которая уменьшает размер изображений до 80%, при этом сохраняя оригинальное разрешение и качество картинки.

Вы можете установить триал версию программы на компьютер, или купить плагины для Фотошопа и Лайтрума. После триального периода нужно купить платную версию.

Программа стоит 59$, программа и плагины для Фотошопа и Лайтрума стоят 89$.

Также есть платное подключение по API для разработчиков.

Шаг 3: Оптимизируем изображения

Наконец-то финальный этап — это сжатие изображений без потери качества. То есть, уменьшения их размера.

Вариант 1: Оптимизировать на сервере (долго)

Плагинов для оптимизации (сжатия) изображений предостаточно. К примеру, в статье The 6 Best WordPress Image Optimization Plugins Compared рассмотрены шесть самых лучших. Я бы посоветовал плагин WP Smush из-за красивого интерфейса.

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

Вариант 2: Оптимизировать на компьютере (быстро)

Более быстрым будет пакетная обработка изображений на компьютере, особенно если он у вас мощный. Для этого нам понадобится программа JPEGmini, к сожалению работающая только с JPEG изображениями. Просто закидываете в неё папку uploads и она сжимает в ней все изображения, пропуская другие типы файлов. По окончании будет сказано, сколько мегабайт удалось выиграть.

Теперь все оптимизированные файлы загружаем обратно на сервер и проверяем показатели Google Pagespeed Insights.

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

Вариант 3: Оптимизация на лету

Установить плагин Jetpack от WordPress.com, который использует CND для изображений. Данная функция называется “Производительность с изображениями”. К сожалению, у данного плагина есть и один большой недостаток — он очень грузит сайт.

Как настроить функцию задавать миниатюру по умолчанию?

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

Вы можете установить резервное изображение, которое по умолчанию будет использоваться в качестве миниатюры. Для этого вам придется прописать код в файл темы functions.php или установить плагин default featured image (автоматическое задавание миниатюры). Вне зависимости от того, какой способ вы выберите, по умолчанию на вашем сайте будет использоваться ваше фирменное изображение, гармонирующее с дизайном сайта.

Плагины WordPress для сжатия

В WordPress имеются плагины для решения различных задач.

Следующие плагины будут оптимизировать ваши изображения при загрузке и даже оптимизировать любые изображения уже в медиа-библиотеке:

Imagify Image Optimizer – плагин предлагает несколько уровней сжатия, изменение размера изображения, восстановление изображений и многое другое.
ShortPixel Image Optimizer – бесплатный плагин позволяет вам сжимать до 100 изображений в месяц и обрабатывать несколько разных форматов изображений. Кроме того, он имеет встроенную функцию восстановления и групповую оптимизацию.
WP Smush – плагин будет оптимизировать изображения при их загрузке на ваш сайт, а также оптимизировать существующую медиа-библиотеку. Это уменьшит размер ваших изображений, не оказывая влияния на качество.
Optimus Image Optimizer – лёгкий плагин оптимизирует ваши изображения при помощи сжатия без потери общего качества, просто за счёт уменьшения размера файла.
Compress JPEG & PNG images – плагин от сайта TinyPNG.com. Автоматически оптимизирует новые изображения на сайте. Есть бесплатный лимит.

Плагины фотогалереи для 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 создал еще 7 миниатюр к ней — 7 копий этой картинки, при этом некоторые из дублей могут быть почти такого же размера как и оригинал. Из этих 7 копий всего одна пойдет на главную страницу, да и то провисит там пока её не сменит очередная и использованный файл будет лежать на хосте пожизненно, а использовался он день или неделю. Если у вас на сайте тысячи картинок, то это может вызвать проблемы и сложности.

Как сжать картинку без потери качества?

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

1. Compressor.io − бесплатный онлайн-сервис, позволяющий уменьшать вес картинок до 90 %, причем изображения форматов JPG и PNG можно оптимизировать без потери качества. Лимит по размерам загруженного файла – 10 MB.

2. ILoveIMG.com − онлайн-редактор для обработки и оптимизации изображений до наименьшего возможного размера без потери визуального качества. Сжимает картинки в форматах PNG, JPEG, GIF, а также преобразует сырые форматы TIFF и RAW в формат JPEG. Предусматривает возможность добавления водяных знаков.

3. Image Compressor − оптимизатор изображений, позволяющий сжать одновременно до 20 картинок в форматах JPEG и PNG до минимально возможного уровня.

4. Kraken.io − популярный интерфейс, в котором предусмотрена функция оптимизации изображений веб-ресурса: нужно ввести url сайта и получить архив с уже сжатыми изображениями.

5. Imagify.io − продвинутый инструмент для оптимизации изображений в WordPress, не уступающий по функционалу полноценным графическим пакетам. Имеет более 300 000 активных установок. Поддерживает широкий спектр типов файлов. Доступно 3 уровня оптимизации веса картинок до 98 % как с потерями, так и без.

Включение Gzip-сжатия на WEB-сервере хостинга – еще один способ улучшить быстродействие страниц сайта. Все современные браузеры, в том числе и мобильные, способны обрабатывать сжатые файлы с расширением .gz.: распаковывать и отображать их содержимое.

Зачем оптимизировать изображения на сайте?

Оптимизация картинок на веб-ресурсе упрощает считывание с него информации поисковыми алгоритмами и повышает комфорт пользователей. В контексте изображений SEO-работы решают такие задачи:

Ускорение загрузки;
Индексация картинок поисковыми системами;
Повышение юзабилити.

В прошлом году Google внедрил обновление Core Web Vitals. Теперь скорость загрузки страницы — один из важнейших факторов ранжирования. Выражается он метрикой LCP (Largest Contentful Paint) — время прорисовки самой большой картинки на экране.

Узнать скорость загрузки страниц и проанализировать факторы, которые на это влияют, можно в сервисе Google Pagespeed Insights. Введите в поле необходимый URL, и система не только предоставит отчет, но и даст рекомендации по увеличению скорости загрузки страницы.

Второй показатель Core Web Vitals, который влияет на место в поисковой выдаче, называется CLS (Cumulative Layout Shift). Он учитывает смещения объектов на странице во время ее загрузки. Чтобы его минимизировать, прописывайте размеры изображения в CMS.

Как автоматически оптимизировать загружаемые изображения на блог? Классный плагин ниже…

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

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

Искал решение далее, и кто ищет, тот найдет…

Вот классный плагин: Resize Image After Upload

Идем в Плагины — Добавить новый, и устанавливаем этот самый плагин…

На вкладке Установленные, он отобразится так:

После чего, на вкладке Настройки — Resize Image Upload, предлагаю сделать точно также:

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

И ниже, ещё одна интересная опция — Compression options, благодаря которой вы полюбите этот плагин ещё сильнее….

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

Вот и всё. Просто не так ли?

p.s. И в завершении статьи, хочу сказать по поводу старых изображений, который возможно у вас не обработаны и помимо этого, по поводу старых копий. Я решил на это дело просто закрыть глаза. Тем более, если вашему блогу меньше 2 лет , и статей менее 500 штук — просто не парьтесь по этому поводу. Главное, сделайте то, что сегодня в выпуске.

Да, конечно есть решения поиска неиспользуемых миниатюр, которые мы отключили, например через плагин — Force Regenerate Thumbnails , но есть большая проблема в том, что любое автоматическое решение, вместе с неиспользуемыми миниатюрами, может ошибочно удалить нужные изображения. Например, если изображение называется вида — pomidor_320х400.jpg , но при этом оно используется в статье, то большая вероятность, что это изображение также стерется. И в статье получится битое изображение (удаленное). Как бы ладно, когда статей не так много, это ещё ничего страшного. Но в моем случае, проблема получилась масштабной. И за всё время ведение сайта, получилось 1400 битых изображений. Поэтому, я решил не удалять старые, а оставить, чтобы не навредить сайту. Как никак до этого момента, всё было хорошо.

Кстати, битые ссылки и битые изображения, можно отслеживать через плагин: Проверка нерабочих ссылок

Broken Link Checker — Проверка нерабочих ссылок

Всем спасибо!

Денис Повага

1-2 раза в год, веду до результата в блогинге, при наличии мест.
Для связи: ok.ru/denis.povaga

Комментарии: 2964Публикации: 793Регистрация: 12-03-2013

Как узнать какие размеры используются на сайте?

По умолчанию WordPress создает четыре копии:

— миниатюра (меняется из админки).
— средний размер (меняется из админки).
— умеренно большой (с WP 4.4.).
— большой (меняется из админки).
— 2x medium_large (c WP 5.3).
— 2x large (c WP 5.3).
-scaled — см. эту заметку.

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

Прежде всего, вам нужно определить сколько копий создается при загрузке изображения. Для этого зайдите в админ панель и загрузите изображение большого размера, пусть это будет картинка 1900х1000 пикселей (большой размер нужен для того, чтобы были созданы все возможные копии). Затем зайдите в папку загрузок изображений, обычно это: . Там файлы сортируются по годам и месяцам, зайдите в последний год и месяц, там вы должны увидеть файл, который только что загрузили и все его копии:

Мой тестовый блог, где нет ни одного дополнительно зарегистрированного темой размера, создал 7 копий

Пример с загрузкой изображения, показывает сколько их создается, но не показывает как называется каждый размер. Название (ID) размера нужно знать, чтобы его отключить.

Чтобы узнать какие размеры зарегистрированы на сайте, добавьте следующий код в файл темы header.php или footer.php. Так вы увидите какие на сайте существуют размеры и как они называются.

/**
 * Получает информацию обо всех зарегистрированных размерах картинок.
 *
 * @global $_wp_additional_image_sizes
 * @uses   get_intermediate_image_sizes()
 *
 * @param  boolean  Удалить из списка размеры с 0 высотой и шириной?
 * @return array Данные всех размеров.
 */
function get_image_sizes( $unset_disabled = true ) {
	$wais = & $GLOBALS;

	$sizes = array();

	foreach ( get_intermediate_image_sizes() as $_size ) {
		if ( in_array( $_size, array('thumbnail', 'medium', 'medium_large', 'large') ) ) {
			$sizes = array(
				'width'  => get_option( "{$_size}_size_w" ),
				'height' => get_option( "{$_size}_size_h" ),
				'crop'   => (bool) get_option( "{$_size}_crop" ),
			);
		}
		elseif ( isset( $wais ) ) {
			$sizes = array(
				'width'  => $wais,
				'height' => $wais,
				'crop'   => $wais,
			);
		}

		// size registered, but has 0 width and height
		if( $unset_disabled && ($sizes == 0) && ($sizes == 0) )
			unset( $sizes );
	}

	return $sizes;
}

die( print_r( get_image_sizes() ) );

Теперь зайдите на сайт и вы увидите подобный массив:

Array
(
	 => Array
		(
			 => 150
			 => 150
			 => 1
		)

	 => Array
		(
			 => 300
			 => 300
			 =>
		)

	 => Array
		(
			 => 768
			 => 0
			 =>
		)

	 => Array
		(
			 => 1024
			 => 1024
			 =>
		)

	 => Array
		(
			 => 825
			 => 510
			 => 1
		)
)

Используйте плагин WP-Disable

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

Вот настройки, на которые стоит обратить внимание:

Отключить смайлики. Это дополнительный файл .js, который добавляет WordPress. Если вы абсолютно не любите эмодзи, вы можете безопасно избавиться от него.
Удалить строки запроса. Это то, что многие инструменты тестирования будут вам интересны.

Измените частоту пульса API на 60 секунд. Это уменьшает нагрузку на ваш сервер, но при этом дает вам преимущества Heartbeat API .
Измените ревизии на 1. Хотя некоторые люди любят полностью отключать ревизии , я считаю полезным сохранять хотя бы одну ревизию. Это по-прежнему уменьшает нагрузку, а также дает вам хотя бы одну ревизию на случай, если что-то пойдет не так с вашим текущим проектом. Впрочем, можете выбрать любое другое число.
Отключить встраивание карт Google. Если вам абсолютно необходимы Google Maps, вы можете оставить эту настройку включенной. Но большинство сайтов могут обойтись без прямого встраивания Google Maps. Плагин позволит вам исключить определенные страницы, если вам просто нужно использовать Google Maps на определенной странице.

Сжатие ваших изображений

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

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

В отличие от файлов в формате PNG или GIF, JPEG’и сжимаются с потерями, что говорит о том, что мы можем добиться хороших результатов, уменьшая размер файла. Минус заключается в том, что вам нужно тщательно просматривать результаты конверсии на предмет присутствия нежелательных визуальных артефактов, как на картинке ниже.

Мы должны соблюсти баланс между приемлемым качеством картинки и минимальным размером файла. Тут стоит заметить, что файлы в формате PNG и GIF также можно выгодно сжать. Данный пример с TinyPNG показывает, что сжимать такие файлы тоже имеет смысл:

Оптимизация HTML картинки

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

Чтобы поисковик добавил картинку в индекс, нужно, как минимум задать картинке тег alt. По определению тег alt, или альтернатива, будет показан пользователю, если его браузер не открывает картинку. Иными словами, именно тег alt увидят поисковые боты.

Важно! Все картинки, размещенные на сайте должны иметь тег alt. Отсутствие хотя бы одного тега alt на одной картинке статьи (страницы) воспринимается ботами, как негативный фактор оптимизации данной страницы

Теги title (заголовок) и description (описание) для картинок на сайте WordPress тоже можно легко задать, но они не важны для оптимизации и скорее, важны для пользователя, чем для ботов.

Напомню, тег description (описание) для картинок, на сайте WordPress, будет виден пользователю под картинкой.

При заполнении всех полей для вставляемой картинки, HTML код будет такой (в новом редакторе Gutenberg):

SEO оптимизация изображений

После того, как вы оптимизировали размер и объем изображения и выбрали подходящий формат, назовите готовый файл так, чтобы было понятно, что изображено на картинке. Не называйте файл Untitled.jpeg, Без-названия.png или 01.webp.

Закачайте картинку на сайт и добавьте атрибуты Alt и Description. Эти теги говорят поисковым системам что изображено на картинках. Заполните как минимум поле Alt.

Добавьте атрибут Alt и Описание

Описания к картинкам индексируются поисковыми системами и вы можете получить больше переходов на свой сайт из раздела Картинки поисковых систем.

Трафик из раздела Картинки поисковых систем

Также эти теги помогают пользователям с нарушениями зрения, так как их программы чтения с экрана могут читать им теги Alt и Title.

Заключение

Оптимизировать изображения для публикации на сайте можно разными способами.

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

Если вы начинаете новый сайт, то оно того стоит.

После оптимизации в Фотошопе картинки имеют маленький размер, так что до-оптимизацию на сайте с помощью плагина можно не делать.

Хороший результат у плагинов TinyPNG и ShortPixel. EWWW Image Optimizer хороший плагин, но его сложнее настроить.

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

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

Как подключить Вордпресс к CDN Cloudflare

Где брать бесплатные картинки в хорошем качестве для публикации на сайте без нарушения авторских прав
SEO для Вордпресс. Подробная инструкция
12 советов для SEO оптимизации Блога

Pinterest входит в топ-5 социальных сетей мира. В ней всего 250 млн пользователей, но практически каждый из них ищет здесь идеи, вдохновение и товары и готов потратиться на понравившиеся вещи.

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

Если на сайте есть привлекательные оптимизированные изображения или видео, стоит включить Pinterest в стратегию: он приведет горячий трафик на ресурс совершенно бесплатно. Кроме того, платформа − отличный инструмент для развития бизнеса, предоставляющий огромный шанс быть впереди конкурентов.

Часто задаваемые вопросы

Как оптимизировать сайт на wordpress?

Приведенный ниже советы помогут вам сделать меньше ошибок при оптимизации сайта вордпресс.

Перед настройкой сделайте резервную копию. Сначала протестируйте его в тестовом режиме.
Проверяйте сайт после каждой корректировки. Новая корректировка также может нарушить ваши предыдущие корректировки.
Продолжайте следить за сайтом в Google Search Console. Вы что-то сделали не так? Google скоро расскажет.
Не используйте несколько сервисов CDN одновременно. Например, не используйте CDN для статических файлов, а также Cloudflare одновременно.
Некорректный переход с http на https. Каждый URL-адрес на веб-сайте должен начинаться с https. Забудьте о плагинах типа «Simple SSL», он работает (возможно), но не делает ваш сайт быстрее и лучше.

Почему WordPress медленно работает?

Есть 3 наиболее распространенные причины плохой работы:

В теме слишком много функций. Выбрать тему WordPress не легко, особенно для пользователя новичка WordPress. Бесплатные темы, которые можно установить через панель управления WordPress, не содержат четких примеров и имеют меньше функций, чем темы, которые можно купить.Есть бесплатные и платные темы, и у обеих есть недостатки. Многие владельцы веб-сайтов сразу переходят в Themeforest, потому что там широкий выбор «полных» тем. После завершения установки, часто устанавливаются функции, которые никогда не понадобятся простому веб-сайту. Результат: меньшая гибкость и часто приводит к замедлению веб-сайта.
Установлено много плагинов. Плагины WordPress доступны почти для каждой функции. С помощью этой стратегии можно быстро найти подходящий плагин для небольшой оптимизации или корректировки веб-сайта. Регулярно попадаются неисправные веб-сайты WordPress с более чем 40 плагинами.Скорее всего, несколько плагинов выполняют одну и ту же функцию итоговый результат: веб-сайт становится медленным, необходимые обновления выходят из строя, много плагинов не работают вместе.
Веб-хостинг не работает должным образом. Для WordPress существуют тысячи хостинг-провайдеров. Цены варьируются от нескольких тысяч в год до более 250 евро в месяц. Не выбирайте самый низкий тариф! Дешевый пакет хостинга может быть причиной того, что сайт работает медленно и, возможно, даже небезопасно.У более чем 90% сайтов «плохой» хостинг является основной причиной медленной работы сайта?

Лучшие бесплатные компрессоры изображений для Windows

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

1. Caesium Image Compressor

Установив Cesium, вы можете сжимать изображения до 90% без изменения его качества. Кроме того, вы можете загрузить сразу несколько изображений и сжать их. Изображения можно использовать после завершения процесса. Цезий поддерживает JPEG, PNG и BMP.

Вы можете скачать Cesium Image Compressor с их официального сайта.

2. PNG Gauntlet

PNG Gauntlet – еще один компрессор изображений для Windows. Помимо сжатия изображений, это программное обеспечение может конвертировать другие форматы изображений в PNG. PNG Gauntlet не изменяет качество изображений, а только уменьшает размер.

3. File Optimizer

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

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

4. PNG Optimizer

Четвертый инструмент в нашем списке – Оптимизатор PNG . Этот инструмент может конвертировать различные форматы в PNG и оптимизирует только файлы PNG. Оптимизатор PNG также работает в Linux. Это также отличный инструмент для оптимизации большого количества изображений, поскольку он очень быстро выполняет свою работу.

5. jStrip

Еще один бесплатный компрессор изображений для Windows – jStrip . jStrip может обрезать и сжимать изображения без изменения их качества.

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

Уменьшите HTTP-запросы на WordPress

Всякий раз, когда кто-то заходит на ваш сайт, его веб-браузер «запрашивает» список файлов, необходимых для «создания» страницы в браузере вашего посетителя. Эти запросы включают HTML, CSS, изображения и т. д. И даже включают внешние файлы и сценарии, такие как код отслеживания Google Analytics.

Вы видели пример всех этих запросов при использовании pingdomtools( когда вы узнали, как разыскивать медленные плагины ).

Хотя каждый запрос может занимать различное количество времени, хорошее общее правило состоит в том, что больше HTTP-запросов равняется более медленному веб-сайту.

Вот почему такие инструменты, как Pingdom и GTmetrix, помещают количество запросов на ваш сайт и в центр:

Некоторые дополнительные приемы для улучшения производительности дял большинства сайтов WordPress:

Не использовать Google Fonts
Отключение Font Awesome
Отключение граватаров

Например, чтобы отключить Google Fonts и Font Awesome в своих проектах Elementor, вы можете добавить эти два фрагмента кода в плагин, такой как Code Snippets или в свою дочернюю тему:

Отображение ссылок латинскими буквами

Следующий шаг в настройке — отображение URL латинскими буквами. Из прошлого шага мы помним, что URL формируется по заголовку страницы и категории. Значит, URL статьи с названием «Какой смартфон выбрать» будет таким: site.ru/какой-смартфон-выбрать.html.

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

Для автоматического перевода URL на латиницу воспользуйтесь популярным плагином Rus To Lat. Я предпочитаю плагин Cyr to Lat, у которого есть поддержка украинского и белорусского языков.

Как проверить работу WP Retina 2x Pro

Не у всех есть устройство Apple (Retina Display), чтобы посмотреть отображение сайта с созданными сетчатыми картинками. В таком случае у нас есть один способ для проверки. Отмечаем в основных настройках WP Retina функцию Debug (скриншот 2) и смотрим retina изображения сайта через код, так как теперь сайт будет вести себя как с экрана Apple.

Как приобрести плагин на выгодных условиях

Посмотрите это короткое видео, где я объяснил подробно, как получить WP Retina 2x Pro.

На этом все, спасибо за внимание!

Что такое плагины оптимизации изображений WordPress

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

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