Estoy usando wordpress y un tema e hice algunos cambios en este tema, cuando quiero aumentar la velocidad de la página, el probador de velocidad de página de Google dice que necesito eliminar todos los scripts y estilos de bloqueo.
No sé qué es el bloqueo de Render y cómo resolverlo, ¿alguien puede guiarme para solucionar el problema importante?
Gracias
Resuelvo Remove Render-blocking JavaScript de la siguiente manera:
<script src="https://stackoverflow.com/questions/24122260/filename.js"></script>
Replace with Following:
<script src="https://stackoverflow.com/questions/24122260/filename.js" defer></script>
<script src="https://stackoverflow.com/questions/24122260/filename.js" async="async"></script>
Simple pero efectivo usando ‘defer’
– Jaime
08/09/2015 a las 20:40
Digamos por ejemplo su <head> la sección se ve así
<!DOCTYPE html>
<html>
<head>
<title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>
</head>
simplemente mueva los archivos de script a la parte inferior del documento, o el archivo footer.php, así
<!DOCTYPE html>
<html>
<head>
<title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>
</head>
<body>
<!-- all your other codes here -->
<!-- then your scripts right before the closing body tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>
</body>
</html>
Si mueve todas las secuencias de comandos fuera de la cabeza y justo antes de la </body> etiqueta de cierre, entonces eso debería eliminar ese mensaje en la velocidad de la página de Google.
Tenga en cuenta que aún podría dar un error/mensaje acerca de que la hoja de estilo CSS tiene un bloqueo de procesamiento… bueno, simplemente lo ignoraría, ya que quiero que mi css se muestre antes que el documento, por lo que no lo eliminaría del <head>.
gracias, pero ¿qué sucede si también quiero eliminar ese mensaje de error? ¿Hay alguna forma?
– thekosmix
30 de septiembre de 2014 a las 9:58
Estas soluciones son solo soluciones parciales. Los métodos de inserción, colocar scripts en la parte inferior, usar async o diferir no son la mejor solución. Si quieres dejar que la página se cargue primero y luego cargar js.
para JS coloque este código después del </cuerpo > etiqueta
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://stackoverflow.com/questions/24122260/yourjavascripttoload.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Origen: Patrick Sexton
https://varvy.com/pagespeed/render-blocking.html