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

Требования

  1. Autooptimize. Получить плагин Вот
  2. Кэш LiteSpeed установлен на вашем сервере (необязательно)
  3. PerfMatters. Получить плагин Вот
  4. ShortPixel (Вы можете использовать Litespeed для замены этого плагина)

Я настоятельно рекомендую вам использовать эти плагины для оптимизации вашего сайта WordPress. Они могут быть чрезвычайно полезными и оптимизировать страницы вашего сайта по низкой цене.

ВНИМАНИЕ: Это может сломать ваш сайт WordPress. Пожалуйста, создайте песочницу, чтобы попробовать эти настройки, прежде чем подавать заявку на работающий веб-сайт.

Autoptimize

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

Параметры JavaScript

Некоторые варианты могут сломать ваш сайт. Я указал цвета, настройки которых вы, вероятно, захотите применить к своему веб-сайту. Зеленые с меньшей вероятностью сломают ваш сайт, а красные с большей вероятностью. Если вы знаете, что ваш сайт ломается, посмотрите .js, который сломан, и попробуйте добавить его, чтобы «исключить из автоматической оптимизации». Это исправит большинство проблем.

Также агрегатный встроенный JS?
Агрегировать JS-файлы? Объединить все связанные JS-файлы, чтобы они загружались без блокировки рендера? Если эта опция отключена, отдельные JS-файлы останутся на месте, но будут минимизированы.
Также агрегатный встроенный JS? Позвольте Autoptimize также извлечь JS из HTML. Предупреждение: это может привести к быстрому увеличению размера кэша Autoptimize, поэтому включайте его, только если вы знаете, что делаете.
Принудительно JavaScript в ? Загружайте JavaScript раньше, это может исправить некоторые JS-ошибки, но блокирует рендеринг JS.
Исключить скрипты из Autoptimize:
Разделенный запятыми список сценариев, которые вы хотите исключить из оптимизации, например «what.js, another.js» (без кавычек), чтобы исключить агрегацию этих сценариев Autoptimize. Важно: исключенные неминифицированные файлы по-прежнему минимизируются с помощью Autoptimize, если только эта опция в разделе «misc» не отключена.
Добавить упаковку try-catch? Если ваши скрипты ломаются из-за ошибки JS, вы можете попробовать это.

Настройки CSS

Настройки CSS

Встроенный и отложенный CSS?
Агрегировать CSS-файлы? Агрегировать все связанные CSS-файлы? Если эта опция отключена, отдельные CSS-файлы останутся на месте, но будут минимизированы.
Также объединить встроенный CSS? Отметьте эту опцию, чтобы Autoptimize также агрегировал CSS в HTML.
Создать данные: URI для изображений? Включите это, чтобы включить небольшие фоновые изображения в сам CSS вместо отдельных загрузок.
Встроенный и отложенный CSS? Вставьте «выше сгиба CSS» при загрузке основного автоматически оптимизированного CSS только после загрузки страницы. Проверьте FAQ для получения дополнительной информации. Это может быть полностью автоматизировано для различных типов страниц на CriticalCSS Вкладка.
Встроить все CSS? Встраивание всего CSS - это простой способ предотвратить блокировку рендеринга CSS, но обычно это не рекомендуется, поскольку размер HTML значительно увеличивается. Кроме того, это может привести к тому, что метатеги будут перемещены в такое положение, что, например, Facebook и Whatsapp не смогут их найти, нарушая эскизы при публикации.

«Inline all css» не рекомендуется, потому что это увеличивает время загрузки. Несмотря на то, что он может быть загружен «асинхронно», он загружается на страницу и может задержать время для первого рисования.

Оптимизация HTML

Оптимизировать HTML-код?
Оставить HTML комментарии? Включите, если вы хотите, чтобы комментарии HTML оставались на странице.

Я не предлагаю вам не хранить html комментарии, потому что они, как правило, не имеют никакой функциональности.

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

Сделайте свой сайт значительно быстрее, просто отметив несколько флажков для оптимизации и отложенной загрузки изображений, включая поддержку WebP!

Оптимизировать изображенияОптимизируйте изображения на лету и обслуживайте их с глобальной CDN компании Shortpixel. Получите больше любви от Google и увеличьте скорость загрузки своего веб-сайта, оптимизировав общедоступные изображения на лету (также в формате изображений «следующего поколения» WebP) с помощью ShortPixel а затем кешируется и быстро обслуживается из глобальной CDN Shortpixel. Зарегистрироваться сейчас получить бонус в 1 000 + 50% больше кредитов за оптимизацию изображения независимо от используемого трафика. Дополнительные оптимизации изображений можно приобрести начиная с $4.99.Вопросы? Посмотрите на ShortPixel FAQ! Работает только для сайтов / изображений, которые являются общедоступными. Использование этой функции зависит от Shortpixel's Условия эксплуатации и Политика конфиденциальности.
Ленивая загрузка изображений?Ленивая загрузка изображений задержит загрузку невидимых изображений, чтобы браузер сначала оптимально загрузил все ресурсы для страницы «выше сгиба».

Это должно настроить вас на ваш сайт. Легко и без особых проблем. Этот плагин также бесплатный.

Как я уже сказал, обязательно тщательно протестируйте. Это может нарушить некоторые функции.

Дополнительные оптимизации

Google FontsОставить как есть
Удалить Google Шрифты
Объединить и связать в голове (шрифты загружаются быстро, но блокируют рендеринг), включает Дисплей: сменный.
Объединение и предварительная загрузка в голове (шрифты загружаются поздно, но не блокируют рендеринг), включают Дисплей: сменный.
Объединять и загружать шрифты асинхронно с webfont.js
Удалить смайликиУдаляет встроенный CSS WordPress 'core emojis', встроенный JavaScript и неоптимизированный файл JavaScript.
Удалить строки запроса из статических ресурсовУдаление строк запроса (или, более конкретно, вер параметр) не улучшит время загрузки, но может улучшить показатели производительности.

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

Зайдите на tools.pingdom.com и протестируйте свой сайт.

Простое руководство по оптимизации Wordpress до 1 часа. 1

Вы увидите нечто подобное. Теперь это скажет вам, какие ссылки, если таковые имеются, вы должны переподключить или dns prefetch Это хороший пример, потому что наш веб-сайт подключается только к Google-шрифтам. Это означает, что при поиске DNS на других сайтах будет использоваться меньше времени. В этом случае это не очень актуально, но в этом примере я мог бы поставить:

fonts.gstatic.com, fonts.googleapis.com

Также не забудьте прослушать информацию о скорости Google, так как она скажет вам, нужно ли предварительно загружать какой-либо запрос. Если они предложат вам предварительно загрузить какие-либо файлы .js или .css, поместите их в поле «Предварительная загрузка определенных запросов» и введите их. В моем случае я добавлю шрифт так, как они предполагают, что он загружается первым, чтобы улучшить время для первого рендеринга.

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

Perfmatters

Этот плагин стоит. Но это того стоит.

Параметры

Выберите, какие параметры производительности вы хотели бы включить.

Отключить эмодзивключить
Отключить встраиваниевключить
Удалить строки запросавключить
Отключить XML-RPCвключить
Удалить jQuery Migrateвключить
Скрыть версию WPвключить
Удалить ссылку wlwmanifestвключить
Удалить ссылку RSDвключить
Удалить шортлинквключить
Отключить RSS-каналывключить
Удалить RSS-канал Ссылкивключить
Отключить самообучениевключить
Отключить REST APIвключить
Удалить ссылки REST APIвключить
Отключить дашиконывключить
Отключить Google Картывключить
Отключить Google шрифтывключить
Отключить измеритель надежности паролявключить
Отключить комментариивключить
Удалить комментарии URLвключить
Ленивая загрузкаBETAвключить
Используйте Nativeвключить
Отключить сердцебиениеDefaultDisable EverywhereOnly Allow при редактировании сообщений / страниц
Частота сердцебиения15 секунд (по умолчанию) 30 секунд45 секунд60 секунд
Ограничить количество редакцийDefaultDisable Post Revisions123451015202530
Автосохранение Интервал1 минута (по умолчанию) 2 минуты3 минуты4 минуты5 минут
Изменить логинМожет быть полезно в целях безопасности.

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

На вкладке «Дополнительно» включите «Диспетчер скриптов».

Эта часть очень полезна, потому что в Google вы часто получаете предупреждение «удалить файлы CSS, которые не используются» или «удалить файлы JS, которые не используются»

Простое руководство по оптимизации Wordpress до 1 часа. 2

В этом примере вы видите некоторые файлы, которые почти полностью не используются. Они говорят, что возможно сэкономить 10,3 из 10,6 КБ, это означает, что, вероятно, это безопасно удалить. Проверяйте тщательно при этом. Perfmatters помогают нам здесь, потому что вы можете напрямую отключить их.

Перейдите на страницу http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit.? perfmatters

или просто добавь ? perfmatters на страницу, которую вы хотите оптимизировать.

Здесь вы увидите скрипты, которые загружаются.

Простое руководство по оптимизации Wordpress до 1 часа. 3

Некоторые будут иметь следующую информацию:

Простое руководство по оптимизации Wordpress до 1 часа. 4

Там вы можете сопоставить его с предложениями Google о неиспользованном .css. Отключите все неиспользуемые CSS, которые вы считаете, не повлияет на ваш сайт. Также сделайте это с файлами .js. Но, как я уже говорил ранее, вам в значительной степени нужно проверить настройки путем настройки и страницу за страницей, чтобы увидеть, какая из них работает, а какая нет. Этот плагин удалит все неиспользуемые файлы .js и .css, что значительно повысит вашу производительность.

Shortpixel - оптимизация изображения

Shortpixel - один из лучших на рынке оптимизаторов изображений. Это мои настройки:

shortpixel-изображения оптимизация

В моем личном случае меня очень заботит качество изображения. Следовательно, я решил изменить размеры своих изображений до 1025 × 1024. Большинство настроек, представленных здесь, будут чрезвычайно полезны для вашего сайта.

На странице расширенных настроек я предлагаю вам включить следующие параметры:

Преобразование CMYK в RGB Настройте цвета ваших изображений для отображения на экране компьютера и мобильного устройства. Для изображений в Интернете необходим только формат RGB, а преобразование их из CMYK в RGB делает их меньше.
Изображения WebP:Доставьте версии изображений в WebP-интерфейсе:
Также создайте Версии WebP изображений, бесплатно.
 Используя синтаксис тега
 Global (обрабатывает весь выходной буфер перед отправкой HTML в браузер)
Оптимизировать изображения Retina Также оптимизируйте изображения Retina (@ 2x), если они существуют. Если у вас есть плагин Retina, который генерирует изображения, специфичные для Retina (@ 2x), ShortPixel также может оптимизировать их, наряду с обычными изображениями и миниатюрами библиотеки мультимедиа.  Больше информации 
Оптимизировать другие превью Также оптимизируйте неподписанные большие пальцы, если они найдены. Некоторые плагины создают миниатюры, которые не зарегистрированы в метаданных, но вместо этого создают их только вместе с другими миниатюрами. Позвольте ShortPixel оптимизировать их также. 
Оптимизировать PDF-файлы Автоматически оптимизировать PDF документы.

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

Вы также должны включить это:

Оптимизируйте медиа при загрузке Автоматическая оптимизация элементов библиотеки мультимедиа после их загрузки (рекомендуется). По умолчанию ShortPixel автоматически оптимизирует все только что загруженные изображения и файлы PDF. Если вы снимите этот флажок, вам нужно будет либо запустить Bulk ShortPixel, либо перейти в Media Library (в виде списка) и нажать на правую кнопку «Оптимизировать сейчас». 
Процесс в переднем конце Автоматически оптимизируйте изображения, добавленные пользователями в интерфейсе. Установите этот флажок, если у вас есть пользователи, которые добавляют изображения или документы PDF из пользовательских форм в интерфейс. Это может увеличить нагрузку на ваш сервер, если у вас одновременно подключено много пользователей.

LiteSpeed Cache

Этот плагин следует использовать только если у вас есть сервер Litespeed. Это значительно сокращает время отклика.

Перейдите в Cache и включите все настройки в «настройках управления кэшем». В равной степени включить настройки управления кэшем. Для получения дополнительной информации вы должны перейти к Сайт Litespeed.

Поделиться на 1ТП1Ц
facebook
Поделиться на 1ТП1Ц
щебет
Поделиться на 1ТП1Ц
LinkedIn
В этой статье: