Elementor 3.0: Como melhoramos o desempenho

Estamos sempre procurando por novas maneiras de melhorar a velocidade e o desempenho dos sites da Elementor. No lançamento mais recente do Elementor - Elementor 3.0, nos concentramos fortemente em melhorar o desempenho de suas páginas.

Muitos fatores afetam a velocidade de carregamento de um site. Fatores como provedor de hospedagem, tema, número de plug-ins, cache, código HTML e outros.

Embora não possamos controlar fatores externos, podemos (e fazemos) trabalhar para garantir que nosso produto seja otimizado da melhor forma possível. Certas mudanças, no entanto, requerem o momento certo para serem implementadas.

Algumas melhorias, como a renderização de CSS, têm baixo potencial para causar problemas, enquanto outras alterações, como a remoção de elementos DOM, têm alto potencial para quebrar alguns sites e causar problemas.

A introdução de alterações importantes é algo que tradicionalmente é feito apenas em versões principais, então aproveitamos esta oportunidade para apresentar essas alterações e melhorias e, ao reduzir os elementos DOM e melhorar a renderização CSS, estamos dando um passo mais perto de um melhor desempenho.

O Elementor tem duas maneiras de renderizar CSS do site:

1. Imprimindo em uma tag <style> no DOM.

2. Gravá-lo em um arquivo CSS que será carregado com a página

O CSS gravado em arquivos, por exemplo, é completamente estático. Ele é impresso uma vez em um arquivo e esse arquivo só é atualizado quando uma alteração é feita no conteúdo da página. Mas e quanto ao conteúdo dinâmico?

Alguns conteúdos dinâmicos incluem seu próprio CSS, como cores e imagens (quando usados ​​como valores de imagem de fundo). O conteúdo dinâmico, como campos personalizados, é desconectado do conteúdo da página e pode ser alterado fora da edição da postagem ou página no Editor Elementor.

Então, o que acontece quando os valores dinâmicos incluem CSS que precisa ser impresso sempre que uma página é carregada?

Até o Elementor 3.0, sempre que uma página era carregada, o módulo Dynamic Tags do Elementor varria a página inteira em busca de quaisquer elementos que incluíssem conteúdo dinâmico.

Se um conteúdo dinâmico foi encontrado, o módulo buscou os valores dinâmicos desse elemento, escreveu o CSS relevante em uma tag <style> e o injetou no DOM.

Isso, conforme descrito neste post, é um processo caro, que custa um tempo precioso de carregamento.

No Elementor 3.0, mudamos a maneira como gerenciamos o processo de renderização de CSS dinâmico. Na primeira vez que uma página é carregada, quando o CSS estático da página é renderizado, criamos um cache que inclui uma lista dos elementos da página que possuem valores CSS dinâmicos.

Então, sempre que a página é visitada, buscamos a lista de elementos dinâmicos do cache e os renderizamos imediatamente. Em vez de ter que iterar sobre todos os elementos da página sempre que ela carrega - obtemos esses elementos da lista já disponível de elementos dinâmicos. Isso economiza muito tempo de execução e torna o carregamento da página visivelmente mais rápido.

Aqui estão alguns resultados de testes que executamos no Blackfire para examinar a diferença antes e depois de nossa otimização: