Algunas maneras de optimizar un sitio web

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 son archivos JS, no obstante, también hay que decir que si utilizamos sistemas de medición como Google Analitycs, estos no deberí­amos tocarlos del Header, dado que si lo hacemos podemos trastocar la medición.
Es decir, si el usuario entra en el sitio web lo primero que se ejecuta es el header, pero si el usuario carga y cierra la web de golpe sin haberse cargado completamente, todos las mediciones que se realicen en el footer no se activaran ya que no se ha ejecutado el fichero js, por lo que perderemos datos relevantes (visitas, pág., vistas, bounce rating…).

No utilizar @import para cargar CSS

Cuando utilizamos @Import en nuestro header para cargar las hojas de estilo, lo único que estamos haciendo es ralentizar el proceso de carga de nuestro sitio web, ya que el navegador no descarga dichos archivos en paralelo, sino que lo hace de uno en uno. Es por ello, que debemos colocar las direcciones estáticas de nuestros archivos CSS de esta forma:.

Sistema de Cacheo

Antes hablábamos de un sistema de cache para navegadores (Leverage Cache Browser), pero para mejorar aun más la carga, podemos crearnos un sistema de cacheo en el que todos nuestros documentos dinámicos (php) se conviertan en estáticos (html). Si utilizamos un blog creado con la plataforma Wordpress, es bastante sencillo.
Podemos utilizar plugins ya prefabricados para este uso, como puede ser WP Super Cache o W3 Total Cache. Su inserción es sencilla, instalamos y activamos las diferentes opciones que nos recomienda en plugin y listo, en un par de minutos estaremos disfrutando de las ventajas de un sistema de cacheo.

Utilizar las etiquetas width y height para mejorar el renderizado

Por otro lado tenemos que mejorar la forma de utilizar width y height originales en las imágenes. ¿Por qué utilizarlo? Pues muy fácil, si utilizamos estas etiquetas, evitamos que en el proceso de renderizado del navegador tenga que redimensionar la imagen, de esta forma mejoramos el renderizado y tardará menos en cargar.
Ejemplo: si una imagen tiene un tamaño de 200px de ancho, y la redimensionamos a 250px, lo que estamos haciendo es que el navegador renderiza a 200px y luego a 250, por tanto son dos peticiones que podemos reducir a una.

Utilizar IP Geolocalizada

Si nuestro sitio web va dirigido a un público especifico, es decir, a un idioma en concreto, debemos tener la IP localizada en el paí­s que queremos posicionar, de esta forma, además de posicionar mejor en los resultados de dicho paí­s, mejoraremos la velocidad de carga ya que el servidor se encuentra en el mismo paí­s que el visitante.

Conclusiones

Sacando conclusiones, con estos sencillos onde trucos aumentaremos el rendimiento de nuestro sitio web, así­ nuestros usuarios se sentirán más cómodos para leer y se reducirá nuestro Bounce rating (usuarios que se quedan y usuarios que se van), además de mejorar nuestro posicionamiento web notablemente.