Aprimoramento de velocidade à custa de não trabalhar com JS desativado
Eu tenho uma galeria de imagens que atualmente carrega as imagens usando tags img padrão e, como possui muitas imagens grandes, carrega bastante devagar.
Eu posso acelerar as coisas fazendo com que o script da galeria carregue dinamicamente as imagens após o carregamento da página. Eu testei isso e há um ganho de desempenho significativo. O problema é que, dessa maneira, a imagem não é carregada se o usuário tiver o JS desativado.
Portanto, a pergunta é: vale a pena obter desempenho às custas de não ter a página funcionando se o JS estiver desativado?
Nesse caso específico, acho que vou usar a tag noscript, mas e se eu não tivesse controle da saída html (digamos em um CMS).
Algumas reflexões rápidas:
- Redesenhe sua interface do usuário para que você não precise carregar mais que N imagens. Por exemplo, introduza paginação.
- Muitos navegadores processam apenas imagens visíveis para o usuário. Considere ocultar as outras imagens movendo-as para fora da tela ou em uma div com excesso: oculto ou algo assim.
- Carregue as primeiras N imagens no carregamento de página e depois as demais. O carregamento das imagens restantes exigiria javascript, e você poderia adicionar uma tag noscript que adiciona paginação para os poucos usuários que não têm o JS ativado.
- Dependendo do tipo de imagem com a qual você está lidando, combine as imagens em uma planilha do Sprite e carregue-as como imagens de fundo usando a posição de fundo no CSS para mostrar apenas as partes certas. O tempo de carregamento inicial será alto, mas armazenável em cache.
Por fim, não sei responder se o desligamento do JS é uma troca valiosa, porque não sei qual é o seu público. Eu precisaria de mais informações. Na maioria dos casos, nos sites em que trabalhei, tendemos a melhorar progressivamente. Portanto, o terceiro exemplo da minha lista seria o que eu provavelmente usaria.
E se, em vez de exigir que o JS acelere o carregamento da imagem, você carregue as imagens no final de outra página para que, quando desejar visualizar a galeria, elas já estejam carregadas. Você só quer garantir que as imagens tenham todo o conteúdo importante e que use os mesmos nomes para que possam armazenar em cache.
Se você deseja manter o carregamento com JS, recomendo verificar primeiro o JS e usar a carga dinâmica, se eles suportarem JS, e voltar a um padrão se eles não tiverem JS.
Você pode fazer isso progressivamente. Ou seja, o HTML inicial gera tags IMG, como acontece agora. Mas, imediatamente após o carregamento, seu jQuery é acionado e substitui dinamicamente as tags IMG pelos carregadores personalizados. Melhor dos dois mundos.
Até as grandes empresas estão começando a exigir Javascript. Por exemplo, se você tiver o Javascript desativado no IE, sabia que não pode nem baixar o Google Chrome? O botão Accept and Install Não funciona. Eles simplesmente mostram este pedaço de texto na parte superior da tela:
Você precisa de um navegador compatível com JavaScript para baixar este software. Clique aqui para obter instruções sobre como habilitar o JavaScript no seu navegador.
Pessoalmente, sinto que o requisito Javascript é um erro da parte deles nesse cenário, mas discordo.
É claro que depende do seu público, mas nos últimos dois anos eu também desenvolvi várias interfaces da web que exigem que o Javascript funcione.
A única preocupação restante é SEO. Se você deseja que as imagens da sua galeria sejam indexadas pelo Google, será necessário que elas apareçam no HTML.
A pergunta "E se eles tiverem o Javascript desativado" é uma pergunta que deve permanecer por si mesma. Embora você deva garantir que seu aplicativo/site ainda possa ser usado com o JS desativado, também pense em quem é seu público. Honestamente - é 2010 e os desenvolvedores da web nem precisam pensar sobre esse assunto (não preciso mais).
Use a análise para descobrir se seus usuários têm o JS ativado/desativado. Se menos de 5% dos usuários nem perdem tempo com uma solução alternativa.