Jquery wordpress подключение: Подключение jQuery в WordPress (верный путь)

Содержание

Как подключить jquery в WordPress с помощью сервиса Google code

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

WP имеет эту библиотеку в своем составе (в каталоге include) и подключает ее по умолчанию. Однако по разным причинам она иногда не работает как нужно.

Если у вас появилось необходимость в скрипте то, пожалуй, в настоящий момент проще всего подключить его через загрузку с сервиса google code.

Для этого на своем сайте Вордпресс просто добавьте в файл header.php между тегами <header> и </header> строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Здесь цифра 1 в адресе означает, что будет загружаться последняя версия библиотеки. Если нужно загрузить конкретную версию, нужно указать ее номер, например, так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

В чем преимущества скрипта с сервера google:

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

Официальный сайт jquery – http://jquery.com/. Здесь вы можете найти документацию по скрипту и при желании скачать любую его версию.

Конфликт jquery.min.js при подключении в тему WordPress

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

Понадобилось реализовать нестандартное решение для начальной странице сайта (index.php).
На странице должно было расположиться большое слайд-шоу, работающее на библиотеке jquery.min.js
Библиотека должна быть подключена в разделе <head>...</head> шаблона header.php

На первый взгляд все просто, копируем строку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

В секции <head>...</head> подключение всех необходимых скриптов осуществляет <?php wp_head() ?> и если посмотреть исходный код страницы, то увидим записи наподобие:

<script type='text/javascript' src='.../wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>

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

В нашем случае помогло решение, описанное в этой теме

А именно: подключили

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

первее, чем <?php wp_head() ?>, то есть библиотека jquery.min.js должна грузиться ранее остальных.

Все разаботало.

По той же теме:

Как подключить jQuery

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Я, как ничего в этом не понимающий профан, долго и упорно смотрел на надпись «подключите jQuery», которую выдавали мне многие инструкции по установке плагинов. И в один прекрасный момент я сказал себе: хватит смотреть на это, как баран на новые ворота — пора действовать! Я решил разобраться с этим раз и навсегда, поэтому и выкладываю инструкцию, как подключить jQuery к вашему блогу, написанную простым, человеческим языком (я очень постараюсь).

Всего три простых шага, на выполнение которых уйдет максимум три минуты — и библиотека jQuery будет подключена.

Шаг первый

Для начала скачиваем библиотеку jQuery с сайта разработчиков.

В большинстве браузеров скачивается файл, название которого выглядит примерно так: jquery-1.4.2.min.js

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

Если вместо скачивания файл пытается открыться, то в окне, которое показывает содержимое этого файла, скопируйте путь к нему,

а потом воспользуйтесь менеджером закачки.

Шаг второй

Все, файл у нас. Его нужно записать на сайт. Для этого воспользуйтесь FTP-менеджером. Если не знаете, какой выбрать, то посмотрите, что я советовал по этому поводу. Обычно js-скрипты записываются в специальную папку, которая находится в папке с вашей темой. Я, например, обзываю эту папку JS, и закачиваю в нее все нужные мне скрипты. Так и поступим с jQuery.

Шаг третий

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


<html xmlns="http://www.w3.org/1999/xhtml" >

Вот сразу после них нужно вставить указание подгружать библиотеку jQuery:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js">

Обратите внимание на эту строчку, особенно на то, что записано в простых скобках внутри src=»…» — это путь к библиотеке, которую мы загрузили на сайт. Код автоматически вставляет путь к теме, которую вы используете, а js — это и есть та папка, которая находится в папке вашей темы, и в которую мы закачали файл.
Все, библиотека jQuery подключена. Вот ради этой одной строчки я написал всю эту «простыню» сверху.

Важное послесловие

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

Надеюсь, что столь подробная инструкция по подключению библиотеки jQuery окажется некоторым полезной. Пользуйтесь!

Мне нравитсяНе нравится

Подключение библиотек jQuery и SPServices через мастер страницу SharePoint 2013

Подключить библиотеки jQuery и SPServices в SharePoint 2013 можно несколькими способами, но предпочтительно сделать это через мастер страницу, чтобы они были доступны везде.

Скачать последние версии библиотек можно здесь — http://jquery.com/ и https://spservices.codeplex.com/.

Копируем библиотеки в каталог C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS на сервере SharePoint.

Запускаем SharePoint Designer, подключаемся к сайту SharePoint, переходим в элемент Master Pages в списке Site Objects. Открываем мастер страницу на редактирование, в моем случае это seattle.html.

В блок кода, где подключаются библиотеки JavaScript добавляем две строки:

<!--SPM:<SharePoint:ScriptLink language="javascript" name="jquery-1.11.2.min.js" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="jquery.SPServices-2014.02.min.js" runat="server" Localizable="false"/>-->

Сохраняем мастер страницу и возвращаем ее на сервере через контекстное меню – Check In (Вернуть).

Для проверки можно открыть файл seattle.master в SharePoint Designer, все внесенные изменения должны быть там отражены.

Запускаем браузер и переходим на сайт ( я ипользую браузер Chrome). Сайт загрузился, визуально ничего не изменилось, чтобы проверить подгружены ли новые библиотеки необходимо открыть Web Inspector клавишей F12, перейти на вкладку Resources и раскрыть список Scripts. Как видно из скриншота, обе библиотеки подгружены.

Теперь можно использовать весь функционал этих библиотек на всех страницах сайта.

Как подключить библиотеку jQuery в Blogger

Всем привет! Наша тема на сегодня — подключение библиотеки jQuery к Blogger. В начале, что бы вы немного представляли: что такое jQuery и что может jQuery, небольшое введение. jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Библиотека jQuery для Blogger BlogSpot

Небольшое отступление от нашей темы для тех, кто не знает,что такое JavaScript. JavaScript — это программный участок кода, который внедряется в код шаблона, страницы и позволяет реализовать различные эффекты, недоступные с помощью HTML и CSS. Т. е. в нужные места шаблона или страницы подставляют программные участки кода, которые и выполняют нужную задачу. Это и есть JavaScript. В Blogger для этих целей мы используем удобный гаджет HTML/JavaScript.

Продолжим нашу тему. Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это привело бы к большому коду, бо́льшая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно ту JavaScript-функциональность, которая на нём была бы востребована.

Возможности библиотеки jQuery:

• Движок кроссбраузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;
• Переход по дереву DOM, включая поддержку XPath как плагина;
• События;
• Визуальные эффекты;
• AJAX — дополнения;
• JavaScript-плагины.

А теперь давайте подключим библиотеку jQuery для Blogger. Подключив один раз, Вам не придётся в дальнейшем при установки скриптов, виджетов на jQuery и т.д. подключать библиотеку.

Как добавить библиотеку JQuery на Blogger/Blogspot

Заходим в панель управления blogger — Шаблон — Изменить HTML, находим <head> и чуть ниже добавляем (или можно выше </head> тега):

<script type="text/javascript" src="http://ajax.googleapis.com
/ajax/libs/jquery/1.4/jquery.min.js"></script>

Вот и весь процесс. Не забудьте сохранить шаблон. Скачать самую последнюю версию библиотеки Вы можете с сайта разработчиков http://jquery.com/ На сегодня всё. До новых встреч.

Ваш Сергей

Как исправить проблемы с переносом jQuery и JavaScript в WordPress 5.5?

Обновлено 25 ноября 2020 г.

В последнем обновлении WordPress 5.5 компания прекратила поддержку JQuery Migrates. Похоже, что менее чем за две недели он взломал сотни тысяч веб-сайтов.

Еще одна проблема с обработкой разбивки на страницы заключалась в том, что это приводило к сбою некоторых веб-сайтов после обновления до 5.5.

Вы ищете решение для устранения проблем с jquery в WordPress 5.5. Эта статья проведет вас через шаги по разрешению конфликта jQuery, а также ошибок / проблем javascript, вызванных обновлением сайта до WordPress 5.5.

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

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

Одна из причин заключается в том, что WP 5.5 устарела поддержка jQuery Migrate, , что могло вызвать по меньшей мере 50 000 неработающих сайтов . Проблема с тем, как темы обрабатывают разбиение по страницам, приводит к тому, что другие сайты перестают работать после обновления до версии 5.5.

Устранение неполадок в обновлении WordPress 5.5

Одним из способов устранения проблемы является использование консоли разработчика Chrome. Вы можете получить доступ к консоли, нажав кнопку F12 в Windows.

Другой способ получить доступ к консоли — щелкнуть вертикальное трехточечное меню в правом верхнем углу и выбрать «Дополнительные инструменты», затем «Инструменты разработчика».

Вот скриншот ошибки:

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

Ошибка

после обновления до WordPress 5.5: JQuery Migrate

Вы уже видели новости, которые приносит WordPress 5.5, большинство из которых довольно очевидны и видны пользователям.

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

Это связано с тем, что это обновление внесло существенное внутреннее изменение, которое вызвало проблемы во многих местах. Речь идет об отключении инструмента jQuery Migrate.

Что такое jQuery Migrate?

Если вы имеете отношение к миру веб-дизайна, то наверняка знаете библиотеку jQuery. Как и jQuery, jQuery Migrate — это библиотека JavaSCript, которая в течение многих лет позволяла разработчикам плагинов и тем использовать устаревший код jQuery.

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

Несмотря на устаревший код, часть многих веб-страниц работала благодаря jQuery Migrate.Это привело к тому, что после его деактивации многие веб-страницы сошли с ума или работают некорректно.

Почему WordPress 5.5 удалил jQuery Migrate?

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

Чтобы внести изменения и полностью удалить jQuery Migrate и его компоненты, команда разработчиков WordPress определила изменение в 3 этапа, первым из которых является удаление инструмента jQuery Migrate.

Удалите предыдущую версию jQuery Migrate, чтобы заставить разработчиков обновить свой устаревший код.
Обновление версии jQuery, включенной в WordPress, с 1.4.1 до 1.9+
Обновите версию jQuery Migrate, включенную в WordPress, чтобы разрешить версии jQuery с 1.12.4 до 3.5+.

Ошибки переноса jQuery в WordPress 5.5 — причины

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

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

Издатель сообщил:

Был высказан голос против JavaScript за их последнее обновление, которое, по мнению издателя, считается полной катастрофой. Он использовал плагин классического редактора, так как редактор блоков — это полный беспорядок, и на данный момент он больше не работает из-за обновления. Только он мог редактировать в режиме HTML, а не в визуальном!

Издатель попытался опубликовать свою последнюю статью в редакторе блоков, но невозможно добавить избранное изображение, у него есть белая страница с заголовком «Рекомендуемое изображение» вверху и все.”

Старый плагин был основным источником проблем, которые полностью зависели от работы jQuery Migrate Library. Как только WordPress удалил библиотеку, плагин сразу перестал работать.

Проблемы, которые привели к хаосу, на самом деле произошли не по вине WordPress. Неудобство было вызвано более старым и устаревшим плагином.

Были запросы, связанные с WordPress 5.5, когда сайты теряли функциональность, что было замечено на форуме Stack Overflow.

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

Проблема в основном возникла из-за устаревшего JavaScript в устаревшей теме WordPress.

WordPress 5.5 Ошибка разбивки на страницы

Обновление до WordPress вызывает сбой нумерации страниц на некоторых сайтах.

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

Официальный отчет об этой проблеме был отправлен в WordPress.

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

Он должен иметь только числовое значение и не должен использоваться для каких-либо других целей, например? Страница = предлагает & id = xxx. Поэтому я бы рекомендовал изменить эту переменную в любом пользовательском коде на другое имя, чтобы избежать конфликтов.

В качестве другого возможного обходного пути вы можете отключить для этих запросов функцию redirect_canonical (), которая по умолчанию присоединена к действию template_redirect ».

«На данный момент он устарел, и его можно исправить, используя« mypage = «вместо« page = »в строке запроса».

Исправить ошибку разбивки на страницы после обновления до WordPress 5.5

Эта функция действительно мощная и универсальная, но у нее есть проблема: она перезаписывает исходный запрос WordPress, повреждая разбиение на страницы (в зависимости от плагина, который мы для этого используем).

То есть если у вас что-то вроде этого:

query_posts (‘cat = 8’);

Или что-то вроде этого:

query_posts (массив (‘cat’ => 8));

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

Чтобы решить эту проблему, мы должны сбросить разбивку на страницы в новом запросе, который query_posts выполняет с этим кодом:

query_posts (array (‘cat’ => 8, ‘paged’ => get_query_var (‘paged’)));

И если вышеперечисленное не работает для вас, попробуйте следующее:

query_posts (array (‘cat’ => 8, ‘paged’ => get_query_var (‘page’)));

Вы также можете проверить Кодекс для получения дополнительной информации о функции query_posts ().

Как исправить ошибку миграции jQuery в WordPress 5.5?

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

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

Для восстановления библиотеки jQuery Migrate JavaScript и полной функциональности веб-сайта WordPress выпустил плагин.

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

Более 50 000 пользователей загрузили плагин WordPress Enable jQuery Migrate с момента его выпуска.

Включить jQuery Migrate Helper — это имя подключаемого модуля.

Плагин

Enable jQuery Migrate Helper можно скачать здесь:

Обновите все темы и плагины

Разработчики темы и плагина приложили немало усилий, чтобы обновить свое программное обеспечение после запуска WordPress 5.5. Если пользователь использует устаревшую версию, он / она может столкнуться с исправленной проблемой.

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

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

После того, как вы установили последнее обновление, но по-прежнему сталкиваетесь с проблемами, вы можете обратиться к разработчику плагина. Разработчик может знать о конфликте jQuery или, возможно, планирует выпустить обновление.

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

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

Для хорошего старта Файл README обычно более предпочтителен. В этих файлах обычно содержатся основные имена основных участников и процесс заключения контракта на поддержку.

О неудобствах, которые испытывают пользователи, следует сообщить разработчику при обращении. Пользователи могут поделиться данными с разработчиком тем или плагином. Если вы исследуете ошибку с помощью инструментария, такого как Chrome DevTools.

Проверить, больше не обслуживается подключаемый модуль или тема

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

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

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

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

Используйте подключаемый модуль jQuery Migrate

Можно обратиться к WordPress за решением, включив плагин jQuery Migrate Helper для jQuery для разрешения конфликтов, связанных с 5.5 обновлений. Если вас не устраивает плагин или тема, которые приводят к конфликтам jQuery, плагин также предоставляет совместимое исправление.

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

Хотя плагин Enable jQuery helper предназначен для работы в производственной среде, то есть на действующем сайте, он не исправляет то, что сломалось в обновлении WordPress 5.5. Таким образом, вы должны рассматривать этот плагин как временное исправление, а не как постоянное решение.

Другие распространенные ошибки WordPress и их исправления.

Как защитить свой сайт WordPress от ошибок?

Вы должны подготовиться к WordPress 5.6 и 5.7. Это поможет избежать дальнейшего нежелательного продолжения. Используя плагин Test jQuery updates, можно проверить функциональность различных сред jQuery.

В WordPress 5.6 текущий план заключается в обновлении до последней версии jQuery и jQuery UI, но оставить плагин jQuery Migrate включенным.Чтобы выполнить шаги и настроить систему, вам необходимо перейти к Plugins> Test jQuery Updates .

После этого вы можете изменить jQuery версии на 3.5.1 и изменить jQuery UI на 1.12.1 . Вы также должны знать и убедиться, что jQuery Migrate включен.

Теперь протестируйте свой сайт. Если вы столкнулись с неожиданным поведением, вы можете устранить эти проблемы с помощью набора инструментов, такого как Chrome DevTools .

WordPress 5.5 во многом успех

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

Команда WordPress проделала потрясающую работу. Проблемы, с которыми сталкивается WordPress5.5 с jQuery, скоро будут решены

Если вы не уверены, актуальна ли ваша тема или стабильна новая версия, свяжитесь с нашим разработчиком wordpress здесь.

Нравится:

Нравится Загрузка …

Связанные

Как быстро исправить предупреждения о смешанном содержимом WordPress (HTTPS / SSL)

Запуск вашего сайта WordPress через HTTPS больше не является обязательным. Он не только более безопасен (все зашифровано, ничего не передается в виде обычного текста), но также укрепляет доверие, является фактором ранжирования в поисковых системах и предоставляет более точные данные о переходах. К сожалению, при переходе с HTTP на HTTPS владельцы веб-сайтов могут столкнуться с рядом проблем.Одно из них — «предупреждения о смешанном содержании».

Проблемы с производительностью, связанные с шифрованием, были исправлены по большей части благодаря HTTP / 2, а Let’s Encrypt изменил всю отрасль, предоставив вам простой способ получения бесплатных сертификатов SSL.

Что наиболее важно для онлайн-бизнеса, веб-браузеры, такие как Google Chrome и Mozilla Firefox, расправляются с сайтами, не работающими по протоколу HTTPS, и показывают более строгие предупреждения потенциальным посетителям. Например, если вы используете устаревшие версии TLS, вы можете столкнуться с уведомлениями ERR_SSL_OBSOLETE_VERSION в Chrome.Предупреждения — это последнее, что вы хотите, чтобы ваши посетители видели.

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

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

Хотите посмотреть видео версию?

Что такое предупреждение о смешанном содержимом?

Предупреждение о смешанном содержании появляется в браузере пользователя, когда сайт WordPress, который они пытаются посетить, загружает HTTPS- и HTTP-скрипты или контент одновременно.Это может вызвать проблемы, поскольку HTTP и HTTPS — совершенно разные протоколы.

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

Примеры предупреждений о смешанном содержимом

Chrome в настоящее время является самым популярным браузером, которым пользуются более 77% пользователей Интернета. Таким образом, большинство ваших посетителей увидят следующее предупреждение:

Предупреждение о смешанном содержании в Google Chrome

Конечно, не все используют Chrome.

Вот пример того, что происходит в Firefox, когда на сайте WordPress отображается предупреждение о смешанном содержании:

Предупреждение о смешанном содержании в Firefox

Далее приведен пример того, как выглядит это предупреждение в Microsoft Edge:

Предупреждение о смешанном содержимом в Microsoft Edge

А вот как это выглядит в Internet Explorer:

Предупреждение о смешанном содержимом Internet Explorer

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

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

Запуск вашего сайта WordPress через HTTPS больше не является обязательным. ✅ Но при переходе с HTTP ➡️ HTTPS может сопровождаться предупреждениями о смешанном содержании. Узнайте, как быстро их решить, с помощью этого руководства 💥Нажмите, чтобы твитнуть

Что вызывает предупреждения о смешанном содержании?

Мы обнаружили, что наиболее распространенные предупреждения о смешанном содержании появляются сразу после того, как кто-то переводит свой сайт WordPress с HTTP на HTTPS.Некоторые HTTP-ссылки просто переносятся, и это вызывает появление предупреждений о смешанном содержимом.

Вот некоторые дополнительные причины этого предупреждения:

Вы только что добавили на свой сайт новую услугу или плагин. В частности, разработчики иногда используют абсолютные пути ( http://yourdomain.com/style.css ) в своих плагинах или темах для ссылки на CSS и JavaScript вместо использования относительных путей ( /style.css ).
У ваших изображений жестко заданы URL-адреса (например, http: // yourdomain.com / image.png ), которые работают через HTTP. Это могут быть сообщения, страницы или даже виджеты.
Вы устанавливаете ссылку на HTTP-версии внешних скриптов (размещенный на сервере jQuery, Font Awesome и т. Д.).
У вас есть встроенные сценарии видео, которые используют HTTP вместо HTTPS.

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

Имея это в виду, давайте рассмотрим некоторые методы, которые можно использовать для устранения предупреждений о смешанном содержании.

Как исправить предупреждения о смешанном содержании (4 шага)

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

В следующих примерах мы будем использовать пример сайта разработки.

Шаг 1. Узнайте, какие ресурсы загружаются через HTTP

Первое, что вам нужно сделать, это выяснить, какие ресурсы все еще загружаются через HTTP.

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

Windows: F12 или CTRL + Shift + I
macOS: Cmd + Opt + I

Вы также можете открыть Chrome DevTools из меню инструментов в своем браузере:

Инструменты разработчика Chrome в меню инструментов браузера

Есть несколько мест, где вы можете проверить, какие ресурсы не загружаются по HTTPS.

Первая — это вкладка Консоль .Обратите внимание, что вам может потребоваться обновить страницу после того, как вы откроете Chrome DevTools, чтобы она правильно загрузила все.

Если есть ошибки смешанного содержания, они будут выделены красным или желтым цветом. Как правило, они сопровождаются информацией о том, что «Этот запрос был заблокирован; контент должен обслуживаться по HTTPS ». Это означает, что в настройках браузера настроена автоматическая блокировка любого содержимого HTTP.

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

Следовательно, при использовании Chrome DevTools вы можете увидеть сообщения смешанного содержания, указывающие на то, что некоторые запрошенные элементы были обновлены автоматически:

Смешанный контент Chrome DevTools в консоли

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

Вы также заметите, что запрос был сделан из-за небезопасности.jpg, которое было автоматически обновлено до HTTPS. (Примечание: если бы это было в другом браузере, отличном от Chrome, он не обновлялся бы автоматически).

Вы также можете посмотреть вкладку Security Chrome DevTools. Это покажет вам небезопасное происхождение:

Безопасность Chrome DevTools

На вкладке Сеть вы также можете найти список заблокированных запросов:

Сеть Chrome DevTools

Если вы не используете Chrome или хотите получить краткую сводку ошибок, вы также можете использовать бесплатный инструмент, например Why No Padlock.

Он сканирует отдельную страницу и показывает все небезопасные ресурсы:

Why No Padlock: сводка ошибок смешанного содержимого

Этот инструмент прост в использовании. Вы можете просто ввести свой URL-адрес и щелкнуть Test Page , и он покажет вам все присутствующие ошибки. К тому же это бесплатно!

Массовая проверка предупреждений HTTPS

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ другим пользователям, которые получают нашу еженедельную новостную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Существует небольшой бесплатный инструмент под названием SSL Check от JitBit, который вы можете использовать для сканирования вашего HTTPS-сайта и поиска небезопасных изображений и скриптов, которые будут вызывать предупреждающее сообщение в браузерах.Количество просканированных страниц ограничено 400 на веб-сайт.
Инструмент Ahrefs Site Audit может обнаруживать смешанный контент HTTPS / HTTP. Если у вас уже есть доступ к этому решению или есть у кого-то из вашей маркетинговой команды, это может быть отличным способом быть внимательным.
HTTPS Checker — это программа для настольных ПК, которую вы можете установить для сканирования своего сайта. Это может помочь вам проверить наличие «небезопасных» предупреждений и содержимого после значительных изменений. Он доступен для Windows, Mac и Ubuntu. Бесплатный план позволяет проверять до 500 страниц за одно сканирование.
SSL Insecure Content Fixer — это плагин WordPress, который вы можете установить на свой сайт, чтобы обнаруживать ошибки, которые приводят к предупреждениям о смешанном содержании. Его можно использовать бесплатно, и он даже автоматически исправляет ошибки.

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

Шаг 2. Проверьте, доступны ли ресурсы HTTP по HTTPS

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

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

http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg? v = 1600261043278

Если мы возьмем оба этих URL, введем их в адресную строку браузера и заменим «http» на «https» в начале, мы увидим, что они загружаются нормально. Поэтому нам просто нужно произвести поиск и замену на нашем сайте.

Шаг 3. Выполните поиск в WordPress и замените

Есть много способов выполнить поиск и замену WordPress. В этом разделе мы рассмотрим два различных рекомендуемых варианта.

Если вам интересно, мы не рекомендуем использовать такой инструмент, как Really Simple SSL.Хотя это отличный плагин, лучше не полагаться на подобное решение в долгосрочной перспективе. Вы не перейдете на HTTP позже, поэтому лучше сделать это правильно и обновить URL-адреса HTTP в своей базе данных (как мы покажем ниже).

Если вы клиент Kinsta, вы можете использовать наш инструмент поиска и замены, который доступен прямо на панели управления MyKinsta.

Перейдите на страницу Tools вашего сайта и нажмите Search and Replace :

Инструмент поиска и замены в MyKinsta

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

В этом случае мы будем использовать наш HTTP-домен: http://kinstalife.com . Затем нажмите кнопку Search . Инструмент поиска и замены покажет количество вхождений данной строки.

Установите флажок « Заменить », чтобы продолжить процесс замены. В поле Заменить на введите все, что должно заменить искомое значение. В этом случае мы будем использовать наш HTTPS-домен: https://kinstalife.com .

Мы также рекомендуем оставить отметку Очистить кеш при готовности. , чтобы автоматически очистить кеш Kinsta после завершения процесса поиска и замены. Наконец, нажмите кнопку Заменить :

Поиск и замена HTTP на HTTPS в MyKinsta

Важно: Убедитесь, что вы не добавили начальные / конечные пробелы ни в одно из этих полей, так как это может привести к нежелательным результатам.

Поиск и замена альтернатив

Если вы не используете Kinsta, вы можете выполнить ту же задачу с помощью бесплатного плагина Better Search Replace, а затем просто удалить его после того, как закончите:

Плагин The Better Search Replace для WordPress

Вы можете загрузить этот инструмент из каталога плагинов WordPress или выполнив поиск в панели управления WordPress.

После активации просто найдите свой HTTP-домен ( http://yourdomain.com ) и замените его своим HTTPS-доменом ( https://yourdomain.com ):

Варианты плагина The Better Search Replace для WordPress

В качестве альтернативы вы также можете выполнить поиск и заменить межсоединением / it Search Replace DB PHP Script или WP-CLI.

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

Шаг 4. Подтверждение отсутствия предупреждений о смешанном содержании

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

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

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

Предупреждение о смешанном содержимом в консоли

В этом случае скрипт нужно было вручную добавить в наш заголовок WordPress ( header.php ). Он должен использовать относительный URL, поэтому мы обновили его до //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js :

Внешний скрипт HTTP добавлен в заголовок WordPress в редакторе тем

Поиск и замена, скорее всего, решат все ваши проблемы.

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

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

Примеры предупреждений о смешанном содержании

Итак, теперь вы знаете, что искать, чтобы исправить эти ошибки смешанного содержимого.

Вот пример того, что происходит в Chrome, когда все загружается правильно через HTTPS, без предупреждений о смешанном содержимом:

Chrome: предупреждения о смешанном содержимом

Firefox предложит аналогичное сообщение:

Firefox не предупреждает о смешанном содержимом

А вот что вы увидите в Microsoft Edge:

Microsoft Edge: нет предупреждений о смешанном содержимом

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

А как насчет HSTS?

Некоторым из вас может быть интересно, почему нельзя просто использовать HSTS (HTTP Strict Transport Security) для решения этой проблемы. HSTS был создан как способ заставить браузер использовать безопасные соединения, когда сайт работает по HTTPS.

Это заголовок безопасности, который вы можете добавить на свой веб-сервер, и он отображается в заголовке ответа как «Strict-Transport-Security».

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

Следовательно, вам всегда нужно обновлять URL-адреса http: // . Эса Йокинен глубже погружается в причины, почему в этом обсуждении сбоя сервера.

Дополнительные рекомендации (особые случаи)

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

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

Готовы перейти на HTTPS, но разочарованы предупреждениями о смешанном содержании? 🥴 Узнайте, как решить эту проблему с помощью этого руководства! Нажмите, чтобы написать в Твиттере

Сводка

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

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

Если у вас есть отзывы или возникнут какие-либо проблемы, сообщите нам об этом в разделе комментариев!

Экономьте время, деньги и повышайте производительность сайта с помощью:

Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
Интеграция Cloudflare Enterprise.
Глобальный охват аудитории с 28 центрами обработки данных по всему миру.
Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Исправить ошибки, связанные с jQuery, после обновления WordPress в WordPress 5.5 WordPress 5.6 и WordPress 5.7

В настоящее время команда WordPress работает над процессом миграции jQuery и обновлением старого jQuery до нового jQuery 3. Это происходит в трех версиях WordPress: WordPress 5.5, WordPress 5.6, WordPress 5.7. Если вы обновляете свой веб-сайт WordPress до WordPress 5.5, 5.6 или 5.7 и если что-то не работает на вашем сайте, то основная причина заключается в том, что ваша тема или плагин использует старый код jQuery. Это ломает сайт.

Ошибки обновления WordPress jQuery:

Ошибка после обновления WordPress:

Ниже приведены некоторые примеры ошибок, которые вы получите после обновления.
Веб-сайт не работает с отложенной загрузкой изображений.
Слайдер веб-сайта не работает.
Кнопки не работают.
Эффекты веб-сайта не работают.

Исправить ошибки jQuery после обновления WordPress:

Эти ошибки, связанные с jQuery, можно исправить с помощью подключаемого модуля Enable jQuery Migrate Helper. Этот плагин позволит вам на время перейти на предыдущую версию jQuery.

Как установить плагин Enable jQuery Migrate Helper для WordPress на свой веб-сайт:

Войдите в свою админ панель WordPress.(wp-admin / логин).
На панели управления администратора WordPress щелкните плагины и выберите Добавить новый.
Введите Enable jQuery Migrate Helper в поле поиска и нажмите клавишу ввода.
Нажмите кнопку «Установить сейчас» в разделе «Включить плагин jQuery Migrate Helper для WordPress», разработанном командой WordPress.
После успешной установки щелкните ссылку «Активировать плагин», чтобы активировать «Включить jQuery Migrate Helper».

Вы также можете загрузить и установить Enable jQuery Migrate Helper вручную по ссылке ниже.

Загрузить Включить jQuery Migrate Helper

После установки и активации плагина WordPress Enable jQuery Migrate Helper перейдите к Tools и выберите jQuery Migrate в левом меню панели инструментов WordPress.

Откроются настройки jQuery Migrate. Здесь, в jQuery Version , просто измените параметр на Legacy jQuery version и нажмите кнопку сохранения настроек.

Произойдет откат к старому jQuery.Если вы используете какую-либо службу кеширования, просто очистите кеш полностью. пример: кеш в WordPress, cloudflare и браузере.

Теперь вы получаете обратно старый рабочий сайт. Это все.

The Good, the Meh and the Ugly

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

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

The Good

Enable jQuery Migrate Plugin Обновлено

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

Самая большая потенциальная проблема была связана с устареванием и обновлениями jQuery Migrate.

WordPress 5.6 удалось избежать проблем с устаревшим плагином jQuery, которые возникли с обновлением WordPress 5.5 в августе 2020 года.Это было обновление, из-за которого веб-сайты перестали функционировать множеством и неожиданными способами.

Причина, по которой этих проблем удалось избежать на этот раз, заключается в том, что WordPress 5.6 обновил плагин Enable jQuery Migrate, чтобы избежать повторного сбоя веб-сайтов.

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

Продолжить чтение ниже

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

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

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

WordPress заявил:

«С учетом вышеизложенного, плагин Enable jQuery Migrate Helper был обновлен для выпуска WordPress 5.6, это обеспечивает временный способ перехода на более раннюю версию для запуска устаревшего jQuery на сайте при необходимости.
Причина, по которой это считается временным решением, заключается в том, что более старая версия jQuery больше не получает обновления безопасности, а устаревшая версия не будет исправлена вручную, если произойдет что-либо, требующее обновлений для нее ».

Продолжить чтение ниже

Meh

WordPress 5.6 поставляется с их первой версией WordPress, которая (в некоторой степени) совместима с PHP 8, новейшей версией PHP, выпущенной в ноябре.Однако эта совместимость должна рассматриваться как бета-совместимая.

Поскольку новости совместимости WordPress с PHP 8 могут быть как хорошими, так и не очень хорошими новостями, они в конечном итоге оказываются… м-м-м.

Как указано в официальном руководстве для WordPress 5.6 и PHP 8 Совместимость:

«WordPress Core стремится быть совместимым с PHP 8.0 в версии 5.6 (в настоящее время запланировано на 8 декабря 2020 г.).
… Значительные усилия были приложены к созданию WordPress 5.6 сам по себе совместим с PHP 8, но весьма вероятно, что остаются не обнаруженные проблемы ».

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

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

Согласно WordPress:

«5.6 знаменует собой первые шаги на пути к поддержке WordPress Core для PHP 8. »

The Ugly

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

WP 5.6 представляет аутентификацию REST API с функцией паролей приложений

Функция паролей приложений позволяет сторонним приложениям подключаться к вашему веб-сайту и добавлять функции.

Согласно WordPress :

«Благодаря новой функции авторизации паролей приложений API, сторонние приложения могут беспрепятственно и безопасно подключаться к вашему сайту. Эта новая функция REST API позволяет вам видеть, какие приложения подключаются к вашему сайту, и контролировать их действия. «

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

Социальная инженерия — это метод взлома, основанный на обмане для предоставления информации или доступа.

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

Продолжить чтение ниже

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

Wordfence описывает атаку социальной инженерии, при которой преступник может создать приложение, которое имитирует надежное приложение, заставляя издателя сайта выдать пароль и разрешить безопасное соединение со своим сайтом. Wordfence описывает сложность этой атаки как « тривиальный ».

Согласно Wordfence:

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

Wordfence выпустил видео, описывающее и демонстрирующее потенциал атаки социальной инженерии, компрометирующей новые пароли приложений. Функция:

Wordfence Описание уязвимости функции паролей приложений WordPress для социальной инженерии

Обзор WordPress 5.6

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

Продолжить чтение ниже

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

Citation

WordPress 5.6 Предупреждения, объявления и документация

Статья Wordfence:
WordPress 5.6 представляет новый риск для вашего сайта: что делать

Официальное объявление: WordPress 5.6 «Simone»

Версия Документация WordPress 5.6

Обработка потенциальных проблем с jQuery в WordPress 5.6

Как исправить медленный сайт WordPress (100% PageSpeed Insights)

У вас медленный сайт WordPress?

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

Цель этого руководства — исправить рекомендации в GTmetrix и PSI (PageSpeed Insights) при одновременном сокращении времени загрузки, что является наиболее важным фактором и на чем вы должны сосредоточиться.

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

Даже длинные сообщения с тоннами изображений и более чем 500 комментариями загружаются примерно за 1 секунду с TTFB 163 мс

1. Средства тестирования

Что изменилось в GTmetrix?

Раньше оценки не всегда коррелировали со временем загрузки.У вас может быть медленный TTFB и тяжелые файлы CSS / JS, но все равно хорошие результаты. Это уже не так. Lighthouse / PSI лучше справляется с корреляцией оценок со временем загрузки, и теперь GTmetrix тоже. Создатели страниц и хостинг могут наиболее заметно повлиять на время загрузки и баллов в GTmetrix / PSI. Вот почему вы видите, что многие люди в группах Facebook (включая меня) спешат удалить свой конструктор страниц.

Web Vitals будет фактором ранжирования в мае 2021 года (другими словами, улучшите ваш отчет PSI).Уменьшение TTFB и времени загрузки определенных элементов в GTmetrix Waterfall — хорошее начало.

Google PageSpeed Insights — основной инструмент, для которого вы должны оптимизировать (это Google), особенно теперь, когда у них есть более точные показатели, которые фактически измеряют время загрузки (например, LCP). Чтобы проверить время загрузки мобильного устройства, используйте Think With Google, который использует соединение 4G (PSI использует 3G). Отчасти поэтому ваши оценки на мобильных устройствах могут быть ниже, чем на компьютерах.
Google Search Console Core Web Vitals — в отчете Core Web Vitals отображаются только основные показатели (например,грамм. LCP) для всего вашего сайта WordPress, но не дает конкретных рекомендаций.
GTmetrix — используйте диаграмму водопада для определения конкретных CSS, JS, шрифтов, изображений и сторонних доменов, которые необходимо оптимизировать. В остальном аналогичные рекомендации от PSI.
KeyCDN Performance Test — отлично подходит для измерения TTFB и времени поиска DNS в 10 точках глобального тестирования. Твердый индикатор, медленный ли ваш хостинг WordPress или DNS.

2.Хостинг

Я использую Cloudways Vultr High Frequency и обычно имею TTFB 150 мс + время полной загрузки 1,4 с в GTmetrix (протестированный пост также содержит 50+ изображений и 600 комментариев). Не стесняйтесь просматривать мой сайт, чтобы узнать, насколько быстро он загружается. Vultr HF и DigitalOcean — два самых популярных хостинговых плана в группах Facebook Hosting и WP Speed Matters. Плата за Cloudways взимается ежемесячно и включает бесплатную миграцию, что упрощает их опробование. Хостинг, безусловно, является фактором №1 в руководстве по оптимизации WordPress, и они даже рекомендуют DigitalOcean.

Будьте осторожны с другими рекомендациями по хостингу:

Мэтью Вудворд продвигает WPX, но использует Kinsta на своем собственном сайте.
Даррел Уилсон толкает NameHero, но его отчет GTmetrix — беспорядок.
Hostinger пишет фальшивые обзоры и был исключен из групп Facebook.
Они также нажимают SiteGround, когда Backlinko сообщает, что их TTFB работает медленно (я перестал их рекомендовать и изменил свой обзор, чтобы описать все проблемы SiteGround).

Марки

WP Engine, GoDaddy, Bluehost, HostGator и EIG явно не годятся.

153 мс TTFB для огромного поста с 50+ изображениями и 600 комментариями (просмотреть отчет)

Я перешел с SiteGround на Cloudways в 2019 году. Время ответа было в 2 раза быстрее, я платил вдвое меньше, чем был SiteGround, и у него не было проблем с процессором или высоких цен на продление.

Cloudways обычно занимает первое место в недавних опросах Facebook ( щелкните эскизы, чтобы увеличить ).

человек, которые переехали в Cloudways и опубликовали свои результаты:

Шаг 1: Зарегистрируйтесь в Vultr High Frequency Шаг 2: Используйте код OMM25 , чтобы сэкономить 25% в первые 2 месяца Шаг 3: Запустите свой сервер (Vultr HF и DigitalOcean работают стабильно) Шаг 4: Запросите бесплатную миграцию или используйте плагин миграции Cloudways. Шаг 5: Наслаждайтесь более быстрой загрузкой TTFB +

План NameHero Turbo Cloud также является хорошим выбором.Он использует серверы NVME, LiteSpeed, плагин LiteSpeed Cache и QUIC.cloud CDN, который поддерживает HTTP / 3. Все 3 инструмента имеют отличные отзывы и были специально разработаны для совместной работы для повышения скорости. Они отличаются от Cloudways: NameHero более удобен для начинающих с cPanel, все встроено в их хостинг (не нужно платить за WP Rocket или хостинг электронной почты), а поддержка — A +. Самый большой недостаток в том, что вы платите вперед на 1-3 года, а затем вступают в силу более высокие цены на продление. В моем обзоре NameHero показано, как настроить LiteSpeed Cache + QUIC.облако (мне удалось получить TTFB 61 мс). Очевидно, что стартовый сайт Astra меньше, чем onlinemediamasters.com, но, тем не менее, впечатляет. Они также проводят бесплатную миграцию, а у Райана (генерального директора) есть несколько потрясающих видеороликов на YouTube.

Сайт Astra на NameHero Turbo Cloud с LiteSpeed + QUIC.cloud: 61 мс TTFB, время загрузки 733 мс

Заявление об отказе от ответственности — да, я являюсь партнером Cloudways и NameHero, но я бы предпочел зарабатывать на жизнь, ссылаясь на людей на лучший и более быстрый хостинг, чем на другой мусор.Я стараюсь подкреплять рекомендации реальными доказательствами. Вы можете видеть разговоры в группах FB, рекомендации Адама по Cloudways (WPCrafter) и другие отзывы.

3. Конструкторы страниц

Конструкторы страниц потерпели поражение в новом обновлении GTmetrix.

Они добавляют дополнительные элементы CSS, JavaScript и DOM, которые влияют на несколько элементов в PSI. Просмотрите свой исходный код и посмотрите, сколько раз упоминаются Elementor или Divi (для меня это было 2000+). Выполните поиск в Google и посмотрите тесты скорости (вот один на Gutenberg vs Elementor).Как и многие другие участники групп Facebook, я сейчас удаляю Elementor со своего сайта.

Divi, Elementor и Brizy — медленные компоновщики страниц.
Oxygen, GeneratePress и Kadence — надежные и легкие альтернативы.
Gutenberg, Genesis и тема Hello от Elementor — другие альтернативы.
При использовании стартовых сайтов Astra используйте шаблон, встроенный в Gutenberg (а не в Elementor).
WP Johnny предлагает услуги по удалению компоновщика страниц (он удалил Elementor для меня).
Добавление дополнительных плагинов / надстроек для построения страниц еще больше замедлит работу WordPress.
Используйте Asset CleanUp или Perfmatters для выгрузки неиспользуемых ресурсов, созданных построителями страниц.

Плагин

Divi’s Rocket посредственный, и вам лучше использовать WP Rocket или LiteSpeed.
Elementor имеет экспериментальные функции в Настройках, которые включают оптимизацию скорости (Оптимизированный вывод DOM и Улучшенная загрузка активов), которые вы должны попробовать.
Divi имеет встроенные настройки минимизации и комбинирования файлов CSS / JavaScript.Они могут работать лучше (с точки зрения совместимости), чем плагины кеширования, но проверяют их влияние в инструментах скорости.

Переносы конструктора страниц и опросы по самым быстрым темам ( щелкните эскизы, чтобы увеличить ):

Источник: Oxygen4Fun

4. Плагины

Плагины

печально известны тем, что замедляют работу WordPress.

Вот почему так важно провести исследование (в группах Facebook и прочитать обзоры в репозитории WordPress), прежде чем выбирать плагин.Проверьте его влияние в Query Monitor или PSI.

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

Избегайте распространенных медленных плагинов (ниже).
Найдите медленные плагины с помощью Query Monitor.
По возможности избегайте подключаемых модулей, использующих jQuery.
Используйте плагины с модульной конструкцией и отключите неиспользуемые функции.
Избегайте использования подключаемых модулей для SSL, переадресации и того, что вы можете делать вручную.
Избегайте подключаемых модулей, которые запускают тяжелые фоновые процессы или добавляют сторонний код.
Жестко запрограммировать элементы (заголовки, меню и т. Д.), Чтобы избежать использования плагинов — при необходимости наймите разработчика.
Используйте WP Hive, чтобы узнать, работает ли плагин медленно, перед его установкой (снимок экрана ниже).

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

Добавить
Отслеживание мошенничества с кликами в AdSense
Универсальный календарь событий
Резервный приятель
Строитель бобров
Улучшенные карты сайта Google XML для WordPress
Устройство проверки неработающих ссылок
Постоянный контакт для WordPress
Контактная форма 7
Сообщения по теме
Digi Auto Links
Система комментариев Disqus
Divi Builder
Элементор
Посмотреть полный список из 70+ медленных плагинов

Облегченные альтернативы плагинов

Резервные копии — UpdraftPlus.
SEO — Rank Math или SEOPress.
Слайдеры — Soliloquy или MetaSlider.
SSL — плагин не нужен.
Перенаправляет — плагин не нужен.
Галерея — Галерея Гутенберга или Галерея Мяу.
Analytics — Google Analytics и Google Search Console (без плагинов).
Безопасность — Межсетевой экран Cloudflare, двухфакторный, ограничение попыток входа в систему, Blackhole.
Социальный обмен — Grow By Mediavine (самый быстрый плагин социального обмена в тесте WP Rocket).
Комментарии — собственные комментарии или wpDiscuz с оптимизированными настройками и задержкой JavaScript.

5. Кеширование

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

WP Rocket и LiteSpeed - золотые стандарты (или SG Optimizer при использовании SiteGround). Причина, по которой WP Rocket так высоко оценена, заключается в том, что он имеет больше функций скорости, чем большинство других плагинов кеширования (что приводит к большей оптимизации скорости, но меньшему количеству плагинов, необходимых на вашем сайте).

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

Очистка базы данных — WP-Optimize
Оптимизация CSS / JS — автоматическая оптимизация
Задержка выполнения JavaScript — летающие скрипты
Локальный хостинг Google Analytics — Flying Analytics
Интеграция URL-адресов CDN — BunnyCDN / CDN Enabler
Контроль сердцебиения — Контроль сердцебиения / ручной код
Ленивая загрузка изображений / видео — Optimole / WP YouTube Lyte
Предварительная загрузка ссылок / мгновенная страница — Perfmatters или Flying Pages
Prefetch / preload — Perfmatters, Pre * Party или ручной код
Размещайте пиксель Facebook локально — насколько мне известно, ни один плагин не делает этого.
Font-display: swap — поменять местами отображение шрифтов Google / код руководства

WP Rocket занимает первое место в большинстве опросов Facebook ( щелкните эскизы, чтобы увеличить ):

Типы кэширования
Существует 6 типов кэширования.Плагины кеширования обычно поддерживают только 2 типа (полный кеш страницы + кеш браузера). Другие типы обычно можно активировать в учетных записях облачного хостинга. Воспользуйтесь преимуществами различных типов кеширования, которые предлагает ваш хост — плагины кеширования — это лишь часть картины. Я бы определенно активировал Redis в вашей учетной записи хостинга и использовал плагин Redis Object Cache. В SiteGround SG Optimizer вы обычно должны активировать статический, динамический кеш и memcached.

Кэш опкодов — обычно выполняется хостом.
Полная страница — обычно выполняется плагином кеширования.
Кеш браузера — обычно выполняется плагином кеширования.
HTTP-ускорители — активируйте на своем хосте (например, Varnish / FastCGI).
Объектный кеш — аналог Redis / memcached (настоятельно рекомендую Redis).
CDN — выполняется через CDN, или добавьте правило страницы кешировать все в Cloudflare.

Советы плагина кеширования

6. CDN

Cloudflare подходит для большинства сайтов, но если вы серьезно относитесь к скорости, выбирайте BunnyCDN.

Обычно это самый популярный CDN в обсуждениях Facebook (включая этот). BunnyCDN обычно быстрее Cloudflare, RocketCDN (StackPath) и большинства CDN. Это связано с тем, что BunnyCDN — это CDN только для push-уведомлений, а это значит, что у посетителей не будет медленных запросов. WP Johnny сказал, что RocketCDN действительно может увеличить TTFB, а Cloudflare может иметь негативное влияние. Как и плагины кеширования, CDN по-разному реагируют на разные сайты — я бы протестировал Cloudflare / BunnyCDN.

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

Если посетители являются только местными, вам не нужен CDN.
Для установки Cloudflare требуется изменить серверы имен.
Будьте осторожны с Rocket Loader (он может сломать ваш сайт).
Добавить правила страницы Cloudflare, особенно правило страницы кешировать все, и защитить область администрирования WP. Чтобы кэшировать все на динамических сайтах, используйте WP Cloudflare Super Page Cache.
Если вы используете Cloudflare, определенно используйте их APO за 5 долларов в месяц.
Если вы используете LiteSpeed, их CDN QUIC.cloud — хороший выбор.
Задайте срок действия кеша браузера, как часто вы публикуете новый контент (например, 10 дней).
При использовании Cloudflare + WP Rocket настройте вкладку Cloudflare для совместимости.
Используйте BunnyCDN, если серьезно относитесь к скорости (настройка с помощью плагина BunnyCDN).

Сети CDN

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

7. Шрифты

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

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

Избегайте .ttf и используйте вместо него woff, который быстрее.
Проверьте GTmetrix Waterfall> Fonts, чтобы увидеть файлы шрифтов / источники / время загрузки.
Укажите минимальное количество шрифтов (семейства шрифтов, варианты, символы, значки).
Размещайте шрифты локально с помощью OMGF или Transfonter (избегайте использования fonts.googleapis.com или fontawesome.com и обслуживайте их со своего URL-адреса CDN (https://x7r6b9v3.rocketcdn.me).
Если вы используете шрифты из внешних источников (например, fonts.googleapis.com), загрузите их заранее.
Добавьте отображение шрифта, чтобы «текст оставался видимым во время загрузки веб-шрифта» в PSI.
Предварительно загрузите шрифты (скопируйте файлы шрифтов из GTmetrix и добавьте в WP Rocket или Perfmatters).
Объедините запросы шрифтов Google (обычно выполняемые через плагин кеширования) — см. Здесь.
Избегайте подключаемых модулей, которые добавляют дополнительные шрифты и обслуживают шрифты из вашей темы, а не с подключаемыми модулями.

8. Сторонний код

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

Сюда входят шрифты Google, Google Analytics, Карты, AdSense, Диспетчер тегов, встроенные видео, Gravatars, социальные лайки, пиксель Facebook и даже кнопки лайков из вашего плагина социального обмена.Некоторые из них можно оптимизировать, чтобы они не влияли на PSI, в то время как другой сторонний код сложнее.

Google Fonts — размещайте локально, а не обслуживайте их с //fonts.gstatic.com.
Google Maps — сфотографируйте карту и свяжите ее с маршрутами проезда. Если вам необходимо использовать карту, используйте ее только на своих контактных + локальных страницах и в окнах iframe с отложенной загрузкой.
Google Analytics — размещайте локально с помощью WP Rocket или Flying Analytics. Если вы используете Perfmatters, используйте меньший код отслеживания (минимальный, минимальный встроенный или аналитический.js) и отключите функции отображения, чтобы предотвратить повторный HTTP-запрос к Doubleclick.
Google AdSense — отложенная загрузка рекламы и задержка JavaScript с помощью WP Rocket или Flying Scripts. AdSense может стать убийцей GTmetrix (вместо этого попробуйте партнерский маркетинг).
Google Tag Manager — задержка с использованием WP Rocket или Flying Scripts и очистка тегов. Избегайте жесткого кодирования тегов в заголовке. В противном случае вы мало что можете сделать.
Facebook Pixel — разместить его локально с помощью WP Rocket — это единственный известный мне способ.
YouTube — отложенная загрузка видео, замена iframe YouTube изображениями предварительного просмотра и задержка JavaScript. Если вы используете Elementor, Адам из WPCrafter разместил на YouTube видео для встраивания видео без создания HTTP-запросов к YouTube.
Социальные сети — используйте Grow от Mediavine, который был самым быстрым плагином социального обмена в тесте WP Rocket, избегайте виджетов социальных сетей (например, Facebook Like Box).
Gravatars — отложите Gravatars и используйте локальное изображение Gravatar с WP User Avatar (в комментариях к моему блогу показан пример пользовательского изображения Gravatar, которое я использую).
WPdiscuz — настройте параметры, чтобы инициировать загрузку AJAX после страницы, отключите собственные функции AJAX WordPress и отключите загрузку шрифтов awesome CSS lib. После задержки комментариев и использования WP User Avatar ваши комментарии должны загружаться очень быстро. Встроенный WordPress комментирует тоже быстро (мне просто нравится внешний вид WPdiscuz).

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

9. Изображения

Есть много способов оптимизировать изображения.

Многие из них отображаются в GTmetrix и PSI (изображения правильного размера, отложенные изображения вне экрана, эффективное кодирование изображений и WebP). Я также перечислил несколько дополнительных рекомендаций. Имейте в виду — большинство инструментов для тестирования скорости показывают неоптимизированные изображения только для одной тестируемой страницы.

Правильный размер изображений — изменение размера больших изображений на меньшие. Ширина моего блога составляет 680 пикселей, поэтому я обрезаю / изменяю размер полноразмерных изображений блога до этого размера. Некоторые плагины находят изображения большого размера и автоматически изменяют их размер, но перед загрузкой лучше использовать правильный размер.
Ленивая загрузка изображений — встроена в WordPress 5.5, и многие плагины скорости также делают это (если они включены в другом плагине скорости, они деактивируют нативную отложенную загрузку). Вы должны исключить изображения в верхней части страницы из ленивой загрузки, поскольку они критичны и будут отображаться медленнее для посетителей при ленивой загрузке. В PSI это называется «отложить закадровые изображения».
WebP — используйте плагин WebP (или плагин оптимизации изображений, если он поддерживается) для преобразования изображений в WebP, который, как предполагается, будет быстрее и качественнее, чем JPEG / PNG.Включите WebP Cache, если вы используете WP Rocket. В PSI это называется «подавать изображения в формате следующего поколения».
Сжать изображения без потерь — Популярные методы ShortPixel, Smush, TinyPNG и Photoshop. Уровень сжатия действительно зависит от того, чем вы готовы пойти на компромисс между качеством и скоростью (Lighthouse использует 85%). В PSI это называется «эффективным кодированием изображений».
Объединение изображений с помощью спрайтов CSS — спрайт CSS объединяет несколько небольших изображений в одно изображение, поэтому он создает 1 запрос вместо нескольких (с использованием генератора спрайтов CSS).Я использовал CSS-спрайт для круглых значков на моей старой домашней странице. Вы также можете сделать это при отображении нескольких логотипов (если у вас есть раздел «клиенты» или «избранные»). Вы должны делать это только с небольшими декоративными изображениями, поскольку это может повредить SEO, если вы будете делать это с обычными изображениями.
Показывать изображения через URL-адрес вашей CDN. — URL-адреса CDN (например, https://x7r6b9v3.rocketcdn.me) могут использоваться для обслуживания изображений. Cloudflare не использует URL-адрес CDN. Если вы используете URL-адрес CDN, но изображения не обслуживаются, включите параметр CDN Rewrite при использовании Perfmatters.
Показывать изображения с правильными размерами. — добавьте атрибут ширины / высоты в HTML-код изображения. В WP Rocket есть возможность добавить недостающие размеры изображения, что должно исправить это.
Adaptive Images — передавайте изображения меньшего размера на мобильные устройства с помощью подключаемого модуля адаптивных изображений.
Отключить Hotlinking — запрещает людям встраивать ваши изображения на свои веб-сайты, что требует пропускной способности и стоит ваших денег. Вы можете предотвратить это с помощью защиты от горячих ссылок Cloudflare, настройки отключения встраивания в WP Rocket или на некоторых хостах есть опция отключения горячей ссылки.Добавление вашего логотипа к изображениям также может отпугнуть людей от хотлинкинга.
Удалите данные EXIF из изображений. — Удаляет ненужные данные из изображений, такие как дата, время, местоположение и настройки камеры, когда была сделана фотография. Выполняется большинством плагинов оптимизации изображений.
Понижение качества для более медленных подключений — плагины, такие как Optimole, позволяют отображать изображения более низкого качества для пользователей при медленных подключениях (пониженная версия позволяет уменьшить размер файла до 40%).

10.Видео

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

Ленивая загрузка видео — через плагин кеширования, Perfmatters или попробуйте WP YouTube Lyte.
Замените фреймы YouTube изображениями для предварительного просмотра. — iframe (который является самым тяжелым элементом видео) загружается только после того, как посетители действительно нажимают кнопку воспроизведения.
Preconnect To YouTube — устанавливает раннее подключение к YouTube и является элементом PSI.
Выгрузка медиафайлов в сторонние службы — если вы используете размещенные на собственном сервере видео, используйте стороннюю службу, например WP Offload Media, чтобы выгрузить их в Amazon S3, DigitalOcean Spaces или Google Cloud Storage и обслуживать их с помощью Amazon CloudFront или другой CDN.

11. База данных

Глубоко очистите базу данных.

Многие плагины кеширования имеют автоматическую очистку базы данных (у меня установлена 1 неделя в WP Rocket), но они не удаляют таблицы, оставленные плагинами, которые создаются при удалении плагина.Для этого типа очистки я рекомендую время от времени устанавливать WP Optimize. Установите его, а затем удалите таблицы из старых плагинов, помеченные как «не установлены», если вы не планируете использовать плагин снова.

Запланировать текущую очистку базы данных (я использую WP Rocket).
Удалены неиспользуемые таблицы (в WP-Optimize) после удаления плагина.

12. Выгрузить активы

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

Уменьшение CSS и Javascript являются элементами PSI и обычно выполняются с помощью Perfmatters или Asset CleanUp. Я написал о них сравнение (я использую Perfmatters, так как UI / UX намного лучше). Однако профессиональная версия Asset CleanUp позволяет выгружать собственный CSS, а Perfmatters — нет.

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

Примеры:

Отключить плагин слайдера на страницах, на которых не используются слайдеры.
Отключить плагин Rich Snippets на страницах, которые не используют Rich Snippets.
Отключить плагин контактной формы на страницах, на которых нет контактной формы.
Отключить сценарии и стили WooCommerce на страницах, не относящихся к электронной коммерции.
Отключить плагин управления партнерскими ссылками на страницах, которые не используют партнерские ссылки.
Отключить плагин социального обмена на всех страницах (поскольку он обычно предназначен для сообщений в блогах).
Отключите неиспользуемые функции в построителе страниц (см. Этот пост для Elementor).

13. Удаление вздутия

Удаление раздувания может снизить нагрузку на ЦП и высвободить ресурсы сервера.

Некоторое раздувание можно удалить с помощью Perfmatters (проверьте страницу с их функциями), Asset CleanUp или с помощью ручного кода.Вам также следует пройти через настройки темы / плагина / хостинга, чтобы отключить все функции, которые вы не используете. Сюда входят фоновые процессы, которые могут потреблять много ресурсов ЦП.

Отключить сердцебиение.
Избегайте раздутых тем.
Удалите неиспользуемые медиафайлы.
Удалите неиспользуемые темы / плагины.
Отключить отслеживание использования в плагинах.
Отключить неиспользуемые модули в плагинах.
Заменить WP cron настоящими заданиями cron.
Ограничение ревизий поста (достаточно 5-10).
Глубоко очистите базу данных с помощью WP-Optimize.
Защитите свой блог / формы от спама в комментариях.
Удалите jQuery Migrate, если ваши плагины не используют его.
Отключить другие неиспользуемые элементы в Perfmatters или Asset CleanUp.
Отключите неиспользуемые функции в вашей учетной записи хостинга: электронную почту, DNS, FTP и т. Д.

14. Задержка JavaScript

Delaying JavaScript был введен в WP Rocket и также может быть выполнен с помощью Flying Scripts (WP Rocket задерживает до взаимодействия с пользователем, в то время как Flying Scripts устанавливает период ожидания в секундах).

Вы должны откладывать только тот JavaScript, который загружается ниже сгиба. WP Rocket имеет список безопасных JavaScript по умолчанию для задержки, но вы можете добавить больше. Я отложил и wpDiscuz, и Gravatars, и теперь мой блог загружается намного быстрее, а раздел комментариев не вызывает ошибок GTmetrix.

Просмотрите свой отчет PSI и обратите внимание на следующие элементы: сокращение времени выполнения JavaScript, сокращение неиспользуемого JavaScript и уменьшение воздействия стороннего кода. Если вы видите какой-либо некритический JavaScript, который может быть отложен, протестируйте его.Например, AdSense можно отложить, добавив adsbygoogle.js.

15. Предварительная выборка, предварительная загрузка, предварительное подключение

Они говорят браузерам загружать ресурсы заранее.

Вы, наверное, видели это в WP Rocket, Perfmatters, Pre * Party Resource Hints или можете добавить код вручную. Предварительная нагрузка и предварительное подключение также являются рекомендациями PSI. Вы можете добавлять подсказки к ресурсам, используя следующие значения: шрифты, скрипты, стили, изображения, мультимедиа и документы.

Prefetch — помогает браузерам предвидеть запросы от сторонних сайтов. Сначала просмотрите загрузку сторонних доменов на вашем сайте в PSI или GTmetrix. Затем возьмите их URL-адреса или просмотрите эти общие домены для предварительной выборки. Наконец, предварительно загрузите их с помощью одного из трех упомянутых плагинов.
Предварительная загрузка — часто используется для ссылок и шрифтов. Предварительная загрузка ссылок загружает страницу, когда пользователи наводят курсор на ссылку, поэтому к тому времени, когда они нажимают на нее, страница загружается почти мгновенно (это можно сделать в WP Rocket, Perfmatters или Flying Pages).Предварительная загрузка шрифтов помогает браузерам обнаруживать шрифты в файлах CSS. Для этого скопируйте URL-адреса шрифтов из вкладки GTmetrix Waterfall и вставьте их в раздел предварительной загрузки шрифтов в одном из трех упомянутых плагинов.
Preconnect — устанавливает ранние подключения к важным сторонним источникам. Обычен для CDN и внешних шрифтов, таких как fonts.gstatic.com, но не может быть выполнен в WP Rocket (используйте один из других плагинов). С осторожностью используйте и проверяйте результаты в инструментах ускорения после внедрения.

16.Перенаправляет

Если вы видите в PSI сообщение «Избегайте переадресации целевой страницы», вероятно, это связано с тем, что вы ссылаетесь на неправильные URL-адреса или используете подключаемый модуль, который создает переадресацию. Это индивидуально, но вот несколько советов.

Избегайте подключаемых модулей, которые создают перенаправления.
Правильно используйте завершающие слэши: https://example.com/blog/
Ссылка на правильную версию HTTPS и WWW или версию без WWW.
Не используйте подключаемые модули переадресации, их создание в .htaccess выполняется быстрее.
Используйте Better Search Replace, чтобы исправить ошибки перенаправления на вашем сайте.

17. Блокировать плохих ботов

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

Шаг 1 : Установите Wordfence (он может потреблять ресурсы ЦП, поэтому удалите его, когда закончите).

Шаг 2 : Просмотрите отчет о посещаемости Wordfence в реальном времени в течение нескольких минут, чтобы увидеть, какие боты атакуют ваш сайт в режиме реального времени.Робот Google (и, вероятно, другие) явно в порядке, но вы можете заметить несколько спам-сообщений. Погуглите имена хостов этих ботов, чтобы узнать, не считают ли их спамом другие люди.

Шаг 3 : Заблокируйте ботов (у вас есть несколько вариантов): блокировка Wordfence, правила брандмауэра Cloudflare (блокировать до 5), Blackhole для плохих ботов, брандмауэр 7G Джеффа Старра или защита ботов Cloudways.

Войдите в свою панель управления Cloudflare и перейдите в Брандмауэр → Правила брандмауэра → Создать правило брандмауэра.Скопируйте имена хостов плохого бота (из Wordfence) и добавьте их сюда, в поле «Значение». Поскольку вы можете создать 5 правил, вы должны повторить этот шаг для своих 5 худших плохих ботов из Wordfence.

Поле = Имя хоста
Оператор = содержит

Значение

= имя хоста плохого бота, которого вы нашли в Wordfence

Шаг 4 : Зайдите в «Журнал блокировок» в Cloudflare и посмотрите, как ваши спам-боты блокируются.

Переместите страницу входа в WP с помощью Perfmatters или WPS Hide Login, поскольку ваша страница входа в систему по умолчанию привлекает спам-ботов.Если вы используете Cloudflare или другую службу безопасности, включите WAF.

18. Мобильный

Как вы улучшаете мобильные показатели в PSI?

Большинство оптимизаций настольных компьютеров переносятся и на мобильные устройства, поэтому всегда следует начинать с них в первую очередь. Во-вторых, Google использует более медленное соединение 3G для тестирования мобильных устройств, что означает, что результаты на мобильных устройствах почти всегда хуже, чем на компьютерах. Тем не менее, вы можете сделать несколько специфичных для мобильных устройств вещей.

Убедитесь, что темы / плагины реагируют.
Заменить слайдеры изображениями (слайдеры все равно ушли в прошлое).
Кодируйте меню на CSS вместо JavaScript и избегайте гамбургерных меню.
Показывайте изображения меньшего размера на мобильных устройствах с помощью плагина адаптивных изображений.
Включите мобильное кэширование, если ваш плагин кеширования поддерживает его (или получите такой, который поддерживает).
Понизьте качество изображения для более медленных соединений (вы можете сделать это в Optimole).
Рассмотрите AMP (я не фанат) — конверсии Kinsta упали на 59% при использовании AMP.
Проверьте отчет Web Vitals в Search Console (есть специальный раздел для мобильных устройств).

19. WooCommerce

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

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

Используйте плагин Disable WooCommerce Bloat.
Никогда не запускайте WooCommerce на виртуальном хостинге (рецепт катастрофы).
Очистить переходные процессы WooCommerce в настройках статуса WooCommerce.
Отключить фрагменты тележки, если вы цените скорость больше фрагментов (в Perfmatters).
Отключить скрипты / стили WooCommerce на страницах, не относящихся к электронной коммерции (в Perfmatters).

20. Обновить программное обеспечение

Следите за обновлениями программного обеспечения. WooCommerce и некоторые конструкторы страниц (Elementor и Divi) имеют раздел состояния системы, в котором отображаются сведения о вашем программном обеспечении.Также будьте в курсе, когда ваш хост выпускает обновление (версия PHP, Redis и т. Д.). Скорее всего, вам придется внести эти обновления вручную.

Версия PHP
MySQL + MariaDB версии
Ядро WordPress, темы, плагины, фреймворки

21. Разное

Некоторые из них не попали в другие разделы, поэтому я перечислил их здесь:

Защитить страницы входа — при использовании Cloudflare добавьте правило страницы для своей страницы входа, установите высокий уровень безопасности, затем отключите функции производительности Cloudflare внутри администратора.
Используйте Brotli — он намного быстрее, чем GZIP (WP Rocket поддерживает только GZIP).
CDN Rewrite — если вы используете CDN, но изображения с него не передаются, попробуйте включить опцию перезаписи CDN в настройках Perfmatters (не применимо к Cloudflare).
Отложить некритический JavaScript — используйте плагин кеширования или автоматическую оптимизацию, чтобы отложить некритический JavaScript (файлы JS загружаются ниже сгиба). Не откладывайте содержание верхней части страницы.
Не включать Yoast Indexables — утверждает, что ускоряет работу сайта, но я бы не стал его включать (много жалоб в их блоге). И, честно говоря, вместо этого вам следует использовать Rank Math или SEOPress.
Чтобы комбинировать CSS / JS и использовать критический CSS, или нет — WP Johnny говорит, что небольшие сайты должны объединяться, а большие сайты обычно не должны. Вы также должны протестировать критический CSS, чтобы увидеть, оказывает ли он положительное влияние на время загрузки, потому что иногда он может иметь отрицательное влияние.

22.Плагины скорости

Вот список из 35+ плагинов скорости WordPress с краткими описаниями.

Конечно, все это вам не нужно. Больше всего я рекомендую Oxygen Builder, WP Rocket или LiteSpeed, Perfmatters, ShortPixel, WP-Optimize, Query Monitor и Autoptimize.

Oxygen Builder — легкий конструктор тем. Я рекомендую создать свой сайт.
WP Rocket — плагин кеширования №1 в большинстве опросов Facebook и то, что использует большинство людей.
LiteSpeed Cache — плагин кеширования, который следует использовать, если вы работаете на сервере LiteSpeed.
Perfmatters — выгрузить активы, удалить раздувание, оптимизировать WooCommerce, другие функции.
Asset CleanUp — аналогично Perfmatters (бесплатно, но более ограниченно, а UI / UX не очень хорош).
Autoptimize — лучший контроль оптимизации CSS / JavaScript, чем у большинства плагинов кеширования.
OMGF | Размещать шрифты Google локально — устраняет проблемы с кешированием браузера для GA.
ShortPixel — популярный плагин для оптимизации изображений с возможностью конвертировать изображения в WebP.
ShortPixel Adaptive Images — показывайте на мобильных устройствах умные кадрированные (уменьшенные) изображения.
Optimole — отложенная загрузка изображений без jQuery и их обслуживание через CDN Cloudfront.
WP-Optimize — очищает базу данных, включая возможность удаления таблиц, оставленных старыми плагинами.
Query Monitor — найдите узкие места, замедляющие работу вашего сайта, включая самые медленные плагины.
Swap Google Fonts Display — гарантирует, что текст остается видимым во время загрузки веб-шрифта (элемент PSI).
Flying Scripts — аналогично задержке выполнения JavaScript в WP Rocket (задерживает JavaScript).
Flying Pages — аналогично предварительно загруженным ссылкам в WP Rocket (предварительно загружает страницы при наведении курсора мыши).
Swift Performance — плагин кэширования или промахи с агрессивным кешированием (посредственные отзывы).
SG Optimizer — используйте, если вы используете SiteGround, но я не рекомендую хостинг SiteGround.
Breeze By Cloudways — не используйте, если вы используете Cloudways (WP Rocket намного лучше).
WP Fastest Cache — бесплатный плагин для кеширования, но почти не имеет новых функций (устарел).
Nitropack — плагин кеширования, специально разработанный для исправления элементов PSI, не обязательно времени загрузки.
ToolKit For Elementor — разработан специально для ускорения работы Elementor (хорошие отзывы тоже).
WP YouTube Lyte — ленивая загрузка видео и использование изображений предварительного просмотра (если не используется WP Rocket).
Heartbeat Control — отключить / ограничить WordPress Heartbeat API (если не используется WP Rocket).
Pre * Party Resource Hints — добавляет предварительную выборку, предварительную загрузку, предварительное подключение (если не используется WP Rocket).
Отключить раздувание WooCommerce — удаляет раздувание WooCommerce для ускорения работы администратора.
BunnyCDN — используется для настройки BunnyCDN (CDN, который я рекомендую вместо RocketCDN).
Blackhole For Bad Bots — предотвращает попадание плохих роботов на ваш сайт и потребление ресурсов.
WP Offload Media — разгрузка носителя в различные сервисы / CDN при использовании размещенных на собственном хостинге видео.
WP Cloudflare Super Page Cache — используйте правило кеширования всего на динамических сайтах.
WP Crontrol — управляйте своими заданиями WP cron и их расписаниями, которые могут снизить нагрузку на ЦП.
Disqus Conditional Load — отложенная загрузка комментариев Disqus с использованием OnScroll, OnClick, Normal.
WP User Avatar — загрузите настраиваемое оптимизированное изображение Gravatar, которое можно разместить локально.
AMP Для WP — добавьте ускоренные мобильные страницы с вариантами дизайна (я не предлагаю AMP).
Отключение виджетов — отключение виджетов боковой панели / панели инструментов (ускорение начальной загрузки администратора).
Показать версию PHP — показывает, какую версию PHP вы используете, если вы не знаете, как это сделать.
GTmetrix Для WordPress — отслеживайте результаты GTmetrix, планируйте сканирование и получайте оповещения.
WP Hosting Performance Check — довольно точная запись производительности хостинга.

23. Элементы PageSpeed Insights

Ниже приведены элементы PageSpeed Insights и распространенные решения. Вот скриншот из Think With Google, который также суммирует их, но я попытался сделать свой конкретным для WordPress.

Избегайте чрезмерного размера DOM — избегайте медленных построителей страниц, отложенной загрузки элементов в нижней части страницы (изображения, видео, окна iframe, AdSense), жестко запрограммируйте свой верхний / нижний колонтитул / меню и разбивайте комментарии на страницы. Если вы используете Elementor, включите «Оптимизированный вывод DOM.”
Избегайте цепочки критических запросов — отложите / асинхронно JavaScript ниже сгиба, объедините CSS и JS в отдельные файлы, воспользуйтесь преимуществами предварительного подключения и предварительной загрузки.
Избегает document.write () — чаще всего ассоциируется с динамическим годом в области нижнего колонтитула. Вместо этого вручную добавьте текущий год, не делая его динамическим.
Избегайте огромных сетевых нагрузок — уменьшите размер страницы и количество HTTP-запросов. Общая рекомендация, которая охватывает от кеширования до оптимизации изображений, шрифтов, стороннего кода, плагинов и сокращения файлов CSS + JavaScript.
Избегайте больших библиотек JavaScript с меньшими альтернативами — большинство плагинов полагаются на jQuery вместо больших библиотек JavaScript, но вам все равно следует попытаться удалить jQuery с вашего сайта, используя плагины без jQuery и отключив перенос jQuery.
Избегайте больших макетов смещения. — измеряет смещение элементов на странице, часто связанных со шрифтами, кнопками, изображениями, CSS и уведомлениями о файлах cookie, которые «летают» во время загрузки страницы. Быстрые подсказки: попробуйте отключить «оптимизацию доставки CSS» в WP Rocket или «асинхронно загружать CSS» в кеше LiteSpeed.Правильно используйте отображение шрифтов, исключите изображения в верхней части страницы из отложенной загрузки и укажите размеры изображений / окон iframe. Реклама, анимация и динамический контент также могут вызывать высокий CLS. Показатель CLS применяется только к контенту, который находится в верхней части страницы.
Избегайте переадресации нескольких страниц — используйте правильные HTTPS и WWW или не WWW версию на всем сайте. Плагины также могут вызывать ошибки перенаправления.
Избегайте несоставной анимации. — исправьте анимацию, которая смещается или выглядит некорректно при загрузке страницы, что также повлияет на время накопительного сдвига макета.
Не используйте устаревший JavaScript в современных браузерах. — не используйте устаревший JavaScript (стандарт ES5). Использование надежных тем / плагинов должно предотвратить это.
Отложить закадровые изображения — отложенная загрузка изображений (встроенная в WordPress или использование плагина (Optimole), который выполняет отложенную загрузку без jQuery и обслуживает изображения через Cloudfront).
Убедитесь, что текст остается видимым во время загрузки Webfont. — используйте свойство «swap» в font-display, добавив & display = swap в конец URL-адреса шрифта Google, или используйте плагин.
Эффективное кодирование изображений — общая рекомендация по уменьшению размера изображений. Сжимайте изображения (с помощью таких плагинов, как ShortPixel или TinyPNG), лениво загружайте изображения, обслуживайте их из CDN (Cloudflare не работает), удаляйте данные EXIF, используйте WebP.
Устранение ресурсов, блокирующих рендеринг — создание критически важного CSS и отложенного JavaScript. Autoptimize и плагин Async JavaScript обычно могут это исправить.
Включить сжатие текста — включить GZIP в вашем плагине кеширования (но Brotli работает быстрее).
Самая большая отрисовка содержимого — сколько времени требуется для завершения рендеринга основного содержимого на странице (задействовано несколько факторов). Основными способами улучшения LCP являются сокращение времени отклика сервера, выбор центра обработки данных рядом с посетителями, использование CDN, добавление подсказок ресурсов браузера, таких как предварительное подключение и предварительная выборка, использование кэширования на стороне сервера, встроенные критические ресурсы, откладывание некритических ресурсов, использование критический путь CSS, избегайте тяжелых скриптов в верхней части страницы, уменьшайте размер DOM, убедитесь, что текст остается видимым во время загрузки шрифта, оптимизируйте изображения, используйте адаптивные изображения и минимизируйте CSS / JS.
Минимизировать работу основного потока — общая рекомендация по сокращению количества JavaScript.
Удалите неиспользуемый JavaScript / CSS. — избегайте медленных построителей страниц, которые добавляют много ненужных CSS / JS, сокращают сторонний код за счет локального размещения файлов, отложенной загрузки файлов и откладывают некритический JavaScript. Удалите jQuery, если он не нарушает работу вашего сайта. Используйте критический CSS или используйте этот инструмент для удаления неиспользуемого CSS. Используйте код отслеживания Google Analytics меньшего размера (analytics-minimal.js или analytics.js) вместо gtagv4.js. Используйте Perfmatters или Asset CleanUp, чтобы выгружать ресурсы на определенных страницах и публикациях.
Уменьшите время отклика сервера — избегайте виртуального хостинга, брендов EIG и откажитесь от SiteGround, поскольку их TTFB стал медленным. Попробуйте Cloudways (DigitalOcean или Vultr HF) или Gridpane. Присоединяйтесь к группе WP Hosting Facebook, чтобы получить обратную связь.
Сохраняйте низкое количество запросов и малые размеры передачи. — Сохраняйте низкое количество запросов, чтобы делать меньше HTTP-запросов (часто связанных с большим количеством стороннего кода, несколькими шрифтами и несколькими файлами CSS / JavaScript).Чтобы сохранить небольшой размер передаваемых данных, минимизируйте CSS / JS, используйте сжатые изображения правильного размера + и устраните проблемы с перенаправлением.
Время выполнения JavaScript — см. Пункт «удален неиспользуемый JavaScript».
Сведите к минимуму стороннее использование — просмотрите загрузку стороннего кода на вашем сайте в PSI или GTmetrix Waterfall (или вот список распространенных сторонних разработчиков), а затем решите, что нужно оптимизировать. Размещайте шрифты локально в OMGF, размещайте Google Analytics и Facebook Pixel локально, лениво загружайте видео, заменяйте фреймы YouTube изображением предварительного просмотра и размещайте Gravatars локально с помощью WP User Avatar.Используйте меньший тип скрипта GA и отключите ремаркетинг + рекламу для GA, чтобы избежать второго запроса к DoubleClick (в Perfmatters), отложить загрузку несущественного стороннего JavaScript и избегать использования Карт на всем сайте. AdSense может создавать множество сторонних запросов.
Minify CSS — удаляет ненужные символы из CSS (выполняется через плагин кеширования).
Minify JavaScript — удаляет ненужные символы из JS (через плагин кеширования).
Предварительно подключитесь к требуемым источникам — при использовании CDN или шрифтов Google предварительно подключите URL-адрес CDN и // шрифты.gstatic.com с помощью Perfmatters, Pre * Party или добавьте код вручную. Это позволит установить раннее подключение к сторонним службам.
Предварительная загрузка ключевых запросов — загружает важные ресурсы раньше. Обычно делается с важными файлами CSS, JavaScript, WOFF2 и изображениями. Можно сделать в WP Rocket, Perfmatters и других плагинах скорости. Включите предварительную загрузку ссылок, а затем найдите важные файлы, загруженные на ваш сайт. Предварительно загрузите файлы во время тестирования влияния на время загрузки.
Правильный размер изображений — избегайте огромных изображений и уменьшайте размер до меньшего размера.Попробуйте создать шпаргалку с размерами логотипа, изображений в блогах, изображений боковой панели и т. Д.
Удалите повторяющиеся модули в пакетах JavaScript — часто вызвано импортом кода, который может привести к дублированию модулей (пакетов JS) из нескольких источников.
Показывать изображения в форматах следующего поколения — конвертируйте изображения в формат WebP с помощью плагина и включите кэширование WebP в настройках мультимедиа WP Rocket, если вы его используете.
Обслуживайте статические ресурсы с помощью эффективной политики кеширования — при использовании WP Rocket отредактируйте файл.htaccess и измените срок действия кеша изображений и шрифтов с 4 месяцев до 180 дней (или 6 месяцев). При использовании Cloudflare установите срок действия кеша на 6 месяцев.
Используйте видеоформаты для анимированного контента — конвертируйте любые анимированные GIF в видео.
Пользовательские временные метки и меры — получите дополнительные показатели в PSI и Chrome DevTools, добавив User Timing API. Это не тест «прошел / не прошел»; он просто предоставляет дополнительные данные о скорости, используемые для точного определения , на которое затрачивается время .
Использует пассивные слушатели для повышения производительности прокрутки. — некоторые темы / плагины используют «addEventListener» (сделайте его пассивным). Также существует проблема с основным скриптом WordPress (js / comment-reply.min.js), создающим непассивных слушателей.

24. Ресурсы

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

Группы в Facebook

Нанять разработчика

В.П. Джонни — мой постоянный помощник (хотя он очень занят). Вы должны хотя бы протянуть руку и попытаться занять с ним место. В настоящее время он удаляет Elementor для меня и проявляет удивительное внимание к деталям, тестируя все вместе с путями и исправляя проблемы, о которых я не знал.
Я также работаю с bdkamol на freelancer.com. Вот его портфолио.Он живет в Бангладеш, так что для вас разница во времени, если вы в США, но мы с Пронайей работаем вместе с 2012 года. В его профиле фрилансера у него отличный пятизвездочный отзыв с более чем 50 отзывами.

Вот и все, ребята!

Очень надеюсь, что это помогло. Оставьте свои новые оценки + время загрузки в комментариях. Пожалуйста, укажите URL вашего отчета GTmetrix, а НЕ ссылку на ваш сайт, иначе он будет отмечен как спам.

Ура,
Том

О Томе Дюпюи

Том Дюпюи пишет учебники по скорости WordPress и SEO из своей квартиры в Денвере, штат Колорадо.В свободное время он играет в Rocket League и смотрит документальные фильмы об убийствах. Прочтите его биографию, чтобы узнать о нем 50 случайных и тревожных фактов.

jQuery Migrate Helper: как исправить ошибки JavaScript в WordPress 5.5?

WordPress 5.5 «Eckstine» внес много замечательных изменений в ядро. Удаление jQuery Migrate 1.x в WP 5.5. был одним из запланированных этапов с точки зрения обновления версии WordPress jQuery.

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

Обновление библиотеки JavaScript практически повредило многие плагины, оставив пользователей WP с испорченными Yoast, Social Warfare и даже классическими плагинами редактора WordPress. Многие пользователи этих популярных плагинов сообщают о многочисленных проблемах.

Некоторые из ваших плагинов WordPress перестали работать должным образом после обновления до WP 5.5.? Давайте перейдем к сути и предложим вам решение.

Обновление WordPress 5.5.1

Во время WordPress 5.5.1 «Кратковременный ремонтный выпуск», засыпка затронутых глобальных объектов (которые были удалены в WP 5.5 без устаревания), была добавлена для предотвращения дальнейших ошибок JavaScript. В качестве быстрого решения попробуйте обновить свой сайт до версии 5.5.1, чтобы получать исправления ошибок.

Как исправить ошибки JavaScript в WordPress 5.5 с помощью

jQuery Migrate Helper ?

Пока создатели вашей темы или плагина исправляют проблемы с устаревшим кодом (мы надеемся на это!) И пытаются заставить текущую версию jQuery работать, вы можете воспользоваться временным обходным решением, загрузив и установив следующий бесплатный плагин :

Включить jQuery Migrate Helper

Как мы знаем, установка плагина Enable jQuery Migrate Helper уже помогла многим пользователям WordPress снова активировать свои плагины.

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

Для разработчиков WordPress

Если с вашим плагином или темой возникли проблемы в WordPress 5.5, команда WordPress ответит вам проверкой последних версий jQuery. Чтобы справиться с устаревшим кодом, вам необходимо добавить плагин Test jQuery Updates.

Вот рекомендация по его использованию:

«Как и планировалось, был выпущен плагин Test jQuery Updates , чтобы упростить тестирование различных версий jQuery, jQuery Migrate и jQuery UI. Пожалуйста, установите его и тщательно проверьте, все ли работает должным образом, особенно в интерфейсе или на страницах настроек других плагинов WordPress ».

Надеюсь, мы вам помогли!

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

Помимо плагина iQuery, ваш сайт WordPress также выиграет, если вы включите следующие плагины:

WordPress Demo Builder — включает демонстрационные и пробные версии для ваших плагинов / темы с одним плагином и мультисайтовой установкой.

Блоки Гутенберга — библиотека из 70+ бесплатных блоков и дизайнов для редактора блоков.

Лучшие торговые площадки (альтернативы Themeforest) для продажи вашей темы WP.

WordPress 5.6 представляет новый риск для вашего сайта: что делать

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

Пароли приложений добавляют функциональности и рискуют

WordPress 5.6 будет поставляться с новой функцией, которая позволяет внешним приложениям запрашивать разрешение на подключение к сайту и генерировать пароль, специфичный для этого приложения. После того, как приложению был предоставлен доступ, оно может выполнять действия от имени пользователя через WordPress REST API.

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

Что еще хуже, URL-адреса запроса пароля приложения настроены для отправки вновь сгенерированного пароля на сайт запрашивающего через URL-адрес перенаправления. Поскольку пароли приложений работают с разрешениями пользователя, который их сгенерировал, злоумышленник может использовать это для получения контроля над веб-сайтом. Мы продемонстрировали, как злоумышленник может использовать атаку социальной инженерии, используя пароли приложений в Wordfence Live.

По этой причине последняя версия Wordfence, 7.4.14, по умолчанию отключает пароли приложений. Если у вас есть конкретный вариант использования паролей приложений и вы хотите повторно включить пароли приложений, вы можете сделать это в Wordfence-> Firewall-> Manage Brute Force Protection:

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

Эта функциональность внешне похожа на XML-RPC, но REST API предлагает значительно более широкие возможности. Кроме того, пароли приложений генерируются надежно и состоят из 24 символов, поэтому атаки методом перебора и подстановки учетных данных вряд ли будут успешными.

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

Обновление jQuery продолжается

WordPress 5.5, выпущенный в августе 2020 года, удалил скрипт jQuery Migrate. Это привело к возникновению проблем на многих сайтах, использующих плагины, зависящие от более старых версий jQuery.

Если ваш сайт был затронут, и в настоящее время вы используете плагин Enable jQuery Migrate Helper для решения этих проблем, вам нужно убедиться, что ваш сайт работает без него. перед обновлением до WordPress 5.6.

Это потому, что WordPress 5.6 обновится до последней версии jQuery и добавит jQuery Migrate 3.3.2, который может конфликтовать с версией, повторно включенной подключаемым модулем Enable jQuery Migrate Helper, которым является jQuery Migrate 1.4.1.

WordPress уже несколько лет использует устаревшие версии библиотеки jQuery.

WordPress 5.6 — это шаг 2 из 3-х этапов по установке WordPress на последнюю версию jQuery. Этот план был:

WordPress 5.5: Удалите jQuery Migrate 1.x скрипт. (Август 2020)
WordPress 5.6: Обновление до последних версий jQuery, jQuery UI и сценариев jQuery Migrate. (Декабрь 2020 г.)
WordPress 5.7: Удалите скрипт jQuery Migrate. (Март 2021 г.)

Из-за этой временной шкалы совместимость с jQuery на самом деле значительно более важна, чем совместимость с PHP 8.0. Разработчики плагинов и тем должны использовать следующие несколько месяцев до выпуска WordPress 5.7, чтобы полностью перевести свой код на совместимость с последней версией jQuery без помощи jQuery Migrate.

Хотя исправления безопасности были перенесены в версии jQuery, используемые предыдущими версиями WordPress, многие инструменты, такие как Google Lighthouse, сообщали, что сайты WordPress были уязвимы из-за работы более старой версии jQuery. Одна хорошая новость заключается в том, что эти инструменты аудита сайтов больше не должны показывать сайты WordPress 5.6 как уязвимые.

WPTavern есть отличная статья, в которой более подробно рассматривается ситуация.

Совместимость с PHP 8

WordPress 5.6 предназначен для «бета-совместимости» с PHP 8. Это означает, что при нормальном использовании сайт, на котором работает WordPress 5.6 на PHP 8 с темой по умолчанию и без плагинов, вряд ли столкнется с какими-либо проблемами. Наша предыдущая статья посвящена некоторым проблемам, с которыми столкнутся авторы плагинов, когда дело касается совместимости с PHP 8.

Если вы типичный владелец сайта WordPress, использующий изрядное количество плагинов, возможно, пройдет некоторое время, прежде чем станет безопасным обновление до PHP 8. С другой стороны, если вы создаете новый сайт с нуля, вы Я смогу обойти многие проблемы, начав с последней версии PHP и WordPress.

Автоматическое обновление основной версии

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

Начиная с WordPress 5.6, все новых установок WordPress будут получать автоматические обновления для основных версий .Это означает, что если вы создадите новый сайт WordPress с WordPress 5.6, он будет автоматически обновлен до WordPress 5.7, когда он выйдет. Хотя это имеет более высокую вероятность возникновения проблем, имейте в виду, что наиболее вероятные проблемы будут с несовместимыми плагинами, которые будут гораздо менее распространены на новых сайтах.

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

Совершенно новая тема

Поскольку 5.6 является последней основной версией WordPress, которая будет выпущена в 2020 году, она включает новую тему по умолчанию на следующий год под названием Twenty Twenty-One. Как и предыдущие темы WordPress по умолчанию, он основан на существующей теме Seedlet и довольно минимален, хотя и включает поддержку темного режима.

Заключение

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

Выражаем особую благодарность руководителю отдела контроля качества Мэтту Руснаку и аналитику угроз Хлои Чемберленд за их находки и помощь в написании этой статьи.

Jquery wordpress подключение: Подключение jQuery в WordPress (верный путь)

Как подключить jquery в WordPress с помощью сервиса Google code

Конфликт jquery.min.js при подключении в тему WordPress

По той же теме:

Как подключить jQuery

Шаг первый

Шаг второй

Шаг третий

Важное послесловие

Подключение библиотек jQuery и SPServices через мастер страницу SharePoint 2013

Как подключить библиотеку jQuery в Blogger

Возможности библиотеки jQuery:

Как добавить библиотеку JQuery на Blogger/Blogspot

Как исправить проблемы с переносом jQuery и JavaScript в WordPress 5.5?

после обновления до WordPress 5.5: JQuery Migrate

Почему WordPress 5.5 удалил jQuery Migrate?

Ошибки переноса jQuery в WordPress 5.5 — причины

WordPress 5.5 Ошибка разбивки на страницы

Нравится:

Как быстро исправить предупреждения о смешанном содержимом WordPress (HTTPS / SSL)

Хотите посмотреть видео версию?

Что такое предупреждение о смешанном содержимом?

Примеры предупреждений о смешанном содержимом

Что вызывает предупреждения о смешанном содержании?

Как исправить предупреждения о смешанном содержании (4 шага)

Шаг 1. Узнайте, какие ресурсы загружаются через HTTP

Массовая проверка предупреждений HTTPS

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Шаг 2. Проверьте, доступны ли ресурсы HTTP по HTTPS

Шаг 3. Выполните поиск в WordPress и замените

Поиск и замена альтернатив

Шаг 4. Подтверждение отсутствия предупреждений о смешанном содержании

Примеры предупреждений о смешанном содержании

А как насчет HSTS?

Дополнительные рекомендации (особые случаи)

Сводка

Исправить ошибки, связанные с jQuery, после обновления WordPress в WordPress 5.5 WordPress 5.6 и WordPress 5.7

Ошибки обновления WordPress jQuery:

Исправить ошибки jQuery после обновления WordPress:

Как установить плагин Enable jQuery Migrate Helper для WordPress на свой веб-сайт:

The Good, the Meh and the Ugly

The Good

Enable jQuery Migrate Plugin Обновлено

Meh

The Ugly

Wordfence Описание уязвимости функции паролей приложений WordPress для социальной инженерии

Обзор WordPress 5.6

Citation

WordPress 5.6 Предупреждения, объявления и документация

Как исправить медленный сайт WordPress (100% PageSpeed ​​Insights)

1. Средства тестирования

2.Хостинг

3. Конструкторы страниц

4. Плагины

5. Кеширование

6. CDN

7. Шрифты

8. Сторонний код

9. Изображения

10.Видео

11. База данных

12. Выгрузить активы

13. Удаление вздутия

14. Задержка JavaScript

15. Предварительная выборка, предварительная загрузка, предварительное подключение

16.Перенаправляет

17. Блокировать плохих ботов

18. Мобильный

19. WooCommerce

20. Обновить программное обеспечение

21. Разное

22.Плагины скорости

23. Элементы PageSpeed ​​Insights

24. Ресурсы

jQuery Migrate Helper: как исправить ошибки JavaScript в WordPress 5.5?

Как исправить ошибки JavaScript в WordPress 5.5 с помощью

Для разработчиков WordPress

WordPress 5.6 представляет новый риск для вашего сайта: что делать

Пароли приложений добавляют функциональности и рискуют

Как исправить медленный сайт WordPress (100% PageSpeed Insights)

23. Элементы PageSpeed Insights