d'Economía.net

NEGOCIOS ONLINE

WordPress: eliminar recursos que bloquean el procesamiento | Necesario


Actualmente hay 810 millones sitios web que usan WordPressde acuerdo a un estudio reciente de Colorlib. Si bien esa cifra es impresionante, no muestra ningún signo de desaceleración.

Ese mismo estudio muestra que se crean 500 sitios nuevos en WordPress por día. Para ponerlo en perspectiva, este número se compara con solo entre 60 y 80 sitios nuevos por día para plataformas como Squarespace y Shopify.

WordPress es popular por una razón. Es una plataforma fácil de usar que cualquiera puede aprovechar para iniciar un blog o un negocio. Su biblioteca de complementos también brinda a los usuarios una funcionalidad casi ilimitada en su sitio. Pero esta biblioteca de complementos también puede causar un problema.

Google es abierto sobre el hecho de que la velocidad de la página es una señal de clasificación crítica para el SEO. Esto se debe a que la rapidez con la que se carga una página está directamente relacionada con la experiencia general del usuario.

Alcanzar los niveles de velocidad de página aceptables para Google puede requerir algunos ajustes en el sitio. Uno de esos ajustes que Google suele solicitar es eliminar el bloqueo de renderizado de JavaScript en WordPress.

Obtenga alojamiento de WordPress totalmente administrado

Potencia tu sitio con el alojamiento de WordPress más optimizado de la industria

Identificar recursos que bloquean el renderizado

El primer paso para aprender cómo eliminar los recursos que bloquean el procesamiento en WordPress es identificar cuáles son estos recursos. El proceso no es difícil, pero requiere el uso de algunas herramientas de análisis de sitios web.

DevTools de Google Chrome ofrece tres opciones para identificar recursos que bloquean el procesamiento. Esas tres herramientas son:

En Lighthouse, sus recursos de bloqueo de procesamiento aparecerán en la pestaña Oportunidades, pero solo si estos recursos están causando problemas en su sitio. Cuando seleccionas la pestaña Oportunidades, verás marcados los recursos que bloquean el procesamiento, una breve descripción del problema que causaron y una sugerencia sobre cómo solucionarlo.

PageSpeed ​​Insights y GTmetrix son plataformas que utilizan la biblioteca de Lighthouse para medir varios de los factores de clasificación de Google, como la velocidad de la página, Core Web Vitals, etc. Incluirán «eliminar recursos que bloquean el procesamiento» como una de las soluciones para su sitio, pero puede figurar como de baja prioridad.

Aunque la plataforma puede afirmar que la prioridad es baja, enumerará los archivos individuales que causan el problema y le brindará una solución detallada.

Recursos comunes de bloqueo de renderizado

Normalmente, en el mundo de WordPress, el término «recursos de bloqueo de renderizado» se refiere a JavaScript o CSS.

No todos los archivos CSS o JavaScript bloquean el procesamiento, pero ambas fuentes son responsables de la mayoría de los problemas de velocidad del sitio. Los recursos adicionales de bloqueo de renderizado podrían ser:

  • importaciones HTML
  • hojas de estilo CSS

Las importaciones de HTML ya no son tan populares, pero conocerlas sigue siendo importante. Es posible que todavía existan en muchos sitios web antiguos, aunque sean tecnología heredada.

Cómo eliminar recursos que bloquean el renderizado en WordPress

Ahora que tenemos un poco de información sobre por qué es importante eliminar JavaScript que bloquea el procesamiento en WordPress, profundicemos en el proceso paso a paso para acelerar un sitio de WordPress.

Paso 1: «Minimizar» archivos CSS y JavaScript

El primer paso aquí es reducir la cantidad de archivos CSS y JavaScript que ejecutan su sitio web. Puede hacerlo reduciendo la cantidad de espacios en blanco y comentarios innecesarios en el código de su sitio web.

Paso 2: concatenar CSS y JavaScript

Este proceso puede parecer más complejo de lo que realmente es. Toda concatenación significa combinar archivos .css y .js apropiados para condensar la cantidad de espacio que consumen. Sólo debería haber un puñado de archivos para concatenar en el código de su sitio web, por lo que no debería ser demasiado difícil de manejar.

Paso 3: aplazar la carga de JavaScript

Puede configurar sus archivos JavaScript para que se inicien después de todos los demás elementos de sus páginas web. Una de las formas populares de hacer esto es un tema más avanzado que cubriremos más adelante llamado Carga asincrónica.

Estos tres pasos completan el proceso de cómo eliminar JavaScript que bloquea el procesamiento en WordPress sin un complemento. Los mismos pasos también se aplican a los archivos CSS.

Aunque estos pasos son bastante simples, pueden ser un desafío realizarlos manualmente en WordPress. Esto se debe, en gran parte, a la naturaleza de los complementos de WordPress. Cada complemento de front-end de su sitio puede ejecutar varios de sus propios archivos CSS y JavaScript.

WordPress proporciona una lista que combina todos sus archivos JavaScript y CSS, a través de complementos, en un solo lugar. Si bien esto facilita las cosas, la forma más sencilla de eliminar los recursos que bloquean el procesamiento es con un complemento.

Eliminación de recursos CSS y JavaScript que bloquean el procesamiento con complementos de WordPress

Los complementos de WordPress son herramientas excelentes para proporcionar todo tipo de funcionalidades a su sitio, especialmente en el mundo del comercio electrónico. Pero muchos de estos complementos también ofrecen soluciones a problemas técnicos del sitio web, como la velocidad de la página y la eliminación de recursos que bloquean el procesamiento.

Aquí hay una lista de algunos complementos y herramientas populares que puede utilizar para eliminar los recursos que bloquean el procesamiento y darle a las páginas de su sitio una velocidad increíble.

1. Jetpack

La instalación de JetPack Boost en su sitio le brinda todas las herramientas que necesita para eliminar los recursos que bloquean el procesamiento y optimizar la velocidad de su página. JetPack Boost incluye interruptores de palanca que le permiten activar fácilmente la optimización de CSS y diferir JavaScript no esencial directamente desde la configuración del complemento.

También podrá posponer imágenes no esenciales que, aunque no son recursos que bloquean el procesamiento, pueden ayudar con la velocidad general del sitio. Además, JetPack Boost le brinda a su sitio web una puntuación general que puede monitorear para ver cómo los cambios afectan su sitio.

2. Optimización de JCH

Los usuarios de WordPress deberán ser un poco más expertos en tecnología para este complemento que la mayoría de los demás, pero es útil para aumentar la velocidad de la página. JCH Optimize aumentará la velocidad al reducir la cantidad de solicitudes HTTP que se necesitan para cargar sus páginas web.

El complemento también ayuda con optimización de imágenes para un sitio de WordPress a través de su Generador de Sprites. Esta función combina imágenes de sitios más grandes en mini “sprites”, lo que facilita la carga de su navegador.

Desafortunadamente, JHC Optimize requiere una suscripción paga pero, a $29 por mes, más de 10,000 usuarios de WordPress sienten que vale la pena.

3. Paquete de refuerzo de velocidad

Las funciones de este complemento lo ayudan a eliminar el desorden, optimizar CSS y permitir la «carga diferida» de los elementos del sitio web. El equipo de desarrollo mantiene el complemento actualizado e incluso se integra con WooCommerce para ayudar a los usuarios de comercio electrónico.

Es posible que sea necesario un poco de “prueba y error” para configurar correctamente el complemento gratuito, pero no se sienta abandonado. Una de las mayores ventajas de Speed ​​Booster Pack es su soporte. El equipo de desarrollo proporciona tres paquetes de soporte práctico de nivel profesional para ayudarlo a configurar Speed ​​Booster Pack para satisfacer las necesidades únicas de su sitio.

4. Cohete WP

WP Rocket proporciona varias funciones para ayudar a eliminar los recursos que bloquean el procesamiento y optimizar un sitio de WordPress para mayor velocidad. El complemento puede ayudarte:

  • Aplazar consultas remotas de JavaScript
  • Realizar minificación de CSS y JavaScript
  • Implementar “carga diferida” para imágenes

El complemento ofrece un proceso de configuración sencillo para WordPress, pero es posible que a algunos usuarios no les gusten los cambios que realiza en su panel de WP. Si se siente cómodo con la configuración tradicional de WordPress, es posible que le cueste acostumbrarse. Independientemente del cambio en la interfaz, el complemento aún ofrece muchas funciones y herramientas para eliminar los recursos que bloquean el procesamiento.

Ejecutar WP Rocket cuesta $49 por año para el complemento principal. También puedes agregar algunos extras gratuitos de la biblioteca de complementos de WordPress.

4. Optimizar automáticamente

Autoptimize tiene una forma única de condensar imágenes para aumentar la velocidad de su sitio. El complemento hace esto convirtiendo todas las imágenes al formato WebP. Además, Autoptimize proporciona todas las herramientas básicas de bloqueo de renderizado que puedas imaginar, como minimizar CSS y JavaScript, así como capacidades de almacenamiento en caché de scripts. El complemento Autoptimize también funciona con el Complemento de JavaScript asíncrono.

El complemento funciona con PageSpeed ​​Insights y funciona específicamente para optimizar los problemas identificados por esa plataforma. La configuración de Autoptimize puede ser un poco compleja, pero una vez que los usuarios se acostumbran a la interfaz, aprecian las funciones que ofrece.

Puede comprar dos versiones de este complemento: una versión de configuración personalizada por $165 o una configuración experta que viene con una revisión profesional de su sitio web por $667.

Técnicas avanzadas para eliminar recursos que bloquean el renderizado

Para las personas que quieren hacer un esfuerzo adicional y tener más control sobre la eliminación de recursos que bloquean el procesamiento en su sitio de WordPress, existen un par de métodos manuales que pueden implementar.

Carga asincrónica y diferida para archivos JavaScript y CSS

A medida que agrega JavaScript a WordPress (o CSS), puede agregar un atributo «async» o «difer» dentro del código de su sitio web. Asignar este marcador a ciertos archivos hace que su sitio web los trate como no esenciales y le indica a su navegador que los muestre por separado de otros archivos críticos dentro del sitio.

Para asignar carga asincrónica a un script en particular, agregue “

Solicita tu minicrédito ahora
Ten a mano tu DNI, un número de teléfono y el IBAN de tu cuenta bancaria
Please choose an option☝️!
Please choose an option☝️!