Desde que Google anuncio que la velocidad de carga de un sitio web iba a influir positivamente/ negativamente en el posicionamiento web, muchos usuarios nos han ido preguntando cómo pueden optimizar el rendimiento de sus sitios web para optimizar este nuevo punto.
En este artículo comentaremos varias opciones y trucos para mejorar la carga de nuestro sitio web mediante el popular archivo .htaccess y sin él.
Leverage Cache Browser
Empezamos este post con la activación de Leverage Cache Browser. ¿Que quiere decir? Pues bien, Leverage Chache Browser es una pequeña función para Apache que permitirá cachear todos los archivos que especifiquemos de un sitio web en el navegador del usuario. De esta forma, la primera vez que un usuario accede al sitio se descargan desde nuestro servidor, almacenándose en el disco local del usuario, es entonces, cuando el usuario vuelve a entrar en la página, y todas las peticiones a imágenes, CSS, JS… que antes había descargado, ahora las ejecutará desde su disco, de esta forma optimizamos la carga y reducimos las peticiones que recibe el servidor, ahorrando consigo recursos que pueden servirnos para un pico de tráfico, por ejemplo.
Antes de descubrir el código que nos proporciona esta función, tenemos que revisar si nuestro alojamiento o servidor dedicado tiene activado el modulo (mod_expires), si no lo tuviera debemos pedir a nuestro alojamiento que nos lo instalen, si es posible.
Una vez lo tengamos instalado y configurado debidamente por nuestro proveedor de alojamiento, procedemos a abrir mediante un cliente FTP el archivo oculto .htaccess que suelen tener los servidores. En el caso de no tenerlo, deberíamos crear uno manualmente y subirlo a la carpeta raíz de nuestro servidor (/www).
En el siguiente paso, abrimos con el bloc de notas o cualquier editor de textos dicho archivo y escribimos el siguiente código.
Una vez tengamos este código pegado en nuestro archivo .htaccess, procedemos a subirlo de nuevo y verificamos si nuestro sitio web funciona correctamente o aparece el cásico error 500 (Internal Server Error), si éste aparece quiere decir que no está activado el modulo o que hemos dejado un espacio al final del documento o por lo contrario un carácter inválido.
Decir también que podemos añadir más tipos de archivos en los apartados que deseemos.
Optimización de imágenes
Este es un punto importante de cara a mejorar la velocidad. Para ello podemos utilizar herramientas en línea que realizan estas funciones o por lo contrario, podemos utilizar programas de escritorio, tales como GIMP o Photoshop. Si utilizamos la segunda medida, podemos hacerlo de varias formas, o reduciendo la calidad de la misma, eliminando datos, reduciendo la paleta de colores, cambiar el formato, entre otras posibilidades.
Otro punto a destacar de este tema es que nuestras imágenes no deberían pesar más de 50 KB, si superan este tamaño, la web se vuelve bastante lenta dado que incrementa el tiempo de descarga por el número de imágenes que tengamos.
Personalmente utilizo el sistema de Gtmetrix el cual te proporciona una copia de la imagen de tu sitio web pero ya optimizada, de esta forma ahorro bastante tiempo en este punto. Para utilizar el servicio, sólo tenemos que escribir la dirección de nuestro sitio web, esperar a que éste analice y buscar en PageSpeed (Optimize Images), allí aparecerán en modo de lista todas nuestras imágenes que es necesario que optimicemos, las descargamos y las resubimos a nuestro directorio donde se alojen.
Utilización de un CDN (Content Delivering Network)
Si nuestro sitio web utiliza muchas imágenes, una de las mejores mejoras que podéis realizar en vuestros sitios web es insertar un CDN, básicamente lo que hará este servicio es gestionar las imágenes desde otro servidor, de esta forma las imágenes se descargan en paralelo aumentando consigo una mejoría en la navegación del usuario.
Existen servicios populares para este tipo de servicios, como puede ser el S3 de Amazon, el cual recomendamos por su excelente sistema y soporte.
Minimizar las DNS
En este otro punto, encontramos la posibilidad de mejorar el rendimiento en un 25% de nuestro sitio web. Esto se consigue a que gracias a la eliminación de DNS externas, como pueden ser scripts a servicios externos (Barras, analitycs, Adsense…), de esta forma cuando el usuario intenta carga el sitio web, no tendrá que esperarse a que cargue la web, el servicio, el otro servicio, y decenas de scripts más.
Es evidente, que hay DNS que no es necesariamente estricto eliminar, como por ejemplo si utilizamos publicidad de una plataforma externa (Adsense…), pero si es necesario como por ejemplo si utilizamos un script que sólo utilizamos en la área de administración, o en una página específica, y está cargándose en todo el sitio web, por añadir un ejemplo.
Activar compresión GZIP/Deflate
Este sí es un apartado muy importante de cara al rendimiento de nuestro servidor y el consumo, además de la velocidad de carga. La utilización de la tecnología Gzip nos permite comprimir los archivos, restando de esta forma paquetes http y consumiendo mucha menos transferencia.
Para activar esta tecnología, podemos hacerlo mediante el archivo htaccess, para ello abrimos el documento y escribimos el siguiente código:
¿Qué significa este código?
Este código: AddOutputFilterByType DEFLATE text/xml significa que los documentos de texto y xml van a ser comprimidos antes de enviarlos por la red y que el usuario los reciba, utiliza la tecnología Deflate que es una mejora del GZIP que actualmente el 90% de los navegadores lo soporta (IE, Chrome, Safari, Opera, Mozilla…).
Por tanto, una gran mejora para nuestro sitio web que seguramente nuestros usuario notarán. Por último, también hay que decir que puede aumentar un poquito el consumo de recursos, pero lo más probable es que no lo notemos.
Reducción de tamaño en CSS, JS y HTML
Para reducir el tamaño de dichos archivos, lo mejor que podemos hacer es eliminar todos los comentarios que tengan dichos documentos o reducir al máximo las expresiones, de esta forma ahorraremos unas decenas de KB los cuales nos ayudarán a reducir la carga.
Podéis utilizar servicios en línea (MinifyCSS | Minify JS | HTML Minifier) para realizar estas operaciones o manualmente con un editor de textos normal y corriente.
Utilizar el Footer
Utilizar el footer para aumentar el rendimiento de un sitio web, es una de las mejores prácticas que podemos hacer, ya que lo primero que cargara será nuestro sitio web, de esta forma el usuario vera el contenido y mientras lee se cargaran el resto de archivos del pie de página.
Normalmente, los archivos que se suelen colocar antes de la etiqueta