css - renderizado - quitar el javascript que bloquea la visualización de contenido wordpress plugin

Eliminar el bloqueo de render externo

Question

PageSpeed ​​Insights me sugiere:

"Elimine el Javascript y el CSS de bloqueo de procesamiento externo en el contenido de la mitad superior de la página. Su página tiene 1 recursos CSS de bloqueo. Esto provoca un retraso en la representación de su página. Optimice la entrega de CSS para los siguientes recursos: http://itransformer.es/css/c0f9425.css "

El archivo css c0f9425.css es el archivo combinado con jquery-ui.css y uno personalizado.

Realmente no entiendo este punto. ¿Cómo debo seguir esta sugerencia?

Answer 1

Elimine el bloqueo de procesamiento de CSS en el problema de contenido de la mitad superior de la página. Resuelvo el bloqueo de los recursos de CSS Optimice la entrega de CSS de la siguiente manera:

<script>
        var cb = function() {
        var l = document.createElement(''link''); l.rel = ''stylesheet'';
        l.href = ''css/style.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>

Answer 2

Google le sugiere que coloque el CSS inicialmente necesario (arriba de la tapa) en línea y que cargue el resto del CSS cuando la carga de la página esté lista. Ver aqui

Lo mismo ocurre con el javascript. Incluya el código "debe tener el código" en línea y cargue el código "es bueno tenerlo" en la página como se sugiere aquí

La idea es cargar lo que el usuario ve primero lo más rápido posible.

Personalmente, me resulta difícil de seguir, ya que dividiría el código y dificultaría su mantenimiento. Aunque tiene sentido para grandes proyectos ...

Answer 3

He resuelto con éxito este problema solo con archivos javascript.

Intente agregar el atributo asíncrono en la etiqueta de script o en el atributo de aplazamiento.

Por ejemplo:

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script> 

o

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

Le sugiero que use async, carga el archivo solo cuando es necesario. Aplazar el atributo carga el archivo al final de la página, en algún momento no realizará la funcionalidad requerida.

Answer 4

Puede convertir todos sus archivos de código CSS en un solo archivo, luego Google le sugiere que solo bloquee el procesamiento de un archivo. De lo contrario, si está trabajando con un proyecto de Wordpress, puede usar varios complementos para su sitio, como eliminar el bloqueo de procesamiento de css y js.

Si desea renderizar completamente eliminar el bloqueo de render, entonces puede poner todo el código CSS en la sección de cabecera, el prefecto funciona.