Es un gusto escribir esta segunda parte de Cómo eliminar el Javascript que bloquea la visualización y el CSS de la parte superior de la página, pido una disculpa por haber tardado tanto, pero a petición de muchos de ustedes, queridos lectores ya está disponible.
Ustedes mismos me exigieron esta segunda parte, pues este tema es uno de los que más tráfico generan a este sitio, y creo que es porque no hay mucha información, la que hay es incompleta o alguna es muy avanzada y no está digerida para nosotros los mortales. Cuando yo encuentro información que no es mía la cito, así que encontrarán la fuente de algunos datos aquí para que puedan revisarla por ustedes mismos, bueno, a darle.
En la primera parte de este post, Cómo eliminar el Javascript que bloquea la visualización y el CSS de la parte superior de la página, dejamos claro en qué consiste este problema que nos suelen señalar herramientas como PageSpeed o GTMetrix( si estás leyendo este artículo sin haber leído el anterior te recomiendo ampliamente revisar la primera parte aquí).
Sabemos que tanto archivos JS como CSS obstaculizan la carga rápida de nuestras páginas web, obstaculizan el HTML Prase, como lo vimos en el primer post. Aun cuando ya revisamos las alternativas para los archivos JS en la entrega pasada, debo decirles que en el caso de los CSS no es igual, quizá sea duro, pero es más complicado aún.
Primero dejemos claras algunas cosas, como lo dice Patrick Sexton, en su increíble y recomendable website varvy.com, hay algunas cosas que debemos dar por hecho:
- Cada uno de tus archivos CSS retrasa la carga de tu página.
- Entre más grande sea un archivo CSS, más tardará en cargar.
- Entre más archivos CSS enlaces, más tardará tu página en cargar.
Parece un acertijo, de esos donde cuando crees encontrar la solución en realidad has caído en una encrucijada.
Todos mis archivos CSS retrasarán mi pageload, pero async y defer son atributos booleanos de HTML que sólo se pueden aplicar a scripts de Javascript, o sea que vayan sobre la etiqueta <script>, entonces no lo podemos aplicar (hasta cierto punto, lo veremos más adelante).
Luego nos dice que entre más grande sea un archivo CSS, más tardará en cargar, entonces pensamos en la aquella práctica de los desarrolladores web que en lugar de tener un sólo archivo CSS con todos los estilos, prefieren seccionarlo en varias hojas CSS, pero sorpresa, nos topamos con el punto número 3 y nos dice que justo eso NO lo debemos hacer, porque también, entre más hojas CSS existan, más tiempo tardará en cargar. ¡¿Dios mío, qué hacemos entonces?! :’(
Vamos a tratar de darle solución a este embrollo de 2 maneras: primero por la parte lógica y de buenas prácticas y segundo con algunos tips y técnicas que pueden parecer aventuradas o experimentales.
Primero, planifica y supervisa tu desarrollo web
Comencemos por hacer bien las cosas, si sabemos que entre más grande sea un archivo CSS más tardará en leerlo y cargarlo, pues tratemos de enlazar solo el código necesario. Entonces, ¿deberíamos comenzar por escribir las hojas de estilos y asignarlas de acuerdo a lo que necesita cada página? Es decir, ¿deberíamos tener los estilos que se requieren para el home, y solo eso, en una sola hoja y que sea esa la que se enlace?
La verdad, el escenario anterior sería complicado para los desarrolladores, pues ellos piensan y mapean el proyecto completo, la plantilla e incluso los CMS están construidos de esa manera. En el enfoque de desarrollo es lo lógico y parte de las buenas prácticas, además, hace el proceso de edición fluido y coherente.
Combina los CSS
¿Entonces, qué hacemos? Para empezar, si observamos que entre las recomendaciones a una página (porque recordemos que PageSpeed nos analiza páginas, no sitios) debemos eliminar los CSS que bloquean la visualización del Above the Fold (la parte superior de la página), entonces debemos revisar qué hojas estamos enlazando, quizá estamos extrayendo pequeñas cantidades de código de diferentes hojas.
Como aparece en la ficha de TIP SEO, no tiene sentido enlazar muchas hojas de estilo por pequeños fragmentos de código, imagina que en la hoja 1, tienes la clase para que el logo flote a la izquierda, en la 2 una para un banner y en la 3 alguna para el sidebar. Por una sola clase valdrá la pena mandar a llamar 3 hojas diferentes, recordemos que el navegador tendrá que descargar la hoja completa, no solo la clase que necesitamos.
En otras palabras, si ustedes tuvieran 3 maletas guardadas en un armario y para su arreglo diario (la carga de su home) necesitaran sacar diariamente un elemento de cada una de esas maletas, no sería molesto tener que repetirlo diario?
Combina CSS
Yo pondría esos 3 accesorios en una distinta maleta con ese exclusivo fin. ¿Me explico? A esto se le llama combinar CSSs;) Como dijimos, algunas veces , puede ser un verdadero dolor de cabeza hacer este cambio, pero finalmente combinar CSSs es una de las mejores prácticas para reducir el tiempo de carga de una página web.
Si de pronto crees que la opción es utilizar @import, no te lo recomiendo, al final esta función lo que hace es importar el código de ese estilo a la hoja HTML y al final es más código y además, de cierto tiempo de carga extra por la importación, mejor, si no es mucho, escribe el código directo en la hoja.
Si el código es poco, hazlo inline
Como ya dijimos, en lugar de estar jalando pequeños fragmentos de código desde diferentes hojas, si es poco el código, ponlo inline, o sea escríbelo directo en el Head. Si el código ya es extenso, enlázalo.
Segundo: soluciones aventuradas y experimentales para eliminar el CSS no necesario para la carga de la parte superior de la página
Bueno, quizá ahora se estén preguntando, ¿cómo le hago para saber qué estilos son los estrictamente necesarios para que cargue la parte superior de la página y cuáles no.
Pues, por ahí me encontré este package llamado: Addy Osmani’s Node.js Package, que pretende hacer esta tarea de manera automática. Sin embargo, este método necesita de acceso SSH, así que si tienen un desarrollador osado, puede ser un gran método y aquí les dejo un video de cómo conectarse vía SSH a un servidor.
Algo extraordinario, sería que ya que tenemos sólo el CSS necesario para que cargue la parte superior de la página lo coloquemos inline. Sería un escenario increíble y si tienen oportunidad y un desarrollador web dispuesto háganlo.
Otra cosa muy interesante que nos regalan nuestros amigos de www.giftofspeed.com, es un fragmento de código en Javascript para aplicar a los estilos (¿recuerdan?, por eso al principio les decía que no se podía aplicar un defer a los CSS, sólo hasta cierto punto). Muchos plug ins de WordPress utilizan métodos similares para hacer esta chamba.
La recomendación es aplicar este método sólo a CSS grandes, o sea, un escenario perfecto se´ria tener inline los estilos para la parte superior de la página, el Above the Fold, y utilizar este método para el resto de los estilos.
Debemos pegar este fragmento de código Javascript, de preferencia en el footer:
<script type="text/javascript">
/* First CSS File */
var giftofspeed = document.createElement('link');
giftofspeed.rel = 'stylesheet';
giftofspeed.href = '../css/yourcssfile.css';
giftofspeed.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);
/* Second CSS File */
var giftofspeed2 = document.createElement('link');
giftofspeed2.rel = 'stylesheet';
giftofspeed2.href = '../css/yourcssfile2.css';
giftofspeed2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>
Se deberá sustituir la ruta del archivo al que se le desea aplicar defer en donde dice: ../css/yourcssfile.css.
Si sólo se desea aplicar defer a un solo archivo se deberá omitir la parte que dice Second CSS file
Les recomiendo cambiar el nombre de las variables giftofspeed, que yo he dejado para darle reconocimiento a los creadores de este código. Y finalmente, deberán este fragmento, para que aquellos navegadores que no soportan Javascript (que ya prácticamente no existen) puedan cargar bien los CSS.
<noscript> <link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" /> <link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" /> </noscript>
Finalmente, les dejo la liga original de este método por si desean consultarlo: https://www.giftofspeed.com/defer-loading-css/
Muy bien, ahora ya tienes las recomendaciones y buenas prácticas para solucionar este tema e incluso una alternativa más avanzada. Les recuerdo que antes de hacer cambios en los CSS hagan un respaldo de su sitio web y su base de datos.
¿Qué les pareció? Si les ha gustado califíquenlo y compártanlo por favor. Si tienen dudas o alguna observación, los invito a dejarme un comentario o mandarme un Tweet.
