No fue hace mucho tiempo cuando Google anunció que los sitios web que tardan más de tres segundos en cargar no son compatibles con SEO.
En la era de internet y el marketing digital, necesitas tener la página web más rápida si quieres competir eficazmente con miles de rivales en todo el mundo. No cabe duda de que una página web rápida tiene más posibilidades de atraer visitantes y aumentar su interacción con el contenido.
Ejecutar un sitio web de WordPress significa una cantidad significativa de scripts que se ejecutan al mismo tiempo para que su sitio sea accesible.
Sin embargo, no todos estos elementos son siempre esenciales para la carga. Si alguna vez has comprobado el rendimiento de tu sitio web con Google Insights PageSpeedProbablemente te hayas encontrado con la opción de JavaScript y CSS que bloquea la renderización y que afecta a su velocidad.
Hoy vamos a hablar de estos archivos innecesarios y a explicarte cómo puedes eliminarlos para mejorar tu sitio web.
¿Qué es JavaScript y CSS que bloquean el renderizado?
En resumen, JavaScript y CSS que bloquean la representación son una serie de hojas de estilo y scripts necesarios para ejecutarse por completo antes de que un sitio se cargue y se vuelva visible.
Los temas y complementos que instala en su sitio web de WordPress agregan muchos de estos archivos a la sección de front-end de su sitio web. Y como habrás adivinado, algunos de ellos ralentizan el tiempo de carga de la página y evitan que las páginas se procesen.
Cuando un visitante del sitio web abre su sitio web, el navegador de Internet primero carga los archivos JavaScript y CSS necesarios antes del HTML.
Este es un procedimiento habitual, ya que una página sin estos elementos esenciales resultará inutilizable. El problema radica en que el navegador web no puede mostrar la página hasta que estos archivos se hayan cargado por completo.
El truco aquí es que puede posponer la carga de algunos scripts sin causar ningún problema con lo que ven los visitantes al abrir una página suya.
Los propietarios de sitios web pueden realizar modificaciones en su sitio para evitar que los navegadores web carguen cualquier código fuera de lo necesario para la parte superior de la página que un usuario ve inmediatamente.
En otras palabras, los navegadores solo cargan los archivos esenciales para esa sección antes de que un usuario se desplace hacia abajo en la página. Esta área de páginas web se llama ATF, que significa Above the Fold. Otras partes que requieren que los usuarios se desplacen hacia abajo para poder ver es la sección sin ATF.
Por lo tanto, si tu sitio web carga los códigos JavaScript y CSS relacionados con las secciones que no son ATF, las páginas tardarán más en cargarse. Y es por eso que Google intenta indicarte que dejes de ejecutar recursos innecesarios en el código de tu sitio web.
Encuentra JavaScript y CSS que bloquean el renderizado
La forma más sencilla de detectar este problema es realizar una prueba de velocidad con Google PageSpeed Insights. Una vez que visites la página, solo tienes que introducir la URL en el campo correspondiente y hacer clic en el botón "Analizar".
Si experimenta este problema en la página, verá una sugerencia que le indicará que elimine el código JavaScript y CSS que bloquea la renderización en el contenido visible sin necesidad de desplazarse.
Sería mejor si no olvidara que la mayoría puntuación de sitios web La puntuación ideal suele estar entre 70 y 90, e incluso los sitios con mejor rendimiento rara vez alcanzan una cifra cercana a 100. Por lo tanto, no debes forzar tu sitio a llegar a 100. Haz todo lo posible por obtener la puntuación más alta sin afectar negativamente la experiencia del usuario.
Dependiendo del tema y las herramientas que use en su sitio, algunos scripts son esencial para la experiencia de usuario perfecta Se supone que debes ofrecer contenido a tu audiencia. Por lo tanto, es totalmente imprudente eliminarlo en un intento por obtener una puntuación ligeramente superior en la página de resultados de esta herramienta de Google.
Corregir JavaScript y CSS que bloquean el renderizado
Existen numerosas estrategias para eliminar el JavaScript que bloquea la renderización. Los métodos principales son Async y Defer. El primer método permite que el navegador del usuario descargue el JavaScript mientras analiza otras partes del HTML.
Aunque no detiene completamente el análisis durante el tiempo que se descarga el archivo, el Analizador de HTML Se detiene para ejecutar el script mientras se descarga. Por otro lado, el enfoque Defer permite que el navegador descargue el JavaScript mientras analiza otras partes del HTML y no ejecuta el script hasta que finaliza el análisis del HTML.
Eliminar el CSS que bloquea el renderizado es más complicado, ya que puede retrasar los códigos necesarios para cargar el contenido ATF. El procedimiento es un poco complicado y requiere una buena comprensión del desarrollo web.
Sin embargo, nos dirigimos a los usuarios promedio que administran su sitio web por su cuenta.
Todos sabemos que WordPress es un sistema modular que permite a los usuarios promedio modificar todo sin escribir una sola línea de código. Arreglar este problema también es lo mismo, y puede resolverlo rápidamente instalando el complemento apropiado.
Los mejores complementos de WordPress para arreglar JavaScript y CSS que bloquean el renderizado
En los siguientes párrafos, presentaremos cinco complementos de WordPress de mejor rendimiento que le ayudarán a resolver este problema más profundamente.
Precaución: Antes de utilizar cualquiera de las siguientes herramientas, asegúrese de realizar una copia de seguridad de su sitio web para evitar cualquier posible pérdida de datos.
Autoptimize
El Autoptimize El complemento está hecho explícitamente para abordar los problemas sugeridos por las herramientas de análisis del sitio web como Google PageSpeed Insights. Mejora la entrega de archivos JavaScripts y CSS sin centrarse demasiado en otros aspectos del rendimiento del sitio web.
Si buscas funciones básicas de optimización, este plugin te proporcionará lo que necesitas. Una de las ventajas de esta herramienta es que convierte las imágenes de tu sitio web al formato WebP optimizado.
Una vez instalado y activado Autoptimize, debes marcar las casillas de las opciones "Optimizar código JavaScript" y "Optimizar código CSS" que se encuentran en la configuración del plugin. Ten cuidado de no marcar las casillas que aparecen debajo de estas dos opciones, las cuales agrupan los archivos CSS y de script.
Aunque este complemento está disponible de forma gratuita, también puede comprar paquetes premium que lo ayudarán con la configuración del sitio web.
WP Rocket
WP Rocket es un nombre bien conocido entre las herramientas de optimización de WordPress que lo ayuda en diferentes aspectos, como la modificación de JavaScript y CSS, la configuración de carga diferida. El proceso de configuración de WP Rocket es bastante simple, pero puede resultarle difícil en primer lugar comprender cómo se hacen las cosas en la interfaz.
Está listo para usar nada más sacarlo de la caja y aplica la configuración óptima a tu sitio web inmediatamente después de la instalación. Teniendo en cuenta que es inevitable que se produzcan fallos en el sitio web debido a cambios en los scripts, el plugin no activa por defecto la configuración de JavaScript y CSS que bloquea la renderización.
Pero puedes activar fácilmente esta función accediendo a la configuración del plugin y buscando las opciones correspondientes en las secciones "Archivos CSS" y "Archivos JavaScript".
El complemento principal cuesta $ 49 al año y también viene con un año de soporte. Además, puede encontrar múltiples extras gratis también para el complemento principal de WordPress.
ConejoCargador
ConejoCargador es un complemento de optimización del rendimiento de WordPress de última generación diseñado para hacer que un sitio web funcione más rápido, más fluido y más eficientemente.
Al igual que el aclamado WP Rocket, RabbitLoader no solo lleva el rendimiento de tu sitio a un nivel superior, sino que también introduce algunas características innovadoras que lo diferencian de otros competidores.
Magia de almacenamiento en caché: RabbitLoader va un paso más allá al ofrecer un sistema de almacenamiento en caché dinámico que se adapta en tiempo real a los cambios en su sitio, asegurándose de que sus visitantes siempre vean el contenido más reciente sin sacrificar la velocidad.
Optimización de imagen: Las imágenes pueden ralentizar considerablemente un sitio web, pero la función de optimización de imágenes de RabbitLoader lo cambia todo. Comprime y redimensiona automáticamente las imágenes a un tamaño óptimo sin comprometer la calidad, lo que garantiza que tu sitio cargue rápidamente sin sacrificar el atractivo visual.
Carga diferida (Lazy Loading): Tanto WP Rocket como RabbitLoader ofrecen carga diferida para imágenes e iframes, pero RabbitLoader va más allá al ofrecer carga diferida de JavaScript.
Compatibilidad: RabbitLoader está diseñado para funcionar a la perfección con una amplia gama de temas y plugins de WordPress, al igual que WP Rocket. Tanto si tienes un blog sencillo como una compleja página web de comercio electrónico, RabbitLoader está diseñado para optimizar el rendimiento de tu sitio sin conflictos.
W3 Total Cache
W3 Total Cache es un potenciador de rendimiento robusto que maneja no solo los problemas de almacenamiento en caché, sino también los problemas causados por los scripts y las hojas de estilo.
Puedes eliminar fácilmente el código JavaScript y CSS que bloquea la renderización habilitando primero la opción Minificar en la configuración del plugin y configurándola en modo manual.
A continuación, debe hacer clic en la pestaña 'Eliminar recursos que bloquean la renderización' y copiar la dirección de enlace completa de los archivos necesarios para los scripts y hojas de estilo que bloquean la renderización. Ahora puede usar estos enlaces e introducirlos en la sección 'JS' del archivo. Rendimiento> Minificar .
W3 Total Cache tiene más de un millón de instalaciones activas y puede descargarlo a su sitio de forma gratuita desde el sitio web de WordPress.org.
Paquete de refuerzo de velocidad
Paquete de refuerzo de velocidad es una herramienta confiable para optimizar hojas de estilo, JavaScripts, carga diferida y eliminación de desorden. El equipo de desarrolladores actualiza continuamente este complemento para mantenerlo actualizado con las últimas actualizaciones y medidas de seguridad.
Si vende productos y servicios en línea, el Optimización específica de WooCommerce Las características de Speed Booster Pack te ayudarán mucho a aumentar la visibilidad de tu tienda en Internet.
Puedes solucionar rápidamente los problemas de JavaScript y CSS que bloquean la renderización en tu sitio web de WordPress haciendo clic en la pestaña "Avanzado" del menú "Paquete de optimización de velocidad" de tu panel de administración.
Para JavaScript, activa las opciones «Mover scripts al pie de página» y «Aplazar el análisis de archivos JavaScript». A continuación, ve al menú «Optimización CSS» y elige entre las opciones disponibles para mejorar el rendimiento de tu sitio web.
Speed Booster Pack es una solución gratuita disponible en el sitio web de WordPress.org.
JCH Optimizar
JCH Optimizar es el último elemento de esta lista de complementos sugeridos que viene equipado con herramientas útiles para acelerar la carga de la página. Por ejemplo, le ayuda a reducir la cantidad de solicitudes HTTP necesarias para cargar sus páginas y, al mismo tiempo, a reducir el tamaño de esas páginas.
Generador de Sprite es otra característica interesante disponible en este complemento que reduce la cantidad de solicitudes HTTP para cargar las imágenes de fondo.
Con JCH Optimize, puedes eliminar el JavaScript y el CSS que bloquean la renderización si actualizas a un plan premium. Solo tienes que activar las opciones «Premium» u «Optimum» en la sección «Ajustes automáticos». Los ajustes de entrega de CSS también están disponibles únicamente en la versión Pro.
Puede instalar este complemento de forma gratuita desde WordPress.org, pero debe comprar un plan premium para desbloquear todo su potencial. Los planes de precios comienzan desde $ 29 por seis meses y llegan a $ 99 para acceso de por vida.
Resumen
La velocidad de carga del sitio web es uno de los elementos más críticos para atraer, involucrar y retener al público. Debe darle una alta prioridad al optimizar su sitio web para los motores de búsqueda y utilizar la herramienta Google PageSpeed Insights para medir qué tan bien se desempeña en este campo.
El elemento JavaScript y CSS que bloquea la renderización es una de las sugerencias más comunes que puede ver al usar la potente herramienta de Google. Puede solucionar fácilmente este problema instalando uno de los cinco complementos que presentamos en este artículo y acelerar la velocidad de carga de sus páginas en gran parte.
Esperamos que este tutorial le resulte beneficioso y disfrute de un sitio web de carga rápida para obtener los mejores resultados posibles.
