Как Elementor расставляет приоритеты и повышает производительность веб-сайтов

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

Производительность веб-сайта была проблемой для веб-создателей с самого начала Интернета. Я сам являюсь веб-разработчиком и всегда задавал такие вопросы:

• «Мой сайт слишком медленный? Это заставляет пользователей уходить или ухудшает мой рейтинг в Google? »
• «Следует ли мне отказаться от определенных функций, чтобы повысить скорость работы сайта?»
• И, конечно же: «Что, черт возьми, до сих пор вызывает у меня проблемы с производительностью?» Я думал, что покрыл все базы здесь! »

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

Чтобы сделать вещи по-настоящему интересными, Google недавно объявил, что производительность веб-сайта теперь официально будет играть роль в его алгоритме ранжирования. Это ставит вопрос производительности в центр внимания, вызывая обеспокоенность у владельцев веб-сайтов по всему миру. Вот почему в течение последних шести месяцев наши команды R&D и SEO неустанно работали над тем, чтобы веб-сайты Elementor прошли через это обновление и прошли успешно.

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

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

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

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

Теперь давайте рассмотрим наши треки один за другим:

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

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

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

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

Одним из примеров этого является библиотека Waypoints, которая в некоторых случаях была заменена собственным API Intersection Observer.

Мы стремимся сократить использование этих типов библиотек CSS и JavaScript и по возможности заменить их встроенной поддержкой браузера.

Мы планируем продолжать улучшать и оптимизировать существующие внутренние JavaScript и CSS Elementor.

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

В Elementor 3.0 мы улучшили механизм динамической загрузки и рендеринга CSS. Elementor используется для сканирования страниц на предмет элементов с динамическими значениями при каждой загрузке страницы. Начиная с Elementor 3.0, когда страница создается и посещается впервые, Elementor создает кеш всех элементов с динамическими значениями. Затем вместо того, чтобы сканировать страницу на предмет динамических элементов при каждом посещении страницы, список извлекается из кеша и немедленно отображается. Это значительно сокращает время рендеринга на стороне сервера и приводит к заметным улучшениям. В будущем мы планируем внедрить в Elementor дополнительные улучшения синтаксического анализа. Вы можете узнать больше об этом в этом сообщении в блоге.

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

Мы уже начали вносить эти улучшения в Elementor 3.0, где мы удалили три элемента-оболочки, чтобы создать меньшую модель DOM и упростить вывод кода.

В Elementor 3.2 мы удалили еще два элемента, чтобы добиться еще большего уменьшения размера DOM. В ближайшем будущем запланированы дополнительные сокращения.

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

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

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

• 28 апреля мы проведем веб-семинар по Core Web Vitals с ведущими специалистами по SEO, чтобы обсудить предстоящее изменение алгоритма Google и его влияние на ваши веб-сайты. Сохраните свое место здесь.

• Мы также опубликовали подробное сообщение в блоге о том, как ускорить веб-сайты WordPress, а также другие статьи, ориентированные на производительность, по таким темам, как выбор веб-хостинга, плагины кеширования, выполнение тестов скорости, использование WP Rocket и многое другое.

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