Optimiza tu web sin AMP: lista de pautas de optimización

Cuando quieres optimizar el rendimiento de un sitio web de forma manual, sin usar un enfoque preconfeccionado como AMP, ¿qué pasos debes dar?

En este vídeo extraído del curso Optimiza tu web Sin AMP disponible en Tuts+, descubrirás una sencilla lista que puedes usar para asegurarte de que tu web se carga tan rápidamente como los haría usando AMP, e incluso más rápido.

Lista de pautas de optimización

Aquí tienes el listado de control básico con el que vamos a trabajar:

• Debería cargar tan rápido como, o más rápido que, una versión AMP del mismo sitio web.
• Cargar las fuentes web tan pronto como sea posible para incorporarlas y mostrarlas.
• Carga CSS eficiente y de pequeño tamaño enlazado en la sección del head.
• Escribe el CSS en archivos externos para que el desarrollo sea más práctico.
• Combina y minifica el JavaScript.
• Configura un proceso integrado para realizar los dos últimos puntos (nosotros usaremos Gulp).
• Usa solo JavaScript asíncrono.
• Posterga JavaScript de forma que no obstruya el renderizado (ejecuta el JS en el momento adecuado).
• Usa JS vanilla, de forma que no se creen dependencias JS y así minimizar la cantidad de código a cargar.
• Usa Preferentemente JS simple.
• Crea alternativas no basadas en JS siempre que sea posible.
• Usa el tipo de carga «lazy» para las imágenes y los iframes (vídeos, etc.).
• Prevén el reflujo («reflow») para evitar el recálculo del diseño.

Como puedes ver, esta lista de verificación está compuesta por una parte de tareas que debemos realizar, por otra de principios que debemos seguir, y también se compone de objetivos que queremos alcanzar. Echemos un vistazo a cada uno de ellos con más detalle.

Cargar tan rápido como, o más rápido que, una versión de la misma web con AMP

El primer punto de nuestra lista es un objetivo, que consiste en que nuestra web se cargue igual o más rápidamente que una versión de la misma web con AMP. Sería una buena idea que comprobases tus tiempos de carga según avances en tu proceso de desarrollo, por tanto, eso es lo que vamos a ir haciendo aquí.

Carga las fuentes web tan pronto como puedas

Veamos ahora los aspectos técnicos que tenemos que realizar. La primera consideración indica que queremos cargar cualquier fuente web que vayamos a usar tan pronto como sea posible.

Las fuentes web son con frecuencia archivos de gran tamaño, y no podrás mostrar tu contenido adecuadamente hasta que estas se hayan cargado. Así que vamos a asegurarnos de hacerlo con prontitud, vamos a intentar que sea lo primero que empiece a cargar.

CSS eficiente cargado «inline» en la sección head

Lo siguiente que vamos a hacer es asegurarnos de que nuestro CSS sea muy eficiente y de pequeño tamaño.

En ocasiones, puedes sentirte tentado de tomar un atajo e incluir una gran librería de CSS en tus sitios web como ayudarte y así resolver el proceso de desarrollo más rápido, aun cuando la mayoría de ese CSS sea innecesario.

Introducir un archivo CSS inmenso podría ayudarte a agilizar tu desarrollo, pero probablemente ralentizará tu web y perjudicará el rendimiento de tus sitios web en los motores de búsqueda. Menciono esto porque ahora la velocidad de carga es un factor clave en el posicionamiento. Así que es importante que tu CSS sea lo más pequeño y eficiente posible.

También vas a coger ese CSS y a cargarlo enlazándolo desde la sección head del sitio. Esta es una técnica que también emplea AMP, y es una excelente técnica de optimización. Así que es algo que vamos a hacer definitivamente en nuestro proceso de optimización.

Escribir el CSS en archivos externos

Aunque nuestro CSS va a estar enlazado desde la sección head, seguimos queriendo trabajar en él en archivos independientes. Intentar escribir CSS directamente en la sección del head de un archivo HTML no es nada práctico. Así que vamos a configurar todo de forma que podamos trabajar nuestros archivos CSS externamente, y después los enlazaremos en nuestros archivos HTML, de forma que aprovechemos lo mejor de ambos mundos.

Combina y minifica el JavaScript

Lo próximo que vamos a hacer es asegurarnos al máximo de que cualquier JavaScript que estemos usando sea combinado y minificado.

Una de las desventajas de trabajar con AMP es que tienes que incorporar varios archivos JavaScript, y tienes que hacerlo con cada uno de ellos por separado. En la medida de lo posible vamos a coger nuestro JavaScript y lo vamos a combinar en un único archivo, de forma que el navegador realice el mínimo número de peticiones.

Proceso de configuración y construcción

Para lograr estas dos cosas, poder trabajar de forma externa con el CSS y combinar y minificar el JavaScript, vamos a configurar un proceso para que se producan automáticamente ambas cosas.

Vamos a hacerlo usando Gulp. Esto significa que necesitarás tener instalado Node en tu sistema, y también iniciarte un poco en el uso del terminal. Pero cuando sea necesario te indicaré los pasos que debes dar, así que si no has trabajado con el terminal, no te preocupes.

Usa únicamente JavaScript asíncrono

Después, vamos a usar solo JavaScript asíncrono. Significa que vamos a cargar nuestro JavaScript de forma que no coincida con la carga de ningún otro archivo.

Postergar el JavaScript

Otra cosa que vamos a hacer con nuestro JavaScript es posponer su carga. Esto significa que vamos a empujarlo al final del proceso de renderizado. Vamos a asegurarnos de que todo lo demás en nuestra web se ha cargado por completo antes de hacer absolutamente nada con el JavaScript.

seguir leyendo en Tuts+

Lo que te queda por leer:

• Solo JavaScript Vanilla

• Da preferencia al JavaScript sencillo

• Crea alternativas que no estén basadas en JavaScript

• Usa «Lazy Loading»

• Evitar el reflujo