Optimiza la velocidad de tu sitio web

La velocidad de carga de un sitio web es uno de los factores importantes cuando hablamos del posicionamiento web. Vamos a ver puntos importantes que debemos tener en cuenta para optimizar nuestro sitio en lo que respecta a su velocidad de carga:

Reducir las peticiones HTTP. Cuando solicitamos ver una página web nuestro explorador debe descargar del servidor todos los ficheros que componen la página solicitada. Este tiempo se estima que es el 80% del total de carga de la página, por lo tanto, desde el punto de vista de la optimización este punto es el más importante. A mayor número de ficheros más tiempo de carga necesitará nuestra página, nuestro objetivo es pues el de reducir en lo posible el número de ficheros que componen nuestra página. Para ello podemos incluir todas nuestras css en un único fichero, sí, será un fichero más grande, pero una vez cacheado es mucho más rápido 1 fichero grande, 1 petición http, que 5 fichero pequeños, que serian 5 peticiones HTTP. Con los ficheros de imágenes podemos hacer algo parecido, que se conoce con el nombre de sprites, lo explicamos en el siguiente punto.
Imágenes en las hojas de estilo. Siempre que sea posible incluir la imagen en la hoja de estilos, así estará cacheada a la vez que que la hoja de estilos y en el código HTML evitaremos la solicitud HTTP de la imagen.
Sprites CSS. La ‘idea’ de los sprites es, como hemos dicho, semejante a la anterior, unir en una sóla imagen a varias-muchas imágenes con el fin de reducir el número de peticiones HTTP que se realizan al servidor. Luego para mostrar la imagen que deseamos utilizaremos las propiedades CSS ‘background-image’ y ‘background-position’ para mostrar únicamente la porción de imagen que deseemos.
CND, red de distribución de contenidos. Este punto no es algo que este al alcanze de muchos usuarios, pero lo comentamos igualmente para que nuestros lectores tengan conocimiento de ello. La idea de las redes CND es tener nuestro sitio web duplicado en varios servidores, de forma que cuando se solicita una página web es el servidor más cercano al cliente el que responde, reduciendo así el tiempo de envío. El problema de este sistema es que hay que contratarlo y es barato a día de hoy.
Caché. Añadir o cambiar la clausula ‘Expiresdefault’, en caso de un servidor Apache, a un tiempo largo para aumentar el número de objetos que guardará en caché nuestro servidor. Como contrapartida para cualquier cambio, de una imagen por ejemplo, deberemos cambiar el nombre del fichero para poder ver los cambios que hemos realizado en nuestra página en el momento, sino seguiremos viendo la antigua imagen por estar aún en la caché del servidor.
Compresión de los datos a enviar. Esta técnica consiste en la compresión de los datos a enviar cuando se recibe una petición HTTP, el método de compresión más habitual es Gzip, el cual reduce el tamaño de los datos a enviar alrededor de un 30%. Esta técnica presenta un problema: no todos los clientes HTTP y proxis soportan la comprensión, lo cual plantea problemas en la visualización de nuestra página web en esos sistemas.
Carga de hoja de estilos y scripts. Cargar las hojas de estilos en la cabecera y los scripts a la parte inferior de la página siempre que sea posible.
Expresiones en CSS. No usar en las css expresiones, javascript o cualquier otra, que necesiten acceder al DOM para modificar dinamicamente los estilos. Ademas de estar en desuso implica una perdida importante en el rendimiento de carga de nuestra web.
Minimizar el tamaño de imágenes, css y scripts. Evitaremos condigo o imágenes duplicados y optimizaremos nuestros ficheros para que ocupen el mínimo espacio posible.
CSS y Javascripts. Colocar nuestros ficheros CSS y Javascripts en otro lugar diferente a nuestra sitio web, así conseguimos descargas paralelas de varios componentes de nuestra web.
Link vs @import. Es más eficiente ‘Link’ que ‘@import’ así que debemos usar la clausula link siempre que podamos a @import.
Filtros. Evitar el uso de los filtros de Internet Explorer.
Tamaño de imágenes. No dimensionar las imagenes vía HTML, el redimensionado de las imágenes consume recursos y provoca retardos en la carga de la página.
Iframes. Los iframes nos incluyen una página web en el interior de otra. No usaremoslos iframes para evitar la demora que provoca esta inserción de una página en otra.