Melhorar o "time to usable", ou em outras palavras o intervalo desde quando um usuário solicita uma página até quando ele pode interagir significativamente com ela, é crucial para aprimorar a experiência do usuário. Vamos explorar estratégias eficazes para alcançar um tempo mais rápido até o uso. Comece focando no conteúdo que o usuário vê primeiro. Isso significa carregar elementos essenciais imediatamente e adiar componentes não críticos. Por exemplo, você poderia tentar implementar lazy loading. Já cobrimos lazy loading, mas aqui está um exemplo de lazy load de imagens como um reforço:

<img src="image.jpg" loading="lazy" alt="Description">

Tudo o que você precisa fazer é adicionar o atributo loading="lazy" às tags de imagem. Isso adia o carregamento das imagens até que elas sejam necessárias, normalmente quando entram na viewport do usuário. Ao carregar imagens e vídeos somente quando eles entram na viewport, estamos conservando largura de banda e também acelerando a renderização inicial. Normalmente, uma página da web carrega todas as imagens de uma vez, até aquelas que não estão visíveis na tela. Com o lazy loading, as imagens abaixo da dobra, ou seja, fora da tela, são carregadas apenas quando o usuário rola a página até elas. E aqui está um exemplo de lazy load de iframes:

<iframe src="video.html" loading="lazy"></iframe>

Você pode aplicar o mesmo atributo que aplicou antes, mas desta vez aos iframes e o mesmo conceito será aplicado. Você também pode usar o atributo defer para atrasar o JavaScript não crítico até depois do carregamento inicial da página. Aqui está um exemplo de como fazemos exatamente isso:

<script src="non-critical.js" defer></script>

Você também pode considerar minimizar recursos que bloqueiam a renderização. Recursos que bloqueiam a renderização atrasam a página de se tornar interativa. Para evitar isso, você pode tentar carregar o CSS de forma assíncrona. Para CSS não crítico, use o atributo media para carregar folhas de estilo condicionalmente. Here is an example of us doing just that:

<link rel="stylesheet" href="print.css" media="print">

Ao especificar o valor de mídia como print, o print.css será carregado apenas quando a página for impressa ou visualizada em tela. No próximo exemplo, ao passar min-width: 800px como valor para o atributo media, estamos dizendo que queremos que o desktop.css seja carregado apenas para telas com largura maior que 800px:

<!-- This stylesheet is only loaded on screens wider than 800px -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 800px)">

Isso economiza largura de banda ao pular estilos desnecessários. Então, em conclusão, ao implementar essas estratégias, você pode reduzir significativamente o "time to usable" do seu site, garantindo que os usuários possam interagir com seu conteúdo rapidamente.