Esta es una gran pregunta y algo que me preguntaba también. La herramienta de velocidad de página de Google realmente no te ayuda con la advertencia. Sería bueno si hubiera una manera de diferir CSS como puedes con JS. De esa manera, puede especificar una hoja de estilo para cargar después de la presentación inicial de la página.
Una cosa que iba a intentar es usar Grunt para compilar los archivos Sass en hojas de estilo CSS más específicas:
Opción 1
- Al decidir qué cobrar por el desarrollo de un sitio web personalizado de WordPress, ¿aumenta el costo de los complementos que utiliza?
- ¿Dónde hay muchas API que se ofrecen para trabajar con JavaScript?
- ¿Qué plataforma cms dirías que es WordPress con esteroides?
- ¿Cómo puedo configurar un servidor web en mi computadora y luego comenzar a alojar mis sitios web?
- ¿Qué debo aprender para ser un desarrollador back-end o front-end?
- primary.css: todo lo que necesita para mostrar la página de inicio (cuadrículas, tipografía, encabezado y pie de página)
- dary.css: CSS, tablas, etc. de la página interior (use javascript para agregar una hoja de estilo secundaria después de cargar css crítico) Optimización de entrega de CSS: ¿cómo diferir la carga de css?
- sm.css: estilos específicos de puntos de interrupción pequeños
- md.css: estilos específicos de punto de interrupción medio
- lg.css: estilos específicos de puntos de interrupción grandes
- xl.css: estilos específicos de punto de interrupción extragrande
- print.css – imprime estilos específicos
<! – agregar a DOM después de cargar la ventana? ¿o funcionaría tener esto antes del cierre ?
->
opcion 2
- en línea en la página de inicio: todo lo que necesita para mostrar la página de inicio (cuadrículas, tipografía, encabezado-pie de página). Pero no sé cómo usar Grunt para inyectar esto en el HTML y realmente no quiero copiar y pegar cada vez.
- main.css – página interior CSS, tablas, etc.
- sm.css: estilos específicos de puntos de interrupción pequeños
- md.css: estilos específicos de punto de interrupción medio
- lg.css: estilos específicos de puntos de interrupción grandes
- xl.css: estilos específicos de punto de interrupción extragrande
- print.css – imprime estilos específicos
/ * Encabezado en línea, pie de página, cuadrículas, tipografía, botones * /
Sitios referenciados:
Renderizar bloqueando CSS | Como arreglarlo
Renderizar bloqueando CSS | Fundamentos web: desarrolladores de Google
