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

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

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

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

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

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

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

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

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

Если вы добавляете на страницу объект с иконками, то можете выбрать изображения из шрифта 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. Но тут все немного сложнее, т.к. конструктор выводит их для разных специализированных функций на странице: закрытие всплывающего окна, шеринг или увеличение картинки и т.п. На следующем скриншоте хорошо видно эти элементы сверху справа:

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

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, пишите ниже – постараюсь их также рассмотреть и добавить в статью.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 36, средний балл: 3,58 из 7)

Загрузка...

Категории: Оптимизация;
Теги: конструктор Elementor, оптимизация блога, оптимизация кода, полезное для блога, улучшаем блог, ускорение блога.