Подключить jquery wordpress: Подключение jQuery c CDN Google с динамическим определением версии jQuery в WordPress

Подключение свежей версии JQuery в WordPress

А вообще, про подключение CSS и JS в WordPress на моём сайте есть отдельный видеоурок.

Наверное вы знаете, что на некоторых сайтах можно встретить JQuery версии 1.4.2, на некоторых 1.4.4, а иногда даже 1.6.4 (это самая последняя версия на момент написания поста).

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

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

Проще простого, самая последняя версия JQuery всегда находится по адресу:

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

Если валидация будет ругаться на эту строчку кода, знайте, она написана в HTML5 🙂

А вот пример подключения JQuery к WordPress. Учтите, это будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer().

add_action( 'init', 'true_jquery_register' );
 
function true_jquery_register() {
	if ( !is_admin() ) {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ), false, null, true );
		wp_enqueue_script( 'jquery' );
	}
}

Вставьте этот код в файл functions.php. Он находится в папке с вашей текущей темой.

Миша

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

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

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

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

Сейчас появилось много плагинов, использующих скрипты 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. 4 способа

Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.

Способ 1. Скачать в папку и подключить файл

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

Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
<!—Подключаем библиотеку—>
<script src=»js/jquery-2.2.3.min.js»></script>
</head>
<body>

</body>
</html>

Так выглядит структура проекта, библиотеку jQuery скачали в папку js

библиотека лежит в папке js

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

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
</head>
<body>


<!—Подключаем библиотеку—>
<script src=»js/jquery-2. 2.3.min.js»></script>
</body>
</html>

Какой из способов лучше? Это вопрос философии и привычки. Второй способ, используется в фреймворке materialize.

Способ 2. Подключаем напрямую с CDN

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

Для подключения рекомендую использоваться подключение от Google Developers, обычно я нахожу данную страницу по ссылке jquery google. Наша задача скопировать строку:

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

и подключить ее в файл. Выглядит это так:

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
<!—Подключаем библиотеку—>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>
</head>
<body>

</body>
</html>

Второй способ подключения, перед закрывающимся тегом body:

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
</head>
<body>

<!—Подключаем библиотеку—>
<script src=»https://ajax. googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>
</body>
</html>

Все просто!

Добавьте собственный JavaScript на свой сайт WordPress

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

Однако есть менее навязчивая альтернатива. «Header and Footer Scripts» — это плагин для добавления пользовательского JavaScript в WordPress без изменения вашей темы.

В этом уроке я покажу вам, как работает этот полезный плагин.

Сначала установим плагин:

• Войдите на свой сайт WordPress.
• Перейдите в Плагины> Добавить новый
• Найдите «Скрипты верхнего и нижнего колонтитула».
• Нажмите «Установить сейчас» и активируйте плагин.

Вариант №1. Загрузите собственный файл Javascript

• Сохраните собственный код JavaScript в файл с форматом .js
• Загрузите его на свой сайт в эту папку: wp-content / themes / your-theme / js /
• Перейдите в «Настройки»> «Сценарии верхнего и нижнего колонтитула».

Теперь у вас есть два варианта загрузки файла:

• Скрипты в заголовке (загрузка внутри тега заголовка)
• Скрипты в нижнем колонтитуле (загрузить перед закрытием тега тела)

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

• По завершении нажмите кнопку «Сохранить настройки».

Вариант №2. Загрузить собственный JavaScript без файла

Кроме того, вы можете добавить свой код прямо в WordPress без необходимости в настраиваемом файле .js:

• По завершении нажмите кнопку «Сохранить настройки».

Об авторе

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

The Good, the Meh and the Ugly

1. The Good
2. The Meh
3. The Ugly
4. WordPress 5.6 Обзор
5. Citation

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

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

Хорошее

Включить плагин jQuery Migrate Обновлено

Последние два обновления были несколько нестабильными из-за того, что миллионы веб-сайтов вышли из строя или случайно обновили бета-версию 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 году осталось еще несколько недель.

Цитирование

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

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

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

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

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

Готовы ли вы к обновлению WordPress jQuery в 2021 году?

WordPress собирается выпустить свою версию 5.6 Simone, которая имеет самые интересные дополнения и функции для пользователей. Как и в версии WordPress 5.5, в редакторе блоков есть различные надстройки. Это обновление WordPress jQuery улучшает возможности редактирования для пользователей, которые еще не используют плагин Gutenberg.

Однако это не все, многие функции и дополнения были замечены и в WordPress Core.Например, тема Twenty Twenty-One, поддержка PHP 8.0, автоматические обновления и поддержка аутентификации REST API в форме паролей приложений.

Понимание jQuery

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

Общие сведения о новом обновлении WordPress jQuery

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

Однако эти новые функции WordPress jQuery также означают, что многие функции перестанут работать таким же образом.

Возьмем, к примеру, возможности редактора блоков.

• Новый блок API V2
• Улучшения блоков, пользовательского интерфейса и шаблонов
• Добавлены улучшения

Новый Block API V2 расширяет возможности блоков с рендерингом элементов оболочки. Цель состоит в том, чтобы облегчить DOM разработчиков и позволить ему синхронизироваться с содержимым главной страницы.

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

Добавленные улучшения включают такие дополнения, как Block Support API, который помогает включать такие функции, как фон, цвета и т. Д.

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

Как это повлияет на мой WP Event Manager?

Если вам интересно, что произойдет с вашим плагином событий WP, то вот что мы знаем:

EventPrime подготовлен к обновлению. С тех пор, как появилась информация об обновлении WordPress jQuery, мы отслеживаем возможные изменения. Это позволило нам быстро адаптировать ваш менеджер событий WP к новым изменениям.

Итак, вам просто нужно перейти на WordPress jQuery и начать использовать EventPrime.Ниже мы рассмотрели процесс миграции WordPress jQuery.

Попробуйте EventPrime прямо сейчас!

Как вы можете двигаться к этому изменению?

Для этого обновления jQuery ваши разработчики должны позаботиться о некоторых вещах.

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

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

Используйте помощник по миграции

Команда разработчиков jQuery упростила нашу задачу, предложив нам плагин jQuery Migrate Helper. Вам просто нужно установить этот плагин, чтобы заранее знать проблемы и ошибки.

Но помните, что это не постоянное решение. WordPress jQuery Migrate Helper — временное решение, позволяющее использовать скрипт миграции. Это дает вашей команде время для тестирования и обновления всего кода.

Для правильного использования обновления WordPress jQuery требуется постоянное исправление.

Свяжитесь с нами

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

Когда не удается синхронизировать

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

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

Также сохраните или удалите папку wp-content, чтобы защитить свои данные, плагины, темы и т. Д.

Завершение

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

Попробуйте EventPrime бесплатно!

Удалить неиспользуемые файлы CSS JS в WordPress

При попытке оптимизировать скорость сайта вы действительно хотите удалить неиспользуемые файлы CSS JS в WordPress. Это также может помочь вам улучшить рейтинг вашего сайта в Google PageSpeed.

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

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

Следующим в списке идет оптимизация или удаление неиспользуемых файлов CSS JS в WordPress.

Хотя вы, безусловно, можете сделать это с помощью плагина, такого как WP Asset Clean Up и PurifyCSS, решения CDN или инструмента, такого как PurgeCSS, мы объясним, как вы можете сделать это, не устанавливая еще один плагин на свой веб-сайт WordPress.

Пройдем:

80% ваших файлов CSS JS, вероятно, ничего не делают в 80% случаев

После нового редизайна несколько месяцев назад я поставил перед собой задачу ограничить количество файлов CSS и JavaScript здесь, в Cozmoslabs.

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

• 15 сценариев JS и 11 файлов CSS для:
• 4 сценария JS и 2 файла CSS

Почему плагины загружают так много файлов CSS JS?

имеет смысл потратить немного времени на удаление неиспользуемых файлов CSS JS в WordPress.

Если вы возьмете какой-либо плагин, который предлагает пользователю шорткод или виджет, скорее всего, он загрузит свои файлы CSS JavaScript по всему сайту, например:

Это , он загружает style.css, и filename.js по всему сайту , независимо от того, что вы используете конкретный шорткод на одной странице или определенный виджет для определенного настраиваемого типа сообщения.

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

Посмотрите, какие скрипты загружаются на нашем сайте

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

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

Вывод всех загруженных скриптов с помощью wp_enqueue_script

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

Создайте новый файл с именем wp_remove_assets.php и добавьте код в эту суть: https://gist.github.com/sareiodata/77796b5ed8108a516e82b888cb78bdae

Прежде чем мы сможем удалить неиспользуемые файлы CSS JS в WordPress, мы сначала посмотрим, что загружается.

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

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

Нас в основном интересуют те, которые загружаются.

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

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

wra_print_assets и wra_asset_template будут перечислены:

• текущий номер файла CSS / JS
• дескриптор — это уникальное имя, используемое wp_enqueue_scripts для однократной загрузки скрипта
• source — расположение файла
• зависимостей — для некоторых файлов требуются другие библиотеки, например jquery.

Версия

• — текущая версия файла CSS / JS

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

Удалить неиспользуемые файлы CSS JS в WordPress

Есть 4 основные функции, когда вы хотите удалить неиспользуемые файлы CSS JS в интерфейсе WordPress:

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

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

Удалить скрипты, которые не работают с wp_dequeue_script

Иногда скрипты добавляются иначе. Наиболее распространенный способ — просто вывести тег скрипта или стиля непосредственно в верхний или нижний колонтитул.

Это неверно по многим причинам:

• Другие застройщики не могут снять активы
• Не являясь частью глобальной переменной $ wp_scripts, могут возникать конфликты, поскольку другой плагин может загрузить локальную версию jQuery
• Это не лучшая практика, и ее не следует использовать, если вы действительно не знаете, что делаете.

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

Мы используем функцию remove_action (), которую предоставляет WordPress.При удалении действий лучше помнить:

• Приоритет объявления add_filter () имеет значение при выполнении remove_filter ()
• Функция remove_filter () должна вызываться при перехвате после добавления add_filter (), который мы хотим удалить.

В нашем конкретном случае при удалении неиспользуемых файлов CSS / JavaScript одним из скриптов был jetpack. css, который по какой-то причине был добавлен определенным образом, поэтому wp_dequeue_style () не работал.

По какой-то причине мне не удалось удалить реактивный ранец.css, однако внутри функции Jetpack implode_frontend_css () был перехватчик, который позволял нам не загружать этот конкретный файл. См. Функцию wra_remove_jetpack () внутри кода плагина.

Весь плагин

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

Лучший способ для плагинов включать файлы CSS / JS

Плагины

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

Кроме того, WordPress.org рекомендует вам использовать Кодекс в качестве примера.

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

Загружать ресурсы, только если выполняется шорткод

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

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

К сожалению, у этого есть и недостатки:

• скрипты необходимо добавить в wp_footer с поздним приоритетом, потому что если мы добавим их в wp_enqueue_scripts , наша глобальная переменная имеет хороший шанс не быть установленным
• если вам нужно что-то добавить в шапку сайта, это не сработает
• в wp_enqueue_script () вы должны установить $ in_footer в значение true

Выводы

сайтов WordPress состоят из кода PHP, HTML, JS и CSS. Если вы хотите удалить неиспользуемые файлы CSS, JS в WordPress на самом деле не так уж и сложно.

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

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

Сети доставки контента (CDN) тоже помогают, но вы по-прежнему загружаете ненужные ресурсы. Это также может помочь вам улучшить рейтинг вашего сайта в поисковой выдаче Google.

Я не могу придумать автоматизированное решение, поскольку каждый сайт индивидуален, однако есть плагины, такие как WP Asset Clean Up и PurifyCSS, и инструменты для минифицированного кода JS и CSS, такие как плагин кеширования WP Rocket или PurgeCSS. У них нет гибкости, чтобы настроить таргетинг на целые пользовательские типы сообщений, например, однако их намного проще использовать для нетехнических пользователей, чем писать собственные условные правила.

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

Подпишитесь, чтобы получить ранний доступ

на новые плагины, скидки и краткие новости о новинках Cozmoslabs!

30 лучших бесплатных плагинов jQuery для календаря и Datepicker

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

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

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: более 50 миллионов наборов пользовательского интерфейса и дизайнерских ресурсов

СКАЧАТЬ СЕЙЧАС

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

Чтобы узнать больше о плагинах jQuery, ознакомьтесь с нашей публикацией о бесплатных слайдерах галереи.

Проблемы с календарями и датпикерами JS

Все, что связано с датой и временем в Интернете, обычно создается на внутреннем языке. Есть много вариантов от Ruby до Python или PHP. Но некоторые современные веб-сайты, как правило, ведут себя как веб-приложения: мгновенно, быстро реагируют и быстро реагируют. jQuery имеет возможность связываться с серверным языком через AJAX, но это не всегда лучшее решение.

Плагины календаря

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

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

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

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

Что делает плагин отличным?

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

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

• Сбалансированная документация. Ключ к отличному плагину — простота использования с точки зрения пользователя и разработчика. Хорошо задокументированный код подобен проекту дома; Это жизненно важно для того, чтобы научиться строить или реконструировать то, что вы используете.
• Простая и открытая настройка. По большей части разработчики хотят добавить общие функциональные возможности с некоторыми настройками и изменениями в зависимости от ситуации. Хороший плагин должен иметь параметры, которые можно обновлять, добавляя или удаляя определенные функции.Лучшие плагины будут предлагать разработчикам методы обратного вызова для написания собственных функций.
• Широкая совместимость. Кто хочет посетить сайт с указателем даты, который работает только в последних версиях браузеров Chrome и Webkit? Конечно, не для пользователей Firefox или Opera, не говоря уже о пользователях IE (при условии, что они все еще существуют). Дважды проверьте совместимость с каждым плагином, чтобы убедиться, что он попадет к вашей целевой аудитории.
• Практический UX. Если в плагине есть какой-то интерактивный компонент, вы действительно хотите, чтобы он был прагматичным и простым.Спросите себя, работает ли плагин именно так, как вы ожидаете? Есть ли способы изменить функциональность для более удобной работы? Плагины предназначены для улучшения дизайна веб-сайта, однако плохой UX не делает ничего, кроме как утаскивает его.

Плагины календаря

1. CLNDR.js

Почему это великолепно:

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

2. FullCalendar

Почему это великолепно:

• Функция перетаскивания обеспечивает интерактивную атмосферу.
• Сортируемые просмотры по дням, неделям или месяцам.
• Дополнительное подключение к Календарю Google.
• Безумно подробная документация для разработчиков.
• Простой и гибкий пользовательский интерфейс.
• Демо Скачать

3. Календарь PIGNOSE

Почему это великолепно:

• Отзывчивый и удобный для мобильных устройств.
• Может использоваться как средство выбора дат с несколькими диапазонами.
• Темная тема и другие предлагаемые варианты.
• Может отображаться в модальном окне.
• У вас есть возможность отключить определенные дни.
• Демо Скачать

4. Календарь TOAST UI

Почему это великолепно:

• Поддерживает ежемесячные, еженедельные, ежедневные просмотры и многое другое.
• Создайте или отредактируйте свое расписание простым движением перетаскивания.
• Поддерживает эффективное управление вехами и расписаниями задач.
• Поддерживает настройку пользовательского интерфейса по теме
• Демо Скачать

5. Календарь Zabuto

Почему это великолепно:

• Внешние данные можно получить через AJAX / JSON.
• Работает поверх Bootstrap с традиционными классами CSS.
• Дополнительные многоязычные настройки.
• Уникальный способ выделения особых и регулярных интервалов.
• Демо Скачать

6. Подробный календарь

Почему это великолепно:

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

7. Электронный календарь

Почему это великолепно:

• Управление содержимым календаря осуществляется через JSON.
• Информация о дате и времени для отдельных событий.
• Легко ограничить навигацию за предыдущие или будущие месяцы.
• Легко написать и реализовать код.
• Демо Скачать

8. Календарь jQM

Почему это великолепно:

• Самый удобный полноэкранный календарь для jQuery Mobile.
• Настраиваемая тема и контент для событий календаря.
• Легкий! Размер файлов JS + CSS составляет ~ 14 КБ.
• Легко настраивается с множеством различных вариантов для пользователей.
• Демо Скачать

9. GoogleCalReader

Почему это великолепно:

• API-соединение с Google Calendar быстро и безболезненно.
• Почти нет CSS; полностью пустой шаблон для индивидуального стиля.
• Данные добавляются прямо в HTML с помощью заранее созданных структурных элементов.
• Легкое и простое средство выбора даты (больше похоже на календарь в личном дневнике)
• Загрузить демо

Плагины Datepicker

10

. glDatePicker

Почему это великолепно:

• Пределы навигации до определенных месяцев или недель.
• Сведения о настройке в особые дни или события.
• 7kb сжато с множеством настраиваемых параметров.
• Красочный пользовательский интерфейс с очень простой навигацией и всем вашим контролем.
• Демо Скачать

11. Выбор нескольких дат

Почему это великолепно:

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

12. DateTimePicker

Почему это великолепно:

• Предлагает множество различных форматов для выбора даты и времени.
• Для работы требуется всего одна строка JS-кода.
• Тематический CSS-файл с документацией.
• Предлагает выбор времени на боковой панели одновременно с выбором даты.
• Демо Скачать

13. Timepicker

Почему это великолепно:

• Больше внимания уделяется времени с такими функциями, как продолжительность.
• Различные стили форматирования времени на выбор.
• Работает с любым элементом HTML, полем ввода и т. Д.\
• Научитесь проектировать и настраивать выбор любого диапазона даты и времени.
• Демо Скачать

14. jQuery UI Datepicker

Почему это великолепно:

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

15. Rome

Почему это великолепно:

• Нет немедленной зависимости от jQuery.
• Поддерживает все основные браузеры, даже начиная с IE7.
• Предлагает выбор даты и времени в одном окне.
• Настраиваемый пользовательский интерфейс для викторин, приложений и программного обеспечения.
• Демо Скачать

16. jCal

Почему это великолепно:

• Настраиваемый интерфейс для выбора даты на несколько месяцев.
• Позволяет выбирать несколько дат в течение недель или месяцев.
• Установите ограниченное количество дней для одного выбора (например, только 7-дневные периоды).
• Отображает два месяца подряд за раз.
• Демо Скачать

17. Zebra Datepicker

Почему это великолепно:

• Позволяет диапазоны дат, связанные с несколькими полями ввода.
• Две темы по умолчанию с доступными функциями настройки.
• Поддерживает все основные браузеры, включая устаревшие версии, такие как IE6 +.
• Вы можете переходить от одного месяца к другому и поддерживает все форматы даты.
• Демо Скачать

18. Hello Week

Почему это великолепно:

• Плагин JavaScript с нулевой зависимостью.
• Выберите дату и время из модального всплывающего окна
• Макет календаря визуально впишется в большинство современных сайтов.
• Минимальный, чистый встроенный указатель даты.
• Настройки плагина по умолчанию и функции обратного вызова для настройки календаря.
• Демо Скачать

19. Filthypillow

Почему это великолепно:

• Варианты вытягивания текущего времени.
• Сочетания клавиш встроены в код плагина.
• Легко сохранять и передавать даты в бэкэнд-функции.
• Демо Скачать

20. PickMeUp

Почему это великолепно:

• Выберите несколько дат как диапазон или как отдельные объекты.
• Интерфейс с несколькими месяцами для отображения более одного месяца за раз.
• Множество вариантов конфигурации интерфейса и взаимодействия с пользователем.
• Темный фон
• Демо Скачать

21. DatePicker

Почему это великолепно:

• Отметьте праздники или особые дни / выходные с помощью CSS.
• Международная локализация для разных языков.
• Выбор в плоском режиме для отдельных частей даты (выберите год, затем месяц, затем день).
• Demo Download

22. Simple DateTimePicker

Почему это великолепно:

• Настраиваемые языки и параметры форматирования даты / времени.
• Дата и время расположены в одном месте.
• Средство выбора даты / времени может отображаться в строке или прикрепляться к полю ввода.
• Содержит практически все возможности, которые могут помочь или развлечь пользователя.
• Демо Скачать

23.jQuery Mobile Date Nav

Почему это великолепно:

• Выполняет более простую мобильную тему по сравнению с jQM DateBox.
• Содержимое по умолчанию создается с использованием атрибутов данных HTML5.
• Навигация по стрелкам проще, но меньше контроля.
• Демо Скачать

24. Lightpick

Почему это великолепно:

• Удобный для пользователя выбор диапазона дат является гибким, настраиваемым и многоязычным.
• Позволяет установить минимальный и максимальный диапазон дат.
• Также работает как средство выбора даты.
• Полезные обработчики событий и методы API.
• Демо Скачать

25. ClockPicker

Почему это великолепно:

• Интерфейс круговых аналоговых часов — это уникальный метод выбора времени.
• Поддерживает как веб-устройства, так и мобильные устройства. Фантастическая поддержка сенсорного экрана.
• Библиотека предназначена для работы через Bootstrap с использованием стилей по умолчанию.
• Демо Скачать

26. jQuery UI DateRangePicker

Почему это великолепно:

• Подробный API с полным списком опций и методов.
• Работает поверх пользовательского интерфейса jQuery с теми же преимуществами настройки темы.
• Диапазон можно расширить для демонстрации нескольких месяцев в одном окне.
• Предлагает предустановленные диапазоны дат на основе текущего дня (например, последние 7 дней, месяц до текущей даты, следующие 30 дней).
• Демо Скачать

27. Ion Calendar

Почему это великолепно:

• Все устройства с сенсорным экраном полностью поддерживаются.
• Работает как обычный календарь, так и как средство выбора даты.
• Поддерживает все международные языки и форматы даты.
• Обратный вызов события щелчка позволяет вам написать собственный метод для обработки взаимодействий.
• Демо Скачать

Учебники по созданию собственного календаря / Datepicker

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

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

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

1. Календарь CSS3 / jQuery UI

Почему это великолепно:

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

Посмотреть руководство

2. Calendario

Почему это великолепно:

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

Мэри Лу — автор и разработчик этого руководства по плагину jQuery под названием Calendario. Это полностью отзывчивый гибкий плагин для создания интерфейса календаря в любом стиле. Учебник очень прост в использовании, а код плагина на 100% можно загрузить бесплатно. Всем, кто в первую очередь интересуется фронтенд-разработкой с помощью jQuery, действительно следует изучить это руководство.

Посмотреть руководство

3. Календарь jQuery / AJAX

Почему это великолепно:

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

Этот учебник, написанный Джошем Локхартом, делает все правильно. Вы познакомитесь с jQuery AJAX API для подключения к серверной части PHP. Он также охватывает запуск базы данных MySQL, используемой для хранения информации о дате и времени.Я признаю, что это определенно руководство для более продвинутых разработчиков, но если вам интересно узнать о PHP, это может быть прекрасным вводным материалом.

Посмотреть руководство

4. jQuery UI Datepicker

Почему это великолепно:

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

Посмотреть руководство

5. jQuery UI Datepicker в WordPress

Почему это великолепно:

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

Но благодаря этому руководству по Datepicker у вас не должно возникнуть проблем с включением компонента пользовательского интерфейса jQuery в любую тему WordPress.В нем очень подробно рассказывается о правильном способе включения файла пользовательского интерфейса jQuery с помощью функции wp_enqueue_script WordPress. Любые разработчики WP, которым нужно включить фронтенд datepicker, уберут достоверную информацию из этого поста.

Посмотреть руководство

6. HTML5 Datepicker с резервным копированием

Почему это великолепно:

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

В этом руководстве, написанном TJ VanToll, объясняется, как создать поле ввода HTML5 type = «date» с использованием jQuery в качестве запасного варианта. Он предлагает лучшее из обоих миров, включая новый ввод HTML5 с более надежной альтернативой пользовательского интерфейса jQuery. За каждым шагом легко следить, и в статье есть множество живых демонстраций.

Посмотреть руководство

7.WP Post Editor Datepicker

Почему это великолепно:

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

Посмотреть руководство

Заключительные идеи

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

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

Чтобы узнать больше о подключаемых модулях jQuery, ознакомьтесь с этими статьями:

Как исправить проблемы с обновлением WordPress 5.5? (2 простых решения)

На прошлой неделе Automattic выпустила WordPress 5.5, последняя версия знаменитой CMS. Если у вас возникли проблемы после обновления до этой новой версии, у нас есть для вас несколько решений. В этой статье мы покажем вам, как исправить проблемы с обновлением WordPress 5.5 двумя простыми способами !

Почему возникают проблемы с обновлением WordPress 5.5?

Обновление WordPress 5.5 внесло много изменений в ядро. Наиболее важным из них является удаление jQuery Migrate 1.x . Несмотря на то, что WordPress предложил своему сообществу подготовиться к этому большому обновлению jQuery, эта новая версия застала многих разработчиков не настолько подготовленными, как они должны были быть.В результате, обновление сломало множество веб-сайтов и оставило у многих пользователей проблемы на своих сайтах.

Какие проблемы с WordPress 5.5?

В последней версии WordPress есть несколько серьезных проблем:

1)

Классический редактор

Когда Automattic выпустила версию 5.0, она поставлялась с совершенно новым редактором под названием Gutenberg. Однако они также выпустили плагин Classic Editor, чтобы удалить Гутенберга с сайта и вернуть старый редактор WordPress.Если вы проверите этот плагин в репозитории WordPress, вы увидите, что у него более 5 миллионов активных установок, что делает его одним из самых популярных плагинов. Проблема в том, что после недавнего обновления WordPress 5.5 классический редактор перестал нормально работать . Пользователи сообщили, что текстовый редактор работал, а визуальный редактор — нет. Визуальный редактор — это удобный для новичков метод создания контента. Так что, если вы разработчик, это может не быть большой проблемой.Однако создание сообщений и страниц с помощью текстового редактора может быть сложной задачей для новичков, поскольку для этого требуются некоторые базовые знания HTML.

3) Проблемы с плагинами и темами

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

3) Избранные изображения

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

4) Проблемы с разбивкой на страницы

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

5) Проблемы с картами сайта

WordPress 5.5 также имеет ошибку карты сайта, которая затрагивает некоторые сайты, у которых есть нативных карт сайта WordPress .Ошибка создает несуществующие страницы карты сайта и в основном затрагивает веб-сайты, которым требуется более одной карты сайта XML. Однако хорошей новостью является то, что WordPress знает об этом и 1 сентября выпустит новую версию 5.5.1, в которой исправлена ​​ошибка. 6) Добавить медиа и Установить избранное изображение кнопки не работают

После обновления до WordPress 5. 5 у многих пользователей возникают проблемы с кнопками «Добавить медиа» и «Установить избранные изображения». Эти проблемы связаны с библиотекой jQuery и конфликтами, которые она создает с плагинами / темами.Итак, если вы столкнулись с этими или другими проблемами, вы обратились по адресу. В этом руководстве мы покажем вам 2 простых способа исправить проблемы с обновлением WordPress 5.5.

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

Есть два основных способа исправить проблемы с обновлением WordPress 5.5:

1. Включить подключаемый модуль jQuery Migrate Helper
2. Переход на более старую версию WordPress

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

ПРИМЕЧАНИЕ. Перед любыми крупными обновлениями, подобными этому, мы рекомендуем создать полную резервную копию вашего сайта.Подобные проблемы совместимости довольно распространены, поэтому, если у вас возникнут какие-либо проблемы после обновления, вы можете восстановить предыдущую версию. Таким образом вы лучше подготовитесь и сможете запустить свой сайт до тех пор, пока плагины и темы не исправят все ошибки и проблемы совместимости .

1) Используйте jQuery Migrate Helper

Первым решением проблемы обновления WordPress 5.5 является использование jQuery Migrate Helper . Обновление WordPress удаляет jQuery Migrate 1.x, поэтому этот плагин поможет вам это исправить.Этот инструмент действует как своего рода мост, позволяющий старому коду работать в новой версии WordPress.

В WordPress 5.5 инструмент миграции под названием jquery-migrate не включен по умолчанию. Таким образом, если ваша тема или плагины не были обновлены, они покажут ошибки и проблемы совместимости с последней версией WordPress. jQuery Migrate Helper — это бесплатный инструмент, который предоставит вам отличное решение, пока разработчики не исправят проблемы с плагинами и темами. Этот плагин включает скрипт jquery-migrate и может подключаться к скрипту миграции, устраняя проблемы с плагинами и темами.

Чтобы установить jQuery Migrate Helper, на панели управления WordPress перейдите в Плагины> Добавить новый . Затем найдите Enable jQuery Migrate Helper и активируйте его.

Этот плагин не требует дополнительной настройки, поэтому после его активации он активирует скрипт jquery-migrate , а исправит проблемы с обновлением WordPress 5.5 . Важно отметить, что включение jQuery Migrate Helper на самом деле не устраняет проблемы на вашем сайте. Однако это поможет вам вернуть его и запустить до тех пор, пока плагины или темы не станут несовместимы с WordPress 5.5 получить обновление.

2) Перейти на более старую версию WordPress

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

• Вручную
• Использование плагина
• Восстановление предыдущей резервной копии

Понижение версии WordPress вручную довольно сложно и требует много времени.Вам необходимо загрузить ZIP-файл стабильной версии WordPress в локальное хранилище, загрузить его через файловый менеджер или FTP-клиент, внести изменения в файлы wp-config.php, и другие файлы ядра и т. Д.

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

Понижение версии WordPress с помощью перехода на более раннюю версию WP

Первое, что вам нужно сделать, это установить и активировать WP Downgrade на своем сайте. После этого на странице настроек WordPress вы увидите меню конфигурации плагина. Когда вы нажмете на нее, вы увидите только один вариант конфигурации, в котором вы можете выбрать, какую версию WordPress вы хотите использовать. Прежде чем продолжить, мы рекомендуем вам создать полную резервную копию вашего сайта, если вы еще этого не сделали. Плагин автоматически определит текущую версию WordPress и язык, который вы используете.Кроме того, вы можете ввести целевую версию WordPress, которую планируете использовать. Имейте в виду, что вам нужно указать точный номер версии WordPress. Если вы не уверены в номерах версий, загляните в раздел выпусков WordPress. Поскольку мы используем WordPress 5.5 и после обновления возникнут проблемы, мы собираемся понизить нашу CMS до стабильной версии 5.4. Итак, в поле Target Version введите 5.4, а затем сохраните изменения.

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

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

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

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

Самый простой способ устранить проблемы с обновлением WordPress 5.5 — использовать Chrome Dev Console .

1. Чтобы получить доступ к консоли, просто нажмите F12 или щелкните вертикальное меню с тремя точками в правом верхнем углу и перейдите в Дополнительные инструменты> Инструменты разработчика>
2. Затем перейдите на вкладку Консоль вкладка
3. Оказавшись там, вы можете увидеть ошибки, выделенные красным, обычно это Uncaught ReferenceError
4. Найдите те, у которых есть .js в их имени и щелкните по ним, чтобы увидеть более подробную информацию о них.
5. Здесь вы можете щелкнуть красный значок X рядом с ошибкой, чтобы точно узнать, в чем проблема.

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

Бонус

— проверьте свою версию PHP

Если вы используете устаревшую версию PHP, у вас, вероятно, возникнут проблемы с WordPress 5.5 обновление. Это связано с тем, что версии PHP, такие как 5.4, больше не оптимизированы. Вот почему мы рекомендуем вам использовать на своем сервере последнюю версию PHP.

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

Что делать, если у ваших плагинов / тем есть проблемы с WordPress 5.5?

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

Проблемы с ленивой загрузкой?

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

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

Заключение

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

1. Использовать плагин Enable jQuery Migrate Helper
2. Понизьте WordPress до более старой версии

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

Возникли ли у вас проблемы после обновления WordPress 5.5? Дайте нам знать в разделе комментариев ниже!

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

Как исправить медленные сайты WordPress (после большого обновления GTmetrix)

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

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

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

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

Как долго этот пост с тоннами изображений / комментариев, он все еще загружается в .8s

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 — отчет основных веб-показателей показывает только основные показатели (например, LCP) для всего вашего сайта WordPress, но не дает конкретных рекомендаций.
• GTmetrix — используйте диаграмму водопада для определения конкретных CSS, JS, шрифтов, изображений и сторонних доменов, которые необходимо оптимизировать.В остальном аналогичные рекомендации от PSI.
• KeyCDN Performance Test — отлично подходит для измерения TTFB и времени поиска DNS в 10 глобальных местах тестирования. Твердый индикатор, медленный ли ваш хостинг WordPress или DNS.
• Query Monitor — выявляйте медленные плагины, запросы и другие вещи, замедляющие работу вашего сайта.

2. Хостинг

Большинство людей в группе WordPress Hosting Facebook придерживаются Cloudways.

В частности, их план DigitalOcean или Vultr High Frequency.Да, это немного дороже — 10–13 долларов в месяц, но мы говорим о скорости, а не о дешевизне. Это фактор №1 в руководстве по оптимизации WordPress. Потратьте 2 минуты на просмотр этой ветки Facebook (и этой).

Backlinko сообщил, что у SiteGround были одни из худших TTFB. Бренды GoDaddy и EIG (Bluehost + HostGator) — дешевый виртуальный хостинг и, очевидно, тоже не лучший вариант.

Недавние опросы Facebook показывают значительный сдвиг в людях, переходящих от низкокачественных хостов к Cloudways, серверам LiteSpeed, Kinsta, GridPane и A2 Hosting (щелкните изображение, чтобы увеличить):

Я лично использую Cloudways DigitalOcean:

TL; DR; запросите бесплатную миграцию с Cloudways, используя план DigitalOcean или Vultr High Frequency, и наслаждайтесь более быстрыми отчетами TTFB и GTmetrix + PageSpeed ​​Insights.

Это простой тест Pingdom для измерения времени загрузки TTFB + 16 хостов WordPress. Я установил один и тот же стартовый сайт Astra на 16 учетных записей хостинга (с использованием отдельных доменов), измеряя время загрузки Pingdom в течение 1 недели с 30-минутными интервалами проверки, а также TTFB в различных инструментах. Некоторые домены все еще работают (cwdoserver.com размещен на плане Cloudways DO за 10 долларов в месяц, а stgrndserver.com находится на SiteGround GrowBig). Я аннулировал большинство счетов, так как это стало дорого. Вы заметите разницу даже при просмотре этих двух сайтов или проведении собственных тестов.

Не рекомендуется

• SiteGround — Backlinko сообщил, что у SiteGround были одни из худших TTFB, что также отражено в моем тесте скорости и жалобах в группах Facebook (среди других проблем). Раньше было здорово до 2020 года, но быстрый поиск в группах Facebook, и вы найдете много жалоб на медленные TTFB, ограничения ЦП, рост цен и т. Д. Христо является администратором группы WP Speed ​​Up Facebook и может удалять сообщения или банить людей. от группы, если они скажут что-то негативное.
• Bluehost — медленные серверы, принадлежащие EIG, плохо оценены, в основном продвигаются аффилированными лицами.
• HostGator — также принадлежит EIG с медленными серверами, плохо оцененными и ограничениями ЦП.
• GoDaddy — проблемы с вредоносным ПО, постоянные дополнительные продажи и низкая оценка из-за ограничений ЦП.
• Hostinger — пишут фейковые отзывы и голосуют за себя в опросах Facebook.
• NameHero — неплохо для бюджетного хостинга, но не превзойдет большинство облачных хостов.
• WP Engine — раньше было нормально, но серверы стали медленными, а не быстрыми.

Рекомендуется

• Cloudways — очень популярный выбор в группе хостинга WordPress в Facebook (прочтите эту или эту тему), и кого я использую после перехода с SiteGround. Выберите из их плана DigitalOcean или Vultr High Frequency (самый популярный) или Google Cloud, AWS или Linode. Ежемесячная плата, отсутствие высоких продлений, бесплатная трехдневная пробная версия и бесплатная миграция.Занял первое место в большинстве опросов Facebook. Этот промо-код дает вам скидку 25% на первые 2 месяца и дает мне скидку, которую я ценю: OMM25
• GridPane — аналогично Cloudways, где вы выбираете облачного провайдера, и они предоставляют панель мониторинга, поддержку и надстройки. Их не рекомендуют так часто, потому что у них нет партнерской программы, но это хороший выбор. Патрик Галлахер (владелец) участвует в группах FB и знает, что делает.
• LiteSpeed ​​ — сервер LiteSpeed ​​с плагином LiteSpeed ​​Cache и QUIC.Cloud CDN — отличная комбинация. Вы можете получить свой сервер LiteSpeed ​​от NameHero или A2.
• Kinsta — использует Google Cloud C2, но немного медленнее, чем два упомянутых выше хоста. Возможно, лучшая поддержка — это отрасль с удобной панелью управления.
• A2 Hosting — используйте их только в том случае, если у вас ограниченный бюджет и вы не можете позволить себе Cloudways или GridPane. Хорошо показывает себя в тестах скорости и использует LiteSpeed.
• WPX — взорвали после того, как Мэтью Вудворд начал рекомендовать их, но единственная причина, по которой они были №1 в его тестах скорости, заключается в том, что он использовал их кеширование + CDN.В противном случае они не смогли бы превзойти других. По-прежнему быстро при хорошей поддержке.
• Closte — популярный выбор в группе WP Speed ​​Matters Facebook, но очень ограниченная поддержка и, вероятно, не превзойдет других поставщиков облачного хостинга.

Небольшой совет:

• Тест для медленного хостинга — TTFB и время отклика сервера можно измерить в тестах производительности PSI, GTmetrix и KeyCDN. Google рекомендует TTFB <200 мс.
• Выберите ближайший центр обработки данных — время поиска TTFB и DNS сокращается, если вы выбираете центр обработки данных, расположенный близко к вашим посетителям.Это особенно важно, если ваши посетители — местные.
• Кэширование на уровне сервера — большинство облачных хостов предлагают кэширование на уровне сервера (Redis, memcached, Varnish), в то время как большинство общих хостов этого не делают. Вот почему плагины кеширования, такие как LiteSpeed ​​и SG Optimizer, предлагают более быстрое кеширование, чем кеширование на основе файлов, которое выполняется большинством плагинов кеширования.
• Конфигурации сервера — используйте последнюю версию PHP, MariaDB и MySQL в своей учетной записи хостинга. Используйте ограничение памяти 256 МБ. У WP Johnny есть рекомендации по настройке сервера, такие как max_execution_time (30-60 с), max_input_time (60 с) и max_input_vars (1000).

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

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

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

• Divi, Elementor и Brizy — медленные компоновщики страниц.
• Oxygen, GeneratePress и Kadence — надежные и легкие альтернативы.

Другими альтернативами являются темы

• Gutenberg, Genesis и Elementor Hello.
• WP Johnny предлагает услуги по удалению компоновщика страниц (он уже удалил мою).
• При использовании стартовых сайтов Astra используйте шаблон, встроенный в Gutenberg (а не в 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 и плагины, которые запускают текущее сканирование или тяжелые фоновые процессы.

1. Добавить
2. Отслеживание мошенничества с кликами в AdSense
3. Универсальный календарь событий
4. Резервный приятель
5. Строитель бобров
6. Улучшенные карты сайта Google XML для WordPress
7. Проверка неработающих ссылок
8. Постоянный контакт для WordPress
9. Контактная форма 7
10. Сообщения по теме
11. Digi Auto Links
12. Система комментариев Disqus
13. Divi Builder
14. Элементор
15. Посмотреть полный список из 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:

Настройки WP Rocket:

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

• Кэш кода операции — обычно выполняется хостом.
• Полная страница — обычно выполняется плагином кеширования.
• Кеш браузера — обычно выполняется плагином кеширования.
• HTTP-ускорители — активируйте на своем хосте (например, Varnish / FastCGI).
• Object cache — аналогично 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 показывает, сколько времени требуется для загрузки шрифтов, количество их запросов и обслуживаются ли они локально или из внешнего источника. Вот несколько способов их оптимизации.

• Проверьте 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 Fonts, Analytics, Maps, AdSense, Tag Manager, встроенные видео, Gravatars, социальные лайки, Facebook Pixel и даже похожие кнопки из вашего плагина для обмена в социальных сетях.Некоторые из них можно оптимизировать, чтобы они не влияли на 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 — отложите Gravatar и используйте локальное изображение 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-адреса или просмотрите эти общие домены для предварительной выборки. Наконец, предварительно загрузите их с помощью одного из трех упомянутых плагинов.
• Preload — часто используется для ссылок и шрифтов. Предварительная загрузка ссылок загружает страницу, когда пользователь наводит курсор на ссылку, поэтому к тому моменту, когда они нажимают на нее, страница загружается почти мгновенно (это можно сделать в 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 (оба могут быть включены в WP Rocket + большинство плагинов кеширования). Сторонние ресурсы, такие как Google Fonts, нельзя оптимизировать для этого элемента, поэтому разместите их локально.
• Включить сжатие текста — включить 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, чтобы выгружать ресурсы на определенных страницах и публикациях.
• Обслуживайте статические ресурсы с помощью эффективной политики кеширования. — f с помощью Cloudflare, установите срок действия кеша браузера на 1 год. Настройки хостинга также могут переопределить ваш плагин кеширования. Также проверьте, включен ли Mod_expires в вашей учетной записи хостинга.
• Уменьшите время ответа сервера — избегайте виртуального хостинга, брендов 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 Font предварительно подключите URL-адрес CDN и //fonts.gstatic.com с помощью Perfmatters, Pre * Party или добавьте код вручную. Это позволит установить раннее подключение к сторонним службам.
• Предварительная загрузка ключевых запросов — загрузка важных ресурсов раньше. Обычно делается с важными файлами CSS, JavaScript, WOFF2 и изображениями. Можно сделать в WP Rocket, Perfmatters и других плагинах скорости. Включите предварительную загрузку ссылок и найдите важные файлы, загруженные на ваш сайт. Предварительно загрузите файлы во время тестирования влияния на время загрузки.
• Правильный размер изображений — избегайте больших изображений и уменьшайте размер до меньшего размера. Попробуйте создать шпаргалку с размерами логотипа, изображений в блогах, изображений боковой панели и т. Д.
• Удалите повторяющиеся модули в пакетах JavaScript — часто вызвано импортом кода, который может привести к дублированию модулей (пакетов JS) из нескольких источников.
• Показывать изображения в форматах следующего поколения — конвертируйте изображения в формат WebP с помощью плагина и включите кеширование WebP в настройках мультимедиа WP Rocket, если вы его используете.
• Используйте видеоформаты для анимированного контента — конвертируйте любые анимированные GIF в видео.
• Пользовательские временные метки и меры — получите дополнительные показатели в PSI и Chrome DevTools, добавив User Timing API.Это не тест «прошел / не прошел»; он просто предоставляет дополнительные данные о скорости, используемые для точного определения , на которое затрачивается времени.
• Использует пассивные слушатели для повышения производительности прокрутки. — некоторые темы / плагины используют «addEventListener» (сделайте его пассивным).