Teste de tempo de carregamento do back-end do Oxygen Builder
Publicados: 2022-04-10Este artigo vai dar uma olhada no tempo de carregamento de back -end do Oxygen Builder. Muitas pessoas dizem que isso é uma grande desvantagem deste WordPress PageBuilder, então decidimos testá-lo em vários dispositivos diferentes. Vamos ver o que foi descoberto.
Primeiro, vamos comparar diferentes navegadores no mesmo dispositivo. Em seguida, compararemos diferentes dispositivos usando o mesmo navegador. Isso deve nos permitir identificar não apenas quais dispositivos carregam o Oxygen Builder mais rapidamente, mas também quais navegadores são melhores para essa tarefa.
Estaremos excluindo o teste de diferentes configurações de hospedagem, pois isso adiciona muita complexidade a essa comparação. Além disso: é um fato bem conhecido que, se você estiver usando hospedagem barata, terá tempos de carregamento lentos no front-end e no back-end de qualquer site WordPress. É completamente em você se este for o caso. (No entanto, podemos revisitar isso no futuro).
O sujeito de teste
Nosso assunto de teste é um site de construção de oxigênio relativamente padrão criado por nós, para nosso público. Vamos dar uma olhada no desempenho inicial da página, tamanho e aspectos adicionais.
Este site de teste está hospedado em um servidor DO Premium dedicado, com 2 GB de RAM e configurações padrão. Ele é gerenciado pela Cloudways, que é nosso host recomendado para velocidade, custo e suporte. No momento do teste, não havíamos concluído nenhuma otimização de velocidade adicional no site. As configurações do servidor permaneceram intactas desde a ativação da instância.
Leia: Quebrando as cinco opções de servidor da Cloudway para hospedagem WordPress
Nota lateral: esta é uma ótima opção de servidor para sites de desenvolvimento e baixo tráfego, que você pode dimensionar facilmente ao iniciar. Use o código ISOTROPIC para um desconto no Cloudways ao se inscrever e obtenha uma avaliação gratuita de 3 dias (sem CC).
A página testada é a página inicial do site. Na hora do teste, ficou assim:
Os principais elementos da página que estavam carregando eram um elemento de menu Oxygen Builder, uma barra de pesquisa personalizada e uma grade de postagens de demonstração fácil (a primeira seção), um elemento WSForm Oxygen e um carrossel OxyExtras com um repetidor dentro. Este repetidor tinha mais de nove posts e dezenas de condições baseadas em campos MetaBox.
A página era pública porque o DNS do subdomínio deals.isotropic.co foi proxy por meio da Cloudflare.
O tamanho total da página foi de 5,05 MB. Isso ocorreu principalmente devido ao uso de imagens otimizadas no momento do teste. Lembre-se de que este é um site de desenvolvimento em estágio inicial (prometo que o tornaremos rápido antes de entrar no ar). Acredito que esse tipo de site seja a melhor forma de testar a velocidade de retorno e carregamento do Oxygen Builder, pois simula um ambiente normal de desenvolvimento.
Os plugins em uso foram os seguintes:
| Nome | Descrição | Desenvolvedor | Status | Versão usada | Análise |
|---|---|---|---|---|---|
| Melhores Links | Plugin definitivo para criar, encurtar, rastrear e gerenciar qualquer URL. Reúna relatórios de análise e execute campanhas de marketing com sucesso com facilidade. | Desenvolvedor WPD | Ativo | 1.2.7 | |
| BetterLinks Pro | Obtenha acesso a análises individuais, gerenciamento de funções, integração com o Google Analytics e muitos outros recursos incríveis para acompanhar e executar campanhas de marketing bem-sucedidas. | Desenvolvedor WPD | Ativo | 1.1.0 | |
| Melhor Pesquisa Substituir | Um pequeno plugin para executar uma pesquisa/substituição em seu banco de dados WordPress. | Cérebros Deliciosos | Ativo | 1.3.4 | |
| Desativar avisos administrativos individualmente | Desativar o plug-in de avisos de administrador oferece a opção de ocultar avisos de atualizações e avisos embutidos no painel de administração. | Movimento criativo | Ativo | 1.2.6 | |
| Desativar Gutenberg | Desativa o Editor de Blocos Gutenberg e restaura o Editor Clássico e a tela Editar Post original. Fornece opções para habilitar tipos de postagem específicos, funções de usuário e muito mais. | Jeff Starr | Ativo | 2.5.1 | |
| dPlugins DevKit | Plugin criado para instalações e depuração de dPlugins | devusrmk | Ativo | 1.1.2 | |
| Remetente de e-mail elástico | Este plugin reconfigura a função wp_mail() para enviar e-mail usando API (via Elastic Email) em vez de SMTP e cria uma página de opções que permite especificar várias opções. | Elastic Email Inc. | Ativo | 1.2.3 | |
| Favoritos | Botões favoritos simples e flexíveis para qualquer tipo de postagem. | Kyle Phillips | Ativo | 2.3.2 | |
| Pacote de Hidrogênio | Um pacote de aprimoramentos do Oxygen Builder que economizam tempo | Limpar plug-ins | Ativo | 1.3.5 | Nossa revisão |
| MalCare Security - Verificador, proteção e segurança de malware gratuito para WordPress | MalCare Security - Verificador, proteção e segurança de malware gratuito para WordPress | Segurança MalCare | Ativo | 4,63 | |
| Caixa Meta | Crie meta caixas personalizadas e campos personalizados no WordPress. | MetaBox.io | Ativo | 5.4.8 | Nossa revisão |
| Metabox AIO | Todas as extensões da Meta Box em um único pacote. | MetaBox.io | Ativo | 1.15.1 | |
| Login Social Nextend | Nextend Social Login exibe botões de login social para Facebook, Google e Twitter. | Nextendweb | Ativo | 3.1.2 | |
| OxyExtras | Biblioteca de Componentes para Oxigênio. | OxyExtras | Ativo | 1.3.8 | |
| Oxigênio 3.9 Beta 2 | BETA. USE POR SUA CONTA E RISCO. | Soflyy | Ativo | 3.9 Beta 2 | |
| Elementos de oxigênio para WooCommerce | Crie belos sites WooCommerce. | Soflyy | Ativo | 1,4 | |
| OxyMade | Tailwind CSS baseado, classe de utilitários CSS Framework & Tools para Oxygen Builder. | Anvesh | Ativo | 1.5.2 | Nossa revisão |
| SSL realmente simples | Plugin leve sem qualquer configuração para tornar seu site à prova de SSL | Plugins realmente simples | Ativo | 5.1.2 | |
| Redirecionamento | Gerencie todos os seus redirecionamentos 301 e monitore os erros 404 | John Godley | Ativo | 5.1.3 | |
| Redimensionar imagem após o upload | Redimensione automaticamente as imagens carregadas dentro da largura e altura máximas especificadas. Também tem a opção de forçar a recompressão de JPEGs. Opções de configuração encontradas em Configurações > Redimensionar upload de imagem | ShortPixel | Ativo | 1.8.6 | |
| Organizador de scripts | Editor de código avançado para Wordpress | dPlugins | Ativo | 3.0.0 Beta 2 | Nossa revisão |
| PesquisarWP | A melhor pesquisa do WordPress que você pode encontrar | PesquisarWP | Ativo | 4.1.22 | |
| PesquisaWP Live Ajax Search | Aprimore seus formulários de pesquisa com pesquisa ao vivo, desenvolvida pelo SearchWP (se instalado) | SearchWP, LLC | Ativo | 1.6.1 | Nossa revisão |
| Pesquisar Métricas WP | Métricas de pesquisa avançada do SearchWP | PesquisarWP | Ativo | 1.4.0 | |
| Pesquisar códigos de acesso WP | Fornece códigos de acesso que geram formulários de pesquisa e páginas de resultados para mecanismos de pesquisa SearchWP | PesquisarWP | Ativo | 1.8.2 | |
| Shareaholic - Cresça e envolva seu público | O plugin WordPress oficial do Shareaholic permite que você adicione botões de compartilhamento social premiados, postagens relacionadas, análise de conteúdo, monetização de anúncios e muito mais ao seu site. | Shareaholic | Ativo | 9.7.1 | |
| Canivete suíço | O primeiro plugin que você deve instalar quando o padrão do Oxygen não for suficiente. | dPlugins | Ativo | 1.3.7 | Nossa revisão |
| Gerenciador de arquivos WP | Gerencie seus arquivos WP. | mndpsingh287 | Ativo | 7.1.2 | |
| Construtor de grade WP | Crie layouts de grade avançados com pesquisa facetada em tempo real para seu comércio eletrônico, blog, portfólio e muito mais... | Loic Blascos | Ativo | 1.5.9 | Nossa revisão |
| WP Grid Builder - Meta Box | Integre o WP Grid Builder com o plugin Meta Box. | Loic Blascos | Ativo | 1.0.0 | |
| WP Grid Builder - Oxigênio | Integre o WP Grid Builder com o plug-in Oxygen. | Loic Blascos | Ativo | 1.0.2 | |
| Formulário WS PRO | Crie formulários WordPress melhores | Formulário WS | Ativo | 1.8.125 | Nossa revisão |
| WS Form PRO - Gerenciamento de usuários | Complemento de gerenciamento de usuários para WS Form PRO | Formulário WS | Ativo | 1.4.1 |
*Revisamos plugins que realmente usamos, como evidenciado aqui :).
É importante observar que estávamos usando o Oxygen Builder 3.9 Beta 2. Também tínhamos os elementos WooCommerce instalados, mas o próprio WooCommerce não estava neste momento.
De acordo com os relatórios dos desenvolvedores, esta versão do Oxygen foi quase duas vezes mais rápida para carregar no back-end que a anterior.
Além disso, quero observar que OxyExtras, WPGridbuilder, OxyMade e WSForm adicionaram elementos ao backend do construtor. Swiss Knife, uma ferramenta de skin/workflow e Hydrogen Pack também estão sendo carregados no backend.
Essencialmente, este assunto de teste é uma página que muitos que usam o Oxygen Builder têm experiência em carregar. Existem vários complementos, extensões e scripts que serão carregados no back-end tanto do construtor quanto de plug-ins de terceiros.
Finalmente, aqui está uma rápida olhada no meu WiFi:
Como este teste é executado
Este teste é administrado carregando diretamente o Oxygen Builder clicando em "editar com oxigênio" no back-end da página.
O botão é pressionado e o cronômetro começa lá. Quando o ícone de engrenagem parar e o navegador estiver totalmente inicializado, o teste será interrompido.
Observe que isso não é completamente preciso, pois estou cronometrando manualmente usando um cronômetro do iPhone, mas deve fornecer uma boa aproximação de quais dispositivos e navegadores carregam este plug-in mais rapidamente. Também vale a pena notar - a página foi carregada anteriormente no fontend, mas nunca no construtor de backend como administrador . Estou chegando ao construtor carregando ofertas.isotropic.co, indo para a barra superior, clicando em editar página e clicando no botão editar com oxigênio.
O objetivo deste teste não é uma corrida de velocidade. É obter dados do mundo real nas costas e tempos de carregamento deste plug-in para ver se as preocupações são justificadas com a velocidade e a eficiência. Em vez de olhar para os números reais do tempo, considere as diferenças entre esses números quando se trata de dispositivo e navegador.
Por fim, incluí links da Amazon (afiliados) caso isso inspire alguém a comprar por impulso.
Tempos de carregamento do Oxygen Builder por navegador
Primeiro, vamos tentar carregá-lo em todos os navegadores instalados no meu Mac Mini M1. As estatísticas serão atualizadas ao testar por dispositivo, mas este é um Mac Mini 2020 M1 com 8 GB de RAM, executando o Big Sur V11.3.1. Este é o meu "desktop diário".
Começamos com um teste de navegador para determinar qual é o mais rápido para carregar o Oxygen. Usaremos este navegador ao testar diferentes dispositivos.
Testamos o Safari V14.1, Chrome V95.0.4638.69 e Firefox V94.
- O Firefox chega em 05,59 segundos.
- O Chrome chega em 17,52 segundos.
- O Safari chega em 6,20 segundos.
O Chrome era o outlier óbvio aqui. Eu o executei novamente para ver se havia um soluço no carregamento - levou apenas cerca de 16,5 segundos para carregar pela segunda vez, então acho que a média é um número relativamente preciso.
A vantagem aqui é que o Firefox é o navegador mais rápido. Este é um tópico discutido no grupo oficial do Facebook há algum tempo, então espero que esses dados empíricos provem que você deveria estar usando este navegador. Pessoalmente, o Firefox é meu navegador favorito para desenvolver sites, pois possui uma tonelada de ferramentas de desenvolvedor front-end de alta qualidade. No entanto, quando comparado ao chrome, faltam auditorias de segurança e desempenho.
Usaremos esse navegador para o teste do dispositivo.
Tempos de carregamento do Oxygen Builder por navegador
Para este teste, usaremos dispositivos todos na mesma rede Wi-Fi, usando a mesma versão do Firefox, carregando a mesma página de antes. O fator diferenciador será o dispositivo e as estatísticas de teste por trás dele. Aqui está a escalação.
Mac Mini 2020 (já testado)
- Chip M1 Apple
- 16 GB de RAM
Carrega oxigênio em 05,59 segundos.
2019 XPS 13 9370
- Intel i7-8550U
- 16 GB de RAM
Carrega oxigênio em 11,54 segundos.
2020 iPad Air 10,9 polegadas MYFT2LL/A
- Chip A14 Apple
- 4 GB de RAM
Carrega oxigênio em 11,96 segundos.
Leia: Você pode desenvolver sites em um iPad Pro?
Dell Latitude 7400 2019
- Intel i7 8655U
- 16 GB de RAM
Carrega oxigênio em 16,19 segundos.
2020 Macbook Pro 13 polegadas
- Intel Core i5
- 16 GB de RAM
- Gráficos Intel Iris Plus 645 1536 MB
Carrega oxigênio em 9,66 segundos.
2021 Macbook Pro 16 polegadas
- Chip M1 Max da Apple
- 64 GB de RAM
Carrega oxigênio em 5,43 segundos.
Todos os dispositivos são conectados a um carregador de bateria durante o teste. O navegador Firefox é o único aplicativo/programa aberto. Você pode estar se perguntando por que eu tenho acesso a todos esses dispositivos. Eu não possuo pessoalmente cada um desses eletrônicos, em vez disso, tenho acesso para alugá-los em uma universidade local.
Os grandes saques
Primeiro, como mencionado várias vezes, este é um teste imperfeito. Não foi realizado em ambiente de laboratório. As páginas com dados menos dinâmicos serão carregadas mais rapidamente no criador de back-end e as páginas com dados mais dinâmicos serão carregadas mais lentamente. O mesmo para imagens, elementos DOM e scripts.
Sugiro usar esses números arbitrariamente. Em vez de dizer que o Oxygen será carregado em X.XX segundos para você, use os números para comparar o navegador e os dispositivos.
Dica 1: o navegador é importante
Como o Facebook afirma consistentemente, o Firefox é o navegador mais rápido para carregar o Oxygen Builder. Eu pessoalmente uso a edição de desenvolvedor do Firebox.
Dica 2: o dispositivo importa
Os dois dispositivos mais rápidos são os mais novos dispositivos Apple usando Apple Silicone. Isso faz sentido; esses processadores são muito mais rápidos do que praticamente qualquer outro no mercado; e não são tão caros. O M1 Mac Mini básico está chegando a menos de US $ 600 reformado e o M1 Macbook Air custa US $ 899.
Takeaway 2B: Parece que o processador importa mais do que a RAM
Também parece que quanto mais poderoso o processador, melhor o tempo de carregamento do construtor de back-end. Por exemplo, um laptop com 64 GB de RAM carrega de forma semelhante a um com 16 GB de RAM. À medida que a potência do processador cai, o mesmo acontece com o tempo de carregamento do construtor.
Eu esperaria que tentar carregar o construtor em um Chromebook ou outro dispositivo com estatísticas baixas possa ser difícil.
Pensamentos finais
O tempo médio de carregamento do Oxygen Backend para este teste foi de cerca de 10 segundos para uma página grande e não otimizada, com uma tonelada de dados dinâmicos. Além disso, havia vários complementos que carregavam elementos próprios na página, juntamente com uma grande coleção de CSS global e personalizado. Isso é muito aceitável no meu livro. Torna-se ainda mais aceitável quando as mudanças nas classes CSS e opções globais podem ser sincronizadas sem a necessidade de recarregar o construtor com o plugin Collaboration.
Como um webdev que usa Oxygen para a maioria dos projetos, a velocidade do construtor nunca me impactou, mas eu queria seriamente dar uma olhada em qual era a melhor configuração para isso.
Se você tiver algum número de comparação próprio, sinta-se à vontade para publicá-lo na seção de comentários abaixo.