Como a Elementor prioriza e melhora o desempenho de sites

Vamos falar sobre o Roteiro de Produtos da Elementor para 2021, especificamente a otimização de desempenho. Enquanto continuamos planejando e desenvolvendo novos recursos solicitados por nossa comunidade, este ano assumimos como missão melhorar o desempenho dos sites de nossos usuários. Neste post, gostaria de compartilhar com vocês algumas das ações que já tomamos para atingir esse objetivo e falar um pouco sobre o que está por vir no próximo ano.

O desempenho do site tem sido um problema para os criadores da web desde o início da Internet. Sendo eu mesmo um criador da web, sempre faço perguntas como:

• “Meu site é muito lento? Isso está fazendo com que os usuários saiam ou prejudicando minhas classificações do Google? ”
• “Devo abandonar uma determinada funcionalidade para melhorar a velocidade do site?”
• E, claro: “O que diabos ainda está causando meus problemas de desempenho? Achei que tivesse coberto todas as bases aqui! ”

Portanto, sim, obter um desempenho estelar de um site sempre foi um desafio para os criadores da web, independentemente da plataforma ou das ferramentas que usamos. Com tantos fatores relevantes afetando o desempenho, nem sempre é fácil isolar o problema real, muito menos encontrar uma solução para ele. É exatamente por isso que criamos este curso em vídeo de cinco partes sobre performance . Nesta série, investigamos cada fator importante que pode estar afetando o desempenho do seu site, seja relacionado ao Elementor ou não, e orientamos você sobre como otimizá-lo.

Para tornar as coisas realmente interessantes, o Google anunciou recentemente que o desempenho do site agora terá um papel oficial em seu algoritmo de classificação. Isso coloca a questão do desempenho em destaque, levantando preocupações entre os proprietários de sites em todo o mundo. É por isso que, nos últimos seis meses, nossas equipes de P&D e SEO trabalharam incansavelmente para garantir que os sites da Elementor passassem por essa atualização e fossem aprovados.

Quando se trata do algoritmo misterioso do Google, sabemos que seria preciso muito mais do que nossa palavra para fazer você se sentir seguro. Portanto, como um serviço aos nossos usuários e à comunidade de criadores da web, estaremos hospedando um webinar gratuito sobre desempenho na web com os principais especialistas em SEO para discutir a mudança que está por vir. Isso não apenas cobrirá a atualização em si, mas também detalhará como essa mudança pode afetar seu site e o que você pode fazer para se preparar. O webinar acontecerá no dia 28 de abril, então certifique-se de guardar sua vaga .

No entanto, deixando de lado todos os cursos e webinars, nosso principal objetivo é garantir que nosso produto não afete negativamente o desempenho do seu site. Esta tem sido, e continuará a ser, uma das nossas principais prioridades. Então, sem mais delongas, vamos mergulhar nos esforços de otimização de desempenho do Elementor, conforme definido em nosso 2021 Product Roadmap.

Além da otimização do nosso ciclo de desenvolvimento de produto, nossa visão para melhorar o desempenho da Elementor consiste em uma abordagem de cinco caminhos. Já fizemos algumas melhorias significativas em algumas dessas áreas, enquanto outras serão abordadas nas próximas versões do Elementor.

Também estamos orgulhosos de dizer que o desempenho se tornou parte integrante de nosso pipeline de desenvolvimento e lançamento. Cada versão do Elementor agora é validada contra uma variedade de métricas de desempenho para garantir que nenhum novo recurso, ajuste ou correção tenha qualquer efeito negativo em sites existentes construídos com Elementor.

Agora vamos revisar nossas trilhas uma por uma:

Estamos melhorando a maneira como o Elementor carrega ativos para garantir que carregue apenas o que precisa em cada página. Nas versões mais recentes do Elementor e do Elementor Pro, introduzimos o experimento de carregamento de ativos otimizado para melhorar o desempenho do front-end de um site, acelerando cada página carregando apenas as funcionalidades necessárias. Você pode aprender mais sobre isso aqui.

Também adicionamos opções de carregamento lento a certos widgets e continuaremos fazendo isso no futuro. Por exemplo, o widget de vídeo inclui uma opção de carregamento lento, oferecendo a capacidade de substituir o player de vídeo completo incorporado por uma miniatura de imagem estática. A imagem, então, voltará para o vídeo completo assim que o visitante interagir com ele.

Ao utilizar essas técnicas de carregamento lento, você pode reduzir muito o tamanho da página e o número de solicitações HTTP durante o carregamento inicial da página, o que levará a uma experiência muito mais rápida para os visitantes.

Desde que lançamos o Elementor há quase cinco anos, os navegadores da web evoluíram muito. Agora, alguns recursos que exigiam bibliotecas externas há cinco anos podem ser implementados usando o suporte do navegador nativo. Isso torna a implementação muito mais eficiente e pode, em alguns casos, reduzir muito o tempo de execução do JavaScript.

Um exemplo disso é a biblioteca Waypoints que, em certos casos, foi substituída pela API Intersection Observer nativa.

Nosso objetivo é reduzir o uso desses tipos de bibliotecas CSS e JavaScript e substituí-los por suporte de navegador nativo sempre que possível.

Pretendemos continuar a melhorar e otimizar o JavaScript e CSS interno existente do Elementor.

Exemplos disso incluem a capacidade de configurar o método de carregamento do Google Fonts e a propriedade font-display adicionada à biblioteca Font Awesome. Essas melhorias devem reduzir os processos de bloqueio de renderização para esses arquivos e fornecer otimização adicional de arquivos CSS e JS existentes.

No Elementor 3.0, melhoramos o carregamento dinâmico de CSS e o mecanismo de renderização. Elementor usado para varrer as páginas em busca de elementos com valores dinâmicos em cada carregamento de página. A partir do Elementor 3.0, quando uma página é criada e visitada pela primeira vez, o Elementor cria um cache de todos os elementos com valores dinâmicos. Então, em vez de varrer a página em busca de elementos dinâmicos toda vez que uma página é visitada, a lista é obtida do cache e renderizada imediatamente. Isso melhora significativamente os tempos de renderização do lado do servidor e resulta em melhorias perceptíveis. Planejamos implementar melhorias de análise adicionais para Elementor no futuro. Você pode aprender mais sobre isso nesta postagem do blog.

Finalmente, planejamos continuar a melhorar e reduzir a saída de código que o Elementor gera para reduzir o tamanho do DOM.

Já começamos a fazer essas melhorias no Elementor 3.0, onde removemos três elementos de invólucro para criar um DOM menor e simplificar a saída do código.

No Elementor 3.2, removemos mais dois elementos para obter reduções ainda maiores no tamanho do DOM. Mais reduções estão planejadas em um futuro próximo.

Como você pode ver, novos recursos, melhorias e revisões podem ser esperados em 2021 e além. Tudo isso é feito em um esforço para ajudá-lo a continuar a construir sites incríveis com melhor desempenho. Se você ainda não atualizou para a versão mais recente, certifique-se de fazer isso para aproveitar essas e outras melhorias.

Como você deve saber, existem muitos fatores não relacionados ao Elementor que afetam o desempenho do seu site WordPress. Isso inclui otimização de imagem, hospedagem na web, provedores de servidor, CDN e muito mais. Como nosso objetivo é capacitar nossos usuários a implementar a otimização completa do WordPress, criamos um vasto banco de recursos de tutoriais, webinars e artigos gratuitos para ajudá-lo a aprender mais sobre desempenho.

• Criamos um curso em vídeo sobre desempenho - nesta série de cinco partes , examinamos todos os fatores importantes que podem afetar seu desempenho e como você pode otimizá-lo.

• Em 28 de abril, estaremos hospedando um webinar sobre Core Web Vitals com os principais especialistas em SEO para discutir a próxima mudança de algoritmo do Google e seu impacto em seus sites. Guarde o seu lugar aqui.

• Também publicamos uma postagem detalhada no blog sobre como acelerar sites WordPress, junto com outros artigos focados em desempenho sobre tópicos como escolha de hospedagem na web, plug-ins de cache, execução de testes de velocidade, uso do WP Rocket e muito mais.

Continuaremos a criar webinars, postagens em blogs e vídeos gratuitos para abordar outros aspectos do desempenho do WordPress, a fim de continuar a apoiar a comunidade de criadores da web.