Image Prioritizer

Descrição

Este plugin otimiza o carregamento de imagens (e vídeos) com priorização para melhorar a métrica Maior exibição de conteúdo (LCP), carregamento diferido e a seleção de tamanhos de imagem mais precisa.

No momento, as otimizações incluem:

1. Adiciona links de pré-carga fetchpriority=high específicos para pontos de quebra (como elementos LINK[rel=preload] e cabeçalhos de resposta link) nos URLs de imagens de elementos LCP (maior tempo de carga):
   1. Um elemento IMG, incluindo os atributos srcset/sizes fornecidos como imagesrcset/imagesizes no LINK.
   2. O primeiro elemento SOURCE com um atributo type num elemento PICTURE. (Não são suportados elementos PICTURE com direção de arte através de “media queries”.)
   3. Um elemento com background-image aplicado via atributo style em linha.
   4. Um elemento com background-image aplicada com uma folha de estilo (quando a imagem é de origem autorizada).
   5. Uma imagem poster de um elemento VIDEO
2. Garante que fetchpriority=high só é adicionado a um IMG quando for o elemento LCP em todos os pontos de quebra.
3. Adiciona fetchpriority=low às tags IMG que aparecem na viewport inicial, mas não são visíveis, como quando são slides subsequentes de um carrossel.
4. Carregamento diferido:
   1. Aplica o carregamento diferido aos elementos IMG de acordo com sua presença ou não na janela inicial em qualquer ponto de quebra.
   2. Implementa o carregamento diferido de imagens de fundo adicionadas através de atributos style de CSS em linha.
   3. Carrega a posteriori 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 padrão preload=metadata. Se não estiver na janela inicial, recebe preload=none. Os vídeos carregados tardiamente também terão os atributos iniciais preload, autoplay e poster repostos quando o VIDEO entrar na janela.
5. Tamanhos de imagem responsivos:
   1. Calcula o atributo sizes usando as larguras de uma imagem coletada de URL Metrics para cada ponto de quebra (quando não carregado de forma tardia, pois neste caso é tratado com sizes=auto).
   2. Garante que sizes=auto está definido nos elementos IMG após definir corretamente o carregamento diferido (acima).
6. Reduz o tamanho da imagem poster de um VIDEO do tamanho completo para um tamanho adequado à largura máxima do vídeo (em telas maiores).

Este plugin depende do plugin Optimization Detective. Consulte a documentação desse plugin para obter informações adicionais sobre como ele funciona, bem como opções adicionais para desenvolvedores.

👉 Atenção: Este plugin otimiza as páginas para visitantes reais e depende destes para as otimizações. Por isto, você não verá as otimizações aplicadas imediatamente após a ativação do plugin. Aguarde as URL Metrics serem colhidas, tanto para visitas em dispositivos móveis como para computadores. E, como normalmente os administradores não são visitantes comuns, por padrão, estas otimizações não são aplicadas a estes usuários.

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.