Aprendizados para adotar o atributo de carregamento padronizado
Meu objetivo com esta postagem é convencer os desenvolvedores e colaboradores da plataforma de CMS (ou seja, as pessoas que desenvolvem núcleos de CMS) que agora é a hora de implementar a compatibilidade com o recurso de carregamento lento de imagens no navegador. Também vou compartilhar recomendações sobre como garantir experiências de alta qualidade do usuário e ativar a personalização por outros desenvolvedores ao implementar o carregamento lento. Essas diretrizes vêm da nossa experiência em incluir suporte ao WordPress e de ajudar Joomla, Drupal e TYPO3 a implementar o recurso.
Independentemente de você ser um desenvolvedor de plataformas 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 nesse sistema. 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 WhatWG (link em inglês)
e
percebeu um uso cada vez maior em vários navegadores (links em inglês).
No entanto, esses marcos servem de base para uma
Web mais rápida e que economize recursos.
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 adoção de recursos modernos de navegadores para a Web. Como alguns CMSs de código aberto conhecidos, como
WordPress,
Joomla e
TYPO3, já
implementaram o suporte para o atributo loading nas imagens, vamos conferir
as abordagens deles e as conclusões relevantes para adotar o recurso
em outras plataformas de CMS também. A mídia de carregamento lento é um recurso importante de desempenho
da Web que pode beneficiar os sites em grande escala. Por isso, é recomendável adotá-la
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 em CMSs facilita testes generalizados e pode revelar possíveis áreas de melhoria. No entanto, o consenso geral entre CMSs é que, desde que um recurso do navegador não seja padronizado, ele deve ser implementado na forma de uma extensão ou plug-in para a respectiva plataforma. Somente uma vez padronizado, um recurso pode ser considerado para adoção no núcleo da plataforma.
Suporte ao navegador
A compatibilidade do navegador com esse recurso é semelhante: a maioria dos usuários do CMS poderá se beneficiar do recurso. Se houver uma porcentagem considerável de navegadores em que o recurso ainda não é compatível, o recurso vai precisar garantir que não tenha nenhum efeito adverso sobre eles.
Limites de distância da janela de visualização
Uma preocupação comum com as implementações de carregamento lento é que elas aumentam a probabilidade de uma imagem não ser carregada depois de ficar visível na janela de visualização do usuário, já que o ciclo de carregamento começa em uma etapa posterior. Ao contrário das soluções anteriores baseadas em JavaScript, os navegadores fazem isso de maneira conservadora. 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 plataformas de CMS.
Recomendações de experiência do usuário
Exigir atributos de dimensão nos elementos
Para evitar mudanças de layout, há uma
recomendação de longa data de 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 uma vez 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 pular 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
significativa como 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 o carregamento lento de imagens principais e outras imagens ou iframes que provavelmente vão aparecer acima da dobra.
Evitar um substituto JavaScript
Embora o JavaScript possa ser usado para
fornecer carregamento lento a navegadores que (ainda) não são compatíveis com o atributo loading,
esses mecanismos sempre dependem da remoção inicial do atributo src de uma
imagem ou iframe, o que causa um atraso nos navegadores que têm suporte para o
atributo. Além disso, o lançamento dessa solução baseada em JavaScript nos
front-ends de um CMS de grande escala aumenta a superfície de possíveis problemas.
Por isso, nenhum grande CMS adotou o carregamento lento 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, adicionar loading="lazy" a imagens e
iframes, de preferência
apenas para elementos que incluem atributos de dimensão.
A ativação por padrão do recurso resultará em uma maior economia de recursos
de rede do que se tivesse que ser ativado manualmente, por exemplo, por
imagem.
Na medida do possível, loading="lazy"
só pode ser adicionado a elementos que provavelmente aparecem abaixo da dobra.
Embora a implementação desse requisito possa ser complexa para um CMS devido à falta de reconhecimento do lado do cliente e a vários tamanhos de janela de visualização, é recomendável pelo menos usar heurística aproximada para omitir elementos como imagens principais que provavelmente aparecerão acima da dobra no 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, em
média, for considerado mais experiente em tecnologia, isso pode ser um controle de interface exposto para cada
imagem e iframe, permitindo a desativação do carregamento lento para esse elemento.
Como alternativa ou além disso, uma API pode ser exposta a desenvolvedores terceirizados para que eles possam fazer alterações semelhantes por meio do código.
O WordPress, por exemplo, permite pular o atributo loading para uma
tag HTML inteira ou contexto
ou para um
elemento HTML específico no conteúdo.
Conteúdo atual da Retrofit
De modo geral, há duas abordagens para adicionar o atributo loading a elementos HTML em um CMS:
- Adicione o atributo de dentro do editor de conteúdo no back-end, salvando-o persistente no banco de dados.
- Adicione o atributo rapidamente ao renderizar conteúdo do banco de dados no front-end.
Recomenda-se que o CMS adicione o atributo imediatamente ao renderizar, a fim de levar os benefícios do carregamento lento a qualquer conteúdo existente. Se o atributo pudesse ser adicionado apenas pelo editor, apenas conteúdos novos ou modificados recentemente receberiam os benefícios, reduzindo drasticamente o impacto do CMS na economia de recursos da rede. Além disso, adicionar o atributo imediatamente permite modificações futuras, caso os recursos de carregamento lento no nível do navegador sejam expandidos ainda mais.
Adicionar o atributo em tempo real precisa atender a 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 orientada pelo editor sem causar conflito com atributos duplicados.
Otimizar o desempenho do lado do servidor
Ao adicionar o atributo loading ao conteúdo em tempo real usando (por exemplo) um
middle do lado do servidor, a velocidade é uma consideração. Dependendo do CMS, o atributo pode ser adicionado por meio da travessia de DOM ou de expressões regulares, sendo que esta última é recomendada para fins de desempenho.
O uso de expressões regulares precisa ser mantido no mínimo. Por exemplo, uma única 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, vai até
ter uma única expressão regular geral para executar várias operações imediatas em determinados elementos,
das quais adicionar loading="lazy" é apenas uma, usando uma única expressão regular
para facilitar vários recursos. Além disso, essa forma de otimização é
outro motivo pelo qual adotar o carregamento lento no núcleo de um CMS é recomendado em vez de uma
extensão, porque permite uma melhor otimização do 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 seu CMS ou abra um novo, se ainda não houver. Use referências a esta postagem conforme necessário para embasar sua proposta.
Envie um tweet para mim (felixarntz@) se tiver dúvidas ou comentários, ou para listar seu CMS nesta página se o suporte para o carregamento lento no nível do navegador tiver sido adicionado. Se você encontrar outros desafios, tenho curiosidade de saber mais sobre eles para encontrar uma solução.
Se você desenvolve uma plataforma de CMS, estude como outros CMSs implementaram o carregamento lento:
Você pode usar os aprendizados de sua 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 uma solicitação de envio.
Foto principal de Colin Watts no Unsplash.