{"id":267,"date":"2026-04-26T11:13:13","date_gmt":"2026-04-26T15:13:13","guid":{"rendered":"https:\/\/juredev.com\/blog\/?p=267"},"modified":"2026-04-26T15:14:27","modified_gmt":"2026-04-26T19:14:27","slug":"jure-minimal-blog-v1-5-2-diseno-tema-para-wordpress","status":"publish","type":"post","link":"https:\/\/juredev.com\/blog\/2026\/04\/jure-minimal-blog-v1-5-2-diseno-tema-para-wordpress\/","title":{"rendered":"Jure Minimal Blog v1.5.2: lo que pas\u00f3 detr\u00e1s del dise\u00f1o de mi tema para WordPress"},"content":{"rendered":"\n

Continuaci\u00f3n de: \u00abNuevo look en el blog: descubre la mec\u00e1nica detr\u00e1s de mi tema minimalista en WordPress<\/a><\/em>\u00ab<\/p>\n\n\n\n

En el art\u00edculo anterior te cont\u00e9 la filosof\u00eda detr\u00e1s de Jure Minimal Blog<\/strong>: por qu\u00e9 decid\u00ed construir mi propio tema desde cero, qu\u00e9 decisiones de dise\u00f1o tom\u00e9 y c\u00f3mo qued\u00f3 el resultado visual. Si todav\u00eda no lo le\u00edste, te recomiendo empezar por ah\u00ed para tener el contexto completo.<\/p>\n\n\n\n

Este art\u00edculo es distinto. Es un dev log<\/strong> puro: la historia de c\u00f3mo sal\u00ed a arreglar una cosa, encontr\u00e9 otra, y termin\u00e9 alcanzando 100\/100 en Google PageSpeed casi sin haberlo planeado.<\/p>\n\n\n\n

El punto de partida: los comentarios<\/h2>\n\n\n\n

Todo empez\u00f3 con la secci\u00f3n de comentarios.<\/p>\n\n\n\n

No se ve\u00eda del todo bien: m\u00e1rgenes desalineados, vi\u00f1etas fuera de lugar\u2026 Mi primera hip\u00f3tesis fue de rendimiento. Pens\u00e9 que pod\u00eda aligerar el CSS extrayendo los estilos espec\u00edficos de comentarios e inyect\u00e1ndolos inline directamente en comments.php<\/code>, para que solo se cargaran en las p\u00e1ginas que realmente los necesitan.<\/p>\n\n\n\n

Al meterme en el c\u00f3digo para hacer eso, descubr\u00ed el problema real: mi hoja de estilos segu\u00eda apuntando a ol.commentlist<\/code> (el nombre de clase que usaba WordPress en versiones antiguas). Pero desde hace tiempo WordPress genera el HTML como <ol class=\"comment-list\"><\/code>, con guion en medio. Un solo car\u00e1cter de diferencia que romp\u00eda todo el estilo de forma silenciosa.<\/p>\n\n\n\n

    \n
  1. <\/li>\n<\/ol>\n\n\n\n

    Correg\u00ed el selector de inmediato. Y, ya que estaba, implement\u00e9 igual el CSS condicional, porque en teor\u00eda segu\u00eda teniendo sentido.<\/p>\n\n\n\n

    Spoiler<\/strong>: el impacto en rendimiento fue pr\u00e1cticamente nulo. El CSS de comentarios era tan peque\u00f1o que no marcaba diferencia medible. Pero esa peque\u00f1a b\u00fasqueda me hizo fijarme en algo m\u00e1s importante: \u00bfqu\u00e9 tan peque\u00f1o era realmente el CSS principal del tema?<\/p>\n\n\n\n

    El hallazgo real: 3.3 KiB bloqueando todo<\/h2>\n\n\n\n

    Al revisar los tama\u00f1os, vi que style.min.css<\/code> pesaba apenas 3.3 KiB.<\/strong> Minificado, compacto y limpio. Sin embargo, PageSpeed Insights lo se\u00f1alaba como el principal cuello de botella del sitio:<\/p>\n\n\n\n

    Render-blocking requests \u2014 Est. savings: 150 ms\n\nstyle.min.css?ver=1.5.1   3.3 KiB   160 ms<\/code><\/pre>\n\n\n\n
    Y en el \u00e1rbol de dependencias cr\u00edticas:<\/p>\n\n\n\n
    Initial Navigation \/blog\/          226 ms    9.95 KiB\n  \u2514\u2500\u2500 style.min.css?ver=1.5.1      387 ms    3.27 KiB<\/code><\/pre>\n\n\n\n
    El navegador no pod\u00eda pintar ni un solo p\u00edxel hasta que recibiera ese archivo. La latencia acumulada llegaba a 387 ms<\/strong>. No por el peso del CSS en s\u00ed, sino por el tiempo de red completo: la petici\u00f3n HTTP, la respuesta del servidor y el procesamiento.<\/p>\n\n\n\n
    Ah\u00ed lo vi claro: si el archivo solo pesa 3.3 KiB<\/strong>, no tiene ning\u00fan sentido servirlo como recurso externo. Es tan peque\u00f1o que se puede inyectar directamente en el sin costo real.<\/p>\n\n\n\n
    Hice la prueba.<\/p>\n\n\n\n
    La soluci\u00f3n: CSS inline en el <head><\/code><\/h2>\n\n\n\n
    En vez de seguir usando wp_enqueue_style<\/code>, modifiqu\u00e9 functions.php<\/code> para que el tema leyera el contenido de style.min.css<\/code> y lo volcase directamente en el HTML de cada p\u00e1gina:<\/p>\n\n\n\n
    function jure_minimal_blog_inline_styles() {\n    $css_file = get_template_directory() . '\/style.min.css';\n    if ( file_exists( $css_file ) ) {\n        echo '<style>' . file_get_contents( $css_file ) . '<\/style>';\n    }\n}\nadd_action( 'wp_head', 'jure_minimal_blog_inline_styles' );<\/code><\/pre>\n\n\n\n
    Ahora el CSS ya no es una petici\u00f3n de red separada: forma parte del HTML inicial. El navegador tiene todo lo necesario para renderizar desde el primer byte que recibe.<\/p>\n\n\n\n
    Vi los resultados y decid\u00ed dejarlo as\u00ed.<\/p>\n\n\n\n
    Un arreglo de consistencia visual (ya que estaba)<\/h2>\n\n\n\n
    Mientras revisaba los estilos, not\u00e9 que la p\u00e1gina 404 ten\u00eda botones con bordes rectos (border-radius: 0<\/code>), colores fijos que ignoraban las variables CSS del tema y animaciones que no exist\u00edan en ning\u00fan otro lugar del blog.<\/p>\n\n\n\n
    No era el objetivo principal de la sesi\u00f3n, pero era un detalle f\u00e1cil de arreglar. Unifiqu\u00e9 todo con las mismas variables (--accent-color, border-radius: 3px<\/code>) y el mismo comportamiento de hover y focus que el resto del tema.<\/p>\n\n\n\n
    Los estilos de comentarios, m\u00e1s all\u00e1 del fix del selector, todav\u00eda necesitan algunos ajustes. Los dejar\u00e9 para una pr\u00f3xima revisi\u00f3n.<\/p>\n\n\n\n
    Los n\u00fameros<\/h2>\n\n\n\n
    As\u00ed qued\u00f3 el antes y el despu\u00e9s:<\/p>\n\n\n\n
    Antes (v1.5.1):<\/h3>\n\n\n\n
    Problema<\/th>Impacto medido<\/th><\/tr>
    CSS bloqueante<\/td>387 ms de latencia cr\u00edtica<\/td><\/tr>
    Ahorro estimado PageSpeed<\/td>150 ms<\/td><\/tr>
    Tama\u00f1o del recurso<\/td>3.3 KiB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Despu\u00e9s (v1.5.2):<\/h3>\n\n\n\n
    M\u00e9trica PageSpeed<\/th>Puntuaci\u00f3n<\/th><\/tr>
    Rendimiento<\/td>100<\/td><\/tr>
    Accesibilidad<\/td>100<\/td><\/tr>
    Mejores pr\u00e1cticas<\/td>100<\/td><\/tr>
    SEO<\/td>100<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    100\/100 en las cuatro categor\u00edas. Una de esas metas que persigues sin saber muy bien si la vas a alcanzar, y cuando llega te da una satisfacci\u00f3n desproporcionada.<\/p>\n\n\n\n
    Una nota sobre el CSS inline (y lo que revelan los headers)<\/h2>\n\n\n\n
    La pregunta obvia es: \u00bfno es mejor que el navegador descargue el CSS una vez y lo guarde en cach\u00e9?<\/p>\n\n\n\n
    En teor\u00eda s\u00ed. Pero los headers de la respuesta real cuentan otra historia:<\/p>\n\n\n\n
    Transferred: 9.95 kB (32.83 kB size)\ncontent-encoding: zstd\nx-fastcgi-cache: HIT\nx-cache-status: HIT\ncache-control: public, max-age=7200\ncf-cache-status: DYNAMIC<\/code><\/pre>\n\n\n\n
    Tres puntos clave:<\/p>\n\n\n\n
      \n
    1. El HTML completo (con el CSS inline) viaja comprimido con zstd<\/strong> y pesa menos de 10 KiB transferidos. Cloudflare comprime todo junto, as\u00ed que el inline no engorda la p\u00e1gina de forma preocupante.<\/li>\n\n\n\n
    2. x-fastcgi-cache: HIT<\/code>. El servidor tiene cach\u00e9 de p\u00e1gina completa activa. El HTML con el CSS incluido ya est\u00e1 precalculado y listo para servirse sin ejecutar PHP ni WordPress en cada petici\u00f3n. No hay penalizaci\u00f3n por \u201creconstruir\u201d el CSS cada vez.<\/li>\n\n\n\n
    3. La respuesta viaja sobre HTTP\/3<\/strong>, que reduce significativamente la latencia de conexi\u00f3n.<\/li>\n<\/ol>\n\n\n\n
      Todo esto neutraliza bastante el argumento cl\u00e1sico contra el CSS inline (\u00abpierdes la cach\u00e9 del navegador\u00bb). Cuando tienes una buena capa de cach\u00e9 de servidor y una CDN por delante, el CSS del tema no necesita vivir necesariamente en un archivo separado.<\/p>\n\n\n\n
      La infraestructura que hace posible todo esto<\/h2>\n\n\n\n
      Estos headers no son solo datos t\u00e9cnicos: son la prueba de varias capas trabajando juntas \u2014 FastCGI cache a nivel de servidor, Cloudflare como proxy de borde, HTTP\/3, compresi\u00f3n moderna\u2026<\/p>\n\n\n\n
      Si has le\u00eddo los art\u00edculos anteriores de esta serie (sobre Redis y Memcached<\/a> como capa de objeto cache, y sobre el servidor web como proxy<\/a>), este resultado es la demostraci\u00f3n pr\u00e1ctica de por qu\u00e9 esas capas importan tanto. El CSS inline funciona tan bien precisamente porque hay una infraestructura s\u00f3lida por encima que lo respalda.<\/p>\n\n\n\n
      Queda pendiente el art\u00edculo sobre la capa m\u00e1s visible de todas: el edge, la CDN, el punto donde la petici\u00f3n del usuario toca el sistema antes de llegar al servidor. Eso viene pronto.<\/p>\n\n\n\n
      Lo que viene en el tema<\/h2>\n\n\n\n
      El selector de comentarios ya est\u00e1 corregido, pero la secci\u00f3n todav\u00eda necesita m\u00e1s trabajo est\u00e9tico. Lo dejar\u00e9 para la pr\u00f3xima iteraci\u00f3n.<\/p>\n\n\n\n
      Una advertencia importante antes de replicar esto<\/h3>\n\n\n\n
      La t\u00e9cnica del CSS inline funciona muy bien en este contexto espec\u00edfico: un VPS con Nginx configurado como cach\u00e9 de p\u00e1gina completa y Cloudflare como capa de borde. Esa combinaci\u00f3n neutraliza la p\u00e9rdida de cach\u00e9 de navegador y hace que el tradeoff sea claramente positivo.<\/p>\n\n\n\n
      Pero no todos los sitios tienen esa infraestructura. En un hosting compartido est\u00e1ndar, sin cach\u00e9 de servidor ni CDN, el CSS inline podr\u00eda ser contraproducente: el navegador no puede cachear el CSS entre p\u00e1ginas porque viaja embebido en cada HTML, lo que significa que cada visita descarga los mismos 3.3 KiB de nuevo.<\/p>\n\n\n\n
      Por eso, en futuras versiones del tema voy a revertir a la carga tradicional con wp_enqueue_style<\/code>. El objetivo es que Jure Minimal Blog pueda funcionar bien en cualquier entorno, no solo en uno con una configuraci\u00f3n particular. Mientras tanto, si quieres replicar el inline en tu propio tema, aseg\u00farate primero de que tienes cach\u00e9 de p\u00e1gina activa \u2014 ya sea a nivel de servidor, de plugin (como W3 Total Cache o WP Rocket), o de CDN.<\/p>\n\n\n\n
      El tema completo est\u00e1 disponible en GitHub bajo licencia GPL: github.com\/jure-ve\/jureminimalblog<\/a><\/p>\n\n\n\n
      Si est\u00e1s armando tu propio tema en WordPress y quieres llegar a 100\/100 en PageSpeed, te recomiendo mirar primero el tama\u00f1o real de tu CSS y, sobre todo, qu\u00e9 hay por encima de tu servidor. La combinaci\u00f3n de ambas cosas es donde suele estar la diferencia real.<\/p>\n\n\n\n
      Y si encuentras algo roto, o tienes una idea para mejorar el tema sin perder su esencia minimalista y r\u00e1pida, abre un issue. Me encantar\u00eda recibir feedback y seguir puliendo esto juntos.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Continuaci\u00f3n de: \u00abNuevo look en el blog: descubre la mec\u00e1nica detr\u00e1s de mi tema minimalista en WordPress\u00ab En el art\u00edculo anterior te cont\u00e9 la filosof\u00eda detr\u00e1s de Jure Minimal Blog: por qu\u00e9 decid\u00ed construir mi propio tema desde cero, qu\u00e9 decisiones de dise\u00f1o tom\u00e9 y c\u00f3mo qued\u00f3 el resultado visual. Si todav\u00eda no lo le\u00edste, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,19],"class_list":["post-267","post","type-post","status-publish","format-standard","hentry","category-desarrollo","tag-php","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":0,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"wp:attachment":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}