Cómo eliminar los scripts que bloquean el procesamiento.
Una vez que haya identificado el código crítico, mueva ese código de la URL de bloqueo de procesamiento a una script etiqueta en línea en su página HTML. Cuando se cargue la página, tendrá lo que necesita para manejar la funcionalidad principal de la página.
Si hay código en una URL de bloqueo de procesamiento que no es crítico, puede mantenerlo en la URL y luego marcar la URL con atributos asnyc o defer.
El código que no se está utilizando en absoluto debe eliminarse.
Cómo eliminar las hojas de estilo que bloquean el procesamiento.
De manera similar al código en script línea en una etiqueta, se requieren estilos críticos en línea para la primera pintura dentro de un style bloque en la head página HTML. A continuación, cargue el resto de los estilos de forma asincrónica mediante el preload enlace.
Considere la posibilidad de automatizar el proceso de extracción e inserción de CSS “Above the Fold” utilizando la herramienta Critical .
Otro enfoque para eliminar los estilos de bloqueo de renderizado es dividir esos estilos en diferentes archivos, organizados por consulta de medios. Luego agregue un atributo de medios a cada enlace de la hoja de estilo. Al cargar una página, el navegador solo bloquea la primera pintura para recuperar las hojas de estilo que coinciden con el dispositivo del usuario.
Finalmente, querrá minimizar su CSS para eliminar cualquier espacio en blanco o caracteres adicionales. Esto asegura que está enviando el paquete más pequeño posible a sus usuarios.
Cómo eliminar JavaScript que bloquea el procesamiento
- Identifique el código JavaScript que bloquea la representación.
- Elimine el JavaScript identificado manualmente o con un complemento.
- Vuelva a ejecutar un análisis del sitio.
- Revise su sitio web en busca de errores.
1. Identifique el código JavaScript que bloquea la representación.
Antes de realizar cualquier cambio, primero debe ubicar el JavaScript infractor. La mejor manera de hacerlo es utilizando la herramienta PageSpeed Insights de Google . Simplemente ingrese la URL de su sitio y haga clic en Analizar .
Cuando se completa el escaneo, Google asigna a su sitio web una puntuación de velocidad agregada, de 0 (más lento) a 100 (más rápido). Una puntuación en el rango de 50 a 80 es promedio, por lo que querrá aterrizar en la parte superior de este rango o por encima de él.
Para identificar los archivos JavaScript que bloquean el procesamiento y que ralentizan su página, desplácese hacia abajo hasta Oportunidades y luego abra el acordeón Eliminar recursos que bloquean el procesamiento.
Verá una lista de archivos que ralentizan la “primera pintura” de su página. En otras palabras, estos archivos afectan el tiempo de carga de todo el contenido que aparece en el navegador en la carga de la página inicial. Esto también se denomina contenido “en la mitad superior de la página”.
Tome nota de los archivos que terminan con la extensión .js, ya que estos son en los que querrá concentrarse.
2. Elimine el JavaScript identificado manualmente o con un complemento.
Ahora que ha identificado el problema, hay dos formas de solucionarlo en WordPress: manualmente o con un complemento. Primero cubriremos la solución del complemento.
Varios complementos de WordPress pueden reducir el efecto del JavaScript que bloquea el procesamiento en los sitios web de WordPress. Analicemos dos soluciones populares, Autoptimize y W3 Total Cache.
Cómo eliminar el bloqueo de renderizado de JavaScript con el complemento Autoptimize
Autoptimize es un complemento gratuito que modifica los archivos de su sitio web para ofrecer páginas más rápidas. Autoptimize funciona agregando archivos JavaScript (y código JavaScript en línea si lo desea), minimizando JavaScript (es decir, reduciendo el tamaño del archivo eliminando el código redundante o innecesario) y retrasando su carga.
Dado que está modificando el backend de su sitio, recuerde tener cuidado con este complemento o cualquier complemento similar. Para eliminar JavaScript que bloquea el procesamiento con Autoptimize:
1. Instale y active el complemento Autoptimize.
2. Desde su panel de WordPress, seleccione Configuración> Optimización automática. .
3. En la pestaña JS, CSS y HTML , marque la casilla junto a ¿ Optimizar código JavaScript? .
4. Si aparece la casilla junto a Agregar archivos JS? está marcado, desmárquelo.
