TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo generar CSS crítico en el sitio de WordPress?

55

Hay muchos creadores de sitios web de arrastrar y soltar disponibles en Internet para crear sitios web sin conocimientos técnicos. Sin embargo, debe aprender algunos aspectos técnicos del SEO para mantener su sitio en la parte superior de las páginas de resultados de los motores de búsqueda. CSS crítico es uno de esos temas técnicos para optimizar la entrega de contenido por turnos que afectan directamente la velocidad. El ecosistema de WordPress hace que esto sea más complicado para los usuarios normales que usan múltiples complementos en su sitio. En este artículo, exploremos cómo crear CSS crítico para el sitio de WordPress para mejorar la puntuación de PageSpeed ​​de Google.

Comprensión de los conceptos básicos

Antes de discutir sobre CSS crítico, es necesario comprender algunas terminologías como optimización de entrega de contenido y por encima de la página. Además, también debe comprender el método básico para usar hojas de estilo externas en WordPress.

Contenido por encima del pliegue

Cuando abre un sitio web en una computadora de escritorio o un dispositivo móvil, la parte visible que ve en la pantalla es el área de contenido en la mitad superior de la página. Ésta es una terminología de periódico tradicional en la que puede ver contenido en la mitad superior de la página en la parte superior de la primera página. Generalmente, la gente que solía doblar el periódico y el área superior del pliegue ofrece contenido importante. De manera similar, la parte superior visible de la página web que se carga primero debe ofrecer el contenido más valioso para el usuario. Por lo tanto, debe concentrarse en optimizar la sección superior visible para cargar con una velocidad increíble.

Optimización de la entrega de contenido

Muchas herramientas de velocidad como Google PageSpeed ​​Insights miden cómo el sitio web entrega contenido en la mitad superior de la página. Puede ver esto como una medida de First Contentful Paint (FCP). Si detectan un bloqueo, verá una advertencia para eliminar el elemento de bloqueo. Una de las sugerencias populares que verá en la herramienta Google PageSpeed ​​Insights es eliminar los recursos que bloquean el procesamiento. Si hace clic en esa sugerencia, Google le mostrará cómo optimizar la entrega de CSS / JS críticos y aplazará todos los CSS / JS no críticos.

¿Cómo generar CSS crítico en el sitio de WordPress?

Sugerencia crítica de CSS y JS

Arreglar JavaScript que bloquea el renderizado (jQuery) es bastante fácil ya que los temas / complementos cargan los scripts de forma predeterminada en la sección del pie de página. jQuery es el único problema, que puede ser necesario para que muchos sitios carguen contenido en la mitad superior de la página. Dado que WordPress también usa jQuery, puede ignorar este error si solo se debe a jQuery. De lo contrario, use complementos como WP Rocket para combinar y entregar todos los scripts si eso no rompe el diseño de su sitio.

Sin embargo, el problema es generar CSS crítico y cargarlo primero. En este artículo, explicaremos cómo lidiar con la optimización CSS para mejorar la puntuación de velocidad de la página.

Relacionado: Configuración adecuada del complemento WP Rocket para acelerar su sitio.

Cargando CSS en sitios web

Hay varias formas de insertar CSS en su página web. Puede hacer esto de forma en línea, interna o externa. La forma más popular y recomendada es vincular hojas de estilo externas en la sección de encabezado de una página web. Como el contenido de la sección de encabezado se carga primero con la página web, afecta drásticamente la carga del contenido en la mitad superior de la página y, por lo tanto, la velocidad de la página.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Cargando CSS en WordPress

WordPress usa style.css como un archivo externo para entregar estilos de temas. Este es un archivo obligatorio (además de functions.php) para ejecutar un sitio web de WordPress. Además, cada complemento de su sitio puede agregar archivos CSS adicionales. Abra su sitio web en el navegador Chrome y vea el código fuente (asegúrese de que no tiene instalados complementos de almacenamiento en caché o de que el almacenamiento en caché de la página esté desactivado).

¿Cómo generar CSS crítico en el sitio de WordPress?

Hojas de estilo en el encabezado

Puede ver los enlaces de WordPress a todas las hojas de estilo externas en la sección de encabezado de la página. Esto puede causar múltiples problemas desde la perspectiva de la optimización:

  • Algunos temas usan estilos CSS pesados ​​con pocos MB de tamaño. No es necesario que se carguen todos estos estilos cuando un usuario abre una página web en una computadora de escritorio o un dispositivo móvil.
  • Hay diferentes tipos de publicaciones, como productos, que pueden usar estilos completamente diferentes. En este caso, no necesita el otro CSS para la carga inicial (en la mitad superior de la página).

Cada página de su sitio necesita un CSS mínimo para cargar contenido en la mitad superior de la página. Este CSS mínimo necesario para la carga de la página se denomina CSS crítico en términos técnicos. En todos los casos anteriores, Google PageSpeed ​​Insights y otras herramientas le mostrarán una advertencia para optimizar la entrega de CSS.

Recuerde, eliminar CSS y scripts no utilizados también está relacionado con el uso de demasiados CSS / scripts en la página. Sin embargo, esto es bastante diferente de la optimización CSS crítica. Es posible que ni siquiera use algunos complementos en una página específica. Por ejemplo, no necesita el CSS del complemento de formulario de contacto en todas las páginas del sitio. En este caso, los archivos CSS / JS de los archivos de formulario de contacto no son necesarios en una publicación de blog normal y verá la advertencia de eliminar CSS / JS no utilizado. Consulte nuestro artículo sobre cómo deshabilitar CSS / JS no utilizado en WordPress y optimizar las páginas de WooCommerce para las llamadas de administrador AJAX.

¿Cómo generar CSS crítico en WordPress?

Ahora que sabes lo importante que es el CSS crítico para mejorar la velocidad de carga de la página. Hay dos formas de generar CSS crítico para su sitio.

  • Genere CSS crítico manualmente e insértelo en su sitio
  • Utilice el complemento WP Rocket para optimizar la entrega de contenido

Le explicaremos el proceso en detalle y podrá elegir el que mejor se adapte a su sitio.

Relacionado: ¿WP Rocket funcionará con el alojamiento de SiteGround?

Generación manual de CSS crítico

Hay muchas herramientas de terceros disponibles en Internet para generar CSS crítico manualmente. Sin embargo, esto tiene sentido cuando todas las páginas de sus sitios son similares y no tienen contenido personalizado en el área de la mitad superior de la página. Puede probar otros servicios gratuitos de generación de CSS críticos como Sitelocity.

  • Vaya al sitio web de Sitelocity e ingrese la URL de su página.
  • Haga clic en el botón "Generar CSS de ruta crítica".
  • Puede obtener el CSS crítico minificado para su página.

¿Cómo generar CSS crítico en el sitio de WordPress?

Generar CSS crítico

Ahora que ha generado CSS crítico y la siguiente tarea es insertarlo en la sección de encabezado de su sitio. En teoría, puede insertar los estilos en su archivo header.php entre las etiquetas y. Hay complementos para ayudar a insertar estilos en la sección de encabezado sin modificar los archivos de plantilla. Autoptimize es uno de los complementos que podemos recomendar para este propósito. Si ya está usando Autoptimize con fines de almacenamiento en caché, también puede usar el mismo complemento para insertar CSS crítico.

Puede insertar CSS crítico en "Opciones de CSS" del complemento Autoptimize. Primero habilite la casilla de verificación "Inline and Aplazar CSS" y pegue el CSS crítico en el cuadro de texto que aparece.

¿Cómo generar CSS crítico en el sitio de WordPress?

Opciones CSS

Como puede ver, el complemento Autoptimize también puede insertar automáticamente CSS en la parte superior de la página mientras difiere otros estilos. Sin embargo, esto aumentará rápidamente el tamaño de la caché al 100% y no tiene ninguna opción en el complemento para purgar automáticamente la caché. Además, romperá el sitio en la mayoría de los casos. Puede optar por el complemento Autoptimize CriticalCSS Power-Up que lo ayudará de una mejor manera. Para usar este complemento, debe obtener la API de Criticalcss.com por $ 10 por mes.

¿Por qué la generación manual de CSS crítico no funcionará?

Aunque el proceso de inserción manual anterior parece fácil, no es una tarea fácil. A continuación se presentan algunas de las razones por las que su CSS crítico no funcionará.

  • Puede tener contenido diferente como páginas, publicaciones de blog, productos, etc. Cada tipo de contenido en su sitio necesita CSS crítico diferente para cargar el contenido en la mitad superior de la página. El uso de un complemento o la inserción manual cargará el CSS crítico en todas las páginas y romperá parte del contenido.
  • Debe generar CSS crítico cada vez que actualice el tema, el complemento y el núcleo de WordPress. De lo contrario, el uso de CSS crítico antiguo romperá el diseño de su sitio. Esta es una tarea imposible para los usuarios normales para actualizar continuamente CSS crítico para cada actualización en el sitio. Con las opciones de actualización automática disponibles, debe tener mucho cuidado antes de actualizar el complemento / tema / núcleo en su instalación.
  • Es posible que necesite CSS crítico independiente para dispositivos móviles y de escritorio.

Con todos estos problemas, la única opción que queda es utilizar algún plugin que se encargue de estos y genere CSS crítico de forma dinámica y automática.

Cree CSS crítico para WordPress con WP Rocket

Afortunadamente, tiene un complemento de almacenamiento en caché que hace exactamente esta generación crítica de CSS en WordPress. WP Rocket es uno de los complementos de almacenamiento en caché más populares para WordPress debido a su configuración simplificada. Nuevamente, la generación crítica de CSS es una de las bellezas del complemento que cualquier usuario normal puede obtener sin romper el sitio.

  • Primero debe comprar el complemento premium WP Rocket.
  • Después de instalar y activar WP Rocket, vaya a "Configuración> WP Rocket" y navegue hasta la sección "Optimización de archivos".
  • Desplácese hacia abajo y habilite la casilla de verificación "Optimizar la entrega de CSS".

¿Cómo generar CSS crítico en el sitio de WordPress?

Habilitar CSS crítico en WP Rocket

Esto permitirá que el complemento genere automáticamente CSS crítico para cada tipo de publicación en su sitio de WordPress. Incluye portada. Página de inicio, página, publicación y cualquier otro tipo de publicación personalizada que utilice en su sitio. Si es necesario, puede agregar CSS crítico de respaldo que genera manualmente con una herramienta de terceros. Generalmente, puede dejar este cuadro CSS crítico de respaldo en blanco. También puede habilitar el almacenamiento en caché móvil independiente en la sección "Caché".

Tenga en cuenta que WP Rocket es un complemento premium con licencia para un solo sitio disponible por $ 49. En nuestra opinión, vale la pena comprar este complemento, ya que ofrece una solución de almacenamiento en caché de un extremo a otro para optimizar la velocidad. El complemento viene con soporte y actualizaciones de un año. Después de eso, seguirá funcionando y podrá utilizar el CSS crítico y otras funciones sin necesidad de renovación. Puede renovar con un 30% de descuento para obtener soporte y obtener funciones adicionales. Esta es una opción mucho mejor en comparación con los $ 10 por mes para que la API Criticalcss la use con Autoptimize.

Regenerar CSS crítico

Cuando actualiza el tema / complemento / núcleo de WordPress o agrega tipos de publicaciones personalizadas en su sitio, es necesario regenerar CSS crítico. De lo contrario, WP Rocket utilizará CSS crítico antiguo y romperá el diseño de su sitio. Por lo tanto, asegúrese de regenerar CSS crítico sin olvidarlo.

  • Haga clic en el menú "WP Rocket" en la barra superior y seleccione la opción "Regenerar CSS crítico".
  • Alternativamente, puede ir al panel de control del complemento y hacer clic en el botón "Regenerar CSS crítico".

¿Cómo generar CSS crítico en el sitio de WordPress?

Regenerar CSS crítico

CSS crítico personalizado para una página específica

Como se mencionó, es posible que tenga una página de inicio u otra página creada con un complemento de creación de páginas. Esta página tendrá un CSS crítico completamente diferente en comparación con todas las demás publicaciones de blog en su sitio. En este caso, debe crear CSS crítico separado y cargar condicionalmente solo en esa página. WP Rocket puede ayudarlo a lograr esto con unos pocos clics.

  • Vaya al editor de página / publicación de la página que desea generar CSS crítico independiente.
  • En el panel de documentos de la barra lateral, busque el panel "Opciones de WP Rocket". Si no encuentra, haga clic en el botón de tres puntos en la esquina superior derecha y seleccione "Preferencias". En la ventana emergente, puede habilitar los paneles de documentos necesarios disponibles en su sitio.
  • Seleccione la casilla de verificación "Optimizar la entrega de CSS" y haga clic en el botón "Generar CPCSS específico".
  • Esto generará CSS crítico específico para esa página y el complemento cargará este CSS crítico cuando los usuarios visiten la página.

¿Cómo generar CSS crítico en el sitio de WordPress?

Genere CSS crítico para una página específica

Relacionado: Revisión del complemento de almacenamiento en caché de WP Rocket.

Prueba de CSS crítico

Después de implementar el método manual o usar el complemento WP Rocket, puede probar la página viendo la fuente de la página. Asegúrese de cerrar la sesión de su panel de administración o habilitar el almacenamiento en caché para los usuarios registrados en el complemento. Como puede ver en la siguiente captura de pantalla, WP Rocket agrega CSS crítico en el encabezado.

¿Cómo generar CSS crítico en el sitio de WordPress?

CSS crítico de WP Rocket

También puede consultar las páginas en la herramienta Google PageSpeed ​​Insights. Si todo va bien, verá eliminar los recursos que bloquean la representación y otros errores de CSS en los resultados aprobados. Esto indica que ha implementado CSS crítico correctamente en el sitio.

Ultimas palabras

Esperamos que este artículo haya destacado la importancia del CSS crítico en el sitio de WordPress. Puede utilizar la opción manual cuando tenga un sitio más pequeño que contenga pocas páginas. Sin embargo, para un blog en ejecución que tiene una gran cantidad de publicaciones y diferentes tipos de publicaciones, puede probar el complemento WP Rocket. Aunque le cueste algo de dinero, puede obtener una solución completa de almacenamiento en caché para su sitio.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More