Окт
31
5

Оптимизация и ускорение Elementor – как убрать лишние стили и шрифты

Оптимизация ElementorНедавно после окончания работы по сайту, клиент пожаловался, что сервис анализа скорости загрузки Pagespeed Insights показывает низкие результаты. В данном проекте я использовал профессиональный премиум шаблон из безлимитной подписки One Templatemonster, где контент редактируется через мощный конструктор Elementor. С одной стороны он позволяет юзерам легко и как угодно изменять веб-страницы, но при этом является немного тяжеловатым.

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

Редактор Elementor

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

1. Убираем лишние плагины и дополнения

Если вы устанавливаете какую-то премиум тему, то как правило, Elementor в ней идет не один. Для него еще существуют дополнительные модули, например: блоки JetBlocks, JetElements, табы JetTabs, JetTricks и др.

На самом деле это прикольно. Например тот же JetElements For Elementor добавляет на страницу такие объекты как: аудиоплеер, функция сравнение фото до и после, портфолио, прайс-лист, таймлайн, шкалу прогресса, диаграммы и т.п.

Редактор Elementor

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

2. Удаление лишних иконок

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

Шрифты Font Awesome в конструкторе

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

add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

В коде убирается загрузка сразу трех наборов иконок – solid, regular, brands. Я у себя, например, отключил загрузку только 2х из них, а solid оставил (удаляйте из кода тот набор, что нужно сохранить).

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

Elementor иконки

Для удаления добавляем в файл функций сниппет:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
  // Don't remove it in the backend
  if ( is_admin() || current_user_can( 'manage_options' ) ) {
        return;
  }
  wp_deregister_style( 'elementor-icons' ); 
}

Здесь в коде есть условие, при котором, Eicons-иконки будут удалены только из фронтенда, но останутся в WP-админке.

Кстати, для тех объектов, в которых ранее использовался этот набор, надо будет подключить Font Awesome значки. Например:

.eicon-close:before {
    font-family: "Font Awesome 5 Free";
    content: '\f057';
    font-style: normal;    
}
 
.eicon-frame-expand:before {
    font-family: "Font Awesome 5 Free";
    font-style: normal;  
    content: '\f065';    
}
 
.eicon-zoom-in-bold:before {
    font-family: "Font Awesome 5 Free"; 
    content: '\f00e';
    font-style: normal;     
}
 
.eicon-share-arrow:before {
    font-family: "Font Awesome 5 Free"; 
    content: '\f064';
    font-style: normal;   
}

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

3. Лишние шрифты

Конструктор Elementor повторно добавляет на сайт Google Fonts. Если вы подключаете шрифты в WordPress вручную или ваш шаблон делает это, то нужно избавиться от дублирующего кода. Тут все достаточно просто:

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

Кстати, в одном из руководств встретил пожелание для тех, кто сам внедряет Гугло шрифты и не размещает их локально на хостинге, — разработчики советуют добавлять параметр &display=swap в конце запроса:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,&display=swap" rel="stylesheet">

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

4. Убираем ненужные стили

Также есть смысл отключить CSS стили, используемые в редакторе Gutenberg, если вы не планируете с ним работать. Для этой цели подойдет следующий сниппет:

function smartwp_remove_wp_block_library_css(){
 wp_dequeue_style( 'wp-block-library' );
 wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );

Конечно, в самом шаблоне могут быть и другие “лишние” CSS-файлы, но это уже надо смотреть макет индивидуально.

Если знаете еще какие-то интересные нюансы по ускорению и оптимизации Elementor, пишите ниже – постараюсь их также рассмотреть и добавить в статью.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 25, средний балл: 3,48 из 7)
Загрузка...

категория Категории: Оптимизация;
теги Теги: , , , , , .

комментариев 5 к статье “Оптимизация и ускорение Elementor – как убрать лишние стили и шрифты”

  • Владимир   02.11.2020

    А стоила овчинка выделки? Сильно получилось ускорить сайт с элементором лишь удалением иконок и шрифтов?

  • Сергей   02.11.2020

    Использовал бы OxygenBuilder — и не было бы у тебя таких заморочек.

  • Tod   02.11.2020

    Владимир, немного баллов в Pagespeed Insights добавилось, поскольку для сайта стало грузиться на 3-4 внешних файла меньше. Но лучше всего помогло выключить Вебвизор2 в метрике — там сразу рост 10-20баллов.
    Сергей, ну, Елементор более распространен и универсалейн + в премиальном шаблоне изначально был он установлен.

  • Роман   06.03.2021

    А как отключить стили кнопок? подскажите пожалуйста… При загрузке страницы кнопки на секунду загружаются дефолтные, а потом мои стили кнопок…

  • Tod   07.03.2021

    Роман, хороший вопрос, но ответ к сожалению не знаю. Ваши стили это в CSS? или непосредственно в Елементоре? Если ваши прописаны в CSS то я бы их «реализовал» с помощью Елементора. Если дефолтные — это какие-то другие, то я бы поискал откуда конкретно они грузятся и почему.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости