Cuando CSS bloquea

Tim Kadlec :

Un patrón particular [para cargar CSS no crítico] que he visto es el patrón de precarga/polyfill. Con este enfoque, usted carga las hojas de estilo como precargas y luego usa sus onloadeventos para volver a cambiarlas a una hoja de estilo una vez que el navegador las tenga listas.

Entonces estás intentando hacer que tu hoja de estilo sea más asincrónica, pero esto causa dos grandes problemas:

1. Has aumentado la prioridad de descarga más que cualquier otro recurso.
2. También bloqueó el analizador HTML (debido al polyfill como un script en línea).

Firefox hace algo elegante para evitar el problema número 2 en este caso particular, pero afecta a todos los demás navegadores.

Nunca he tenido buena suerte con técnicas sofisticadas para engañar al navegador para que obtenga patrones de descarga/presentación teóricamente mejores. Soy una especie de hojas de estilo en la cabeza, scripts al final del cuerpo , pero sé que la web es un lugar complicado. De hecho, en un vistazo rápido, veo que Jetpack está insertando un script en línea en mi archivo head, por lo que eso también afectaría mi carga, excepto que lo cargan con un typescript ofuscado hasta que se ejecute y lo cambie más tarde, probablemente para evitar este problema exacto.

De todos modos, el consejo de Tim:

• Si está utilizando loadCSS con el patrón de precarga/polyfill, cambie al printpatrón de hoja de estilo.

• Si tiene hojas de estilo externas que está cargando normalmente (es decir, como un enlace de hoja de estilo normal), mueva todos y cada uno de los scripts en línea que pueda encima en el marcado.

• Incorpore su CSS crítico para lograr los tiempos de inicio de procesamiento más rápidos posibles.

El patrón de impresión es:

link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"

Enlace directo →