reducir la carga de los archivos css innecesarios

[refielt]

Buenos dias, estoy desarrollando el responsive de un sitio web (para tablets y smarthphones).
esos archivos css pesan 80kbs aproximadamente.
para reducirlo la carga en el navegador eh echo lo siguientem, en un css principal importa el css respectivo de acuerdo a la anchura del navegador.

Código CSS:

@import url('media-tablets.css') screen and (max-width: 768px);
@import url('media-smarthphones.css') screen and (max-width: 640px);
 

dentro de los css media-tablets.css y media-smarthphones.css estan los estilos y sus respectivos media querys.

todo funciona bien, pero solo tengo una duda. estos archivos (media-tablets.css y media-smarthphones.css) se estan DESCARGANDO solo al momento de cumplir la condicional max-width o ya estan cargados y solo esta mostrando el css de acuerdo a la condicional.

la idea principal es reducir el tiempo de carga en smarthphones, tablets y desktop. para eso no deseo cargar documentos css innecesarios, gracias.

[refielt]

alguna persona con una respuesta por favor?