Cómo eliminar los archivos CSS y JS predeterminados de Blogger

¿Tu blog de Blogger carga lento? ¿Has notado que PageSpeed Insights te penaliza por archivos que ni siquiera usas? 😩 Tranquilo, hoy te traigo la solución definitiva para eliminar los archivos CSS y JavaScript predeterminados de Blogger (widget_css_bundle.css y widget.js).

¿Por qué eliminar estos archivos?

Cuando creas un blog en Blogger, la plataforma incluye automáticamente una serie de archivos CSS y JS que dan estilo y funcionalidad a los widgets y gadgets estándar (como el archivo de entradas populares, la nube de etiquetas, etc.).

Índice de contenidos

El problema es que, si has creado un tema personalizado o utilizas muy pocos elementos nativos, estos archivos se cargan sin necesidad, consumiendo tiempo de renderizado y aumentando el peso de tu página.

Al eliminar estos recursos, liberamos peticiones HTTP y aceleramos la carga, mejorando la experiencia de usuario y el posicionamiento SEO. 📈

🎨 Eliminación del archivo CSS predeterminado de Blogger (`widget_css_bundle.css`) y (`widget.js`)

Este archivo contiene los estilos básicos de los gadgets. Vamos a desactivarlo añadiendo un pequeño atributo a la etiqueta <html>.

Pasos a seguir:

Accede a Blogger y selecciona el blog que quieres modificar.
En el menú izquierdo, haz clic en Tema.
En el desplegable (junto al botón «Personalizar»), elige Editar HTML.
Se abrirá el editor de la plantilla. Localiza la etiqueta <html> (normalmente es la primera línea).
Añade el atributo b:css='false' y b:js=’false’ justo después de <html y antes de cualquier otro atributo.Debería quedar algo similar a esto (los atributos existentes pueden variar):

<html b:css='false' b:js='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'>

¡Listo! Con eso le decimos a Blogger que no cargue su hoja de estilos predeterminada. 🎉

¿Porque no puedo añadir widgets ni modificar nada de la pestaña diseño

Al desactivar el javascript de blogger se desactivan muchas funciones de algunos widgets y la pestaña diseño ¿Que podemos hacer? Simple aplicar un pequeño truco que quita el javascript y al mismo tiempo te permite cargar la pestaña diseño:

  &lt;textarea id=&quot;bjs&quot; readonly hidden&gt;</body>&lt;/textarea&gt;
  <script>document.getElementById('bjs').remove()</script>&lt;/body&gt;

Aplica el codigo al final de </body> y listo puedes difrutar de una web con mejor rendimiento.

Comparativa de eliminar el css y javascript por defecto de blogger

Por cierto la comparativa la estoy haciendo con una plantilla de soratemplates famosas por sus diseños y su mal rendimiento, no digo que esten mal solo que estan hecha muy a la antigua, por eso el mal rendimiento de la comparativa.

Web con los estilos por defecto de blogger

Web ya optimizada sin javascript:

Se que no es mucha la diferencia solo subió 6% sin embargo eso es mucho, depende mucho de tu plantilla y que las imágenes estén bien optimizadas.

Conclusión

Eliminar archivos innecesarios es una de las formas más efectivas de optimizar la velocidad de carga sin necesidad de plugins complicados. Sin embargo, la clave está en conocer tu propia plantilla y saber qué puedes sacrificar.

No me puedo ir sin antes dar las gracias a mi querido Daniel Abel mejor conocido como zkreations por bridarme de tanto conocimiento sobre Blogger y mas.