Revista Comunicación

Blogger: Eliminate render-blocking JavaScript and CSS

Publicado el 01 abril 2015 por Loquendo Manzano
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" 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, analisemos un blog recién creado. y veamos que nos dice google page speed antes de corregir este problema y después de arreglarlo.
Bien, entonces tenemos aquí un blog recién creado con una plantilla de "Sencillo" y como vemos nos aparece el condenado error.
Blogger: Eliminate render-blocking JavaScript and CSS
bien todo normal, ahora veamos el mismo blog con los cambios aplicados de Eliminate render-blocking JavaScript and CSS in above-the-fold content,
Eliminate render-blocking JavaScript and CSS in above-the-fold content
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.
aclaracionADVERTENCIA
  • 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:


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

    2. <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  Blogger: Eliminate render-blocking JavaScript and CSS
    • todo lo que esta dentro de los b:skin lo borramos incluyendo los b:skin
    • y en su lugar pegamos este código:
       

    áé

    Volver a la Portada de Logo Paperblog

    Dossiers Paperblog

    Revista