5 tips para optimizar tu sitio web

Hace unos días salía la noticia de que internet a nivel mundial se hacía más lento. Sea la razón que menciona el artículo (mal uso de ruteo mundial) o un DDOS o cualquier otra excusa lo cierto es que conforme los anchos de banda se hacen más rápidos con el tiempo empezamos a perder control sobre la eficiencia de nuestro propio sitio.

Creemos que como las velocidad de internet tienden a incrementarse podemos ahora poner elementos más pesados en nuestros sitios, cuando la mejor práctica sería hacer lo contrario, seguir tratando de optimizar todos nuestros recursos para seguir teniendo un sitio web donde personas con velocidades muy lentas sean capaces de cargar nuestro contenido.

Les comparto algunos tips para seguir manteniendo nuestro sitio web rápido, adaptando los nuevos estándares pero cuidando de no exagerar en el uso o mantener regulado cuestiones básicas como las imágenes.

#1 Hacer más eficiente nuestro código y llamadas

Lo primero que sugeriría es revisar el código de nuestro sitio web. Dado que son solo archivos planos con texto impacta el número de líneas y caractéres que tiene un archivo. Lo más fácil aquí es tratar de recortar el código que no nos sirve o simplificarlo para tener el mismo resultado con menos líneas.

Para el tema de llamadas HTTP son el segundo elemento que más genera tiempos de carga. Con HTTP Request Checker pueden checar cuántas llamadas hace su sitio web al cargar. Cada llamada HTTP es un recurso que carga desde otro lado, por lo que es buena idea saber si el número de llamadas es lo bastante grande para que nuestro sitio tenga que esperar para descargar ese contenido y después renderear nuestro sitio.

#2 Optimizar imágenes

En general nunca debemos poner una imagen de un tamaño cuando en realidad es de otro. Esto afecta dos cosas, una que el navegador tarda más en renderizar esa imagen, y dos, que si la imagen pesa mucho por no estar en el tamaño correcto hace que el usuario note como una imagen pequeña impide que cargue el demás contenido rápidamente.

Siempre que sea posible hay que generar nuestras imágenes al tamaño que las vamos a utilizar, y dos, hay que optimizar su calidad. La calidad se hace con herramientas web pero incluso si tienen editores de imágenes escojan generar la imagen en una calidad buena, no la de más calidad.

#3 Optimiza animaciones

El primer paso para optimizar animaciones es no mezclar varios plugins a la vez, ya que no sabemos a gran detalle qué elementos usa para animaciones, y eso crea un conflicto de rendimiento. Siempre será mejor hacer animaciones manualmente, pero si no podemos hacerlo, busquemos aquellas librerías que usen en CSS la propiedad translate() y no la propiedad de posición absoluta para mover elementos. Paul Irish explica por qué.

#4 Optimizar fuentes

Hoy en día ya no usamos solo la Arial o la Times New Roman para los sitios por lo que hay que tener en mente que no solo es el renderizado de la fuente (lo cuál ya implica gran tiempo de carga) sino que es la misma petición, acomodo y aplicación al texto. Mientras que un texto corto es ideal para una fuente muy pesada, no lo es para todo un párrafo.

#5 Optimiza los plugins sociales

Estos son los botones para suscribirse a Facebook, Twitter, o los plugins de comentarios para posts, o las cajas de actualizaciones de tus perfiles, o los plugins que cuentan los visitantes actuales, o la publicidad. Todos estos queramos o no contienen una cantidad espantosa de datos que cargar por lo que de cierta forma estamos sacrificando rendimiento por lograr más likes en nuestra página de Facebook. Lo importante aquí es saber ocupar solo los extremadamente necesarios. Si no usamos Pinterest lo suficiente para generar muchos usuarios no hay razón por la que debamos poner todos los plugins de Pinterest, pero si nuestro Twitter tiene buena influencia támpoco creo que sea por tener mil botones en el sitio, sino por el contenido. Hay que saber relacionar el éxito de nuestras redes sociales con el contenido que generamos, no con los botones que le ponemos al usuario.