Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

Teste de desempenho: os temas WordPress mais vendidos no ThemeForest

by
Length:LongLanguages:

Portuguese (Português) translation by Paulo Regina (you can also view the original English article)

O desempenho é um dos aspectos mais importantes de qualquer site, mas é algo que as pessoas raramente parecem levar em consideração ao comprar temas do WordPress. Nesta rodada, vamos pegar os dez temas mais vendidos no Themeforest, em ordem de aparição, realizá-los em alguns testes básicos de desempenho e classificá-los de cima para baixo.

Os temas escolhidos

A lista de temas do WordPress mais vendidos do ThemeForest é atualizada semanalmente, mas você verá com frequência os jogadores conhecidos ocupando os primeiros lugares por algum tempo. Nós pegamos os dez primeiros (vistos abaixo) e os colocamos uns contra os outros com alguns testes comuns de desempenho.

2017s Best Selling WordPress Themes - updated weekly
Temas Wordpress mais vendidos - atualizado semanalmente

Os testes

Existem muitas ferramentas disponíveis para testar sites. Escolhemos alguns clássicos: o Google Pagespeed Insights, o Webpagetest.org, o Pingdom e as ferramentas de desenvolvimento do Chrome. A maioria dará feedback sobre a rapidez com que uma página da web é carregada, seu peso geral, a eficiência com que seus ativos são canalizados, dando, por fim, algum tipo de pontuação. Fizemos uma demonstração de cada tema através dessas ferramentas e agrupamos as figuras (veja a tabela no final do artigo).

Além desses testes, usamos o plug-in de Auditoria de Acessibilidade para as ferramentas de desenvolvimento do Chrome. Isso não está ligado ao desempenho como tal, mas os resultados sempre fornecem uma ideia de como um tema é criado.

Algumas coisas para anotar:

  • Essas demonstrações são todas hospedadas pelos autores de temas individuais. As especificações de hospedagem não são todas iguais.
  • Uma demonstração aleatória foi escolhida onde várias opções estavam disponíveis. WooCommerce, BuddyPress ou qualquer outro plug-in de plataforma foram evitados sempre que possível. Também não foram utilizados temas tendenciosos para imagens (como portfólios de fotografia).
  • Todos os URLs foram testados na Califórnia, quando possível.
  • Resultados precisos podem variar dia a dia.
  • As demonstrações de temas são frequentemente criadas para causar um impacto visual, repleto de imagens de alta qualidade e da maior funcionalidade possível. Isso significa que as demonstrações raramente são um reflexo preciso de como um site resultante pode parecer e se comportar. É provável que, com sua própria cópia, você melhore as pontuações de desempenho de todas essas demonstrações.

Avada

Creative demo
Avada: demonstração criativa
  • Pagespeed insights para celular: 46%
  • Pagespeed insights desktop: 48%
  • Webpagetest.org: A`s, exceto por um grande F na compactação de imagem. AAAFA☑
  • Pingdom: 91% (nota A)
  • Velocidade de carregamento Pingdom: 1,94 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 2.8Mb
  • Auditoria de acessibilidade: 94% (excelente). Os atributos ARIA seguem as melhores práticas, os elementos são bem estruturados, as metatags são usadas corretamente.

As imagens pesadas são um grande contribuidor para a pontuação de velocidade baixa do insights pagepeed; 77,2% do peso da página é atribuído às imagens. Arquivos como avada-creative-home1.jpg poderiam ter sido reduzidos de 344,6 KB para ~ 40 KB sem muito esforço. Certamente justo dizer que, com bom senso, sua própria instalação de Avada poderia ser feita muito mais leve e mais rápida. É bom ver que a Avada é construída com acessibilidade em mente.

The7

The7 Construction demo
The7: demonstração de construção
  • Pagespeed insights para celular: 64%
  • Pagespeed insights desktop: 91%
  • Webpagetest.org: A’s de maneira geral. AAAAA☑
  • Pingdom: 68% (nota D)
  • Velocidade de carregamento Pingdom: 1,51 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 1.3Mb
  • Auditoria de acessibilidade: pontuação de 83% (não ruim). Alguns elementos da imagem não possuem atributos alt, a taxa de contraste de cores pode ser melhor em alguns dos textos (em relação ao fundo). Mas, no geral, os elementos são bem estruturados e a acessibilidade é sólida.

De um modo geral, esta demonstração carrega muito rapidamente; Suas imagens e recursos não são muito pesados e a página pode ser usada relativamente em breve após o carregamento. No entanto, a sua classificação Pingdom não é ideal. Melhorias poderiam ser feitas combinando parte do JavaScript, da mesma forma que o CSS, enquanto o cache poderia ser facilitado ao não forçar números de versão em nomes de arquivos (por exemplo: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme 3D demo
BeTheme: demonstração em 3D
  • Pagespeed insights para celular: 76%
  • Pagespeed insights desktop: 87%
  • Webpagetest.org: A’s AAAAA☑
  • Pingdom: 98 (nota A)
  • Velocidade de carregamento Pingdom: 1.27 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 1.8Mb
  • Auditoria de acessibilidade: 80% fica aquém das taxas de contraste (esse é um tema sombrio) e seu uso imperfeito das funções ARIA.

Este tema carrega muito rapidamente. Grande parte do conteúdo visível é priorizado ao incluir estilos essenciais in-line no cabeçalho, e muito do que é carregado é reduzido e concatenado. Como é frequentemente o caso, as imagens representam a maior parte do peso da página (69,5%), por isso não seria difícil obter a página inicial desta demonstração abaixo do limite de 1Mb.

Impreza

Impreza Restaurant demo
Impreza: demonstração de restaurante
  • Pagespeed insights para celular: 63%
  • Pagespeed insights desktop: 68%
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (nota B)
  • Velocidade de carregamento Pingdom: 2.34 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 2.5Mb
  • Auditoria de acessibilidade: 94% (excelente). Atributos usados adequadamente em elementos, incluindo funções ARIA. Nomes de elementos discerníveis e conteúdo bem descrito.

Embora a velocidade de carregamento da demonstração de restaurante do Impreza não seja ruim, suas pontuações de desempenho são prejudicadas por mais de 2Mb de imagens. Também digno de nota é a falta de CDN e o tempo de resposta insuficiente do servidor; dois aspectos que são específicos para a hospedagem dessa demonstração e os que você pode melhorar facilmente.

Enfold

Enfold Gym demo
Enfold: demonstração de ginásio
  • Pagespeed insights para celular: 60%
  • Pagespeed insights desktop: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (nota C)
  • Velocidade de carregamento Pingdom: 2.79 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 5.2Mb
  • Auditoria de acessibilidade: 89% Uma das demonstrações de tema de maior pontuação para acessibilidade, mostrando uma força subjacente em sua qualidade de construção.

Mais uma vez, nenhum CDN utilizado para hospedagem desta demonstração, que perde alguns pontos no webpagetest.org. A falta de HTTPS também pode ter ganho uma marca preta para a Enfold. Como de costume, esta demonstração cai na armadilha de ser tão visualmente deslumbrante quanto possível, sacrificando o peso da página para a qualidade da imagem. Com mais de 5Mb, esse é o peso pesado do grupo, mas o tamanho da imagem é sempre algo facilmente solucionado.

X

X Church demo
X: demonstração da igreja
  • Pagespeed insights para celular: 77%
  • Pagespeed insights desktop: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (nota B)
  • Velocidade de carregamento Pingdom: 2.45 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 2.1Mb
  • Auditoria de acessibilidade: 91% Uma pontuação A11y muito saudável, diminuída apenas pela falta de atributos alt em algumas imagens, baixa taxa de contraste em algumas áreas (esse tema da igreja é bastante silencioso) e ausência de um atributo de título em um iframe. Ainda assim, como o iframe é de uma incorporação do YouTube, que não vem com um atributo de título como padrão, nós perdoamos essa supervisão.

Esta demo é uma das poucas que faz um trabalho razoável mantendo as despesas gerais com a imagem no mínimo; O webpagetest oferece um sólido 97/100 para compressão de imagens. Em vez disso, suas pontuações baixas vêm em grande parte da hospedagem; sem CDN, sem HTTPS, tempo de resposta inicial deficiente e falta de "keep alive" - caso contrário, conhecido como conexão HTTP persistente, algo que pode ser facilmente ligado. Como sempre, melhorias fáceis que você mesmo poderia realizar.

Bridge

Bridge Spa demo
Bridge: demonstração de spa
  • Pagespeed insights para celular: 70%
  • Pagespeed insights desktop: 83%
  • Webpagetest.org: DAAAF☒
  • Pingdom: 85% (nota B)
  • Velocidade de carregamento Pingdom: 2.12 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 1.6Mb
  • Auditoria de acessibilidade: 91% (muito bom). Pequenos pontos que trazem a pontuação geral para baixo, mas os atributos ARIA seguem as práticas recomendadas, e os elementos da página têm nomes discerníveis, descrevem bem seu conteúdo e são estruturados adequadamente.

Uma das demonstrações mais leves aqui, mas os controles deslizantes de imagem sempre vão aumentar o peso da página, mesmo com imagens bem otimizadas como essas. A redução do HTML e de outros recursos ajudaria a pontuação dos insights do pagespeed, e a hospedagem aprimorada faria maravilhas novamente - melhor tempo de resposta do servidor, um CDN e o armazenamento em cache sendo o resultado mais fácil.

Flatsome

Flatsome Go Explore demo
Flatsome: demonstração ir explorar
  • Pagespeed insights para celular: 53%
  • Pagespeed insights desktop: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (nota A)
  • Velocidade de carregamento Pingdom: 1.02 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 3.7Mb
  • Auditoria de acessibilidade: 83% de pontos perdidos na frente A11y por não nomear os botões corretamente (os botões do ícone da lista de desejos WooCommerce não podem ser lidos corretamente pelos leitores de tela) e alguns links são igualmente vagos. Baixo contraste em alguns elementos e IDs de elementos duplicados também são consertos fáceis.

Não é visto através de olhos favoráveis pelo Pagespeed Insights, embora as outras métricas de pontuação adorem o Flatsome! Uma boa hospedagem atende à página com eficiência (os autores de temas tomem nota), os recursos são minimizados e as imagens de carregamento lento ajudam o que, de outra forma, seria um carregamento de página de peso médio progressivamente.

Jupiter

Jupiter Bellona template
Jupiter: modelo Bellona
  • Pagespeed insights para celular: 38%
  • Pagespeed insights desktop: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (nota A)
  • Velocidade de carregamento Pingdom: 1.07 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome:3.3Mb
  • Auditoria de acessibilidade: 91% (muito bom). Devido à natureza impactante dos gráficos (que eu adoro, por sinal), o texto em algumas das imagens faz com que as taxas de contraste sejam fracas. A estrutura da página e o uso descritivo dos elementos, juntamente com o uso adequado da ARIA, compensam as deficiências de contraste.

Eu vou soar como um disco quebrado aqui, mas cinco minutos de otimização de imagem reduziriam enormemente as despesas gerais nessa demonstração. home-bg-08.jpg sozinho pesa quase um megabyte inteiro; executá-lo através do TinyPNG reduz 87% imediatamente. Por que você não? Como Pingdom e Webpagetest sugerem, a maioria dos outros aspectos de desempenho são muito bons.

Newspaper

Newspaper Tech news
Newspaper: Notícias sobre tecnologia
  • Pagespeed insights para celular: 76%
  • Pagespeed insights desktop: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (nota A)
  • Velocidade de carregamento Pingdom: 1.19 s
  • Peso da página pela ferramenta de desenvolvimento do Chrome: 1.5Mb
  • Auditoria de acessibilidade: 86% Uma boa pontuação - poderia ser melhorada descrevendo corretamente os links e botões que são realmente usados para controles de JavaScript, alternâncias e afins.

Grandes pontuações, melhorias padrão se aplicam (otimização de imagem, compactação JS / CSS / concatenação), mas tenha em mente que esta demonstração  também vem equipada com um grande pull-out promovendo outras versões do tema (complicação adicional que sua própria versão é improvável que precise). Sem muito esforço, essa demonstração pode entrar na categoria de peso abaixo de 1Mb.

Tabela de Resultados

Tendo em mente todas as ressalvas que listamos ao longo do caminho, essa tabela coloca os temas em algum tipo de ordem. A classificação de Pingdom serve como uma pontuação razoavelmente redonda para basear as coisas; você verá que o peso da página, a velocidade de carregamento e até mesmo as pontuações do Pagespeed Insights se enquadram em um padrão semelhante (até certo ponto).

Pagespeed Insights (média) Pingdom Velocidade de Carregamento Peso da Página
BeTheme 81.5% 98% 1.27 s
1.8Mb
Flatsome 55% 96% 1.02 s
3.7Mb
Newspaper 76.5% 93% 1.19 s 1.5Mb
Jupiter 41% 92% 1.07 s 3.3Mb
Avada 46.5% 91% 1.94 s 2.8Mb
X 75.5% 87% 2.45 s
2.1Mb
Bridge 76.5% 85% 2.12 s
1.6Mb
Impreza 65.5% 80% 2.34 s 2.5Mb
Enfold 60% 70% 2.79 s 5.2Mb
The7 78% 68% 1.51 s 1.3Mb

Como tornar seus temas WordPress mais rápidos

Tendo comprado um tema WordPress, como você pode otimizá-lo?

Não vai surpreender: um primeiro ponto de escala fácil ao otimizar seu site é suas imagens. Remova imagens indesejadas, comprima aquelas de que você precisa, salve os JPEGs como "progressivos" (para que haja pelo menos algo para ver enquanto eles estão carregando) e você terá um bom começo. Você também pode querer instalar um plugin Lazy Loading para levar as coisas um passo adiante. Vimos que muito poucas dessas demonstrações priorizam a otimização de imagens, mas isso significa que você poderá melhorar suas pontuações.

Em relação às pontuações notoriamente instáveis do Pagespeed Insights, você deve ter notado que todas essas demonstrações (com exceção de uma) têm uma pontuação melhor para a área de trabalho do que para as versões para celular. Isso não reflete mais o modo como a web é usada, portanto, para manter o Google (e os usuários) satisfeitos, considere cuidadosamente o desempenho dos dispositivos móveis. Uma primeira atitude móvel também ajudará seu SEO.

Como você pode fazer isso? Concatenar e minimizar CSS e JavaScript pode ser difícil com o WordPress; usar plug-ins de terceiros significa que os arquivos podem ser muitos e você não terá muito controle sobre eles sem ajuda. Ainda assim, faça o seu melhor para incluir estilos de “visualização inicial” inline no <head> e torne seu site utilizável o mais rápido possível, evitando que scripts de “bloqueio de renderização” diminuam o processo de carregamento. Se o controle deslizante na parte superior da sua página inicial exigir que toda a página seja carregada antes de aparecer, o Google penalizará você.

Além disso, considere sua hospedagem. Ativar compactação GZIP. HTTPS não fará mal algum. Use um serviço de cache também; instalar e configurar o W3 Total Cache é uma brincadeira de criança. Use um CDN se seu conteúdo for destinado a um público amplo. Por fim, dê uma olhada nestes tutoriais e cursos para mais detalhes e ajuda no assunto:

Recursos de desempenho do WordPress

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.