¿Quiere eliminar el bloqueo de la representación de JavaScript y CSS en WordPress?
Si está probando su sitio web en Google PageSpeed insights, probablemente verá una sugerencia para eliminar secuencias de comandos y bloques de representación CSS. Sin embargo, no proporciona detalles sobre cómo hacer esto en su sitio web de WordPress.
En este artículo, le mostraremos cómo corregir fácilmente el bloqueo de renderizado de JavaScript y CSS en WordPress para mejorar su puntaje de PageSpeed de Google.
Pero antes, descubramos juntos ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog.
¿Qué es el bloqueo de renderizado de JavaScript y CSS?
El bloqueo de las representaciones de JavaScript y CSS son archivos que impiden que un sitio web muestre una página web antes de cargarlos.
Cada sitio web de WordPress tiene un tema y complementos que agregan archivos JavaScript y CSS a la interfaz de su sitio web. Estos scripts pueden aumentar el tiempo de carga de la página de su sitio web y también pueden bloquear la presentación de la página.
El navegador de un usuario deberá cargar estos scripts y CSS antes de cargar el resto del código HTML en la página. Esto significa que los usuarios con una conexión más lenta tendrán que esperar unos milisegundos más para ver la página.
Estos scripts y hojas de estilo se denominan bloqueadores de representación de JavaScript y CSS.
Los propietarios de sitios web que intenten lograr una puntuación de Google PageSpeed de 100 deberán solucionar este problema para lograr la puntuación perfecta.
¿Qué es la puntuación de PageSpeed de Google?
Google PageSpeed Insights es una herramienta de prueba de velocidad creada por Google para ayudar a los propietarios de sitios web a optimizar y probar sus sitios web. Esta herramienta prueba su sitio web según las pautas de velocidad de Google y ofrece sugerencias para mejorar los tiempos de carga de la página de su sitio web.
Le muestra una puntuación basada en la cantidad de reglas que aprueba su sitio web. La mayoría de los sitios web tienen entre 50 y 70 años. Sin embargo, algunos propietarios de sitios web se sienten presionados para llegar a 100.
¿Realmente necesitas una puntuación de "100" en Google PageSpeed?
El propósito de Estadísticas de PageSpeed de Google es proporcionarle pautas para mejorar la velocidad y el rendimiento de su sitio web. No está obligado a seguir estrictamente estas reglas.
Recuerde, la velocidad es solo una de las muchas métricas de SEO que ayudan a Google a determinar cómo clasificar su sitio web. La razón por la que la velocidad es tan importante es que mejora la experiencia del usuario en tu sitio web.
Una mejor experiencia de usuario requiere mucho más que velocidad. También debes ofrecer información útil, mejor interfaz de usuario e involucrar contenido con texto, imágenes y videos.
Su objetivo debe ser crear un sitio web rápido que ofrezca una excelente experiencia de usuario.
Durante el último rediseño de BlogPasCher, nos enfocamos en la velocidad y en mejorar la experiencia del usuario.
Le recomendamos que utilice las reglas de Google Pagespeed como sugerencia, y si puede implementarlas fácilmente sin arruinar la experiencia del usuario, entonces eso es genial. Si no es así, debes esforzarte por hacer todo lo que puedas y luego no te preocupes por el resto.
Dicho esto, echemos un vistazo a lo que puede hacer para corregir el bloqueo de renderizado de JavaScript y CSS en WordPress.
Vamos a cubrir dos métodos que solucionarán este problema. Puede elegir el que mejor funcione en su sitio web.
1. Arregle los scripts de bloqueo de renderizado y CSS con WP Rocket
Para este método, usaremos el complemento WP Rocket. Esto es el mejor complemento de almacenamiento en caché de WordPress en el mercado y le permite mejorar rápidamente el rendimiento de su sitio web sin necesidad de configurar habilidades técnicas o complejas.
En primer lugar, debe instalar y activar el complemento WP Rocket. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress..
WP Rocket activa su caché con configuraciones óptimas. De forma predeterminada, no habilita las opciones de optimización de JavaScript y CSS. Estas optimizaciones pueden afectar potencialmente laapariencia de su sitio web o ciertas características, es por eso que el complemento le permite habilitar esas configuraciones como una opción.
Para hacer esto tienes que continuar Configuración »WP Rocket, luego cambie a 'Optimización de archivos '. Desde allí, desplácese hacia abajo hasta la sección Archivos CSS y marca las casillas Minificar CSS, Combinar archivos CSS et Optimizar la entrega de CSS.
Observación : WP Rocket intentará minimizar todos sus archivos CSS, combinarlos y cargar solo el CSS necesario para la parte visible de su sitio web. Esto podría afectar laapariencia de su sitio web, por lo que debe probar su sitio web a fondo en múltiples dispositivos y tamaños de pantalla.
Entonces necesitas desplazarte a la sección Archivos JavaScript. Desde allí, puede marcar todas las opciones para mejorar al máximo el rendimiento.
Puede minificar y combinar archivos JavaScript como lo hizo con los archivos CSS.
También puede evitar que WordPress cargue el archivo. jQuery Migrate. Este es un script que WordPress carga para proporcionar compatibilidad para complementos y temas que utilizan versiones anteriores de jQuery.
La mayoría de los sitios web no necesitan este archivo, pero es una buena idea revisar su sitio web para asegurarse de que su eliminación no afecte su tema o complementos.
Luego, desplácese hacia abajo un poco más y verifique las opciones 'Cargar JavaScript diferido'y'Modo seguro para jQuery'.
Estas opciones retrasan la carga de JavaScript no esencial, y el modo seguro de jQuery le permite cargar jQuery para temas que pueden usarlo en línea.
Recuerde hacer clic en el botón Guardar cambios para almacenar su configuración.
Después de eso, también puede borrar el caché en WP Rocket antes de probar su sitio web nuevamente con Google Page Speed Insights.
En nuestro sitio web de prueba, pudimos lograr un puntaje del 100% en computadoras de escritorio y el problema de procesamiento atascado se resolvió tanto en dispositivos móviles como en computadoras de escritorio.
2. Corrija el bloqueo de la representación de JavaScript y CSS con la optimización automática
Para este método, usaremos un complemento diferente creado específicamente para mejorar la entrega de los archivos CSS y JS de su sitio web. Si bien este complemento hace el trabajo, carece de las otras funciones poderosas que ofrece WP Rocket.
Lo primero que debe hacer es instalar y activar el complemento Autoptimize. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Al activar, debes visitar la página Configuración »Optimización automática para configurar los ajustes del complemento.
En primer lugar, debe marcar la opción 'Optimizar el código JavaScript'debajo del bloque JavaScript Opciones. Asegúrese de que la opción 'Agregar todos los archivos JS vinculados' no esté marcada.
Luego, desplácese hacia abajo hasta el área Opciones CSS y marque la opción ' ¿Optimizar el código CSS?'. Asegúrese de que la opción 'Agregue todos los archivos CSS vinculados'no está marcado.
Ahora puede hacer clic en el botón 'Guardar cambios y borrar caché' para almacenar su configuración.
Continúe y pruebe su sitio web con Page Speed Insights. En nuestro sitio web de demostración, pudimos resolver el problema de procesamiento atascado con estas configuraciones básicas.
Si todavía hay scripts de bloqueo de renderizado, debe volver a la página de configuración del complemento y mirar las opciones de JavaScript y CSS.
Por ejemplo, puede permitir que el complemento incluya JS Inline y elimine los scripts que están excluidos de forma predeterminada, como seal.js o jquery.js.
Haga clic en el botón 'Guardar cambios y borrar caché' para guardar sus cambios y borrar el caché del complemento.
Una vez que haya terminado, continúe y vuelva a visitar su sitio web con la herramienta Page Speed Insights.
¿Cómo funciona?
Autoptimize agrupa todos los archivos JavaScript y CSS. Después de eso crea archivos CSS y JavaScripts minificados y sirve copias en caché de su sitio web de forma sincronizada o diferida.
Esto le permite resolver el problema de bloqueo. representaciones scripts y estilos de bloqueo. Sin embargo, tenga en cuenta que esto también puede afectar el rendimiento oapariencia de su sitio web.
ayudar
Dependiendo de cómo los complementos y su tema de WordPress usen JavaScript y CSS, puede ser bastante difícil resolver completamente todos los problemas con bloqueo de Representaciones de JavaScript y CSS.
Si bien las herramientas anteriores pueden ayudar, sus complementos pueden necesitar ciertos scripts en un nivel de prioridad diferente para funcionar correctamente. En este caso, las soluciones anteriores pueden romper la funcionalidad de estos complementos o pueden comportarse de forma inesperada.
Google aún puede mostrarle algunos problemas, como la optimización de la entrega de CSS. WP Rocket le permite solucionar esto agregando manualmente el CSS crítico necesario para mostrar perfectamente su tema de WordPress.
Sin embargo, podría ser bastante difícil saber qué código CSS necesitará mostrar.
Descubra también algunos temas y complementos premium de WordPress
Puede usar otros complementos de WordPress para darle un aspecto moderno y optimizar el agarre de su blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. WordPress Speed Optimization Plugin
¿Tiene dificultades para administrar varios complementos de optimización de la velocidad de sitios web? ¿Le preocupa que estén obstaculizando la velocidad de ejecución de su sitio web? Entonces, este complemento de WordPress será la solución definitiva para todas sus preocupaciones.
Este complemento está diseñado para brindarle la funcionalidad de casi 6-8 complementos de WordPress diferentes. Solo tienes que instalarlo y configurarlo para ver una marcada mejora en la carga de tus páginas.
Nos gustaría señalar que esta no es una plugin de caché o de CDN, pero el resultado que ofrece es impresionante. No dude en probar este complemento de WordPress para ver de lo que es capaz.
Descargar | Demo | alojamiento web
2. Social Share & Locker Pro
La extensión Social Share & Locker Pro ha sido diseñada para ayudar a que su sitio web sea más visible en las redes sociales. Con solo unos pocos clics, puede establecer la posición de sus íconos sociales o bloquear su contenido requiriendo compartir en una de las redes sociales que ofrece.
Tiene temas predefinidos de 10 y esto debería cubrir los deseos más comunes. Todos sus temas son Retina y maravillas del trabajo.
Además, con Social Share & Locker Pro, podrás mostrar el nombre completo de las redes sociales o solo el icono. Dependerá de su diseño, el espacio disponible o sus deseos.
Descargar | Demo | alojamiento web
3. WordPress PDF Images Lightbox
WordPress PDF Lightbox es un Extensión de WordPress que le permite crear visores de archivos PDF. Un visor de PDF es una colección de fotos que se pueden guardar como archivos PDF.
Con esta extensión, puede crear tantos visores de PDF como desee. Para cada visor, el administrador puede establecer algunas opciones como:
- La imagen de portada: que se agregará como la primera página del PDF creado por el usuario
- Imágenes máximas por espectador
- Una imagen de marca de agua: para aplicar en páginas PDF
- Envío por correo electrónico: si esta función está activada, un formulario de contacto se ofrecerá justo después de la galería de imágenes. A través de este formulario, los usuarios podrán enviar por correo electrónico el PDF creado a cualquier persona.
Descargar | Demo | alojamiento web
Recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- Complementos de 10 WordPress para mejorar el SEO de su sitio web
- 5 premium plugins de WordPress para optimizar sus categorías
- 10 complementos de WordPress para convertir moneda
- plugins de WordPress 10 para integrar un reproductor de audio en una página web
Conclusión
Listo ! Eso es todo por este tutorial. Esperamos que este artículo le haya ayudado a aprender cómo corregir el bloqueo de renderizado de JavaScript y CSS en WordPress. También puedes ver nuestro guía definitiva sobre cómo acelerar el rendimiento de WordPress para principiantes.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.
No dude en comparte con tus amigos en tus redes sociales favoritas. Y si tienes alguna sugerencia o comentario déjalos en nuestra sección comentarios.
...
