En el panorama digital competitivo de hoy, la velocidad del sitio web es muy importante cuando se trata del éxito de un negocio en línea. Los gigantes de los motores de búsqueda como Google priorizan los sitios de carga rápida, reconociendo la necesidad de brindar una experiencia de usuario perfecta.
Según los estudios, las cargas de página más rápidas aumentan la participación de los usuarios y las tasas de conversión. De hecho, un retraso de un segundo en el tiempo que tarda una página en cargarse puede causar una caída del 7% en las conversiones de clientes. Teniendo esto en cuenta, es obvio que los propietarios de sitios web deben centrarse mucho en el rendimiento del sitio web.
Google se toma muy en serio el rendimiento del sitio web y lo tiene en cuenta a la hora de determinar los resultados de búsqueda. En consecuencia, es más probable que los sitios web que se cargan rápidamente aparezcan primero en los resultados de búsqueda, atraigan más visitantes y, finalmente, generen más ingresos. Pero, ¿cómo puede cumplir con los requisitos de Google y cargar su sitio web rápidamente?
Te deshaces de los recursos que podrían renderizar-bloquear un tiempo de carga del sitio web, como archivos CSS y JavaScript.
Sin embargo, eliminar estos recursos puede ser un desafío y llevar mucho tiempo, especialmente para las personas que carecen de habilidades técnicas.
En este artículo, explicaremos los recursos que bloquean el procesamiento y cómo afectan el rendimiento del sitio web y brindaremos una guía paso a paso para eliminarlos de su WordPress sitio. Entonces, ¡comencemos a optimizar su sitio web para lograr velocidad y éxito!
Render Blocking Resources
Cualquier recurso que deba cargarse antes de que se pueda mostrar una página web se considera un recurso que bloquea la visualización. Estos recursos influyen en una rendimiento del sitio web & efectividad y extienda el tiempo que lleva cargar una página.
Un archivo CSS o JavaScript puede considerarse un recurso que bloquea la visualización si ese archivo bloquea la visualización de una página web. Sin embargo, la importancia de cargar la página puede variar según su necesidad inmediata.
Cuando un usuario accede a una página, el navegador primero procesa el código HTML para mostrar su contenido en la mitad superior de la página. Cuando el navegador encuentra archivos CSS y JavaScript, también los descarga y los procesa. Si los archivos de recursos contienen códigos adicionales o partes no utilizadas, se tarda más en cargar la página web.
Types of Render Blocking Resources
En general, los archivos de recursos como CSS y JavaScript se consideran recursos que bloquean el renderizado en WordPress. El navegador ve estos recursos como críticos y requiere carga antes de que se pueda mostrar la página. Pero eso no es todo; hay más archivos de recursos que bloquean la representación de una página web.
Aquí hay una lista de recursos de bloqueo de procesamiento:
Hojas de estilo CSS
El diseño y la presentación de una página web están determinados por las hojas de estilo CSS. A Archivo CSS será considerado como un recurso de bloqueo de procesamiento si se coloca en el sección de una página HTML.
Archivos JavaScript en el Sección
JavaScript es un Lenguaje de escritura que se pueden utilizar para proporcionar una página web con comportamiento dinámico e interacción. Un archivo JavaScript se considerará un recurso de bloqueo de procesamiento si se coloca en una página HTML. sección.
Fuentes
Los textos en una página web se muestran usando diferentes fuentes. Las fuentes también se consideran un recurso que bloquea la representación si se incluyen en una página HTML. sección y cargado desde un servidor local o un CDN.
Importaciones HTML
Estas son las funciones HTML más antiguas que permiten que las páginas web incluyan elementos de otros documentos HTML. Aunque las importaciones de HTML ya no se usan con tanta frecuencia, es posible que todavía se vean en ciertos sitios más antiguos. Las importaciones de HMTL también se consideran recursos de bloqueo de procesamiento.
Why Are Render-Blocking Resources Terrible for Webpages
Si su sitio de WordPress incluye recursos de bloqueo de procesamiento, se quedará atrás en los resultados de búsqueda. Incluso si actualmente está en primera línea, los sitios con mejor rendimiento eventualmente lo dominarán.
Los sitios con recursos que bloquean el renderizado cargarán archivos adicionales mientras renderizan el sitio. Antes de ver el sitio web, los usuarios deben esperar mientras se procesan los archivos. Los siguientes indicadores de rendimiento para sitios web se verán afectados por esos recursos:
- Pintura con contenido más grande: Esto determina cuánto tiempo se tardaría en cargar el contenido principal de la página.
- Primera pintura con contenido: El tiempo que tarda un navegador en producir el primer contenido del modelo de objetos (DOM) del documento en su sitio web.
- Tiempo total de bloqueo: Esto evalúa cuánto tiempo lleva desde el primer contenido completo hasta cuánto tiempo tarda una página en volverse completamente interactiva.
Aunque los recursos de bloqueo de procesamiento no son necesarios para la carga, pueden dificultar el procesamiento de un sitio web o una página web. Por lo tanto, es esencial eliminar dichos recursos para evitar que la navegación de los usuarios por su sitio web sea difícil.
Echemos un vistazo más de cerca a por qué el bloqueo de procesamiento es un problema grave para las páginas web:
Tiempo de carga de página lento
Los recursos que bloquean el procesamiento harán que el sitio web se cargue más lentamente, lo cual es una de sus principales desventajas. Una página web se carga lentamente cuando contiene archivos de recursos con elementos innecesarios. Por lo tanto, afectará la apariencia de los resultados de búsqueda, reducirá la participación del usuario y aumentará la tasa de rebote.
Representación bloqueada
A menudo, un navegador deja de renderizar una página web cuando se encuentra con recursos que bloquean el renderizado porque quiere que los recursos que bloquean el renderizado se recuperen y procesen.
En última instancia, los usuarios se molestarán y abandonarán su sitio debido a la falta de respuesta de la página o al procesamiento lento.
Además, si un recurso se carga lentamente, el navegador también puede darse por vencido y dejar de intentar cargarlo. Esto podría generar páginas rotas o información faltante.
Disminución de la participación del usuario
Cuando se producen retrasos en el renderizado, el de usuario mejorada baja con eso. Los usuarios siempre esperan tiempos de carga rápidos y, por lo general, abandonan un sitio de carga lenta. Entonces, terminan en un sitio que se carga más rápido.
Los sitios de carga lenta tienen un efecto perjudicial en la satisfacción del consumidor y la reputación de la marca. Con eso, el tráfico del sitio web y la tasa de conversión también disminuye drásticamente.
Existen diferentes enfoques para eliminar los recursos que bloquean el renderizado de WordPress. Sin embargo, le presentaremos métodos manuales para eliminar los recursos que bloquean el renderizado. Luego, le mostraremos cómo puede hacerlo utilizando algunos de los complementos de renombre en WordPress.
Eliminate Render-Blocking Resources Manually
Puedes evitar hacerlo manualmente, así que no te frustres. Pero pasar por esta sección seguramente lo ayudará a aprender algunos Optimización del rendimiento de WordPress tecnicas Pero primero, mire este video para familiarizarse con los términos discutidos.
#1. Identificar los recursos que bloquean el renderizado
Primero debe averiguar los recursos que bloquean el renderizado antes de eliminarlos de su sitio web. Simplemente siga estos pasos para descubrir los recursos de bloqueo de procesamiento en su sitio web de WordPress:
- Ve a Google PageSpeed Insights.
- Introduce la URL de tu sitio en la barra de búsqueda.
- Haga clic en el botón "Analizar" para obtener información sobre su sitio web.
- Desplácese hacia abajo y compruebe la Ofertas Sección.
- Si su página tiene recursos que bloquean el renderizado, aparecerán en la lista.
#2. Uso de los atributos "Aplazar" y "Async" para JS
Después de identificar los recursos que bloquean el renderizado, es hora de eliminarlos para mejorar el rendimiento del sitio web. De diversos métodos, usar el método "aplazar" o "asincrónico" para archivos JavaScript es un enfoque para hacer esto.
Cuando se trata del atributo "aplazar", permite que el navegador descargue el archivo JS y luego lo ejecute. Pero sucede cuando la página ha terminado de cargarse y está lista para mostrar su contenido.
Entonces, el resto de los elementos de la página pueden cargarse en paralelo con el archivo JavaScript. Como resultado, se reduce el tiempo de carga de la página.
Otro enfoque es el atributo "async" que permite que el navegador descargue el archivo JS siempre que esté disponible. Esto sucede sin bloquear ningún otro elemento de la página. En consecuencia, el archivo JS puede cargarse en paralelo con otros elementos, acelerando el proceso de carga.
Puede deshacerse de los recursos que bloquean el renderizado y aumentar la velocidad de su sitio web utilizando el atributo "aplazar" o "async".
#3. Uso del atributo "Medios" para CSS condicional
Utilizar los atributos de "medios" para CSS condicional es otro enfoque para eliminar los recursos que bloquean el renderizado. Con este atributo, puede definir archivos CSS únicos para navegadores de escritorio y móviles.
Por ejemplo, puede incluir un archivo CSS dedicado a dispositivos de escritorio y otro archivo CSS adaptado a dispositivos móviles. Puede indicarle al navegador que el archivo CSS del escritorio se cargará cuando se acceda a través de un dispositivo de escritorio.
Del mismo modo, el CSS móvil solo debe cargarse cuando se accede a través de dispositivos móviles. Al cargar CSS específico del dispositivo para dispositivos designados, puede reducir los recursos que bloquean el renderizado y aumentar el tiempo de carga de su sitio.
#4. Aplazamiento de CSS no crítico
Además de utilizar el atributo "medios" para CSS condicional, intente diferir el CSS no crítico. Para este enfoque, debe cargar principalmente el CSS esencial. A continuación, carga el resto del CSS a medida que se carga la página.
Por ejemplo, puede tener un archivo CSS enorme que incluye todos los estilos para su sitio web. Pero solo se requiere una pequeña parte de ese archivo CSS para mostrar el contenido en la parte superior de la página de su sitio. El contenido de la mitad superior de la página se puede mostrar rápidamente retrasando el CSS no crítico, y el CSS restante se puede cargar cuando se carga la página.
#5. Eliminación de CSS y JS no utilizados
La eliminación de archivos CSS y JavaScript innecesarios es otra técnica para eliminar los recursos que bloquean el renderizado. Estos archivos pueden hacer que su página sea más pesada y aumentar el tiempo de carga.
Al eliminar los archivos CSS y JS no utilizados, puede reducir la cantidad de recursos que bloquean el procesamiento. Puede utilizar fácilmente herramientas como PurifyCSS o UnusedCSS para eliminar cualquier archivo CSS no utilizado de su sitio web.
#6. Carga local de fuentes personalizadas
Las fuentes personalizadas también pueden incluir recursos que restringen la representación. En lugar de depender de fuentes externas como Google Fonts, debe cargar localmente sus propias fuentes personalizadas para evitar necesitar estos recursos.
Puede garantizar que sus fuentes personalizadas se carguen de manera rápida y eficiente sin ralentizar el rendimiento de su sitio web cargándolas localmente. Esto puede conducir a un sitio web más rápido y con mayor capacidad de respuesta y mejorar la experiencia del usuario.
#7. Minimizar JS y CSS
Por último, minimizar sus archivos CSS y JavaScript puede ayudar a que su sitio web funcione mejor. La minificación elimina caracteres innecesarios, como espacios en blanco y comentarios, de su código. Por lo tanto, el tamaño de sus archivos se reduce, lo que acelera la carga.
Para minificar sus archivos, puede usar herramientas como MinifyJS o CSSNano. Guarde una copia de sus archivos originales en caso de que alguna vez necesite modificarlos.
Eliminate Render-Blocking Resources With Plugin
En esta sección, le mostraremos cómo puede eliminar los recursos que bloquean el renderizado utilizando complementos de WordPress. Estos complementos son famosos en WordPress y pueden eliminar rápidamente los recursos que bloquean el renderizado. La mejor parte es que incluso puede mejorar el rendimiento de su sitio web sin ninguna experiencia especializada.
#1. W3 Total Cache
W3 Total Cache (W3TC) mejora toda la experiencia del usuario de un sitio web de WordPress. Elimina los recursos que bloquean el renderizado y mejora el SEO, Vitales principales de la web, y más. El complemento utiliza funciones como la integración de la red de entrega de contenido para implementar las mejores prácticas.
Para eliminar los recursos que bloquean el procesamiento, instale y active el complemento W3 Total Cache y siga estos pasos:
- Visite la Rendimiento sección en el tablero de WordPress y haga clic en Configuración general.
- Bajo la Minimizar encabezado, habilitar Minimizar y seleccionar Manual como el modo minificar.
- Ahora haga clic en Guardar todos los ajustes.
- Luego recopile todos los archivos Javascript y CSS que bloquean el renderizado a través de Google PageSpeed Insights.
- Seguido de volver a Rendimiento > Minimizar.
- Ahora en el js sección, primero, haga clic permitir para Configuración de JS Minificar. Entonces bajo el Operaciones en áreas sección, seleccionar No bloquear utilizando el "diferir" tipo para el Antes etiqueta.
- Ahora dirígete a gestión de archivos JS, seleccione el tema que ha activado y haga clic en el Agregar secuencia de comandos botón. Ahora recopile las URL de Javascript que tienen problemas escaneados por Google PageSpeed Insights. Pegue las URL en el campo designado como se indica en la imagen.
- Ahora desplácese un poco hacia abajo hasta la sección CSS. Seleccione su tema del menú desplegable en la sección de administración de archivos CSS y haga clic en Agregar una hoja de estilo. Ahora simplemente siga el paso anterior y copie y pegue las URL recopiladas de PageSpeed Insight que tienen problemas.
- Dado que todos los ajustes están configurados, haga clic en el botón Guardar configuración y purgar botón para ejecutar.
#2. JCH Optimizar
JCH Optimizar mejora el rendimiento del sitio web de WordPress medido por la información de Google PageSpeed. El complemento mejora la primera pintura con contenido (FCP), la pintura con contenido más grande (LCP), el índice de velocidad (SI), el cambio de diseño acumulativo (CLS), el tiempo para interactuar (TTI) y más.
Por lo tanto, la experiencia general del usuario y el rendimiento del sitio web mejoran significativamente.
Después de instalar y activar JCH Optimize, siga estos procesos para eliminar los recursos que bloquean el renderizado:
- Ve a Ajustes>JCH Optimizar, desplácese hacia abajo un poco y vaya a la configuración de funciones básicas.
- Habilitar el Optimizar la entrega de CSS para eliminar el bloqueo de renderizado CSS. Esta función determina automáticamente el CSS esencial necesario para mostrar el contenido en la mitad superior de cada página web. Además, lo inserta en el sección del contenido HTML de cada página.
- La precarga El enlace se usa para cargar los archivos CSS concatenados de forma asíncrona.
- Para eliminar los recursos de bloqueo de procesamiento de Javascript, debe incluir el asíncrono o diferido atributos a la etiqueta. El javascript puede fallar si hay alguna dependencia en ellos, ya que esto podría cambiar el orden en que se cargan.
- En el tablero de JCH Optimize, vaya a la Combinar archivos Ajustes automáticos .
- Ahora haga clic en el Óptimo, que habilita automáticamente la Javascript diferido/asincrónico.
- Habilitación Configuración óptima difiere o carga JavaScript de forma asíncrona.
- Si los archivos Javascript se cargan dinámicamente, no se pueden aplazar.
#3. Paquete de refuerzo de velocidad
Para mejorar el rendimiento de su sitio y la usabilidad general, Paquete de refuerzo de velocidad es otro gran complemento de WordPress. Su sitio ocupará un lugar más alto en los principales motores de búsqueda como Google. Obtendrá un mayor tráfico y una velocidad masiva con este complemento.
Después de instalar y activar Speed Booster, simplemente siga los siguientes pasos:
- Ve a Paquete de refuerzo de velocidad en su Panel de WordPress.
- Para eliminar los recursos de bloqueo de procesamiento de javascript, haga clic en el Activos y desplácese hacia abajo. Ir a Optimizar JavaScript opción. Al hacer clic en todo, puede diferir todos los archivos JS y JS en línea, o puede seleccionar personalizar para incluir los scripts JS seleccionados.
- Luego habilite Mover JavaScript al pie de página. Esto mueve todos los archivos JS y JS en línea a la parte inferior de las fuentes de su página.
- Ahora, haga clic en el Optimizar CSS opción para eliminar los recursos de bloqueo de procesamiento CSS.
- Obtendrá opciones para habilitar CSS crítico, que optimiza la entrega de CSS según recomendaciones de google. Esta opción diferirá todos los archivos CSS y alineará el estilo de su contenido en la parte superior de la página.
Puedes habilitar Inline todo CSS para alinear todos los archivos CSS en la salida HTML. También hay una opción para Minificar todo el CSS integrado para minimizar el CSS ya integrado.
- Después de configurar el complemento, guarde todas las configuraciones para eliminar los recursos que bloquean el renderizado.
#4. Autoptimize
Autoptimize es otro complemento para optimizar y eliminar fácilmente los recursos que bloquean el renderizado. El complemento agiliza los scripts JS y los estilos CSS reubicándolos en el pie de página, agregándolos, minificándolos y almacenándolos en caché.
Optimiza el CSS inyectándolo en el encabezado de la página, CSS crítico en línea y refiriéndose al CSS agregado completo. Además, minimiza automáticamente el HTML para una mejor optimización.
Instale y active el complemento Autoptimize y luego siga estos procesos para eliminar los recursos que bloquean el renderizado:
- En primer lugar, vaya a Configuración> Optimización automática desde su panel de WordPress.
- En la sección Opciones de Javascript, marque la casilla "¿Optimizar el código JavaScript?"
- En la sección de opciones de CSS, marque la casilla "¿Optimizar el código CSS?"
- Ahora haz clic en guardar Cambios y caché vacío.
Esto suele ser suficiente para resolver los recursos que bloquean el renderizado. Sin embargo, el resultado puede cambiar según el tema y el complemento instalado en su sitio de WordPress. Para verificar que se hayan resuelto los problemas, vuelva a ejecutar su sitio a través de PageSpeed Insights. Para una mayor optimización, siga estos pasos:
- Después del paso anterior, muchas opciones están disponibles en las opciones de Javascript y CSS.
- Ahora puede habilitar el También agrega CSS y Archivos JS agregados
- Por último, haga clic en Guardar cambios.
#5. WP Rocket
WP Rocket es un complemento de WordPress premium y de renombre para la optimización del rendimiento del almacenamiento en caché. Pero es más que un complemento de persecución, que incluye la eliminación de los recursos que bloquean el renderizado de su sitio. Como resultado, el rendimiento principal de Web Vitals y la puntuación de información de PageSpeed aumentan significativamente.
Después de instalar y activar el complemento WP Rocket, elimine los recursos que bloquean el renderizado con los siguientes pasos:
- Haga clic en WP Rocket, vaya a la Optimización de archivos pestaña, y vaya a la Archivo CSS .
- Habilitar el Optimizar la entrega de CSS
- Ahora vaya a la sección Archivo JavaScript y seleccione Cargar JavaScript diferido. También puede probar la opción Modo seguro para Jaquery. Pero si rompe el diseño frontal de su sitio web, puede revertirlo.
- Guarde todos sus cambios haciendo clic en el Guardar Cambios ..
Beneficios de eliminar los recursos que bloquean el renderizado de un sitio web
Un tiempo de carga de página más rápido puede tener un gran impacto en la SEO de un sitio web Dado que Google siempre prefiere los sitios que cargan más rápido y funcionan sin problemas. Por lo tanto, las páginas con una puntuación superior a 90 siempre tendrán mayor prioridad en los resultados de búsqueda. Usando los complementos mencionados anteriormente, puede lograr lo siguiente Page Speed Resultado:
Los tiempos de carga de página más rápidos pueden conducir a una mayor participación de los usuarios, ya que es más probable que los usuarios permanezcan en un sitio que se carga rápidamente. Así, los Usuarios pueden navegar cómodamente por el sitio o realizar una compra rápidamente.
Además, eliminar los recursos que bloquean el renderizado puede mejorar significativamente la experiencia del usuario móvil porque es más probable que los usuarios móviles utilicen redes más lentas con datos limitados.
Consideraciones Finales:
Hemos mencionado los procesos manuales y automatizados (complemento) para eliminar los recursos que bloquean el renderizado. Si está interesado en optimizar cada ángulo del rendimiento de su sitio web, puede hacerlo manualmente. Pero si desea minimizar su molestia y lograr una mejor puntuación de PageSpeed de inmediato, pruebe los complementos que hemos mencionado.
Ya hemos sido testigos de una puntuación de rendimiento increíble prácticamente en varios sitios web. Ahora, es su turno de seguir optimizando su sitio web de WordPress con un conocimiento técnico mínimo y brindar una experiencia excepcional en el sitio web.
También puede explorar trucos para hacer que su carga del sitio web a la velocidad del rayo.
