Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Optimiza Tu Web Sin AMP: Lista de Pautas de Optimización

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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 de mi curso Optimiza Tu Web Sin AMP, 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.

Optimiza Tu Web Sin AMP: Lista de Verificación Para la Optimización

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 produccan 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.

Solo JavaScript Vanilla

También vamos a asegurarnos de que cada pizca de JavaScript que usemos sea JavaScript vanilla, y lo haremos para estar seguros de que no tenemos dependencias. Si usamos, por ejemplo, un lightbox que depende de jQuery, nos obligaría a cargar jQuery en nuestra web, y esto supone un mayor tamaño de archivo y que el navegador tenga que procesar más.

Con frecuencia no es necesario usar múltiples librerías JavaScript. Normalmente puedes lograr la misma funcionalidad usando sencillamente JavaScript vanilla.

Da Preferencia al JavaScript Sencillo 

También usaremos preferentemente JavaScript simple. Vamos a intentar mantener el tamaños de nuestro archivo JavaScript lo más bajo posible.

Crea Alternativas Que No Estén Basadas en JavaScript

Y el último punto sobre JavaScript consiste en asegurarnos en la medida de lo posible, de que tenemos en cuenta a aquellas personas que tienen JavaScript desactivado.

En la versión AMP de la web que vamos a crear, si desactivamos JavaScript, comprobarás que no nos queda mucho contenido que contemplar.

AMP site cover image
AMP site with messages about lack of JS

Hay muy pocas cosas que podamos hacer en esta web para que sea posible usar alternativas a funciones no soportadas. En gran medida, AMP depende completamente de JavaScript para mostrarte cualquier tipo de contenido.

En nuestra versión sin AMP, todavía tenemos imágenes de fondo que se muestran correctamente, y de hecho estamos insertando también aquí algunas alternativas para los iconos basados en fuentes, ya que con frecuencia la gente que bloquea JavaScript también bloquea las fuentes.

No AMP site

Tenemos un mensaje que permite a la gente saber porque no aparece el vídeo de YouTube, y lo mismo bajo el lugar en donde debería aparecer nuestro CodePen.

Message explaining lack of YouTube video

Nuestra galería sigue mostrándose de la misma manera, y después abajo del todo, tenemos una versión en forma de texto que muestra nuestros tuits en caso de que no esté disponible JavaScript. 

Lightbox gallery with no JavaScript

Usa "Lazy Loading"

También nos vamos a asegurar de usar "lazy loading" tanto en las imágenes como en los iframes. Si tienes un sitio web muy grande, la gente normalmente mirará primero lo que aparece en la parte superior, después se desplazarán hacia abajo para ver el resto del contenido.

Pero no queremos hacerles esperar a que el resto del contenido se haya cargado antes de que puedan empezar a ver lo que hay en la parte superior del contenido. De forma que, con "lazy loading", solo cargarás lo que aparece en la parte superior, y después gradualmente, conforme el usuario se desplace hacia abajo, cargarás el resto del contenido.

Evitar el Reflujo

Para terminar, también vamos a asegurarnos de prevenir el reflujo. Algo que ves con frecuencia, especialmente en la versión móvil, es que según se van cargando los elementos más lentos, como por ejemplo las imágenes, el resto del diseño de la página tiene que reajustarse alrededor de esta nueva imagen.

Esto es negativo por un par de razones:

  1. Es realmente molesto para el usuario. Estarán mirando un lugar, y después de repente toda la disposición de la página cambia, pierden de visión de la parte de texto que estaban leyendo, teniendo que volver a localizarla. Después el diseño refluye de nuevo, lo que convierte la experiencia en su conjunto en algo muy desagradable. 
  2. Una de las cosas más costosas que debe realizar un navegador es calcular la maquetación de la página, y tú quieres asegurarte de que el navegador solo tenga que calcular la disposición de los elementos de ésta una vez. Por eso, incluso antes de que tus imágenes se hayan cargado, quieres cerciorarte de que has tenido en cuenta el espacio correspondiente a las mismas. De manera que el primer diseño cargado sea el correcto.

Mira el Curso Completo

En el curso completo, Optimiza Tu Sitio Web Sin AMP, llevaremos a la práctica este listado. Aprenderás cómo coger una web basada en AMP y convertirla en su equivalente sin AMP. En otras palabras, aprenderás a conseguir que tus webs funcionen extremadamente rápido, con las técnicas de optimización que tú decidas. 

Puedes acceder a este curso directamente mediante una subscripción a Envato Elements. Por un único precio mensual, conseguirás acceso no solo a este curso, también podrás acceder a nuestra creciente librería con alrededor de 1.000 cursos en vídeo e eBooks líderes en la industria en Envato Tuts+.

Además ahora también obtienes descargas ilimitadas de la inmensa librería de Envato Elements que cuenta con más de 400.000 recursos creativos. Crea con fuentes, fotos, gráficos y plantillas únicas, te permitirá ofrecer mejores proyectos y de forma más rápida. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.