WordPress

¿Cómo reparar o Quitar el javascript que bloquea la visualización de contenido en WordPress?

Introducción

La velocidad de carga de un sitio de un sitio web es el factor más importante al momento de atraer y retener visitantes en un sitio web. Esto se debe a que los motores de búsqueda toman en cuenta la velocidad de cargar al mostrar los sitios webs en sus resultados. Por lo que si deseas superar a la competencia en SEO debes darle prioridad a la velocidad de tu sitio web.

Medir la velocidad de tu sitio web puede llegar a ser un problema. Existe un montón de factores que puede afectar su correcta medición. Por ejemplo: tu velocidad de conexión a Internet, tu ubicación geográfica con respecto a la del servidor, etc. Es aquí donde entra en acción Google PageSpeed Insights. Este es un servicio gratuito ofrecido por Google en el cual los sitios web obtienen una puntuación dependiendo a la velocidad de carga de los mismos. Si has utilizado esta herramienta, de segura que has visto las sugerencias como Eliminar bloqueo de JavaScript y CSS que se encuentran en la parte superior de tu sitio.

¿Qué significa eliminar el bloqueo de contenido JavaScript y CSS y colocarlo encima del doblez?
Para entender esta sugerencia, debemos examinar los criterios de Google para marcar sitios en PageSpeed Insights. Hay diez reglas de velocidad definidas por Google, y el fracaso en cualquiera de estos implica una deducción de puntos.

El bloqueo de visualización de JS y CSS en el contenido y por encima del doblez es una de estas reglas. Normalmente, los scripts JS y CSS obligan al navegador web a retrasar la carga de la página HTML. Por supuesto, esto no es un problema. De hecho, esto se hace para que los usuarios no miren contenido sin formato o diseños.

Al hablar de código encima del doblez nos referimos a todo lo que se carga en tu página y es visible al ingresar a la página. Y Google te permite saber que hay secuencias de comandos JS y CSS en esta página web que están retrasando innecesariamente la carga del sitio ya que aún no se ve.
En este tutorial veremos cómo solucionarlo aplicando 3 métodos.

¿Qué necesitas?

Antes de iniciar este tutorial vas a necesitar:

    Acceso al área de administración de WordPress.

Eliminar bloques de JavaScript y CSS que están marcados como encima del doblez

Los códigos JS y CSS son cruciales para el buen funcionamiento de un sitio web, pero los mismos pueden afectar el rendimiento del sitio. Lo primero que debemos hacer es asegurarnos que los bloques JavaScript y CSS existen en el sitio. Luego de esto podemos proceder a buscar una forma de corregirlos.

Paso 1 – Utilizar Google PageSpeed Insights para buscar los bloques JavaScript y CSS

El primer paso para arreglar el bloqueo de render es probar la velocidad de tu sitio con Google PageSpeed Insights. Simplemente visite la página y, en el campo de entrada, pega la URL de tu sitio. Haz clic en Analizar para obtener un informe de su sitio. La mayoría de los sitios puntúan entre 50-70; Esto debe servir como un punto de referencia para tu puntuación. Junto con a la puntuación, Google también mostrará sugerencias para mejorar el rendimiento de su sitio.

Como se puede ver en la captura de pantalla el sitio cuenta con ciertos bloqueos de JS y CSS.

Algo importante y a tener en cuenta – Tu objetivo no es obtener una puntuación de 100 puntos en la herramienta de PageSpeed Insights. Sino intentar obtener la mejor puntuación posible sin sacrificar la experiencia del usuario. Si tienes scripts en su sitio de WordPress esenciales para una buena experiencia, no debe eliminarlos sólo para obtener una puntuación ligeramente superior en PageSpeed Insights. Las reglas en las que Google puntúa sus sitios son meramente guías, y deben tomarse como tales.

Paso 2: arreglar el bloqueo JavaScript y CSS

Opción 1 – Utilizar el Plugin W3 Total Cache

Ahora comenzaremos a ver las opciones que tenemos para solucionar nuestro problema. Te recomiendo descargar el plugin W3 Total Cache para hacernos la vida más fácil. Sigue estos pasos:
1. Ve a Performance -> General Settings. Y encuentra Minify al inicio de la pagina
2. Veras algunas opciones debajo de este encabezado. El primero se titula Minify, maraca la casilla Enable
3. En Minify mode selecciona Manual, y luego dale clic a Save all settings.

4. Vamos a necesitar toda la secuencia de comendar JS y CSS que causan el bloqueo del render. Si aún tienes la pestaña abierto del Google PageSpeed Insights solo debes darle clic a Mostrar cómo corregirlo. Esto mostrará todos los scripts y hojas de estilo que causan el bloqueo de render.
5. Regresar a WordPress y busca Performance – > Minify. Deberas colocar el CSS y el JS en archivos separados.
6. Primero veremos los JS. Buscaremos el encabezado que hable sobre los JS, veras Operations in area. Selecciona Non-blocking using defer en las selecciones de embed type antes de la etiqueta <head>.

7. Debajo del encabezado JS file management selecciona tu plantilla y da click a Add Script. Y copia las URLs que te indico la herramienta de PageSpeed. Con esto completamos lo arreglos para los archivos JS.

8. Para corregir los CSS debemos bajar en esta misma página y encontrar la sección CSS file management. Selecciona la plantilla que tienes activa y dale clic en Add a style sheet. Copia y pega las hojas de estilos en lugares correspondientes.

9. Para terminar da clic en Save settings and purge cache.

Con esto ya se ha de haber corregido el error. Puedes verificarlo en el Google PageSpeed.

Opción 2 – Utilizar Autoptimize

Una maner mas sencilla de resolver este problema con los bloques de JS y CSS es utilizando el plugin llamado Autoptimize. Una vez lo tengas instalado debes ir a Settings -> Autoptimize en WordPress. Una vez ahí marca la casilla titulada Optimize JavaScript Code? Y la casilla Optimize CSS Code? Y dale click a Save Changes and Empty Cache.

En la mayoría de los casos esto es suficiente para darle solución al problema tanto con el JavaScript así como los bloques de CSS.

Si quieres llevar la optimización mucho más lejos puedes regresar a Settings – > Autoptimize. Y dar clic en Show Advanced Settings. De aquí seleccionar las opciones Algo aggregate inline js y Also aggregate inline CSS. Para terminar da clic en Save changes and Empty Cache.
Puedes verificar el resultado en la página de PageSpeed Insights.

Opción 3 – Utilizar Speed Booster Pack

Otro plugin popular que puede encontrar útil en la fijación de bloqueo de render para su sitio de WordPress es Speed Booster Pack. Una vez descargues y actives este plugin encontrarás sus opciones en la sección Ajustes -> Speed Booster Pack del área de administración de WordPress.

Para el JS debes habilitar Move scripts to the footer y Defer parsing of JavaScripts files

quitar el javascript que bloquea la visualización de contenido wordpress
Para el CSS debes dirigirte al menú Still need more speed? Y aquí encontraras las configuraciones para optimizar el CSS, minifying CSS, mover las líneas de CSS al pie de página, y cargar CSS asincrónicamente.

Con estos parámetros deberás tener tu sitio completamente optimizado.

Conclusión

Hemos visto 3 formas de optimizar la incrementar la velocidad de carga de WordPress y su funcionamiento. Hemos aprendido a corregir Eliminar el bloqueo de JavaScript y CSS en el contenido por encima del doble de su sitio web.

Diana C.

Diana cuenta con más de 10 años de experience en el desarrollo y gestión de sitios en WordPress. Comenzó su aventura con un blog y hoy en día es: experta en online marketing, marketing de afiliados, hosting, profesora, diseñador web.

2 de Comentarios

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

AR$36
00
/mes