TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как ускорить работу сайта Elementor для PageSpeed Insights(3 полезных совета)

2 766

В этом руководстве приведены 3 подсказки, которые могут ускорить работу сайта на Elementor. Это расширенное руководство из моего полного руководства по оптимизации скорости сайта.

Так что если вы,

В этом руководстве будут подробно описаны все методы.

Давайте начнем.

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

Как ускорить работу сайта Elementor путем удаления ненужных HTTP-запросов | 3 полезных совета (обновлено для> Elementor 2.6) 4″ data-pagespeed-url-hash=”2166791592″ onload=”pagespeed.CriticalImages.checkImageForCriticality(this);”></a></p> <h2><span id=

1. Не загружайте Google Fonts от Elementor

Elementor снова запросит файл Google Fonts, если вы используете его в дизайне, даже если вы размещали его локально.

Это пример шрифтов Google, загружаемых локально и из внешнего запроса (Elementor)

Как ускорить работу сайта Elementor путем удаления ненужных HTTP-запросов | 3 полезных совета (обновлено для> Elementor 2.6) 5″ data-pagespeed-url-hash=”1616967468″ onload=”pagespeed.CriticalImages.checkImageForCriticality(this);”></a></p> <p>Вы должны явно отключить его, чтобы он мог использовать шрифты Google из локального хранилища. Перед выполнением этого шага убедитесь, что вы разместили все шрифты, используемые на вашем сервере локально.</p> <p>Вы можете вызвать следующий код в своем скрипте, чтобы отключить </p> <p>Google Fonts от Elementor.</p> <pre><code>add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );</code></pre> <h2><span id=

Для отключения воспользуйтесь:

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );


2. Не загружайте Font Awesome от Elementor

По умолчанию Elementor будет вызывать эти 2 запроса, если вы используете иконки Font Awesome. (Даже если у вас уже есть другие плагины / темы, вызывающие те же запросы Font Awesome.)

Как ускорить работу сайта Elementor путем удаления ненужных HTTP-запросов | 3 полезных совета (обновлено для> Elementor 2.6) 6″ data-pagespeed-url-hash=”734237799″ onload=”pagespeed.CriticalImages.checkImageForCriticality(this);”></a></p> <p>Чтобы реализовать этот совет, вы должны сделать запрос только один раз для шрифтов </p> <p>Font Awesome.</p> <p>Вы можете либо загрузить нужные шрифты локально, либо проще и эффективнее использовать <a href=собственный Font Awesome (Critical Font) из “быстрый плагин кеша производительности”.

Он не загружает весь пакет Font Awesome и загружает только те, которые используются на вашем сайте, следовательно, меньшего размера. + Он хранится локально на вашем сервере.

(ВАЖНОЕ ПРИМЕЧАНИЕ: Критический шрифт содержит только Font Awesome 4 (FA4). Начиная с версии Elementor 2.6, он теперь содержит Font Awesome 5 (FA5), но по-прежнему поддерживает FA4. Если вы используете FA5 в своем дизайне, вы можете использовать критический шрифт.)

Согласно руководству Elementor, вам нужно вызвать две строки ниже в вашем файле functions.php или плагине, чтобы заблокировать запросы от Elementor.

До Elementor 2.6 две строки ниже будут работать

add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'font-awesome' ); }, 50 ); add_action( 'elementor/frontend/after_enqueue_styles', function() { wp_dequeue_style( 'font-awesome' ); } );

Однако, если вы хотите, чтобы он работал и для > Elementor 2.6, вам нужно поставить в очередь Font Awesome с вашей локальной таблицей стилей Font Awesome с более высоким приоритетом, а не удалять запросы к

Font Awesome Elementor’a из очереди.

Получите каталог файлов вашей локальной таблицы стилей Font Awesome. Код показывает расположение критического шрифта по Swift Performance ( “быстрый плагин кеша производительности”).

add_action( 'wp_enqueue_scripts', 'replace_font_awesome', 3 ); add_action( 'elementor/frontend/after_enqueue_styles', function () { wp_dequeue_style( 'font-awesome' ); } ); function replace_font_awesome() { wp_enqueue_style( 'font-awesome', 'https://yourdomain.com/wp-content/fonts/swift-performance/fontawesome/webfont.css' ); }

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

Как ускорить работу сайта Elementor путем удаления ненужных HTTP-запросов | 3 полезных совета (обновлено для> Elementor 2.6) 7″ data-pagespeed-url-hash=”1736529686″ onload=”pagespeed.CriticalImages.checkImageForCriticality(this);”></a></p> <h2><span id=

3. Замените иконки Elementor (Eicons) шрифтами Awesome Icons

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

Вы можете проверить, происходит ли запрос к шрифтам Eicons, проверив, что в вашем водопаде (GTMetrix) отображаются следующие запросы.

Как ускорить работу сайта Elementor путем удаления ненужных HTTP-запросов | 3 полезных совета (обновлено для> Elementor 2.6) 8″ data-pagespeed-url-hash=”1583739773″ onload=”pagespeed.CriticalImages.checkImageForCriticality(this);”></a></p> <p>Поскольку мы используем пакет значков Font Awesome, вы можете заменить значки, используемые Eicons, на Font Awesome, если они похожи.</p> <p>Основная причина, по которой я хочу отключить Eicons, заключается в том, что Eicons производит лишние задержки в загрузке страницы.</p> <p><a href=Как ускорить работу сайта Elementor путем удаления ненужных HTTP-запросов | 3 полезных совета (обновлено для> Elementor 2.6) 9″ data-pagespeed-url-hash=”2281562656″ onload=”pagespeed.CriticalImages.checkImageForCriticality(this);”></a></p> <p>Одним из наиболее часто используемых Eicons является значок гамбургера, который вам, вероятно, понадобится, если вы используете Elementor Pro для создания заголовка вашего сайта.</p> <p>Ниже приведены шаги, как я блокирую Eicons и заменяю его значок гамбургера на значок гамбургера Font Awesome. Есть некоторые различия по сравнению с <a href=официальным руководством Elementor, чтобы оно работало и для > Elementor 2.6.

Поместите эти коды в свой фрагмент, чтобы заблокировать Eicons.

add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' ); function js_dequeue_eicons() { // Don't remove it in the backend if ( is_admin() || current_user_can( 'manage_options' ) ) { return; } wp_dequeue_style( 'elementor-icons' ); }

Поместите коды ниже, чтобы заменить Eicons на Font Awesome.

Пожалуйста, проверьте, какой класс / id используется иконкой ранее, открыв инструмент dev, чтобы проверить его.

(Начиная с Elementor 2.6, имя класса значка гамбургера изменилось, вы должны использовать «eicon-menu-bar». До Elementor 2.6 это был «eicon»)

.eicon, .eicon-menu-bar { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Затем назначьте новое значение содержимого значков на основе значков значков Font Awesome.

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

(Вы должны дополнительно объявить «font-family: FontAwesome», чтобы он работал и для > Elementor 2.6)

.elementor-menu-toggle i:before { content: "f0c9"; font-family: FontAwesome; }
.elementor-menu-toggle.elementor-active i:before { content: "f00d"; font-family: FontAwesome; }

В заключение

Эти 3 совета, на самом деле ускорят сайт на Elementor, для меня примерно на 1 секунду.

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

Источник записи: https://techblog.sdstudio.top/kak-uskorit-rabotu-sajta-elementor-dlja-pagespeed-insights-3-poleznyh-soveta/

Источник записи: https://wpbuildermaster.com

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