Problema:

A um tempo atrás postei aqui pedindo uma ajuda com um site onePage que estava construindo em react, o problema do site é que ele carregava umas 10 imagens e mais uns 4 videos e mais uns 4 audios então tudo isso demorava pra carregar, foi ai que eu tive a ideia de fazer com que os outros elementos só fossem carregados depois que a tela inicial fosse carregada ja que é ela que o usuario ve primeiro.

Solução

Depois de tentar algumas sugestões como usar estados e promisses e não conseguir, o jeito mais pratico que achei foi usando uma api do propdio javascript chamada IntersectionObserver, se não me engano. essa api é bastante utilizada pra scroll infinito. Com ela eu coloquei a div sentinela depois da segunda sessão e só depos que o usuario chega nela o resto da pagina é carregado. agora quando o usuario entra no site demora menos de 0.2 segundos pra primeira informação aparecer, bem melhor que os 5 segundos de antes