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. Adding dns-prefetch links for embeds in the initial viewport.
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.)

When Optimization Detective is active, it will start keeping track of which embeds appear in the initial viewport based on actual visits to your site. With this information in hand, Embed Optimizer will then avoid lazy loading embeds which appear in the initial viewport. Furthermore, for such above-the-fold embeds Embed Optimizer will also add dns-prefetch links for resources known to be used by those embeds. For example, if a YouTube embed appears in the initial viewport, Embed Optimizer with Optimization Detective will omit loading=lazy while also adding a dns-prefetch link for https://i.ytimg.com which is the domain from which YouTube video poster images are served. Such links cause the initial-viewport embeds to load even faster.

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.