¿CSS en Linea o CSS Externo?

Esta es una de esas publicaciones que trata de entender detalles sobre la optimizaciones del CSS en WordPress.

En los plugins de caché y otros vas a encontrar varias optimizaciones de CSS disponibles.

Esta publicación trata sobre la opción de incrustar el CSS dentro del código HTML, algo que se le conoce también como CSS en línea o Inline CSS y la opción para crear una hoja de CSS externa.

CSS en Linea vs CSS Externo en GeneratePress

Lo que me ha hecho investigar sobre este tema son una de las opciones disponibles dentro de GeneratePress.

Donde encuentras una opción llamada Inline Embedding y un mensaje que dice que generar CSS dinámico en un archivo externo ofrece ventajas de desempeño significativas.

Lo cual es bastante intrigante y lo que nos lleva a pensar el porqué está disponible la opción de inline embedding si esta no es la mejor opción en términos de desempeño

CSS en Linea vs CSS Externo en GenerateBlocks

Si examinas las opciones presentes en GenerateBlocks vas a encontrar que tienes la opción de generar el CSS en un hoja externa o hacer el inline embedding

En este también encontrarás la recomendación que indica que “generar una hoja de estilos externa es mejor para el desempeño de tu sitio.

Con esto ya tienes dos razones para estar confundido.

Viaje a GTMetrix

Una de las mejores herramientas para entender las solicitudes de tu sitio es GTMetrix, especialmente su cascada.

La cascada de la GTMetrix me dice que lo primero que carga es el HTML del sitio con el CSS incrustado.

Luego cargan 3 hojas de estilo y un archivo de JavaScript.

Por lo que podemos deducir que las opciones que se están incrustando en el HTML son las opciones del tema y del plugin de bloques de Gutenberg y no todo el CSS del sitio.

Hice la prueba generando hojas externas tanto en GeneratePress y GeneratePress y estos han sido los resultados.

Debido a la alta optimización del sitio, los resultados son casi difíciles de superar, las mejoras son ligeras.

Lo otro que debo reconocer es que el uso de dos hojas externas adicionales no han deteriorado los resultados obtenidos usando el inline embedding presente en GeneratePress y GenerateBlocks

Conclusiones

Al final del día en este tema de la optimización web debes hacer lo que mantenga o mejore la experiencia del usuario.

Si la experiencia del usuario se puede mantener o mejorar con las optimizaciones, usa los datos en los tests de velocidad para tomar la mejor decisión.

Publicaciones Relacionadas

Estas son algunas publicaciones relacionadas con temas de optimización web

  1. Reseña sobre FlyingPress
  2. Remover JQuery de WordPress
  3. Mejorar Resultados de Core Web Vitals
  4. Cómo Comprimir GIFS para WordPress
  5. Cómo Reducir el Impacto de Google Analytics en WordPress
  6. Full Page Caching de CloudFlare: ¿Indispensable?
  7. Reseña Honesta sobre Autoptimize

Sobre Jose manuel

Soy José Manuel, empecé un blog en el 2011 como un pasatiempo y para hacerlo en mis clases y poco a poco, me enamoré de WordPress. Espero que algo de todo lo que he escrito te sirva de ayuda.

RevistaWP

RevistaWP es un sitio donde registro mis pensamientos y descubrimientos sobre todo lo que sucede dentro del mundo WordPress

Contacto

Puedes contactarme por medio de los siguientes canales