Evitar la carga del CSS de los widgets Blogger de forma nativa | Oloblogger Esto es algo que debería haber explicado hace mucho pero como ya se fue publicando por parte de otros y no podía aportar nada interesante, p...

26 de abril de 2017

Evitar la carga del CSS de los widgets Blogger de forma nativa

Esto es algo que debería haber explicado hace mucho pero como ya se fue publicando por parte de otros y no podía aportar nada interesante, pues como que lo fui dejando. Sin embargo hoy descubrí una manera alternativa y más sencilla para evitar la carga del CSS que Blogger inyecta automáticamente y por eso aprovecho para ver los dos sistemas.

Para los que no sepan de que va esto, todas las plantillas de Blogger -incluidas las últimas- cargan un fichero que se llama widget_css_bundle.css y que podéis observar íntegramente pinchando en el anterior enlace. Ese CSS sirve para formatear los gadgets nativos de la plataforma, cosa que en principio ni es buena ni es mala pero que por buscarle inconvenientes...

En primer lugar, si estamos personalizando nuestra plantilla, ese CSS obligatoriamente añadido puede que interfiera con otro que pongamos nosotros, así que casi mejor que no esté y ya formateamos los gadgets con el estilo que nosotros queramos añadiendo nuestro propio CSS. Algunos son más complicados de formatear que otros, así que el trabajo final para cual va a depender de los que estéis usando.

Por otra parte y quizás más importante para muchos de vosotros, ese fichero se carga antes que el contenido de la mitad superior de la página y estando en esa situación PageSpeed os lanza un aviso sugiriendo cambiar eso.



Antes de seguir me gustaría recordar que PageSpeed es sólo una herramienta para intentar mejorar el rendimiento en cuanto a velocidad de carga y no un fin. Por tanto que nadie se obsesione con sacar un 100. Es conveniente arreglar lo que se pueda pero tampoco es necesario hacerlo todo. Puedes tener perfectamente 60 puntos y que tu blog sea el más visto de todos los de su tipo sin problemas ¿Sabes lo que significa "insights" en español? Pues eso...


Y seguimos.


Fórmula habitual


El fichero de marras se carga cuando Blogger detecta en la plantilla las etiquetas <b:skin><![CDATA[ y ]]></b:skin> y que son precisamente las que contienen el CSS. Por tanto la idea original consiste en eliminar esas etiquetas pero sólo lo suficiente como para "engañar" a Blogger, previo cambio de lugar del CSS.

Para ello:

1. Localiza <b:skin><![CDATA[ y ]]></b:skin> y copia todo lo que haya entre esas dos etiquetas en algún lugar de dónde posteriormente lo puedas recuperar fácilmente. En un fichero de bloc de notas (Notepad) por ejemplo. Por lo general serán un buen montón de líneas de código CSS.
Como en las recetas de cocina, reservamos.

2. Te quedarán sólo las dos etiquetas mencionadas sin CSS por en medio. Para anularlas pero sin hacerlo realmente, las deberás sustituir por lo siguiente:
&lt;style&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin><style> </style>

3. Por último, entre esas dos etiquetas style que ves al final de lo anterior, insertas todo el código que antes copiaste en el bloc de notas para que quede así:
&lt;style&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin><style> CÓDIGO CSS ANTES GUARDADO </style>



Nuevo método


Este sistema es la repanocha. Tiene más ventajas que el anterior porque es nativo de Blogger e infinitamente más fácil ¿Que por qué no lo expliqué antes y me dejé de milongas? Pues porque si no lo explicara todo, esto no sería Oloblogger :)

Además está bien saber que hay dos sistemas por si algún día este segundo que es el que recomiendo, dejara de funcionar.

1. Buscamos en la cabecera de la plantilla la etiqueta html. Normalmente es la tercera línea y empieza más o menos así:
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'...

2. A esa etiqueta le añadimos el parámetro b:css='false' y listo:
<html b:css='false' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'


Sobre el sistema habitual y aparte de lo ya mencionado, con este otro reducimos enormemente la posibilidad de descuajeringar la plantilla al manipularla. También que debería seguir funcionando sin problemas el "Diseñador de plantillas", porque recuerdo que con el sistema explicado en primer lugar esta utilidad la perdíamos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

20 comentarios :

  1. Excelente aportación, yo en mis plantillas tenía un método distinto a ambos que mencionas aquí, probaré a ver que tal... Cabe mencionar que anular el css afecta el dropdown del gadget archivo en modo jerarquía... Por si alguien lo usa y luego queda perplejo por este resultado...

    ResponderEliminar
    Respuestas
    1. Quizás no lo dije tan claro, pero era lo que intentaba explicar al principio del post sobre que desaparecería el estilo de los gadgets nativos, porque no sólo afecta a ese.

      Eliminar
  2. Raudo y veloz he ido a probar y oh! sorpresa ya estaba puesto el parámetro b:css ¿WTF?... igual por eso no me funcionaba el dropdown del gadget archivo como menciona Cyball Brigitte.

    ¡Gracias Maestro!

    ResponderEliminar
    Respuestas
    1. Exacto. Es por eso...

      Eliminar
    2. Pero es que acabo de ver que cambiaste a plantilla nueva Pablo y esas ya llevan ese parámetro de serie. El "descubrimiento" es que se puede aplicar también a las antiguas.

      Eliminar
  3. Muy interesante.

    Ahora sólo falta poder evitar la carga del JavaScript externo o, cuando menos, que se haga dinámicamente.

    ResponderEliminar
    Respuestas
    1. Sí, un b:script='false' estaría fenomenal, pero a saber qué cosas dejarían de funcionar. Los comentarios seguro...

      Eliminar
  4. Eres un gran maestro y lo sabes!! Genial la explicación. muchísimas gracias.

    ResponderEliminar
  5. Efectivamente, con el primer sistema es un caos la plantilla :) Genial tutorial! Se lo paso a compis que tienen problemas de pagespeed ;)

    ResponderEliminar
  6. Excelente lo del b:css en la vida lo había visto, saludos Oloman!

    ResponderEliminar
  7. En tu caso, no usas ningunos de los sistemas, en tu código fuente sigue apareciendo
    "< link type='text/css' rel='stylesheet' href:'https://www.blogger.com/static/v1/widgets/124887373-widget_css_bundle.css' />"

    ResponderEliminar
    Respuestas
    1. ¿Es una afirmación o una pregunta? En el segundo caso no, no uso ninguno de estos sistemas.

      Primero porque no todo lo que publico lo aplico en este sitio. Segundo porque hay algunas cosas que de ponerlas me impedirían probar otras para después publicarlas ;)

      Eliminar
  8. Justo estos días me mareaba buscando esto!porque quería llegar al verde en pagespeed jajajaja lo probaré gracias!

    ResponderEliminar
  9. Oh! que gran forma de arreglar ese problema, Excelente Tio

    ResponderEliminar
    Respuestas
    1. Es un problema o no. Depende de los casos pero en general diría que no es un problema.

      Eliminar
  10. hecho ahora solo espero que funcione que me sigue apareciendo el dichoso error,estoy buscando ya de paso si tienes como comprimir las imagenes que tambien me trae de cabeza !
    gracias

    ResponderEliminar
    Respuestas
    1. La compresión de imágenes no puede hacerse con ningún automatismo, que yo sepa. Tendrías que ser tú quién las comprimiera antes de subirlas. Hace tiempo hablé sobre una herramienta para hacerlo, pero hay muchas más.

      Eliminar
  11. hola Oloman, con total ilusion fui a mi theme de blogger, pero no funciona, me da error , ni me aceptaba guardarlo, entonces le agregue el b:css='false' sin sacar lo demas , y queda asi html b:version='2' class='v2' b:css='false' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' estara bien esto ?? al menos no me da error pero no se si cumple con el objetivo , que me puedes decir oloman, gracias , (soy vivaamadeus.wordp.... pero aparece no se por que como anonimo mi perfil)

    ResponderEliminar
    Respuestas
    1. Apareces cómo anónimo porque a la hora de comentar seguramente no estás logueado con una cuenta Google y/o no has marcado la opción "Responder cómo:" adecuadamente.

      La respuesta es que seguro que sí cumple el objetivo, pero como no sé tu dirección Blogger, no lo puedo comprobar.

      Eliminar