Blogger: Eliminar el JavaScript que bloquea la visualización y el CSS

Si has analizado tu blog en google page speed, de seguro te has encontrado con esta recomendación: "Eliminate render-blocking JavaScript and CSS in above-the-fold content" o en español "Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página" muy común en los blogs de blogger y también paginas web, ¿entonces que pasa con esto? simple uno de los factores que mas alenta los blogs, si logramos sobrepasar este problema nuestro blog aumentara de velocidad excepcionalmente, te haré una prueba, analicemos un blog recién creado. y veamos que nos dice google page speed antes de corregir este problema y después de arreglarlo, también tengo explicado este truco en vídeo para un mejor entendimiento.

Video Eliminate render blocking JavaScript and CSS

Bien, entonces tenemos aquí un blog recién creado con una plantilla de "Sencillo" y como vemos nos aparece el condenado error.

Blog analizado antes de aplicar el cambio

bien todo normal, ahora veamos el mismo blog con los cambios aplicados de Eliminate render-blocking JavaScript and CSS in above-the-fold content,

Blog analizado después de aplicar los cambios

Wow! que aumento de velocidad de lo mas increíble! y como lograr esto, pues muy sencillo, para empezar tomaremos nota de todos los gadgets que tenemos, 

El truco que explicare, sirve para arreglar la velocidad que un blog trae por defecto, mejor dicho como fuera nuevo, recién creado y sin ningún gadget adicional, porque si tiene un blog con muchos gadgets que usan scripts, y un montón de cosas, solo arreglaremos un poco el lio.

Doy una advertencia antes de empezar el tutorial, si crees que mejor no lo aplicas pero quieres una mejor guía para acelerar tu blog visita esta entrada en la que enseño mejor que hacer para Acelera la carga del blog y mejorar su velocidad no desesperes.

ADVERTENCIA

• Aplicar esta solución deshabilitara el diseñador de plantillas de blogger, así que si no eres un bloggero avanzado o con conocimientos en CSS y HTML mejor no lo hagas.
• Algunos gadgets proporcionados por blogger como el botón +1 quedan deshabilitados, pero tu puedes colocarlos manualmente
• también le decimos adiós a los comentarios de google+ en el blog
• quedan advertidos XD

Para los que si quieren hacer esto dejemos tanto rodeo y comencemos con la optimizacion!

Eliminate render-blocking CSS in above-the-fold content

• si en realidad quieres mejorar la velocidad de tu blog piensa en quitar todos esos gadges adicionales que empeoran este problema, ¿como saber que tipos de gadgets son? bueno intentare explicarlo, son gadgets como los botones de me gusta de facebook, google+, twitter, animales en el blog que se mueven, sliders, entre muchos otros, no te alarmes por lo de los botones, puedes usar opciones mas livianas como los que yo uso en mis entradas, que no alenta el blog.
• una ves que ya no tengas los gadgets que estorben, haremos lo siguiente, arreglaremos primero el Eliminate render-blocking CSS in above-the-fold content, vamos a blogger
• y rápido nos dirigimos a plantilla y copiamos todos los códigos CSS que tengamos y los pegamos en un blog de notas para guardarlos
• ahora vamos a nuestro blog normalmente (en ver blog) y damos click derecho y en ver código fuente de la pagina.
• aquí localizamos un  par de lineas como estas:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/xxxx-xxxxxxxx-widget_css_2_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx' />

• esas dos lineas nos dan el error del CSS, siempre están juntas y las encuentras en la parte de arriba, casi antes de terminar </head>, cuando las hayas  localizado, clickea en la dirección que contienen.
• se abrirán 2 paginas, uno con muchos códigos CSS y otra con apenas 2 o 3 lineas de código css, en fin lo que tienes que hacer es copiar todas esos códigos y los pegas en el blog de notas que ya tenias arriba de los códigos que ya tenias, NOTA estos estilos son los de los gadgets de blogger y partes del mismo blog que tienen todos los blogs, si tu quieres puedes sacar las lineas que te sirvan, para así no meter todo ese código en tu blog
• bien ahora nos regresamos a la plantilla de blogger y ubicamos  
• todo lo que esta dentro de los b:skin lo borramos incluyendo los b:skin
• y en su lugar pegamos este código:
  
  

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

  
  
• y donde esta en color rojo pegamos todos los css que teníamos en el blog de notas y guardamos la plantilla.

Ya con esta parte quitamos el Eliminate render-blocking CSS in above-the-fold content, ahora eliminemos el Eliminate render-blocking javascript in above-the-fold content, recuerden que estas dos cosas van de la mano, una sola sube un poco la velocidad, pero juntas revientan!

Eliminate render-blocking JavaScript in above-the-fold content

• Este es un poco mas sencillo ahora que sabes como es la temática. con esto también nos quitaremos de encima el molesto

  https://apis.google.com/js/plusone.js

  que también alenta el blog
• vamos a la plantilla de blogger y editar html
• no vamos hasta la parte final del código y buscamos el </body>
• eliminamos el body y pegamos este código en su lugar. 

&lt;!--</body>--&gt;aqui codigos javascrit&lt;/body&gt;



• como ya has visto la parte que esta enrojo sera para colocar todos los scritps externos que utilices como, los script de facebook, google analitycs, o cualquier otro script que tengan, si no tienes elimina esa parte.
• guarda los cambios

Ahora mira tu blog y veras que rápido carga, y si loi compruebas en google page speed veras la diferencia!, bien eso fue todo espero les haya servido y cuéntenme como les fue.