Eliminar CSS y Javascript por defecto de Blogger de forma definitiva

Borrar css javascript blogger eliminar por completo css javascript blogger

Uno de los temas más molestos en Blogger son los estilos y scripts que nos imponen. No está mal que se implementen si son estrictamente necesarios, pero nos dificultan mucho la tarea de crear una plantilla para blogger desde 0.


Tampoco es necesario cargar siempre los scripts, porque nos generan consultas extras, que son innecesarias en la mayoría de los casos. Hoy vamos a aprender a optimizar Blogger eliminando la carga de estilos y scripts.


Eliminar widget_css_bundle.css

Se trata de un reset css, también incluye estilos para los widgets y algunos hacks. El archivo lo agrega blogger de forma automática debajo de <head>:


<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='stylesheet' type='text/css'/>

Podemos usar un atributo de configuración para borrarlo, concretamente b:css='false', para ello ve a la edición html y busca la etiqueta <html>, solo existe una y siempre está debajo de <!DOCTYPE html>, una vez ubicado agregamos el atributo de esta forma:


<html b:css='false' b:version='2' expr:dir='data:blog.languageDirection'>

Eliminar authorization.css

El archivo se inserta automáticamente arriba de </head> y contiene estilos que comprueban los privilegios de administrador para ocultar algunos elementos:


<link href='https://www.blogger.com/dyn-css/authorization.css' media='none' onload='if(media!="all")media="all"' rel='stylesheet'/>
<noscript>
   <link href='https://www.blogger.com/dyn-css/authorization.css' rel='stylesheet'/>
</noscript>

Por ahora lo que vamos a hacer es comentarlo, de esta forma no se cargara. Para comentarlo buscamos </head> y lo reemplazamos por:


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

Al momento de renderizar la plantilla, los comentarios html se interpretan como tal, comentando el cierre de </head> y el archivo authorization.css, finalmente se genera un nuevo cierre para la cabecera.


Eliminar widgets.js y plusone.js

Esta parte se inserta arriba de </body> y contiene el archivo plusone.js, widget.js y javascript incrustado. Antes de eliminarlo debemos tener en cuenta ciertos puntos:


  • plusone.js - Al eliminarlo, los comentarios de google plus, botones y widgets relacionados a G+, dejarán de funcionar
  • widget.js - Si lo eliminas dejarán de funcionar los widgets: Formulario de contacto, feeds, archivo, slider de imágenes, seguidores y estadísticas del blog.
  • javascript incrustado - Al borrarlo no funcionara el toggle para abrir y cerrar comentarios anidados

Todo lo demás seguirá funcionando sin problemas. También vamos a comentar el código por ahora, ya que de esta forma no cargará. Busca </body> y lo reemplazas por el siguiente codigo:


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

Eliminar codigo comentado

Tanto el archivo autorization.css como el código javascript fueron comentados para evitar su ejecución, sin embargo tampoco es nada bonito cargar tanto codigo comentado, ya que si revisamos el código fuente notaremos lo siguiente:


Bloquer carga archivo widget_css_bundle.css

De momento solo es posible eliminarlo en dominios personalizados, para ello necesitamos cambiar nuestro administrador dns y migrar a cloudflare, el proceso es fácil y gratuito. No es necesario obtener el certificado https, pero si ya de paso quieres obtenerlo te recomiendo seguir mi tutorial.


Luego de realizar el cambio, ve a la pestaña Speed de Cloudflare y habilita la compresión html como se muestra en la siguiente captura:


comprimir html cloudflare dns

Ahora vamos a dirigirnos a la pestaña Caching y purgamos toda la caché, esperamos unos minutos y si verificamos el código fuente notaremos que los comentarios html ya no seguirán cargando:


código fuente html comprimido cloudflare

Observaciones

Comentar b:skin - Anteriormente el css de blogger se insertaba arriba de <b:skin>, por eso el código para eliminarlo era el siguiente:


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

Sin embargo esto ya no tiene ningún efecto, por el contrario es perjudicial ya que comentar <b:skin> nos priva usar el diseñador de plantilla, es un detalle pequeño pero importante para los que acostumbran a usar esta herramienta para personalizar Blogger.


Cookiechoices.js - Si deseas eliminar por completo el código javascript de blogger, incluyendo el aviso de cookies, el codigo que necesitas utilizar sería el siguiente:


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

Es útil en dominios .blogspot.com, ya que en estos se seguirá mostrando el aviso en los dominios geolocalizados. Si tienes un dominio personalizado te recomiendo comentar body como lo explique mas arriba, ya que si usas este código, al comprimir el html no se va a eliminar.


Conclusión

Eliminando todo el código incrustado lograremos un mayor rendimiento lo que nos permite mejorar la carga de blogger. Si deseas eliminar el código incrustado en tu plantilla pero utilizas un widget que pueda dejar de funcionar, te recomiendo utilizar alguna alternativa al mismo.


Si encuentro una mejor forma de hacerlo que funcione para todos, tanto con o sin dominio, actualizaré esta entrada con dicha información. Cualquier duda dejala en los comentarios, si te ha servido no olvides compartirlo en tus redes sociales.