A melhor maneira de carregar imagens lentamente para desempenho máximo

O carregamento lento de imagens é uma das abordagens mais populares de otimização de sites devido à implementação relativamente fácil e grande ganho de desempenho. Com o carregamento lento , carregamos as imagens de forma assíncrona, o que significa que carregamos as imagens apenas quando elas aparecem na janela de visualização do navegador.

Quase um ano atrás, o carregamento lento nativo de imagens e iframes foi lançado para o Chrome e outros navegadores importantes. O objetivo do recurso é fornecer aos navegadores controle quando solicitar um recurso de imagem ou iframe, o que torna os trabalhos de desenvolvimento um pouco mais fáceis. Até aquele ponto, a única opção era usar vários plug-ins JavaScript que monitoravam as mudanças da janela de visualização e carregavam recursos dinamicamente. Agora os navegadores podem fazer isso nativamente!

No momento em que este artigo foi escrito, cerca de 73% dos navegadores usados ​​atualmente suportam esse recurso, o que não é ruim, mas não queremos tornar o conteúdo da imagem do site inacessível e inutilizável para 27% dos usuários em potencial.

Portanto, isso nos coloca em uma situação interessante:

• Queremos usar os benefícios do carregamento lento nativo para navegadores que o suportam
• Queremos usar um plugin JS como alternativa para o carregamento lento para navegadores que não o suportam
• Não queremos carregar o plugin JS de carregamento lento se o navegador suportar carregamento lento nativo.
• O suporte imge os sourceelementos são obrigatórios

O atributo “carregando”

Temos três valores possíveis que podemos usar para o loadingatributo.

• auto– valor padrão. O mesmo que não definir o atributo.
• eager – carregue o recurso imediatamente.
• lazy – carregue o recurso assim que estiver na janela de visualização.

Embora dependa do caso de uso, geralmente queremos usar eagervalor para recursos acima da dobra e lazyvalor para recursos abaixo da dobra.

Abordagem moderna

Precisamos escrever um script que será executado após o documento HTML ser carregado. Usei Jekyll e adicionei o script como um include que foi anexado ao final do bodyelemento HTML . Esta é a maneira mais eficaz de executar funções JavaScript para evitar o bloqueio de renderização.

Marcação de imagem

Queremos que nossa função JavaScript inicie o processo de carregamento de imagem com base no suporte ao recurso nativo de carregamento lento. Para conseguir isso, adicionaremos o caminho às nossas imagens para em data-srcvez de src. Mas não devemos deixar em srcbranco, então usaremos um espaço reservado para imagem transparente de 1x1px. Nossa marcação para imgelementos será parecida com isto

 <img 
    src="/path/to/placeholder/image.png"
    data-src="/path/to/full/image.jpg"
    alt="Image description"
    class="lazyload"
    loading="lazy"
/>

Observe que class="lazyload"é usado pelo plug-in lazyload fallback. Eu usei lazysizes que usa esse nome de classe específico.

Além disso, queremos oferecer suporte a pictureelementos que contenham vários sourceelementos e imgelementos substitutos .

<picture>
    <source data-srcset="path/to/image.webp" type="image/webp" />
    <source data-srcset="path/to/image.jpg" />
    <img loading="lazy" 
        class="lazyload"
        src="path/to/placeholder/image.png"
        data-src="path/to/image.jpg"
        alt="Image description"
    />
</picture>

Detecção de recursos

Precisamos detectar se o navegador do usuário suporta carregamento lento nativo. Felizmente, podemos fazer isso usando JavaScript diretamente.

   if ("loading" in HTMLImageElement.prototype) {
      /* Native lazy loading is supported */
   } else {
      /*  Native lazy loading is not supported */
   }

Código JavaScript final

Para o carregamento lento nativa , só precisamos de atribuir data-srcvalor a srcvalor para imge sourceelementos e deixe a alça navegador do resto.

Para navegadores não suportados , precisamos apenas carregar o plugin JavaScript e, opcionalmente, executá-lo (se não for feito automaticamente). Eu usei lazysizes, mas qualquer plugin funcionará, apenas certifique-se de que a marcação está correta (nomes de classes, elementos de dados, etc.).

Portanto, o código JavaScript final será semelhante a este:

<script>
    if ("loading" in HTMLImageElement.prototype) {
        var images = document.querySelectorAll('img[loading="lazy"]');
        var sources = document.querySelectorAll("source[data-srcset]");
        sources.forEach(function (source) {
            source.srcset = source.dataset.srcset;
        });
        images.forEach(function (img) {
            img.src = img.dataset.src;
        });
    } else {
        var script = document.createElement("script");
        script.src = "/link/to/lazyload.js";
        document.body.appendChild(script);
    }
</script>

Melhor desempenho e pontuação do Lighthouse

Usei um plugin JavaScript para carregamento lento de imagens para todos os navegadores. Depois de implementar essa abordagem moderna, eliminei um arquivo JavaScript que está sendo carregado e analisado no carregamento do site, o que, por sua vez, aumentou minha pontuação do Lighthouse e o desempenho geral!

Mais técnicas de otimização de imagem para desempenho máximo

O carregamento lento é uma das muitas maneiras de otimizar o desempenho da imagem na web. Escrevi postagens detalhadas que cobrem outras técnicas e aspectos importantes da otimização de imagens para a web, como formatos de imagem específicos da web, usando CDN, imagens progressivas, etc.