Embed Optimizer

Descrição

O objetivo deste plugin é otimizar o desempenho de código incorporados, tais como tuítes, vídeos do YouTube, TikTok e outros.

As otimizações do momento incluem:

1. Faz o carregamento diferido de incorporações logo antes delas aparecerem.
2. Adicionando links de pré-conexão para incorporações na viewport inicial.
3. Reserva espaço para códigos incorporados que são redimensionados a fim de reduzir as mudanças bruscas de leiaute.

Usar carregamentos diferidos melhoram o desempenho porque, em geral, incorporações consomem muitos recursos, de maneira que carregá-las posteriormente garante que elas não sequestrem recursos enquanto a página está carregando. O carregamento diferido de incorporações que usam IFRAME é tratado simplesmente adicionando o atributo loading=lazy. Incorporações com carregamento diferido que incluam tags SCRIPT são tratadas usando um Observador de Interseção para monitorar o momento certo em que o contêiner FIGURE entrar na viewport para poder inserir dinamicamente a tag SCRIPT da integração.

Este plugin também recomenda que você instale e ative o plugin Optimization Detective, que desbloqueia várias otimizações além de apenas fazer o carregamento diferido. Sem o Optimization Detective, o carregamento diferido pode realmente degradar o desempenho e aumentar a métrica Maior exibição de conteúdo (LCP) quando uma incorporação é posicionada na viewport inicial. Isso ocorre porque a montagem da página é atrasada pela lógica enquanto determina se o elemento é visível. É por isso que o núcleo do WordPress faz o seu melhor para evitar o carregamento diferido de elementos IMG que aparecem na viewport inicial, embora a heurística do lado do servidor não seja perfeita. É aqui que o Optimization Detective entra, pois ele detecta se uma incorporação aparece dentro de qualquer uma das quebras específicas da viewport, seja no celular, em tablets ou no computador. (Veja também o plugin Image Prioritizer que melhora a funcionalidade do Optimization Detective para garantir que o carregamento diferido seja aplicado corretamente com base na presença de elementos IMG na viewport inicial.)

Quando o Optimization Detective estiver ativo, ele irá monitorar quais incorporações aparecem na viewport inicial com base em visitas reais ao seu site. Com essas informações em mãos, o Embed Optimizer evitará o carregamento diferido de incorporações que aparecem na primeira dobra. Além disso, para essas incorporações acima da dobra, o Embed Optimizer também irá adicionar links preconnect para recursos que são usados ​​por essas incorporações. Por exemplo, se uma incorporação do YouTube aparecer na janela principal, o Embed Optimizer com o Optimization Detective irá remover loading=lazy dela e também irá adicionar o parâmetro “preconnect” nas chamadas a https://i.ytimg.com, que é o domínio pelo qual as imagens de pôsteres de vídeo do YouTube são veiculadas. Esses links de pré-conexão fazem com que estas incorporações carreguem ainda mais rápido.

O outro recurso importante no Embed Optimizer fornecido pelo Optimization Detective é a redução nas mudanças de leiaute causadas por códigos incorporados que são redimensionados ao serem carregados. Isso é muito comum em posts do WordPress ou tuítes. O Embed Optimizer controla a altura destas integrações e, a partir destas medidas, o Embed Optimizer define a altura mínima para o elemento FIGURE adequada ao tamanho da viewport atual, para que a incorporação não cause uma mudança de leiaute quando carregada.

Como o Optimization Detective depende das visitas às páginas para aprender como elas são montadas, será necessário esperar até se ter visitas de dispositivos móveis e computadores para começar a ver as otimizações funcionando. Além disso, note que o Optimization Detective, por padrão, não aplica as otimizações para usuários administradores quando autenticados.

Observe que as otimizações são previstas para seren aplicadas a blocos Código Incorporado. Então, se você não notar diferenças, certifique-se de que suas incorporações não estejam dentro de um bloco de conteúdo “clássico”.

Seu site deve ter a API REST acessível para visitantes não-autenticados, pois é assim que são coletadas as métricas sobre como uma página deve ser otimizada. Atualmente, não existem configurações extras e nenhuma interface de usuário para este plugin, pois ele foi projetado para funcionar sem a necessidade de nenhum ajuste.