Depois de ver todos os avisos sobre o uso do Cloudflare e sites com muitas imagens, decidi aceitar esse desafio em um pequeno projeto pessoal em que tenho trabalhado. Embora tenha tido sucesso com o Cloudflare, estou com dificuldades para entender por que as imagens do meu tema não carregam antes do término da execução do JavaScript (parece não ser um problema de CDN).
Existe alguma maneira de fazer as imagens carregarem mais cedo (simultaneamente com JS/CSS, ou apenas durante a execução do JS) ou isso é impossível? Seria uma priorização necessária?
Abaixo estão os resultados do webpagetest.org. Meu foco é a grande lacuna entre ~2,3s, quando o último script JS termina de carregar, e ~3,4s, quando as imagens começam a ser baixadas.
Configuração
Link: https://investorcommunity.org
Tema: Graceful
Servidor: DO Droplet (sem cache adicional ou S3)
CDN: Cloudflare (versão gratuita, com “Rocket Loader” desativado para evitar interferência no JS). Vale ressaltar que desativar o Cloudflare não parece afetar esse problema específico.
Essa lacuna corresponde ao período de execução do JS, quando terminamos de baixar o aplicativo Discourse EmberJS e iniciá-lo. Temos várias pessoas trabalhando na modernização do aplicativo EmberJS e começaremos a colher os benefícios desse trabalho este ano.
Mas, como se trata de um aplicativo JavaScript, sempre haverá alguma execução de JS em andamento, então eu não me preocuparia muito com isso se você já estiver decidido a usar o Discourse para sua comunidade.
Existe alguma maneira de iniciar as transferências de imagens do tema em paralelo com a inicialização desse script, para que as imagens sejam pré-carregadas e exibidas assim que o JS for concluído? Ou o script JS é um pré-requisito obrigatório para saber quais imagens buscar desde o início?
Animado para ouvir sobre o EmberJS — ansioso pelas grandes melhorias que vocês continuam lançando!
