35 otimizações de desempenho para o seu site WordPress
Uma página criada com o Canvas baixa o CSS e o JavaScript apenas dos blocos que ela renderiza, e nada além disso. Além disso, há 35 otimizações, cada uma um interruptor que você controla, com padrões conservadores e uma explicação clara do que ela faz.
Atualizado em
Carregamento de recursos por bloco
A maioria dos temas envia uma folha de estilo grande e um script grande, e cada página paga por todos os recursos do tema. O Canvas associa cada um dos seus 314 blocos ao CSS e ao JavaScript de que ele precisa e, em seguida, carrega a união do que a página realmente renderizou.
- Uma página de preços nunca baixa o script do slider
- Uma página sem formulário nunca baixa o processador de formulários
- O editor carrega os estilos de bloco da mesma forma
- Nada para configurar e nenhuma forma de desligá-lo acidentalmente
Declarado, não estimado
Cada bloco declara seus próprios arquivos. O mapa fica no bloco, então não existe uma lista central que alguém possa esquecer de atualizar.
Funciona com os blocos principais
Os blocos nativos e de terceiros mantêm o próprio comportamento de carregamento. O Canvas não assume os recursos deles nem disputa com o WordPress por eles.
Modelos também contam
Cabeçalhos, rodapés, títulos de página e sliders também são blocos, então uma página que usa um cabeçalho simples não carrega o código do mega menu.
Nada para comprar
O carregamento condicional não é um recurso premium nem um complemento. É assim que a biblioteca funciona em todos os planos e com uma licença expirada.
35 otimizações, agrupadas por aquilo que afetam
Não há nada de mágico aqui, e nada fica escondido. Cada item faz algo específico e verificável na página que o WordPress envia.
Carregando 7
Elimine o bloqueio de CSS e JavaScript na primeira renderização e adiante o carregamento da próxima página.
- Carregar folhas de estilo não críticas de forma assíncrona
- Adiar JavaScript não crítico
- Adiar o JavaScript até a primeira interação
- Pré-carregar a maior imagem acima da dobra
- Fazer pré-conexão com as origens que a página vai usar
- Pré-busca de DNS para hosts de terceiros
- Carregamento especulativo, para que a próxima página seja buscada antes de ser clicada
Fontes 3
O texto continua legível enquanto uma fonte web ainda está carregando, e fontes do Google não precisam necessariamente ser uma requisição de terceiros.
- Adicione font-display swap às suas fontes web
- Pré-carregar as fontes que a primeira tela precisa
- Servir fontes do Google a partir do seu próprio servidor
Mídia 6
As imagens são o que mais pesa na maioria das páginas e também o que é mais fácil de fazer errado.
- Carregar imagens abaixo da dobra sob demanda
- Carregar iframes e embeds sob demanda
- Defina a qualidade JPEG que o WordPress gera
- Limitar a largura máxima das imagens enviadas
- Controle os conjuntos de imagens responsivas que o WordPress gera
- Controle se e quais tamanhos de imagem são gerados
Limpeza 8
O WordPress traz recursos pelos quais todo site paga e que poucos sites usam.
- Remover strings de consulta de recursos estáticos
- Desativar scripts e estilos de emoji
- Desative a descoberta de oEmbed e o script de incorporação
- Desativar o Dashicons no front-end
- Desativar XML-RPC
- Desativar feeds RSS
- Remover jQuery Migrate
- Desativar pingbacks para o próprio site
Banco de dados 5
O lado administrativo de um site lento: revisões, salvamentos automáticos e um heartbeat que nunca para.
- Limitar o número de revisões mantidas por publicação
- Definir o intervalo de salvamento automático
- Limite ou desative o heartbeat do painel administrativo
- Remove revisões, transients e spam do banco de dados
- Restringir a API REST a usuários conectados
WooCommerce 5
Uma loja carrega os scripts em todas as páginas do site, inclusive nas que não vendem nada.
- Remove o JavaScript do WooCommerce em páginas sem conteúdo da loja
- Desative o rastreamento de atribuição de pedidos
- Impedir que o script de cart fragments faça consultas repetidas em todas as páginas
- Remover a biblioteca de verificação de força de senha fora das páginas de conta
- Remover a biblioteca Select2 incluída fora do checkout
Reescrita de rede de entrega de conteúdo 1
Aponte suas folhas de estilo, scripts, imagens e fontes para uma rede de distribuição de conteúdo (CDN) que você já paga, reescrevendo os endereços deles enquanto a página é renderizada. O Canvas não vende uma rede para você e não faz proxy do seu tráfego pelos nossos servidores.
São 35 opções no total, e as cinco do WooCommerce aparecem apenas quando o WooCommerce está ativo. Mais sobre a integração com a loja.
Cada um deles é um interruptor, e os padrões são conservadores
O Canvas ativa o que é seguro para qualquer site e deixa o restante por sua conta, com o motivo escrito ao lado de cada controle. A única configuração que costuma ser uma má ideia avisa isso no próprio painel, no momento em que você está decidindo.
Fundamentos de SEO e acessibilidade
Uma página que carrega rápido, mas não pode ser lida, rastreada ou operada pelo teclado, não está concluída. Tudo isso está no próprio tema, em todos os planos, sem nada reservado a um upgrade.
Metadados do seu conteúdo
Títulos, descrições, cards para redes sociais, URLs canônicas, regras de robots e um sitemap, todos derivados da página como ela é renderizada. Não há uma segunda cópia do seu conteúdo para manter atualizada.
16 tipos de schema
Organization, WebSite, WebPage, Person, breadcrumbs, Product, Brand, Offer, Review e classificação, endereço, coordenadas geográficas, horário de funcionamento e busca no site, emitidos onde se aplicam.
Marcos semânticos
Regiões de cabeçalho, navegação, conteúdo principal e rodapé, um link para pular até o conteúdo, títulos que seguem a sua ordem lógica e foco visível em tudo o que pode ser acessado.
Menus navegáveis pelo teclado
Menus, mega menus, painéis laterais e modais abrem, se movem e fecham pelo teclado, e as animações respeitam a configuração de movimento reduzido do visitante.
Acessibilidade, segurança e exportação de dados nunca são recursos premium. Elas continuam disponíveis com a licença expirada, porque um site que deixa de funcionar é um problema de suporte, nunca uma decisão de licenciamento.
Como verificamos isso
Afirmações sobre velocidade e acessibilidade são fáceis de fazer e fáceis de verificar. Nós verificamos as nossas e mostramos como.
As páginas são comparadas com seus designs em um navegador real
Cada página de demo é renderizada em um navegador e medida em comparação com o design de origem: altura do documento, larguras de seção, espaçamento calculado e tudo o que depende de JavaScript, medido depois que ele já foi executado, nunca na primeira pintura.
Este site é auditado em três larguras
Cada página aqui é testada com o axe-core segundo as regras WCAG 2.1 A e AA em 1440, 1024 e 390 pixels, além das verificações que o axe não faz: um h1, níveis de título que nunca pulam, os quatro landmarks, um link para pular ao conteúdo que funcione, nenhum estouro horizontal, nenhum texto abaixo de 12 pixels, links que se leem como texto e alvos de toque de pelo menos 24 pixels.
O que o Canvas precisa para funcionar
WordPress
O Canvas é construído sobre o editor de blocos, então precisa de um WordPress com o Editor do site. Versão 7.1 ou mais recente.
PHP
PHP 7.4 ou mais recente. Uma versão atual do PHP é a melhoria de velocidade mais barata que a maioria dos sites pode fazer.
Testado até
O Canvas é testado com o WordPress 7.1, e uma atualização acompanha cada nova versão do WordPress.
Sobre o desempenho
Inclusive a pergunta que mais ouvimos, e é por isso que não há pontuações nesta página.
Ainda preciso de um plugin de cache?
Provavelmente, e essa é a resposta honesta. O Canvas controla o que um tema e o WordPress controlam: quais recursos uma página carrega, como fontes e imagens se comportam e quanto trabalho o banco de dados faz. O cache de página, o cache de objetos e a entrega de borda são responsabilidade da sua hospedagem ou de um plugin de cache. São tarefas diferentes, então usar os dois é a configuração normal.
Ativar essas opções vai quebrar meu site?
Cada opção pode ser desfeita, e as mais propensas a entrar em conflito com outro plugin começam desligadas. Cada opção explica o que faz e quando é melhor não mexer, e a configuração realmente arriscada indica isso no painel. Ative-as uma de cada vez e recarregue o site público depois de cada uma.
Preciso configurar o carregamento de recursos por bloco?
Não, não há nada para encontrar e ativar. É assim que a biblioteca de blocos funciona. Cada bloco declara o CSS e o JavaScript de que precisa, e a página carrega a união do que ela realmente renderizou.
Os Demos chegam otimizados?
A importação de uma demo para todo o site adota as Opções do tema dela, e as opções de desempenho fazem parte delas, então a demo começa com as configurações com as quais foi criada e testada. Altere qualquer uma depois.
Por que esta página não publica pontuações de velocidade?
Como uma pontuação de um teste sintético em nosso hardware não diz nada sobre sua hospedagem, seus plugins, suas imagens ou seus visitantes, publicamos exatamente o que cada otimização faz. Assim, você a ativa e mede o próprio site na própria infraestrutura.
Um site rápido que você ainda pode editar
Todos os planos trazem a mesma biblioteca de blocos, as mesmas 35 otimizações e o mesmo carregamento condicional de recursos. Não há nível de desempenho.