8 tips indispensables para acelerar tu sitio web
Desde hace tiempo es sabido que el gigante de las búsquedas le esta dando más y más importancia a la velocidad de carga de nuestros sitios web como factor crucial a la hora de elaborar el ranking de su motor de búsqueda. Además de esto, es un hecho que a tus futuros clientes no les gustará esperar a la hora de comprar, el porcentaje de conversión de una web baja muchisimo si la web es lenta. ¿Por qué? Por que en esta era de la información, la velocidad lo es todo, a nadie le gusta esperar… cuanto más rápido, más eficaz será el proceso y tendrás usuarios felices.
Desde este artículo trataremos 8 consejos para aumentar la velocidad de tu sitio, ponlas en práctica y estamos seguros que tu sitio literalmente levantará vuelo 😉
1. Compresión del código de los archivos estáticos
Los archivos de estilos css, javascripts js y los clásicos html usan mucho espacio en blanco y saltos de línea entre cada etiqueta y bloques de código. Es algo necesario a la hora de hacer retoques y cambios pues ayuda a los desarrolladores a no enredarse al momento de editarlos. Sin embargo estos bloques de espacio en blanco reducen el tiempo de carga. Lo ideal es hacer aplicarles lo que en inglés se conoce como minify. Es decir, comprimir los espacios y saltos de línea al máximo para que así el fichero pese menos y cargue más rápido.
Hay varias alternativas para hacer esto:
YuiCompressor
JSCompress
CSSCompress
2. Optimizar las imágenes usando el formato correcto
Al usar el formato correcto para cada tipo de imágen, podrás optimizar el peso de los ficheros sin perder calidad de imágen. Por ejemplo, a menos que necesites usar transparencias sería totalmente innecesario usar imágenes PNG, en ese caso, puedes usar JPG, que te ofrecerá optimizaciones más orientadas a la fotografía y tamaños mucho menores que PNG.
Para ver qué formatos usar en cada caso recomendamos seguir estos enlaces:
JPEG 101: A Crash Course Guide on JPEG
Web Designer’s Guide to PNG Image Format
The Comprehensive Guide to Saving Images for the Web
3. Cargar Javascripts al final del documento
A nivel de rendimiento, es mucho mejor cargar los javascripts en el final de un documento que en su comienzo. Permite al navegador renderizar todo el contenido anterior antes de comenzar con javascript. Esto da una mayor sensación de rapidez ya que en la manera en que trabaja Javascript es justamente bloqueando todo el contenido posterior, hasta que el mismo ha terminado de cargarse. De esta manera, estaremos mostrando el contenido de nuestra web primero que la carga del javascript, evitando bloqueos en el despacho de la información.
En lo posible haz referencia a los archivos javascript justo antes del cierre con la etiqueta </body>.
Más información: Defer loading of Javascript
4. Evitar redimensiones de imágenes en HTML
Si una imágen originalmente mide 1180 x 800 píxeles, pero necesitas que se vea en 300×180, antes de redimensionar usando HTML, deberías siempre reducir el tamaño real de la imágen en un editor de imágenes como Photoshop, Gimp, etc. Intenta siempre evitar el uso de atributos HTML para redimensionar, ejemplo: <img width=»300″ height=»180″ src=»imagen.jpg» />. Esto causará obviamente que la imágen aunque se muestre pequeña, se cargue desde el original grande.
5. Compresión de archivos con Gzip
Gzip y Deflate son esos módulos maravillosos que te permiten reducir el número de bytes que se envían a la hora de despachar nuestros archivos. La mayoría de los navegadores modernos soportan información comprimida en HTML, CSS y archivos Javascript. Esto permite reducir significativamente el peso final de tu página web, despachándola muchísimo más rápido.
Más información:
Gzip
Mod_Deflate
How to optimize your site with Gzip compression
Para ver si la compresión gzip está funcionando lo mejor es visitar Gzip Test y dejar que esta herramienta nos informe si tenemos Gzip activado en nuestra web o no.
6. Montaje de archivos estáticos en CDN
La sigla CDN es desde hace muchos años un referente en cuanto a optimización web, y se trata nada más y nada menos que de una red de distribución de contenido/datos (Content delivery network). Un servicio de CDN reduce los tiempos de respuesta para los diferentes usuarios alrededor del mundo ya que detecta la procedencia de la visita y despacha tus archivos desde el enlace más cercano. Este servicio está pensando para contenidos estáticos como archivos css, jpg, gif, js, html, zip, mp3, mpeg, swf, etc. Nuestra recomendación es que montes todo bajo un subdominio o dominio estático: por ejemplo static.tusitio.com o bien static3393.com.
Por una relación precio y calidad recomendamos MaxCDN
7. Separa recursos en diferentes servidores
Casi todas las webs de hoy en día se basan en PHP-MySQL, aunque esto poco a poco está cambiando, estos dos gigantes aún siguen siendo los reyes dominantes en cuanto a tecnologías usadas para desarrollo web.
Generalmente una web con un tráfico medio ya cuenta con su propio Cloud Hosting, VPS o Servidor Dedicado, lo que le permite una independencia de recursos de cualquier otra web. Pero llega un momento en que el tráfico sube o que la programación cambia, y las consultas MySQL toman más tiempo que antes, la respuesta de la web se vuelve más lenta, y por lógica, todo decae en cuanto a velocidad se refiere. Nuestro consejo es que si ya tienes optimizada tu BD a nivel de servicio y depurada a nivel de código, lo único que puedes hacer para obtener un mejor rendimiento es separar los recursos. Es decir, contrata un nuevo servidor para MySQL, conectándolo a través de una red privada obtendrás grandes velocidades de tránsito, ahorrarás la exposición de los datos pasando por Internet, y por sobre todo, dejarás el servidor primario únicamente dedicado para manejar PHP.
Por otro lado, si no puedes costearte un servicio de CDN como el que mencionamos en el punto 6, también puedes hacer lo mismo para despachar los archivos estáticos. En este caso, mueve todo el contenido de static.tusitio.com hacia un nuevo server, instala un servidor performante como Nginx o Lighttpd y verás la diferencia =)
8. Elige bien a tu proveedor de Hosting
Un punto que muchas veces la gente olvida, es que un gran porcentaje del rendimiento de tu sitio depende también de tu proveedor.
¿Están tus servidores bien optimizados para rendir al máximo? ¿Sus líneas son estables o existen pérdidas de conectividad? Nuestro consejo: elige bien a tu proveedor hosting, el tiempo de respuesta de las líneas, tránsito y la configuración del servidor inciden tremendamente en la velocidad de carga de tu web. Por lo tanto, este es otro punto que no debes tomar a la ligera.
Más información: ¿Buscas Hosting? 7 consejos para encontrar un buen proveedor
¿Tienes alguna duda o comentario sobre este tema? Envíanos tu opinión desde el formulario de abajo.