javascript - renderizado - CSS optimización de entrega: ¿Cómo aplazar la carga de css?
quitar el javascript que bloquea el renderizado de contenido wordpress (5)
ADVERTENCIA: body{background-image: url("http://example.com/image.jpg");} en archivos css hará que sus archivos css sigan bloqueando la reproducción.
Si probó todas las soluciones anteriores y aún recibe la advertencia de bloqueo de procesamiento de PageSpeed insights, entonces probablemente tenga esta regla de estilo en sus archivos css. Después de horas de pruebas, resulta que esta regla es lo que hace que TODO mi css se marque como recursos de bloqueo de procesamiento en los conocimientos de PageSpeed. Encontré que el mismo problema ha sido discutido antes .
No sé por qué body{background-image: url(...) hace esto para todos los archivos css. Aunque tengo diferentes recursos de imágenes en el archivo para los botones, iconos, ... etc.
Arreglé esto moviendo esta regla desde el archivo .css y la puse en los estilos en línea. Desafortunadamente, tendrá que romper su plan de css y poner la regla en todos sus archivos HTML de diseños en lugar de estar en un archivo css que se importe en todos sus diseños HTML, pero los 90 y el color verde en PageSpeed insights lo merecen.
Estoy intentando optimizar la entrega de CSS siguiendo la documentación de google para desarrolladores https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
Como puede ver en el ejemplo de alinear un archivo CSS pequeño, el CSS crítico se inserta en el encabezado y el archivo small.css original se carga después de la carga de la página .
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
Mi pregunta con respecto a este ejemplo:
¿Cómo cargar un archivo css grande después de la carga de la página?
Además de la respuesta de Fred:
Solución utilizando jQuery & Noscript
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if($("body").size()>0){
if (document.createStyleSheet){
document.createStyleSheet(''style.css'');
}
else {
$("head").append($("<link rel=''stylesheet''
href=''style.css''
type=''text/css'' media=''screen'' />"));
}
}
});
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
de http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
Usando Javascript puro y Noscript
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript">
var stylesheet = document.createElement(''link'');
stylesheet.href = ''style.css'';
stylesheet.rel = ''stylesheet'';
stylesheet.type = ''text/css'';
document.getElementsByTagName(''head'')[0].appendChild(stylesheet);
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
Prueba este fragmento
El author afirma que fue publicado por el equipo de PageSpeed de Google.
<script>
var cb = function() {
var l = document.createElement(''link''); l.rel = ''stylesheet'';
l.href = ''yourCSSfile.css'';
var h = document.getElementsByTagName(''head'')[0]; h.parentNode.insertBefore(l, h); };
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener(''load'', cb);
</script>
Si no te importa usar jQuery, aquí hay un simple fragmento de código para ayudarte. (De lo contrario comenta y escribiré un ejemplo de pure-js
function loadStyleSheet(src) {
if (document.createStyleSheet){
document.createStyleSheet(src);
}
else {
$("head").append($("<link rel=''stylesheet'' href=''"+src+"'' type=''text/css'' media=''screen'' />"));
}
};
Simplemente llámelo a su función $(document).ready() o window.onload y window.onload listo.
Para el # 2, ¿por qué no lo intentas? Deshabilita Javascript en tu navegador y mira!
Por cierto , es asombroso hasta dónde puede llegar una simple búsqueda de Google; para la consulta "post load css" , este fue el cuarto hit ... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
Una pequeña modificación a la función proporcionada por Fred para hacerla más eficiente y libre de jQuery. Estoy usando esta función en producción para mis sitios web
// to defer the loading of stylesheets
// just add it right before the </body> tag
// and before any javaScript file inclusion (for performance)
function loadStyleSheet(src){
if (document.createStyleSheet) document.createStyleSheet(src);
else {
var stylesheet = document.createElement(''link'');
stylesheet.href = src;
stylesheet.rel = ''stylesheet'';
stylesheet.type = ''text/css'';
document.getElementsByTagName(''head'')[0].appendChild(stylesheet);
}
}