Otimização de upload de imagem

Olá Habr! Apresento a você a tradução do artigo “Como otimizar o carregamento de imagens no seu site” .

Se o site tiver muitas imagens bonitas, isso é ótimo, mas elas podem degradar significativamente o tempo de carregamento e, como resultado, o SEO sofrerá, e muitos usuários fecharão o site antes do carregamento. Muitas vezes acontece que vários megabytes de imagens são baixados simplesmente para mostrar o controle deslizante na página principal.

Imagine que você acessa esse site por meio de uma Internet móvel lenta, pode levar muito tempo e a maioria dos usuários nessa situação simplesmente fecha o site mesmo antes de fazer o download. Uma boa maneira de testar isso é aproveitar a capacidade de limitar a velocidade da Internet através do Chrome Devtools .

O problema

O problema é que muitas vezes acontece que o próprio conteúdo já está carregado e as imagens ainda estão carregando. Como resultado, o usuário pode ver o espaço vazio onde as imagens são carregadas lentamente. Claramente não é o que você gostaria.

No exemplo abaixo, criei um site simples com uma imagem de fundo que pesa 4,8 MB. Como você pode ver, o DOM inicializou em 1,14 segundos, ou seja, de fato, o usuário vê o conteúdo após 1,14 segundos, o que é muito bom para a Internet 3G. No entanto, a imagem de fundo é carregada em 27,32 segundos. Durante esse período, o usuário já pode sair do seu site.



E não apenas a experiência do usuário sofre com isso. Em 2010, o Google anunciou que a velocidade de download é um dos fatores em seu algoritmo de classificação e acho que, no futuro, esse fator se tornará cada vez mais importante.

Solução

Então, como resolver esse problema? Bem, para iniciantes, podemos apenas comprimir nossa imagem de plano de fundo usando várias ferramentas. Por exemplo, TinyPNG , ImageOptimizer ou JPEGmini . Essa será uma vitória fácil e reduzirá o tempo de inicialização para ~ 10 segundos. E embora pareça um grande passo na decisão, mas 10 segundos ainda é demais.

A próxima etapa pode ser fazer o download da imagem stub antes de carregar a imagem original. Um esboço é uma versão da imagem original, mas com baixa resolução. Quando criamos essa imagem, reduzimos a resolução de 7372x4392 pixels para 20x11. Como resultado, o tamanho da imagem é reduzido de 4,8 MB para 900 bytes.



Isso reduzirá a velocidade de download de 10 segundos para 550 milissegundos. Mas agora, como pano de fundo, temos uma imagem borrada de baixa resolução. Essa é uma ótima solução enquanto a página carrega os primeiros segundos, mas ainda queremos mostrar aos usuários a imagem original com alta resolução.

Para fazer isso, primeiro precisamos baixar a imagem de baixa resolução e, só então, de forma assíncrona em segundo plano, carregar o original de alta resolução e, quando a versão de alta resolução é carregada, podemos colocá-la no lugar da imagem de stub. Para isso, usei o código abaixo antes.

(() => { 'use strict'; // Page is loaded const objects = document.getElementsByClassName('asyncImage'); Array.from(objects).map((item) => { // Start loading image const img = new Image(); img.src = item.dataset.src; // Once image is loaded replace the src of the HTML element img.onload = () => { item.classList.remove('asyncImage'); return item.nodeName === 'IMG' ? item.src = item.dataset.src : item.style.backgroundImage = `url(${item.dataset.src})`; }; }); })(); 

Esse código procura elementos com a classe asyncImage , após o qual carrega todas as imagens especificadas no atributo data-src e, assim que a imagem é carregada, substitui src pelo elemento <img> e os elementos restantes definem a imagem de plano de fundo via css.

 <div class="asyncImage" data-src="/images/background.jpg"> ... </div> 

ou

 <img class="asyncImage" src="/images/background-min.jpg" data-src="/images/background.jpg" alt="Beautiful landscape sunrise"> 

Como o script remove a classe do elemento após o carregamento da imagem, podemos fazer animações bonitas usando CSS, se desejado. Por exemplo, a animação de entrada / saída fará o esboço desaparecer quando a imagem for substituída.

Conclusão

Então, o que conseguimos? Melhoramos a experiência do usuário, aceleramos o carregamento do site, o tornamos mais acessível aos usuários sem Internet rápida e, possivelmente, melhoramos nossa classificação no Google. Essas são grandes melhorias para uma mudança tão pequena.



Como você pode ver, baixamos o stub por 570 milissegundos, assim que ele for carregado, o usuário verá uma versão em baixa resolução da nossa imagem original e, assim que a imagem original carregar, substituirá a versão em baixa resolução.

Veja um exemplo de trabalho aqui.

Preguiçoso carregando imagens

Se você deseja ir além e melhorar ainda mais o carregamento de imagens, pode ser útil usar o carregamento lento de imagens.

O carregamento lento é uma técnica em que as imagens fora da área visível da página não são carregadas até que a imagem se aproxime da borda da área visível.

Sua vantagem é que menos dados serão carregados durante o carregamento inicial, pois muitas vezes apenas uma pequena parte das imagens é exibida na área visível da página e o restante pode ser baixado enquanto o usuário rola. Um observador de interseção é mais adequado para implementar isso.