Fala Gabriel, tudo bem?
Você pode resolver essa questão de carregamento de vários arquivos, juntando o código de todos arquivos css em um único arquivo (isso quando for subir o projeto, não é necessário fazer isso enquanto estiver desenvolvendo) por exemplo:
Aqui podemos ver que estamos linkando vários arquivos css, que sim, podem projudicar no carregamento de uma página, visto que a pessoa baixará mais arquivos. E como iremos resolver isso? Simples, copiaremos cada código de cada arquivo css e vamos colar no arquivo style.css na ordem que iriamos linkar no htm (Para que não prejudique a especificação do css). Veja:
E por ai vai.... (Lembrando que estou utilizando códigos de css repetidos apenas como exemplo).
E você pode otimizar mais ainda, minifícando seus arquivos css. Mas o que seria isso? Minificar, seria retirar todos espaçamentos, quebra de linhas e comentarios com o intuíto de economizar bytes para o usuario. E como faremos isso? Primeiramente, separe o seu arquivo principal para que possa fazer as alterações nele (pois o que iremos gerar será ilegivel):
Lembrando, esse arquivo será o que iremos editar caso precise de alguma alteração no css, e depois minificar novamente.
Certo, agora que criamos a nossa cópia, iremos utilizar alguma ferramenta para fazer essa minificação, que nesse caso utilizaremos o CSS Minifier, que é bem simples de utilizar, basta colar o seu código css no campo Input Css:
E clicar em Minify, que será gerado nosso código css minificado:
Viu que o código que geramos é muito dificil de ler? Por isso criamos aquela cópia para que podemos fazer as edições nele.
Certo, agora que minificamos, clique em Copy to Clipboard para colar o código, e vamos substituir o código anterior do nosso arquivo style.css para esse que acabamos de copiar:
Pronto, agora vamos ver se realmente diminui de tamanho? Veja abaixo:
Nosso código do style.css anteriormente:
Nosso código style.css minificado:
Diminuiu cerca de um kB!
Agora que ja fizemos toda a noção otimização, vamos linkar somente esse style.css no nosso arquivo html:
Pronto! Agora a pessoa que acessar o seu site, baixará apenas um arquivo contendo todo o estilo do seu site e bem menor.
(Obs: Quando for preciso editar algo você utilizará a cópia que criamos, pois ela é mais fácil de ler (e lembre-se de linkar essa cópia no seu html enquanto estiver editando), depois da edição você faz todo processo novamente. E enquanto estiver desenvolvendo o projeto, não é necessário fazer essa otimização, você pode se preocupar com isso quando for públicar o projeto.)
Espero ter ajudado, bons estudos e caso ficar com alguma dúvida pode contar com a gente :D
