Blogger por defecto inserta código CSS y JavaScript en la cabecera y pie de página, útiles para los temas oficiales, pero que resulta perjudicial para el rendimiento, ya que aumenta el tiempo de carga y retrasa el renderizado de la parte superior. Estos archivos no son necesarios si estás desarrollando una plantilla propia, es más, te interesa eliminarlos y aquí te enseñaré como hacerlo.
Deshabilitar 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>, para quitarlo es tan sencillo como agregar b:css='false' en la etiqueta <html>, de esta forma:
<html b:css='false'>Deshabilitar widget.js
El archivo javascript mas importante que inserta Blogger que agrega funcionalidades a los widgets y habilita algunas características. Para eliminarlo debemos agregar b:js='false' en la etiqueta <html>, de esta forma:
<html b:js='false'>Pero espera, eliminar este archivo traerá algunos problemas, es importante que sepas que si lo eliminas:
- El widget de formulario de contacto dejará de funcionar.
- No podrás utilizar la pestaña "Diseño" en Blogger.
Por lo tanto, si necesitas alguna de estas características en determinado momento, tendrás que revertir los cambios para que el código vuelva a funcionar.
Eliminar widget.js usando Javascript
Este método te permite utilizar la pestaña "Diseño" en Blogger, pero el widget de formulario de contacto seguirá sin funcionar, además el aviso de cookies no se mostrará tampoco. Para realizarlo busca </body> y reemplázalo por:
<textarea hidden id='bjs'></body></textarea>
</body>Nota: Asegúrate de que las etiquetas con el atributo hidden no se muestren en absoluto, si esto no ocurre, puedes agregar el siguiente código css:
[hidden] { display: none }Hasta este punto, ya hemos impedido la ejecución de widget.js, pero aún no hemos eliminado el código, tampoco hemos devuelto el aviso de cookies. Para lograr ambas cosas, agrega el siguiente código javascript:
const REG_EXP = /cookieOptions\.(\w+)\) \|\| '(.+)'/g
const cookieJs = '/js/cookienotice.js'
const textarea = document.getElementById('bjs')
const loadScript = (src) => new Promise((resolve, reject) => {
const $script = document.createElement('script')
$script.src = src
$script.onload = resolve
$script.onerror = reject
document.body.appendChild($script)
})
const decodeHtml = (string) => {
return string.replace(/\\x(\w{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
}
const loadCookieScript = () => {
const textareaContent = textarea.value
const cookieOptions = window.cookieOptions || {}
const Default = {}
textareaContent.replace(REG_EXP, (_, key, value) => {
Default[key] = decodeHtml(value)
})
if (textareaContent.includes(cookieJs)) {
loadScript(new URL(cookieJs, window.location.origin).href)
.then(() => {
const {
msg = Default.msg,
close = Default.close,
learn = Default.learn,
link = Default.link
} = cookieOptions
if (typeof window.cookieChoices?.showCookieConsentBar === 'function') {
// eslint-disable-next-line no-undef
cookieChoices.showCookieConsentBar(msg, close, learn, link)
}
})
.catch((err) => {
console.error(err)
})
}
}
if (textarea) {
loadCookieScript()
textarea.remove()
}Ahora todo debería funcionar correctamente, menos el widget de formulario de contacto, el cual te recomiendo reemplazar con un servicio externo no invasivo como Formspree que funciona con HTML Puro. Lo puedes ver en mi tema para desarrollo Hamlet.
Conclusión
Si utilizas un tema de terceros y este no tiene estos archivos deshabilitados, te recomiendo que no los elimines, ya que podrías perder funcionalidades importantes. En cambio si estas trabajando en un tema propio, puedes eliminarlos para obtener un mejor rendimiento y mejorar el desarrollo de tu plantilla. Muchas gracias por leer, espero que te haya sido de ayuda.
