Оптимизация и ускорение 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() wp_deregister_style( 'elementor-icons' ); }
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' );
add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );
Кстати, в одном из руководств встретил пожелание для тех, кто сам внедряет Гугло шрифты и не размещает их локально на хостинге, — разработчики советуют добавлять параметр &display=swap в конце запроса:
Как я понял, это позволяет сделать текст на веб-странице видимым до того как подключатся внешние шрифты. Лично я с такой проблемой не сталкивался, но вдруг кому-то пригодится.
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' );
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!
Оцените статью:
(голосов — 23, средний балл: 3,43 из 7)
Категории: Оптимизация;
Теги: конструктор Elementor, оптимизация блога, оптимизация кода, полезное для блога, улучшаем блог, ускорение блога.
Похожие статьи:
- Плагин WP01 расскажет как ускорить и оптимизировать сайт на WordPress
- Оптимизируем WordPress header и удаляем лишний код
- Как отключить emoji в WordPress
- WP-Optimize — плагин для оптимизации базы данных в WordPress
- 12 советов для ускорения WordPress сайта
6 эффективных советов по оптимизации сайта Elementor в 2023 году
Вы не удовлетворены работой своего веб-сайта Elementor? Хотите знать, как ускорить ваш веб-сайт Elementor до увеличить трафик и конверсии? Если да, то вы пришли в нужное место. Потому что здесь вы получите лучшие тактики для оптимизации скорости сайта Elementor.
Google меняет свою стратегию день ото дня. Теперь скорость веб-сайта важна не только для лучшего взаимодействия с пользователем, но и для высокий рейтинг в поисковой выдаче. Поисковые системы начали обращать на это внимание.
Вот почему здесь, в этом блоге, собраны 6 проверенных тактик, которые ускорят скорость вашего сайта Elementor. Наряду с этим вы также узнаете, почему вам нужно оптимизировать веб-сайт Elementor и что делает ваш сайт медленным. Итак, без лишних слов давайте перейдем к 6 эффективным советам.
Зачем вам нужно оптимизировать сайт Elementor?
Оптимизация веб-сайта Elementor означает снижение скорости загрузки веб-сайта, что является ключевым фактором для лучшего взаимодействия с пользователем. Скорость загрузки сайта имеет значение не только для пользовательского опыта, но и для ранжирования в поисковых системах.
Доказано, что «более половины посетители сайта (около 53%) покиньте сайт, если он загружается более трех секунд».
Это показывает, что если ваш сайт загружается более трех секунд, то вы получаете только половину посетителей вашего сайта. Кроме того, клиенты или посетители не предпочитают посещать веб-сайты с высокой скоростью загрузки. Кроме, Google сделал это фактором ранжирования. Веб-сайты с более высокой скоростью загрузки получают более высокий приоритет при ранжировании в Google.
Более того, за счет более быстрой скорости загрузки может увеличиться и конверсия. Поскольку он предлагает лучший пользовательский опыт, который обеспечивает быстрое получение необходимых продуктов или услуг. Без более оптимизированного веб-сайта Elementor у вас будет гораздо меньше трафика и конверсии.
Это доказывает, что оптимизация скорости Elementor очень важна для вашего сайта, и ее нельзя игнорировать.
Что делает сайт Elementor медленным?
Скорость вашего сайта Elementor — это то, что вы не можете игнорировать. Несколько вещей могут замедлить работу вашего сайта. Например, не используя хорошо оптимизированный хостинг может снизить скорость вашего веб-сайта Elementor. Кроме того, ваш сайт может тормозить из-за загруженной базы данных.
Кроме того, плагины и темы, которые вы используете, могут увеличить время загрузки вашего сайта, если они не оптимизированы для скорости. Опять же, размеры файлов и изображений нельзя игнорировать, потому что они оказывают огромное влияние на скорость загрузки.
Начиная с услуги хостинга и заканчивая базой данных, все может замедлить работу вашего сайта, если он не оптимизирован должным образом. Итак, вам нужно убедиться, что все на вашем сайте хорошо оптимизировано.
Поскольку вы выяснили, что делает ваш сайт медленным, давайте рассмотрим советы, которые сделают ваш сайт Elementor быстрее.
Как сделать сайт Elementor быстрее
Здесь перечислены 6 эффективных проверенных советов по как ускорить сайт Elementor. Эти спасительные советы по оптимизации веб-сайта Elementor увеличат скорость загрузки и сократят время загрузки вашего сайта:
Выберите хорошо оптимизированный хост
Хостинг бывает двух видов: виртуальный и выделенный хостинг. Услуга виртуального хостинга означает, что несколько клиентов используют один сервер. С другой стороны, выделенный хостинг означает, что весь сервер выделяется только для одного веб-сайта. Теперь, какой из них лучше?
На первый взгляд может показаться, что виртуальный хостинг лучше из-за низкой цены. Но общий имеет много ограничений. Эти ограничения будут видны в безопасности, контроле, пропускной способности, пространстве и т. д. Выбрав виртуальный хостинг, у вас возникнут проблемы с безопасностью, потому что один клиент будет иметь право изменять ресурс другого клиента.
Кроме того, вы не получите полного контроля над своими ресурсами. Наряду с этим, пропускная способность и пространство также будут ограничены. Таким образом, разумно выбрать выделенный хостинг, потому что он не будет иметь этих недостатков. Более того, это не замедлит скорость вашего сайта.
Прежде чем выбрать хостинг, вы должны проверить его:
- Скорость
- Надежность
- Безопасность
- Особенности
- И поддержка.
Выбрав хорошо оптимизированный и надежный хостинг, вы сможете оптимизировать свой сайт Elementor.
Выберите легкую тему
После выбора оптимизированного хостинга вам необходимо выбрать легкую тему. Есть много тем, которые будут идеально смотреться на вашем сайте, но, в конце концов, они замедлят работу вашего сайта. Потому что размер их файлов большой и неоптимизированный.
Итак, чтобы выбрать легкую тему, вам необходимо убедиться, что:
- Это модульная тема, что означает, что вам не нужно использовать все функции, вы можете использовать те функции, которые вам нужны.
- Размер темы небольшой и оптимизирован для скорости.
Вот названия некоторых оптимизированных и модульных тем:
- Баджаар– Тема WooCommerce для WordPress.
- BLO– Тема WordPress для корпоративного бизнес-сайта.
- Медиско– Медицинская тема WordPress.
Есть много других доступных на WordPress.org. Итак, убедитесь, что выбранная вами тема является модульной, а размер файла оптимизирован.
Выбирайте плагины с умом
На WordPress.org сейчас более 59 тысяч бесплатных плагинов. Они полезны для выполнения различных целей. Но из-за того, что вы получаете бесплатные плагины, вам не следует устанавливать много плагинов на свой сайт. Установка большого количества плагинов означает утяжеление вашего сайта, что снизит производительность Elementor.
По этой причине вам необходимо используйте плагины, которые необходимы для вашего сайта. Кроме того, не выбирайте случайный плагин. Убедитесь, что выбранный вами плагин оптимизирован для скорости. Кроме того, если у вас уже установлено много плагинов на вашем сайте, то удаляйте ненужные и неоптимизированные плагины один за другим.
Лучший способ использовать меньше плагинов на вашем сайте — выбрать многоцелевой плагин. Наличие одного многоцелевого плагина, установленного на вашем сайте, означает замену еще 10 плагинов. Теперь, чтобы оптимизировать производительность и скорость Elementor, вы можете использовать универсальный аддон Elementor. ЭлементыКомплект который будет служить вам во многих целях, предоставляя более 85 виджетов, более 10 модулей и готовые шаблоны. Кроме того, этот продвинутый конструктор страниц Elementor помогает пользователям Elementor бесчисленными способами.
Кроме того, ElementsKit оптимизирован для скорости и поисковых систем. В результате скорость загрузки вашего веб-сайта Elementor будет выше, чем раньше.
Оптимизация файлов и изображений
Оптимизация файлов и изображений является важным решением для ускорения веб-сайта Elementor WordPress. Во-первых, давайте начнем с минификации файлов. Вам нужно минимизировать файлы CSS и JS.
Теперь, чтобы минимизировать файлы CSS и JS с помощью:
- Конкатенация: объединяет несколько файлов в один файл.
- Минификация: удаление ненужных пробелов и разрывов строк из файла.
Вы можете использовать Autoptimize плагин для минимизации ваших файлов CSS и JS с помощью конкатенации и минимизации для оптимизации скорости Elementor.
После минимизации файлов вашего сайта приступайте к оптимизации изображений. Потому что неоптимизированное изображение может замедлить работу вашего сайта до такой степени, что вы даже представить себе не можете. Вот почему лучше всего оптимизировать изображения перед их загрузкой на веб-сайт.
Но вы должны убедиться в одном: оптимизация вашего изображения должна быть без потерь, что означает уменьшение размера изображения без ущерба для качества. Вы можете использовать крошечный png оптимизировать изображения, не влияя на качество.
Кроме того, вам нужно выбрать правильный формат для ваших изображений. PNG и JPEG являются наиболее часто используемыми форматами для изображений. Теперь, чтобы оптимизировать веб-сайт Elementor, начните минимизировать файлы и оптимизировать изображения.
Кэширование страниц для ускорения веб-сайта Elementor
Еще одна важная тактика для оптимизации скорости Elementor — кэширование страниц, которое не позволяет серверу генерировать страницу из базы данных и файлов PHP после посещения. Кэширование страниц сохраняет HTML-файлы на стороне пользователя, что означает, что серверу не нужно отправлять внутренние файлы.
Если вы пользователь управляемого хостинга, то вам не нужно думать о кеширование страницы. Ваш хостинг сделает это за вас. В противном случае необходимо использовать Плагины для кэширования страниц WordPress как Гипер кеш, WP Super Cache, и т.д.
Оптимизация базы данных
Последний совет по оптимизации веб-сайта Elementor — это сортировка базы данных, что означает удаление ненужных файлов из вашего хранилища. Эти ненужные файлы могут быть неиспользуемыми файлами и даже тоннами спам-комментариев.
В большинстве случаев люди думают, что спам-комментарии не занимают места. Вот почему они не беспокоятся об удалении спам-комментариев. Это приводит к плохой производительности веб-сайта Elementor.
Подведение итогов
Никому не нравится посещать сайт, загрузка которого занимает более 3-5 секунд. Это означает, что с каждым днем количество посетителей вашего сайта будет падать. Вот почему ускорение работы веб-сайта Elementor должно быть вашей главной заботой.
Теперь вы можете просто воспользоваться приведенными выше советами, чтобы оптимизировать веб-сайт Elementor, не теряя времени.
Кроме того, сообщите нам, если вам удалось ускорить работу вашего сайта, выполнив описанные выше действия. Если у вас есть другие предложения по оптимизации скорости Elementor, сообщите нам об этом в разделе комментариев.
How to speed up a slow site with Elementor
Elementor is the fastest website builder for WordPress, written with the strictest code standards. Some websites, however, might have a configuration that causes slow loading.
Here are the most common ways to deal with a slow Elementor site:
Common Causes of a Slow Site / Elementor
There are several possible causes for a site or editor to show slow performance, each one should be examined:
Servers – Factors like memory, bandwidth, the location of the server in relation to the user and so on have a major impact on site speed. Free or shared hosting services are often the cause of a slow site.
Media (images, videos and so on) – Any image you place inside your site slows it down, especially if the image is placed in areas that are always loaded like the header and footer. Always make sure you upload images that are not too big (Under 1 MB is a good rule of thumb). Use tools like TinyPNG to reduce the size of your images.
External scripts – Any use of external scripts, i.e. Google Maps, Facebook share count, Avatar images, all considerably slow down a page load. You can deactivate Google Fonts, Font Awesome, and Eicons for example, by adding the following lines of code to your functions.php file in your child theme.
For Google Fonts:
add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );
For Font Awesome:
add_action('elementor/frontend/after_register_styles',function() < foreach( [ 'solid', 'regular', 'brands' ] as $style ) < wp_deregister_style( 'elementor-icons-fa-' . $style ); >>, 20 );
Note: By default, Font Awesome icons will only load on the pages where you’ve used them, so FA won’t load on pages that aren’t using any Font Awesome icons. This brings faster performance and faster page speed to your site, which can benefit your SEO and your users’ experience.
Only the CSS and fonts of the icon family you actually use are loaded. So only dequeue Font Awesome if you truly plan to not use any Font Awesome icons at all.
If you dequeue Font Awesome, the icons will no longer show on any of your pages.
For Eicons:
add_action( ‘wp_enqueue_scripts’, ‘disable_eicons’, 11 ); function disable_eicons()
Plugins – Plugins make WordPress slower. If you are not using a certain plugin – switch it off and delete it.
Theme – A good theme shouldn’t slow down a site, but unfortunately a lot of themes do. A well-coded theme uses scripts and methods to reduce its file sizes. Switching between themes and seeing the effect might give you a good indicator if the theme is the culprit.
Tests You Can Run
- Check why your website is slow on page speed analyzers such as Google Page Speed Insights and GTmetrix.
- Deactivate all plugins besides Elementor and Elementor pro and verify if it betters the page speed.
- Switch to Hello theme.
- Create a page with the Canvas template and test it for speed again.
- After following these steps run a speed test and check for improvements.
Speed Optimizations You Can Run
1. Use a caching plugin like WP Rocket and Autoptimize or any other cache plugin that will meet your needs.
2. Use a CDN service like CloudFlare.
2. Check with your hosting provider regarding possible causes of the site being slow on the server side.
4. Reduce image sizes.
5. If you have developer know-how, we recommend to check the ping speed of your servers and analyze the various elements’ loading time to pinpoint to cause of the slowness.
How Are We Improving?
The Elementor Developers are working very hard and listening to the needs of our users. We are improving our performance from the foundations up and empowering third party developers to do the same. Learn more here.