O WordPress Core Performance Team apresentou dois plugins que otimizam o desempenho de páginas da web utilizando tecnologias que pré-carregam URLs antes que os usuários cliquem em um link, além de acelerar o carregamento de imagens de forma mais eficiente.
Equipe responsável pelo desempenho do Núcleo do WordPress.
A equipe de otimização de desempenho do WordPress coordena com várias equipes de desenvolvimento do WordPress para melhorar o desempenho do núcleo do sistema e trabalhar em projetos que têm impacto direto na melhoria do desempenho do WordPress.
A estratégia primária para o time de performance envolveu:
- Assumir a liderança na criação de equipes de trabalho.
- Organizar as atividades administrativas iniciais (criar um canal de comunicação extra, agendar reuniões semanais, marcar compromissos para representantes de grupos de trabalho, etc.).
- Elaborar uma proposta de missão para o grupo.
- Organizar as diferentes áreas para enfrentar o problema.
- Definir as áreas de abrangência e a sequência de atividades.
Plugins para melhorar o desempenho do WordPress.
Antes de serem incorporadas em uma futura versão do WordPress, muitas melhorias de desempenho são inicialmente testadas em plugins.
Pessoas que fazem o download dos plugins têm a oportunidade de serem os pioneiros no uso e aproveitar os benefícios das melhorias de velocidade na página da web. É esperado que esses usuários também compartilhem suas experiências, tanto positivas quanto negativas, com o objetivo de fornecer feedback.
O plugin Performance Lab, lançado pela equipe de desempenho, é o primeiro e mais conhecido. Ele é composto por cinco módulos que podem ser ativados ou desativados de acordo com as necessidades do usuário.
Os módulos presentes no plugin Performance Lab são:
- Inclui funcionalidade para guardar a cor mais presente em imagens recentemente carregadas e criar um fundo temporário com essa cor.
- Inclua uma funcionalidade para verificar se o WebP é suportado no estado de saúde do site.
- Gera versões no formato WebP para imagens JPEG, caso o servidor dê suporte.
- Inclui uma análise de disponibilidade de recursos CSS e JS no status de saúde do site.
- Adiciona uma verificação para verificar se as opções de carregamento automático estão ativadas no estado de saúde do site.
Dois novos recursos para melhorar o desempenho.
Hoje foram anunciados dois novos plugins.
- Redimensionamento automático para carregamento de imagens de forma tardia.
- Diretrizes para a Prática de Especulação
Ambos os plugins oferecem benefícios distintos para aprimorar o desempenho, permitindo que sejam utilizados em conjunto para obter o máximo de melhorias possíveis.
Novo complemento de redimensionamento automático para WordPress.
O carregamento preguiçoso é uma estratégia de melhoria de desempenho que atrasa o carregamento de imagens menos importantes para melhorar o tempo de carregamento das páginas. As imagens essenciais para a visualização inicial da página são carregadas primeiro, enquanto as não essenciais são adiadas até que o usuário role e as imagens sejam necessárias.
A função deste plugin é incorporar um novo atributo HTML de carregamento preguiçoso chamado tamanhos=”auto”, o qual define o atributo “size” como “auto” para imagens que são carregadas preguiçosamente usando ‘srcset’. Isso acelera o download de imagens que serão necessárias quando o usuário rolar pela página.
O atributo size=”auto” em imagens faz parte da especificação de imagens responsivas em HTML, mas não está diretamente ligado ao carregamento preguiçoso. Em vez disso, o atributo tamanhos é utilizado junto com srcset para fornecer ao navegador as dimensões necessárias para exibir a imagem em diferentes tamanhos de tela. O navegador pode então selecionar a fonte de imagem mais adequada do srcset.
Plugin de Regras de Especulação do WordPress renovação
O plug-in Regras de Especulação utiliza a API Regras de Especulação para fazer o download dos recursos de páginas web que um usuário provavelmente irá solicitar. O plug-in Regras de Especulação prevê que uma página será solicitada e iniciará o pré-renderização da página da web antes que um usuário clique em um link.
A explicação oficial do plugin descreve:
Utilize a API de Regras de Especulação para renderizar previamente URLs associadas ao passar o mouse por padrão.
A API de Especulação de Regras é uma funcionalidade criada para aprimorar a velocidade de navegação na internet, permitindo que páginas da web indiquem ao navegador possíveis links que um usuário pode clicar para ir para uma página diferente. Com base na probabilidade de um visitante do site clicar em um link para acessar uma nova página, o navegador pode pré-carregar recursos.
A explicação da API de Regras de Especulação na página do desenvolvedor da Mozilla é apresentada de forma clara e detalhada.
A API de Regras de Especulação foi desenvolvida com o objetivo de aprimorar o desempenho em navegações futuras. Em vez de se concentrar em arquivos de recursos específicos, ela direciona URLs de documentos, o que a torna mais adequada para aplicações de várias páginas (MPAs) em vez de aplicações de página única (SPAs).
A API de Regras de Especulação é uma opção alternativa ao recurso de pré-busca e substitui o recurso de pré-renderização do Chrome. Ela traz várias melhorias em relação a essas tecnologias, além de oferecer uma sintaxe mais expressiva e configurável para determinar quais documentos devem ser pré-buscados ou pré-renderizados.
Para usar o plugin, é necessário ter pelo menos a versão 121 do Chrome. Os usuários que acessam um site com um navegador diferente, que não suporta a API de Regras de Especulação, não terão nenhuma alteração, a página será exibida normalmente.
Conforme as informações presentes na documentação do plugin:
O plugin é automaticamente ajustado para antecipar a visualização de URLs do WordPress quando o usuário acessa um link importante. É possível personalizar essa configuração na seção “Regras de especificação” em Configurações > Leitura.
Um filtro pode ser aplicado para impedir que determinados caminhos de URL sejam considerados para prefetching e prerrenderização (consulte a seção de perguntas frequentes). Como alternativa, é possível adicionar a classe CSS ‘no-prerender’ a qualquer link ( tag) que não deve ser prerenderizado.
Saiba mais sobre os recentes complementos de otimização do WordPress e faça o download deles nesta página.
Plugin de Imagens para WordPress que ajusta automaticamente o tamanho das imagens para os usuários que não querem se preocupar com esse processo.
Especulação sobre o Plugin de Regras do WordPress.
A imagem principal é fornecida pela Shutterstock/Haali.