Tan importante es el diseñar y programar una página web responsiva, atractiva y usable que agrade a tus clientes; como hacer que esta página web cargue lo más rápido posible en los dispositivos de tus clientes. Hoy os voy a hablar un poco del tema de la optimización.
Por qué no finaliza tu trabajo cuando acabas montando la página, con técnicas SEO Friendly, usable, y un largo etc… siguiendo unas pautas de diseño. Hay que seguir trabajando en ella, cuando otro aspecto muy importante como la velocidad de carga de la misma, influye mucho en el éxito de la misma.
Aquí tenéis una serie de recomendaciones que utilizo a la hora de optimizar un proyecto.
a) Si puedes, intenta montar una web a mano antes que utilizar un CMS
Está claro que los CMS actuales nos salvan mucho tiempo, cambios de última hora, y dinero al cliente, cuando este viene con la intención de que le hagas algo rápido y sencillito, y posteriormente este en unos 15 dias se vuelve un proyecto web multi-idioma con video-backgrounds en HTML5 y un slider con altura dinámica. Haciéndose a mano se tarda un poco más que añadiendo un par de plugins.
La única pega que les pongo es la gestión de las conexiones a las bases de datos, y los scripts, que con tanto plugin, opciones, y demás, ralentizan la carga.
Pero insisto, si el proyecto lo permite, montadlo desde 0 con cualquier framework (si es PHP symphony, laravel, o si tienes tus propias clases montadas y backoffice… a tu gusto y forma de trabajar).
De otra forma, cuando montas una web ad-hoc, sabes qué contenido se está cargando en cada página, optimizando la cantidad de peticiones web.
b) Utiliza versiones minificadas de los css y los js que utilices
Siempre que puedas, descarga las versiones minificadas de los scripts que uses (ya seas un experto en jquery, angular) y las mismas versiones de tu framework mobile-first (Bootstrap, Foundation… ) o css varios.
Las versiones minificadas están optimizadas, porqué se eliminan los espacios y retornos de carro, reduciendo considerablemente el peso del archivo, y por consiguiente, la carga del mismo.
También existen clases o librerías, como Minify, que te ayudarán a minificar on-line los archivos estáticos que has creado tu mismo.
c) Si la programación que usas es del lado servidor, haz que esa petición se muestre toda en una línea
Al igual que ocurre con las versiones minificadas que os comentaba antes, también se puede indicar mediante código que se “limpie” el contenido de la página para mostrarlo todo en una línea, arañando un poco más de tiempo y estresando un poco menos el servicio.
¡OJO! Algunos scripts y códigos no funcionan correctamente cuando minificas el html. Simplemente haced la prueba y si os da problemas, lo dejáis como está.
d) Optimiza el almacenamiento en caché y la compresión de componentes
Es recomendable que desarrolléis directrices para que aquellos tipos de datos que puedan ser almacenados en caché, y que además puedan ser comprimidos para mostrarlos después. Por ejemplo, mediante Apache se puede indicar que se cacheen imágenes, hojas de estilo , javascripts, etc… Con esto optimizaréis y notaréis que la carga de archivos es más rápida. También se puede utilizar mod_gzip y mod_deflate como parte de apache para comprimir el contenido a mostrar y así poder optimizar la carga web.
En WordPress, está W3 Total Cache, WP Super Cache: plugins que te ayudarán … ¡dales una oportunidad!
Y hasta aquí, la primera parte de optimización web. Para la siguiente entrada os añadiré tres recomendaciones más.
¡Espero que os haya gustado!
Difusion comunicación
La importancia de optimizar tu proyecto web