Cómo eliminar el CSS y Javascript por defecto de Blogger

Botones de borrar en teclado Mac
Imagen de Matt McGee

Sí, es cierto que llevo unos cuantos días sin pasarme por aquí, y es que aunque no lo queramos un blog en muchas ocasiones es algo más que publicar entradas. Hay que leer, aprender y también dedicarle un pequeño espacio de tiempo a optimizarlo. Y eso es lo que he estado haciendo en estos días, a parte también de perder un poco el tiempo, dormir la siesta y dedicarme a la vida contemplativa.

Blogger es un CMS, y como todo CMS usa un montón de recursos que los que preferimos usar plantillas que no son las propias de Blogger, o como es mi caso una plantilla propia, no necesitamos. Hoy voy a explicar cómo optimizar Blogger eliminando la carga de estilos y scripts que este usa por defecto.

Esta solución es posible que no sea adecuada para tu blog. Si usas widgets es posible que al eliminar el Javascript dejen de funcionar o lo hagan de forma incorrecta, pero si eres de los que no usan widgets, y te gusta toquetear en tu plantilla más de lo debido, ponte cómodo y ve a la nevera a por provisiones, porque vamos a dejar a Blogger tal y como su madre lo trajo al mundo, "en pelota picá".

Bloqueando la carga del archivo widget_css_bundle.css

Lo primero que vamos ha hacer es evitar que Blogger nos cargue esa hoja de estilo innecesaria para nuestro theme, y digo evitar porque no hay forma de eliminarla, ya que en nuestra plantilla no aparece por ningún lado alguna referencia a ella. ¿Y cómo hace Blogger para inyectarla en nuestra plantilla?. Fácil, al cargar nuestros estilos entre las etiquetas de Blogger <b:skin><![CDATA[ y ]]></b:skin>

Para evitar la carga de este css lo primero que vamos a hacer es copiar todo el css de nuestra plantilla que va entre las etiquetas mencionadas anteriormente, seguidamente comentaremos estas etiquetas y por último inyectaremos el código css que hemos copiado anteriormente entre la clásica declaración css <style> y </style>.

Vamos por partes, que es más sencillo de lo que parece. Voy a suponer que ya has copiado tu css. Ahora lo borraremos de la plantilla y sustituiremos las etiquetas <b:skin><![CDATA[ y ]]></b:skin> por:


&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin><style type='text/css'>

Ahora añadinos justamente debajo las atiquetas <style> y </style> y entre ellas el código que previamente hemos copiado, bien sea directamente o mediante una llamada a una hoja de estilos:


<style type='text/css'>
Aquí tu código css
</style>

Evitando la carga de los scripts widgets.js y plusone.js

El método que vamos a usar es muy parecido al que usamos para evitar la carga del css, únicamente hay que tener en cuenta que Blogger nos carga esos scripts justo antes de la etiqueta </body>, así que la comentaremos y evidentemente la volveremos a añadir, ya que sino no sería un documento html correcto. Cambiamos </body> por:


&lt;!--</body>--&gt;&lt;/body&gt;

Con esto, en teoría, evitaríamos la carga de estos scripts. Si tu caso es como el mío y se te ha quedado cara de tonto, al igual que a mí, no desesperes, pues después de mucho indagar y rebuscar por la red he encontrado una solución en el blog EsCss que al menos a mí me ha funcionado. Haremos algo muy similar, pero además de comentarlo haremos que estos cripts vayan dentro de <noscript> y </noscript> para evitar que se carguen:


&lt;noscript&gt;
&lt;!--</body>--&gt;
&lt;/noscript&gt;
&lt;/body&gt;

Tanto si has usado uno como el otro hay que tener en cuenta una serie de cosas: la primera es que evitamos la carga del script plusone.js, con lo que deshabilitamos el botoń +1 de Google. Hay forma de volver a habilitarlo, es más, se podría hacer de forma asíncrona para optimizar aún más el Blog.

La segunda a tener en cuenta es que también deshabilitamos el script widgets.js. Si estas usando algún widget busca otra forma de hacer lo mismo sin él, sino es probable que esta optimización no sea para ti.

Por último, y con la famosa ley de cookies de la UE volando sobre nuestras cabezas, también deshabilitamos la carga del banner que Google genera informando de que tu sitio de Blogger usa cookies de Google. Es aconsejable buscar otra solución para cumplir con esta ley. En la red hay montones de ellas, yo personalmente uso Cookie Consent.

Y con esto hemos aligerado y con mucho la carga de nuestro blog de Bloger. Como ves no ha sido tan difícil, y es que aunque aveces lo parezca, el código también es para alienígenas.