La velocidad a la hora de cargar tu Sitio Web es un punto importante a tener en cuenta hoy día, desde el momento en que Google decidió incluir la velocidad de carga como un parámetro a la hora de decidir la posición en las páginas de resultados de búsqueda. Además de eso, una web que cargue rápidamente ayudará a que los visitantes permanezcan más tiempo en el sitio y a que vuelvan de nuevo.
Por lo tanto, si todavía no lo has hecho quizás deberías investigar un poco sobre lo rápido que se carga tu sitio web y qué puedes hacer para conseguir acelerarlo un poco más.
Comprueba la velocidad de velocidad de tu sitio web
El primer paso que puedes realizar es comprobar cómo de rápido o lento es tu sitio web a la hora de cargar. Para ello, es recomendable acudir a las Webmaster Tools de Google, una herramienta que te ofrecerá mucha información sobre tu web en Internet y también sobre la velocidad de carga. Otros sitios interesantes donde puedes comprobarlo rápidamente son Pingdom y GTmetrix.
Optimiza el código HTML y Scripts
Un código HTML optimizado te ayudará a que la web se cargue más rápidamente. Procura que las etiquetas estén bien colocadas, que los divs estén correctamente anidados y que los parámetros de las tags están correctamente indicados. Por ejemplo, es relativamente habitual no incluir los parámetros height y width en etiquetas de imagen, sin embargo es información que ayuda al navegador a dibujar la página sin tener que realizar cálculos extra. Elimina del HTML todo aquello que no se utilice y asegúrate de que no cargas scripts que no estás utilizando en realidad, tanto embebidos con el código HTML como desde archivos externos.
Evita scripts duplicados
Cada vez que cargas un script en JavaScript o cualquier otro, éste tiene que descargarse y ejecutarse. Fíjate bien porque no es tan extraño que llegues a encontrar que has duplicado alguno de estos scripts, por ejemplo cuando decidiste cambiarlo de sitio y olvidaste eliminarlo del lugar original o quizás lo volviste a incluir en alguna página olvidando que ya lo hiciste antes. Muchas veces ocurre cuando pegas widgets de alguna red social como Facebook que quieres que aparezca en dos lugares diferentes de alguna página, en estos casos a veces cargas doblemente algún script.
Comprime los scripts JavaScript
Seguramente tengas algún que otro script JavaScript que se carga desde un archivo externo. Esta es una práctica bastante habitual, sin embargo no es lo mismo cargar una docena de archivos externos cada uno con un script que compilarlos todos en un único archivo. Si es posible comprime todos los códigos JavaScript en pocos archivos externos o incluso en uno solo.
Carga los scripts JavaScript al final de la página
Algunos scripts deben ejecutarse al principio de cada página o en lugares concretos para que funcionen correctamente, sin embargo otros pueden cargarse justo al final, por ejemplo los relacionados con la gestión de estadísticas de visitas a la página. Envía al final de la página los scripts que puedas, justo antes del código </body>.
No abuses de las tablas
Los más puristas te dirán que utilizar tablas en HTML es algo demasiado “web 1.0”, pero lo cierto es que son elementos muy útiles y, lo más importante, muy compatibles con cualquier navegador antiguo o moderno. Además de ahorrarte mucho trabajo pueden suponer un lastre si abusas de ellas, sobre todo si recurres a tablas anidadas con números de columnas o filas irregulares.
Reduce o elimina Animaciones y Flash
Unas animaciones en una página ayudan a darle un aspecto dinámico, sin embargo no es bueno abusar de ello. Cada bloque de Flash, gifs animados o pequeños widgets en javascript o java van a requerir más información que descargar para visualizar la página y más tiempo de proceso para dibujarla en el navegador. Si en lugar de reducir estos elementos al mínimos los eliminas definitivamente, mejor aún. De hecho no te costará encontrar sitios webs bastante atractivos visualmente que solo incluyen texto y unas pocas imágenes estáticas.
Reduce el tamaño de los archivos CSS
Procura que los archivos CSS sean lo más pequeño posibles, si tienes varios archivos CSS intenta compilarlos en uno solo y elimina aquellas líneas que no sean imprescindibles o que ya no utilices después de haber realizado cambios en el estilo de tu web.
Optimiza las imágenes
La diferencia de tamaño entre una imagen .jpg y otra .png puede ser abismal. Si no requieres una calidad en las imágenes excepcionalmente alta, intenta reconvertir los archivos de imagen a .jpg o .gif. Utilizar uno u otro dependerá de la imagen en sí, utiliza un programa de edición de imágenes y comprueba con qué extensión obtienes una imagen más pequeña. Los tamaños de las imágenes deben ajustarse a su uso real, por ejemplo, no tiene sentido cargar una imagen a tamaño 800×600 si luego la vas a visualizar en la página a un tamaño mucho menor.
Comprime tu sitio con gzip
Comprimir tu sitio web con gzip trae algunas ventajas, reduce la cantidad de información que tiene que viajar por la Red y reduces el ancho de banda que utilizas. En general puedes pensar que va a suponer que tu web se carga más rápido, que es lo que nos interesa, y en general será así, pero también debes tener en cuenta que si el servidor donde has hospedado tu web no es muy potente quizás consigas el efecto contrario, ya que comprimir páginas supone más trabajo para el procesador. En cualquier caso, puedes probar para salir de dudas, aquí tienes un pequeño tutorial sobre cómo hacerlo. Si utilizas un blog WordPress puedes utilizar este plugin para comprimir con gzip tu blog. Si además tienes curiosidad puedes visitar este sitio para saber si las webs visitas utilizan compresión por gzip.
Si tienes un blog, instala un caché de páginas
Hoy día es bastante habitual que muchos se decanten por el uso de un blog en WordPress u otro CMS similar para crear sitios webs fácil y rápidamente. Si este es tu caso prueba a instalar un plugin de caché. Este tipo de plugins ahorran trabajo al procesador y al motor MySQL, manteniendo una copia en HTML simple de cada una de las páginas del blog sin tener que trabajar con los registros de la base de datos.
Añade un tiempo de expiración para archivos de imágenes y CSS
Añadir un tiempo de expiración para algunos tipos de archivos como imágenes y CSS tiene como ventaja que un navegador almacenará en caché esos archivos localmente, evitando que vuelvan a recargarse desde el servidor cada vez que visites la página. Esto puede suponer una ventaja normalmente, pero no todos los servicios de hosting tienen activada esta opción. Para activarla, tendrías que modificar el archivo .htaccess y añadir el código que puedes ver en ésta página.
Utiliza CSS Sprites para las imágenes
CSS Sprites es una técnica relativamente nueva y no muy generalizada que trata de disminuir el tiempo de carga de las imágenes. Normalmente se utiliza aplicada a las imágenes que se cargan en casi todas las páginas de tu sitio web, por ejemplo el logo, pequeños iconos representativos de redes sociales y símbolos varios. Cada una de estas pequeñas imágenes tienen poco tamaño y posiblemente no tardan demasiado en descargarse, pero piensa que cada vez que tu servidor tiene que ir enviando una por una hasta el navegador de un visitante de tu web se tarda un tiempo determinado. Utilizando CSS Sprites, todas esas pequeñas imágenes se reducen a un solo archivo que se envía de golpe de una sola vez, luego el navegador se encarga de volver a separar la imagen grande en otras más pequeñas. Aquí tienes un pequeño ejemplo sobre cómo aplicar CSS Sprites en tu web.
Evita errores 404
Un error 404 no es bueno de cara a los buscadores, ni de cara a los visitantes de tu web, pero además un error ‘No Encontrado’ puede suponer que una página tarde más de la cuenta al cargar debido a peticiones que no llegan a resolverse. Ten en cuenta que no solo se trata de evitar enlaces a páginas que no existen, sino cargar archivos de imágenes, CSS o Scripts que no existen. A veces basta un error a la hora de teclear el nombre dentro del código de tu página para que algo que debiera cargarse no lo esté haciendo y, en ocasiones, no te darás cuenta de ello. Quizás se trate de pequeñas imágenes que pasan desapercibidas dentro del diseño global de la página, scripts que no has notado que no están funcionando o cuyos archivos eliminaste físicamente pero olvidaste actualizar el código.