Image Prioritizer

Descrição

Este plugin optimiza o carregamento de imagens (e vídeos) com priorização para melhorar o Largest Contentful Paint (LCP), carregamento diferido e a selecção de tamanhos de imagem mais precisa.

As optimizações actuais incluem:

1. Adicione ligações com pré-carregamento com fetchpriority=high específicas para cada ponto de quebra (tal como elementos LINK[rel=preload] e cabeçalhos de resposta Link) para URL de imagens de elementos LCP:
   1. Um elemento IMG, incluindo os atributos srcset/sizes fornecidos como imagesrcset/imagesizes em LINK.
   2. O primeiro elemento SOURCE com um atributo type num elemento PICTURE. (Não são suportados elementos PICTURE com direcção de arte através de media queries.)
   3. Um elemento com um atributo style em linha que define a propriedade CSS background-image.
   4. Um elemento com a propriedade CSS background-image definida através de uma folha de estilos (quando a imagem for proveniente de uma origem permitida)
   5. Imagem poster de um elemento VIDEO
2. Garanta que fetchpriority=high só é adicionado a um IMG quando for o elemento LCP em todos os pontos de quebra.
3. Adicione fetchpriority=low aos elementos IMG que aparecem na janela inicial, mas não estão visíveis, como quando são diapositivos subsequentes de um carrossel.
4. Carregamento diferido:
   1. Aplica carregamento diferido aos elementos IMG com base em se aparecem ou não na janela inicial de qualquer ponto de quebra.
   2. Implementa o carregamento diferido de imagens de fundo de CSS adicionadas através de atributos style em linha.
   3. Carrega em diferido os elementos VIDEO através dos atributos adequados com base na sua presença na janela inicial. Se um VIDEO for o elemento LCP, tem preload=auto. Se estiver na janela inicial, mantém-se o valor por omissão preload=metadata. Se não estiver na janela inicial, tem preload=none. Os vídeos carregados em diferido também terão os atributos iniciais preload, autoplay e poster repostos quando o VIDEO entrar na janela.
5. Tamanhos de imagem responsivos:
   1. Calcule o atributo sizes utilizando as larguras de uma imagem recolhidas a partir das métricas de URL para cada ponto de quebra (quando não for carregada em diferido, pois, nesse caso, é gerido por sizes=auto).
   2. Assegure que sizes=auto está definido nos elementos IMG após definir correctamente o carregamento diferido (acima).
6. Reduza o tamanho da imagem poster de um VIDEO do tamanho completo para um tamanho adequado à largura máxima do vídeo (em ecrã de computador).

This plugin requires the Optimization Detective plugin as a dependency. Please refer to that plugin for additional background on how this plugin works as well as additional developer options.

👉 Atenção: Este plugin optimiza as páginas para visitantes reais e depende destes para as optimizações. Por isto, não verá as optimizações aplicadas imediatamente após activar o plugin. Aguarde que as métricas de URL sejam recolhidas para visitas em dispositivos móveis e computador. E, como os utilizadores administradores não são, normalmente, visitantes comuns, por omissão estas optimizações não são aplicadas aos administradores.

O seu site deve ter a API REST acessível para visitantes do frontend não autenticados, pois é assim que são recolhidas as métricas sobre como uma página deve ser optimizada. Actualmente, não existem definições nem interface de utilizador para este plugin, pois foi concebido para funcionar sem qualquer configuração.