Mejora el rendimiento de tu Blog optimizando los CSS y JavaScript: "Remove render-blocking JavaScript and CSS in above-the-fold content" – School – Seguro

Posiblemente la regla que más impacto negativo ha tenido en los resultados de Page Speed en la gran mayoría de Blogs de Blogger ha sido la que vamos a tratar y resolver en esta guía: los problemas de generación con bloqueos de Javascript y CSS.

Fundamentalmente y siguiendo la máxima de minimizar la cantidad de accesos que se realicen al servidor que puedan penalizar el tiempo de ejecución en el cliente, Google centrándose exclusivamente en el rendimiento puro y duro, ha introducido una nueva regla en Page Speed que verifica si por un lado estamos accediendo a archivos externos al servidor donde se encuentra nuestro blog.

Y por el otro, comprueba si algún archivo o recurso interno o externo que estamos utilizando produce un "bloqueo" o impide la ejecución secuencial y paralelizada de las partes que componen la página.

Todos los Bloggers se plantean cómo poder optimizar, quitar o poner su código CSS (hojas de estilo) o el JavasScript previo a la carga de la página, dado que Blogger no ofrece directamente la posibilidad en el editor de plantillas de quitar CSSs o JavaScripts que nuestra plantilla esté utilizando.

Aprendamos qué significa cada actor de esta nueva regla: ¿qué es una CSS?, ¿cómo se utiliza el JavaScript en Blogger? y lo que es más importante, ¿cómo puedo solucionar esta sugerencia que me da Page Speed y que me está quitando la puntuación que antaño tenía?.

NOTA IMPORTANTE: esta guía está destinada a los usuarios que deseen saber qué ocurre con la sugerencia del "Render-blocking" de Blogger en Page Speed. Los que luego apliquen la solución deben saber que es un tema eminentemente técnico que requiere un mínimo de experiencia en JavaScript, CSS y HTML. Si no tienes esos conocimientos, te servirá saber porqué te da la sugerencia PageSpeed pero no trates de realizar los cambios si no tienes experiencia técnica en programación.

Sugerencias de Page Speed analizadas paso a paso hasta el momento:

Entrega I, mejora la velocidad de tu Blog con Google PageSpeed.

Entrega II, "Avoid Landing Page Redirect"

Entrega III, "Remove render-blocking JavaScript and CSS in above-the-fold content"-

Entrega IV - "Enable compression" y "Leverage browser caching"

Entrega V, Soluciones para cada sugerencia de PageSpeed paso a paso - "Minify CSS", "Minify HTML" y "Minify Javascript".

La guía de rendimiento para Bloggers - Entrega VI, Soluciones para cada sugerencia de PageSpeed paso a paso - "Optimize images".

La guía de rendimiento para Bloggers - Entrega VII, Soluciones para cada sugerencia de PageSpeed paso a paso - "Prioritize visible content", "Reduce server response time".

Aviso para principiantes, diversidad de temáticas adaptada a niveles de conocimiento en la materia:

Todos los cambios que se van a tratar en la guía son de eminente carácter técnico. Trato de explicarlo para hacerlo asequible a un público con escasos o nulos conocimientos en informática. No obstante, hay muchas de las reglas que este servicio ofrece que están dirigidas a usuarios expertos.
En caso de que dispongas de poca experiencia o conocimientos en materia web, si lo explicado en esta guía te resulta complejo, te recomiendo que realices estas otras guías simplificadas a tal efecto:

Cómo solucionar los problemas de lentitud en mi Blog
Mejora la velocidad de tu Blog II - Localiza aquello que ralentiza tu Blog para ponerle remedio

Conceptos previos imprescindibles para comprender la guía:

Te recomiendo encarecidamente que antes de comenzar con esta entrada, aprendas a utilizar la medición de Page Speed y sus resultados haciedo esta guía:La guía de rendimiento para Bloggers - Entrega I, mejora la velocidad de tu Blog con Google PageSpeed.

Page Speed una vez ha evaluado el rendimiento de tu sitio web o Blog te proporcionará una puntuación basada en la ponderación de los puntos enumerados en su análisis. Es muy importante entender que Page Speed sólo da sugerencias, ninguno de sus cambios es obligatorio.

Conceptos previos para los no iniciados en informática o programación de páginas web (Si tienes experiencia en código HTML, CSS y JavaScript puedes pasar directamente a la solución):

Si no conoces algunos de los conceptos básicos de programación web, esta guía te lo pondrá muy fácil:¿Qué es el Javascript?, ¿qué es el HTML?, ¿qué son las CSS?: conceptos previos para los no iniciados en informática.

MUY IMPORTANTE: Recomendaciones y omisión de responsabilidad:

Si eres un usuario con nulos conocimientos en HTML, CSS y JavaScript, este cambio no te
merece la pena realizarlo. Me explico, para poder solucionar esta sugerencia, dado que Blogger no permite que podamos quitar CSS que nuestra plantilla utilice por defecto, hay que emplear una solución que NO se realiza por los "cauces normales" y que implica comprender muy bien lo que se está haciendo por varios motivos:

Si se comete cualquier error al tocar el CSS o los JavaScript que por defecto lleva tu plantilla, tu Blog puede quedar parcial o totalmente inutilizado.
Si hay actualizaciones sobre tu plantilla por parte de Blogger, éstas no se reflejarán en la tuya al haber alterado el código fuente original de la misma.
No podrás seguir utilizando algunos asistentes como el de formato de personalización del Blog por medio de Blogger. A partir del momento en que emplees esta solución, todas las modificaciones que desees realizar en este sentido deberán de ser programadas directamente por ti.
La puntuación de mejora final, aún siendo un cambio de los que mejor puntúa, te va a permitir si aplicas el resto de soluciones que explicaremos en todas las entregas, llegar hasta los 90 puntos. Puntuación suficiente como para contar con una ejecución "estándar" o "normal" para un Blog. Mas que suficiente para unos resultados aceptables.
Si realizas la solución que ofrece Google Page Speed al CSS y Javascript Render-Blocking, es necesario que a continuación realices una "minimización" del código de la plantilla para que quede todo perfectamente optimizado. De lo contrario se producirá un efecto contrario al deseado. En el último paso de la guía se te recordará realizar la "minimización".

Por todo lo aquí explicado, se hace fundamental conocer qué se está cambiando y qué consecuencias puede tener en caso de no disponerse de los conocimientos adecuados. Los usuarios más experimentados siempre pueden disponer de la herramienta de copia de seguridad del Blog para en caso de problemas poder volver a la situación inicial.

No me responsabilizo de los daños que puedas sufrir en tu Blog por el uso de esta solución.

Realiza una copia de seguridad de tu página web o Blog. Salvaguarda tus datos antes de hacer cualquier cambio:

Es totalmente imprescindible que realices una copia de seguridad de tu Blog antes de continuar. Si bien el análisis de Page Speed no va a realizar ningún cambio en el mismo, las soluciones que vamos a proporcionar a cada advertencia informada por la utilidad sí requerirán alterar el código o realizar cambios. Realiza esta guía para no perder nada de tu valioso trabajo en caso de error:Realizar una copia de seguridad de tu Blog para prevenir. Recupera entradas perdidas por medio del buscador "in-extremis".

Analizando cada Punto de los resultados que Page Speed puede devolverte y aplicando soluciones Paso a paso:

El problema y su detalle:

El contenido "above-the-fold" o previo al "dibujado" de la página es vital tenerlo perfectamente optimizado. Page Speed, centrándose en el rendimiento bruto, trata de buscar aquellos archivos externos que utilices en tu página web o Blog de tipo CSS, JS o javascript previo a la carga de la página.

Page Speed sugiere que objetivamente, el acceso a un servidor, sea externo o el mismo donde reside la página web, para utilizar recursos que actúen sobre los componentes de nuestra página web, resulta en una "pérdida de tiempo" en la petición y obtención del resultado. El navegador debe "parsear" (transformar) un contenido de la página HTML que se encuentra "fuera" de ella, con el consiguiente tiempo de ejecución que en ello se pierde.

Al margen de la controversia de la norma, está comprobado y es claro que la ejecución de "módulos" externos de código de una página es más lento que si estos se encuentran ya en ella.

La solución:

En Blogger no se pueden tocar directamente las líneas de código html que invocan a los archivos CSS o JS. La plantilla está conformada por un código XML que simplifica y estandariza el código a utilizar en la plantilla. Este XML es interpretado por Blogger para que luego "él" lo transforme en HTML que se irá interpretando el navegador del usuario.

Si el CSS no es de gran tamaño, es necesario que sea inyectado directamente en tu página HTML (CSS inline) como podemos ver en la página de soporte de Google Developers.
Si no reduces como mínimo el tamaño del CSS o el Javascript inline en tu página, estarás consiguiendo un efecto negativo para el rendmiento de tu web o Blog. Esto se debe a que estarás aumentando considerablemente el tamaño del XML de Blogger, lo que resultará en un HTML enorme. No dudes en realizar la "minimización" o "compactación" del código CSS y Javascript inline, es mucho más rápido que lo que ya has hecho en esta guía y optimizarás al máximo posible los recursos de tu sitio web o Blog. Para hacerlo ejecuta esta guía cuando termines con los pasos inferiores:Entrega V, Soluciones para cada sugerencia de PageSpeed paso a paso - "Minify CSS", "Minify HTML" Y "Minify Javascript".

Paso a paso con los CSS:

0)RESUMEN: extraeremos primero los CSS que tenemos integrados en la página, bien referenciados en el código de la plantilla o en archivos CSS externos al Blog. Después comentaremos las líneas del XML de Blogger que hacen que se dibujen sus CSS. Acto seguido introduciremos "inline" nuestro código CSS en la plantilla con TAGS html estándar, de manera que todo vuelva a la normalidad pero teniendo el código CSS incluído en la página.

1) Recopila tus CSS, dado que vamos a hacer que dejen de utilizarse. Debes localizarlos y descargártelos en un editor de texo o similar.
MUY IMPORTANTE: en el editor de plantilla de Blogger, localiza todo el código que esté entre el TAGb:skin![CDATA[y/b:skin y haz CONTROL+X para cortarlo de la plantilla.

2) Pega todo ese código en un NOTEPAD o editor de textos que no altere el formato para que luego podamos tenerlo disponible.

3) Adicionalmente, utiliza "ver código fuente" de tu navegador. Observarás que en el código HTML aparece la siguiente cadena para referenciar a tus CSS "linkrel="stylesheet"href="NOMBRE_DE_TU.css". Estarán los CSS de los Widgets de Blogger, estos debes copiarlos.Descárgate utilizando el navegador (escribe la URL del CSS en la barra de direcciones del navegador) y guarda el contenido de esos CSS en otro NOTEPAD o editor de textos. Así los tendremos disponibles para luego meterlos en la propia página HTML.

4) Con tus CSS metidos en un editor de texto, ya puedes ir al editor de plantila de Blogger de nuevo y al haber "cortado" el contenido del CSS de tu plantilla, debería haberte quedado así el código con el que vamos a trabajar:

b:skin![CDATA[/b:skin

5) Quita ese código y cámbialo por este otro:

<style type="text/css"><!-- /*b:skin![CDATA[*//b:skinstyle type='text/css'/style

Estamos comentando con HTML puro la línea del XML de blogger que trabaja con sus hojas de estilo. A todos los efectos, comentar en programación quiere decir que ha quedado inhabilitado el uso del CDATA que trabaja con los CSS anteriores al cierre del HEAD.

6) Ahora entre la etiqueta del nuevo código copiado en el paso 5)style type='text/css'y/stylemetes primero el código CSS del NOTEPAD que extraíste en el paso 3) y seguido pegas el que extraíste en el paso 1 y 2):

<style type="text/css"><!-- /*b:skin![CDATA[*//b:skinstyle type='text/css'DENTRO_TU_CSS_PASO_3+CSS_PASO1y2/style

Lo que estás haciendo es comentar la línea del XML de Blogger que se encarga de trabajar con los CSS (CDATA) para luego inyectar por código HTML tradicional primero el CSS que tuvieras en el HTML de tu página y después el código CSS que tenías personalizado en tu plantilla Blogger. Este orden es importante, primero los CSS externos y después el del CDATA de dentro de tu plantilla porque de lo contrario, perderás las personalizaciones o cambios particulares que hayas realizado a tu plantilla en "personalización CSS".

Fuente con la solución probada y utilizada en el Blog:aquí

Paso a paso con el JAVASCRIPT:

0)RESUMEN: extraeremos primero los JS que tenemos integrados en la página, bien referenciados en el código de la plantilla o en archivos JS externos al Blog. Después comentaremos las líneas del XML de Blogger que hacen que se atienda al JavaScript de la plantilla. Acto seguido introduciremos "inline" nuestro código de llamada a JS o scripts externos en la plantilla con TAGS html estándar, de manera que todo vuelva a la normalidad pero teniendo el código JavaScript reajustado en la página.

1) Recopila tus JavaScript o Scripts que realmente utilices. Es posible que tengas problemas una vez hayas hecho los cambios y tengas que localizar todos esos javascripts que necesitas para tu Blog. Es ESENCIAL que te fijes en la línea donde llames a tu archivo widgets.js pues es el que controla los componentes que vienen de Blogger.

2) Con la lista de js que utilices clara, ya puedes ir al editor de plantila de Blogger de nuevo y buscar con CONTROL+F :/body

3) Quita ese código y cámbialo por este otro:

</body>

4) Ahora, inyecta tu código javascript habitual antes de</body>
A modo de ejemplo, el resultado en mi Blog por ejemplo con el javascript inyectado para Google Analytics y el que utilizo para los+1 es el siguiente:

script type='text/javascript'(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();/scriptscript type='text/javascript'_gaq=_gaq||[];_gaq.push(["_setAccount","XX-XXXXXXXX-X"]);_gaq.push(["_trackPageview"]);(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();/script</body>

Lo que estás haciendo es comentar la línea del XML de Blogger que se encarga de trabajar con los scripts para luego inyectar por código HTML tradicional los Javascript que realmente utilizas en tu sitio web.

Fuente con la solución probada y utilizada en el Blog:aquí.

MUY IMPORTANTE: Realiza "minimización" o "compactación" del código CSS o Javascript INLINE :

El uso de CSS o Javascript Inline hace prácticamente "obligatorio" el uso de la minimización, ya que al inyectar el código del CSS o Javascript en la página, estamos ocupando una cantidad de líneas enorme y un espacio mayor que cuando se le llamaba en ficheros externos.

Para cumplir con todas las nuevas sugerencias de Google en Page Speed, es conveniente que si metemos el código de CSS o Javascript en nuestra página este sea también minimizado. Si no reduces como mínimo el tamaño del CSS o el Javascript inline en tu página, estarás consiguiendo un efecto negativo para el rendmiento de tu web o Blog. Esto se debe a que estarás aumentando considerablemente el tamaño del XML de Blogger, lo que resultará en un HTML enorme. No dudes en realizar la "minimización" o "compactación" del código CSS y Javascript inline, es mucho más rápido que lo que ya has hecho en esta guía y optimizarás al máximo posible los recursos de tu sitio web o Blog. Para hacerlo ejecuta esta guía después de haber realizado los pasos anteriores:Entrega V, Soluciones para cada sugerencia de PageSpeed paso a paso - "Minify CSS", "Minify HTML" Y "Minify Javascript".