Aprendizados sobre a adoção do atributo de carregamento padronizado
Meu objetivo com esta postagem é persuadir os desenvolvedores e colaboradores da plataforma de CMS (ou seja, as pessoas que desenvolvem os núcleos do CMS) de que agora é o momento de implementar a compatibilidade com o recurso de carregamento lento de imagens no nível do navegador. Também vou compartilhar recomendações sobre como garantir experiências do usuário de alta qualidade e permitir a personalização de outros desenvolvedores ao implementar o carregamento lento. Essas diretrizes vêm de nossa experiência de adição de suporte ao WordPress, bem como ajudando Joomla, Drupal e TYPO3 a implementar o recurso.
Não importa se você é um desenvolvedor de uma plataforma de CMS ou um usuário de CMS (ou seja, uma pessoa que cria sites com um CMS), use esta postagem para saber mais sobre os benefícios do carregamento lento no nível do navegador. Confira a seção Próximas etapas para sugestões sobre como incentivar sua plataforma de CMS a implementar o carregamento lento.
Contexto
No ano passado, o
carregamento lento de imagens e iframes usando o atributo loading
se tornou parte do padrão HTML WHWG
e
teve um aumento na adoção por vários navegadores.
Esses marcos, no entanto, estabelecem apenas as bases para uma Web mais rápida e econômica.
Agora, ele está no ecossistema da Web distribuído para usar o atributo
loading.
Os sistemas de gerenciamento de conteúdo
geram cerca de 60% dos sites.
Portanto, essas plataformas desempenham um papel vital na entrada da adoção de recursos modernos do
navegador na Web. Com alguns CMSs de código aberto conhecidos, como
WordPress,
Joomla e
TYPO3, já
implementaram o suporte para o atributo loading em imagens, vamos dar uma olhada
nas abordagens e nas conclusões relevantes para adotar o recurso
também em outras plataformas de CMS. O carregamento lento de mídia é um importante recurso de desempenho
da Web que pode beneficiar os sites em grande escala. Por isso, recomendamos adotá-lo
no nível principal do CMS.
O caso da implementação do carregamento lento
Padronização
A adoção de recursos de navegador não padronizados nos CMSs facilita os testes difundidos e pode indicar áreas de melhoria. No entanto, o consenso geral entre os CMSs é que, desde que um recurso do navegador não esteja padronizado, ele precisa ser implementado, de preferência, na forma de uma extensão ou plug-in para a plataforma em questão. Um recurso só pode ser considerado para adoção no núcleo da plataforma depois de padronizado.
Suporte ao navegador
O suporte do navegador ao recurso é uma preocupação semelhante: a maioria dos usuários do CMS pode se beneficiar do recurso. Se houver uma porcentagem considerável de navegadores em que o recurso ainda não é compatível, o recurso precisará garantir que não haja nenhum efeito adverso para eles.
Limites de distância da janela de visualização
Uma preocupação comum com implementações de carregamento lento é que elas, em princípio, aumentam a probabilidade de uma imagem não ser carregada quando se torna visível na janela de visualização do usuário, porque o ciclo de carregamento começa em um estágio posterior. Ao contrário das soluções anteriores baseadas em JavaScript, os navegadores tratam isso de maneira conservadora e, além disso, podem ajustar a abordagem com base em dados reais da experiência do usuário, minimizando o impacto. Assim, o carregamento lento no nível do navegador é seguro para ser adotado pelas plataformas de CMS.
Recomendações de experiência do usuário
Exigir atributos de dimensão em elementos
Para evitar mudanças de layout, é
recomendável há algum tempo que o
conteúdo incorporado, como imagens ou iframes, sempre inclua os atributos de dimensão width e height,
para que o navegador possa inferir a proporção desses elementos antes de realmente
carregá-los. Essa recomendação é relevante independentemente de um elemento
estar sendo carregado lentamente ou não. No entanto, devido à probabilidade 0,1% maior de uma imagem não ser totalmente carregada na janela de visualização, ela se torna um pouco mais aplicável com o carregamento lento.
Preferencialmente, os CMSs devem fornecer atributos de dimensão em todas as imagens e iframes. Se isso não for possível para todos esses elementos, é recomendável ignorar as imagens de carregamento lento que não fornecem esses dois atributos.
Evitar o carregamento lento de elementos acima da dobra
No momento, recomendamos que os CMSs adicionem apenas atributos loading="lazy" a
imagens e iframes posicionados abaixo da dobra para evitar um atraso
na métrica Maior exibição de conteúdo, que em alguns casos pode ser
significativo conforme descoberto em julho de 2021. No entanto, é
necessário reconhecer que é complexo avaliar a posição de um elemento
em relação à janela de visualização antes do processo de renderização. Isso se aplica especialmente
se o CMS usar uma abordagem automatizada para adicionar atributos loading. No entanto, mesmo
com base na intervenção manual, vários fatores precisam ser considerados, como os diferentes tamanhos
e proporções da janela de visualização. Ainda assim, é altamente recomendável omitir imagens principais e outras imagens ou iframes que provavelmente aparecem acima da dobra sejam carregados lentamente.
Evitar um substituto de JavaScript
Embora o JavaScript possa ser usado para
fornecer carregamento lento a navegadores que (ainda) não oferecem suporte ao atributo loading,
esses mecanismos sempre dependem da remoção inicial do atributo src de uma
imagem ou iframe, o que causa um atraso para os navegadores que oferecem suporte ao
atributo. Além disso, implementar essa solução baseada em JavaScript nos front-ends de um CMS de grande escala aumenta a área de superfície para possíveis problemas, e é por isso que nenhum CMS importante adotou o carregamento lento no núcleo antes do recurso de navegador padronizado.
Recomendações técnicas
Ativar o carregamento lento por padrão
A recomendação geral para CMSs que implementam o carregamento lento no nível do navegador é ativá-lo por padrão, ou seja, loading="lazy" precisa ser adicionado a imagens e iframes, de preferência apenas para elementos que incluem atributos de dimensão.
Ter o recurso ativado por padrão resultará em maior economia de recursos de rede do que se precisasse ser ativado manualmente, por exemplo, por imagem.
O máximo possível é que loading="lazy"
só pode ser adicionado a elementos que provavelmente aparecem abaixo da dobra.
Embora seja complexo implementar esse requisito em um CMS devido à falta de reconhecimento do lado do cliente e de vários tamanhos de janela de visualização, recomendamos pelo menos usar heurística aproximada para omitir elementos como imagens principais que provavelmente vão aparecer acima da dobra do carregamento lento.
Permitir modificações por elemento
Embora loading="lazy" precise ser adicionado a imagens e iframes por padrão, é
crucial permitir a omissão do atributo em determinadas imagens, por exemplo, para
otimizar para LCP. Se o público do CMS for, em média, considerado mais experiente com tecnologia, isso pode ser um controle de interface exposto para cada imagem e iframe que permita desativar o carregamento lento para esse elemento.
Como alternativa ou complementar, uma API pode ser exposta a desenvolvedores de terceiros para que eles possam fazer mudanças semelhantes por meio do código.
O WordPress, por exemplo, permite pular o atributo loading para
todo contexto ou tag HTML
ou para um
elemento HTML específico no conteúdo.
Retrofit de conteúdo atual
De modo geral, existem duas abordagens para adicionar o atributo loading a
elementos HTML em um CMS:
- Adicione o atributo do editor de conteúdo no back-end, salvando-o persistentemente no banco de dados.
- Adicione o atributo rapidamente ao renderizar conteúdo do banco de dados no front-end.
É recomendável que o CMS adicione o atributo imediatamente ao renderizar, para trazer também os benefícios do carregamento lento a qualquer conteúdo existente. Se o atributo puder ser adicionado apenas pelo editor, apenas partes do conteúdo novas ou recentemente modificadas receberiam os benefícios, reduzindo dessa forma o impacto do CMS na economia de recursos de rede. Além disso, adicionar o atributo em tempo real vai permitir modificações futuras, caso os recursos do carregamento lento no nível do navegador sejam expandidos.
No entanto, a adição imediata do atributo precisa abranger um atributo
loading potencialmente existente em um elemento e permitir que esse atributo tenha
precedência. Dessa forma, o CMS ou uma extensão dele também poderia implementar a
abordagem baseada no editor sem causar um conflito com atributos duplicados.
Otimizar o desempenho do lado do servidor
Ao adicionar o atributo loading a um conteúdo em tempo real usando, por exemplo, um
middleware do lado do servidor, é importante considerar a velocidade. Dependendo do CMS, o atributo pode ser adicionado por travessia de DOM ou expressões regulares, sendo esta última recomendada para desempenho.
O uso de expressões regulares precisa ser mínimo. Por exemplo, um único regex
que coleta todas as tags img e iframe no conteúdo, incluindo os
atributos delas, e adiciona o atributo loading a cada string de tag, conforme
aplicável. O WordPress, por exemplo, pode chegar a
ter uma única expressão regular geral para executar várias operações instantâneas a determinados elementos,
em que adicionar loading="lazy" é apenas um, usando uma única expressão regular
para facilitar vários recursos. Além disso, essa forma de otimização é outro motivo pelo qual é recomendado adotar o carregamento lento no núcleo de um CMS em vez de uma extensão. Isso permite uma melhor otimização de desempenho do lado do servidor.
Próximas etapas
Veja se já existe um tíquete de solicitação de recurso para adicionar suporte ao recurso no CMS ou abra um novo, caso ainda não tenha. Use referências a esta postagem conforme necessário para apoiar sua proposta.
Envie um tweet para mim (felixarntz@) se tiver dúvidas ou comentários, ou para listar seu CMS nesta página, caso o suporte para carregamento lento no nível do navegador tenha sido adicionado. Se você encontrar outros desafios, também estou curioso para saber mais sobre eles para encontrar uma solução.
Se você desenvolve plataformas de CMS, estude como outros CMSs implementaram o carregamento lento:
Use os aprendizados da pesquisa e as recomendações técnicas desta postagem para começar a contribuir com código para seu CMS, por exemplo, na forma de um patch ou solicitação de envio.
Foto principal de Colin Watts no Unsplash.