Blog de Imagen y Web para empresas

Tfno: 629 333 654

Sígueme en Facebook | Google+ | Linkedin

Cómo aumentar la velocidad de carga de una web (I)

Autor: admin. Publicado el 13 Mayo, 2016. Categorías: Diseño web

Como aumentar la velocidad de carga de una web

Si tienes un sitio web para tu negocio o proyecto, más pronto que tarde llegarás a preocuparte por aumentar la velocidad de carga de tus páginas web, especialmente si notas que suele tardar más de 2 segundos en mostrar completamente una página. Todos nos hemos topado alguna vez con web lentas que nos hacían golpear impacientemente con los dedos sobre la mesa mientras esperábamos a ver el contenido. ¿Y qué hicimos la mayoría de las veces? Abandonarla y buscar la información en otro lado. Así, con nuestra propia experiencia como usuarios podemos concluir que una web lenta hace perder público y clientes potenciales.

La cosa no acaba ahí. Google y otros buscadores puntúan la velocidad de un sitio web en los cálculos de su algoritmo de posicionamiento. Una velocidad lenta te restará valor y te relegará unos puestos más abajo. Dicho de otro modo, la velocidad de tu web afecta a tu estrategia de posicionamiento en buscadores, a tu estrategia SEO.

Hace poco rediseñé mi web, mejoré el código y realicé una serie de cambios para optimizar la velocidad de carga, logrando que cualquier página tarde una media de 0,5 segundos en cargar. Te cuento qué hice para que apliques mis conocimientos adquiridos y mejorar la velocidad de carga de tu sitio web.

Lo primero es medir la velocidad de tu sitio web actual.

Si queremos aumentar la velocidad de un sitio web, debemos saber de donde partimos. Podemos medir la velocidad de tus páginas web con las herramientas nativas para desarrolladores que ofrecen los navegadores o con el complemento Firebug, aunque pueden resultar engorrosas o poco intuitivas para los usuarios medios.

Medir la velocidad de tu web con Pingdom Website Speed Test

Existen herramientas online gratuitas que te ofrecen información sobre la velocidad de carga de tu sitio web de una forma fácilmente comprensible. Me gusta mucho Pingdom Website Speed Test. Introduces el nombre de tu dominio web o el de una página concreta en el campo de formulario, pulsas “Test Now” y analiza dicha página. En pocos segundos verás una tabla muy gráfica con los elementos descargados y el tiempo de carga de cada uno de ellos. Incluso muestra cuando empezaron a descargarse dentro de todo el proceso. Muy útil cuando necesitas ver cuántas llamadas hace una página a elementos adjuntos (archivos CSS, imágenes, etc.), analizar qué archivo puede estar ralentizando tu web y la respuesta del servidor.

Eso sí, la velocidad de un sitio web es variable y es particularmente sensible a los cambios cuando estamos alojados en un hosting compartido. Además, Pingdom bombardea con llamadas a tu servidor para testear la página solicitada y si abusas, puede agotar temporalmente los recursos de tu servidor, haciendo que después procese las peticiones muy lentamente durante muchos minutos, incluso horas. Úsalo con moderación.

La valoración de velocidad y usabilidad de Google PageSpeed Insights

Otra herramienta gratuita interesante, que además sugiere mejoras, es Google PageSpeed Insights. No da datos en milisegundos de cada elemento ni la información tan gráfica de Pingdom, pero puntúa entre una escala de 0 a 100 la velocidad de tu página web y la usabilidad en móvil y en ordenador y recomienda después opciones útiles como minificar los archivos CSS y Javascript, optimizar las imágenes, etc.. Además, facilitarán enlaces si necesitas más información.

PageSpeed también bombardea al servidor para testear tu web. Conviene no abusar. Debes saber que guarda los datos registrados en caché durante 30 segundos al menos. Si haces cambios en poco tiempo y vuelves a testear, seguramente veas la misma información anterior.

Cómo aumentar la velocidad de un sitio web

Conociendo ya la velocidad de nuestro sitio y teniendo pistas que ayudarán reducir el peso de tus páginas web, es el momento de pasar a la acción y optimizar los recursos que nos ayudarán a mejorar la velocidad de carga de cada página. Y lo primero, es lo primero.

Alojamiento web o Hosting: elemento clave en la optimización de la velocidad de una web

Tu servidor web es un elemento determinante para mejorar la velocidad de carga de tus páginas. Cuanto mejor sea y más optimizado esté hacia el rendimiento, más verás aumentar la velocidad de tu web. Pero ojo, mejor no quiere decir más caro. En estos casos hay veces que no se cumple. Eso sí, los más baratos casi seguro que no mejorarán la velocidad de carga de una página web.

No quiero dar nombres, pero hasta abril de 2016 tuve mi web alojada en un servidor mundialmente conocido y no me fue bien, especialmente con la recepción de correos electrónicos. Cuando tienen tantos clientes satisfechos en todo el mundo, será porque hacen bien su trabajo, pero conmigo no funcionó.

A principios de abril me pasé a Webempresa. Y no soy afiliado para hacerles publicidad, al menos de momento, pero los problemas que tenía con los otros, con ellos ya no los tengo y ahora me llegan todos los e-mails.

Curiosamente, Linkasoft, una empresa malagueña más bien pequeñita, daba mejores resultados en velocidad con una web que trabajé en sus servidores que la mía con la empresa mundialmente conocida. Y encima con unos precios ligeramente inferiores en sus planes de hosting. Eso sí, no llegan a la optimización de Webempresa.

Mi web en el anterior servidor tardaba una media de 1,5 segundos en cargar y pocas páginas solían quedar por debajo de 1 segundo. Y ya estaba en gran parte optimizada y usando la caché. La web alojada en los servidores de Linkasoft, sin optimizar y sin plugins de caché, tardaba 2 segundos. Y mi tema era más ligero.

Un factor problemático para la velocidad de carga de mi web en mi anterior servidor estaba relacionado con una configuración escasa de RAM que podía verse superada tras dos o tres test o alguna opción de mantenimiento como crear una nueva caché. Eso sí, ancho de banda y almacenamiento ofrecían una barbaridad (esto fue lo que me engatusó junto a una fuerte oferta de última hora). En mi hosting actual, el almacenamiento es justito, porque se han concentrado en el rendimiento. Y eso, ahora, me gusta más. Antes valoré más el almacenamiento y no me sirvió de nada.

En todo caso, recomiendo que no te quedes nunca en la publicidad y lo impresionante del tamaño de una empresa de hosting. Busca, compara y lee opiniones antes de elegir cualquier empresa de alojamiento. Por último, valora antes configuraciones que se centran en el rendimiento, lo que más te ayudará a mejorar la velocidad de tu web. Y si no aciertas, siempre puedes cambiar.

Elige plantillas, themes o maquetaciones optimizadas

Si usas WordPress o cualquier otro CMS, estarás utilizando un tema comprado, gratuito o hecho por ti. Sea como sea, comprueba la optimización del theme antes de comprarlo o descargarlo. Puedes testearlo con Pingdom o PageSpeed Insights.

Analiza cuantas llamadas hace a recursos externos: hojas de estilo (CSS), javascript, imágenes, tipografías, etc.. Mientras más llamadas haga, más lenta irá la carga de la web. También dependerá del tamaño de cada archivo. Diez fotos pequeñas y optimizadas pesarán menos que una grande con poca compresión jpg.

Fíjate también el tamaño total de la descarga que muestra Pingdom. Creo poco aconsejable sobrepasar 300 o 400 kB en un página normal. No es deseable, pero es posible que la página de inicio supere esa cifra, porque muchas demos ofrecen imágenes grandes y varios campos distintos en el inicio para impresionarnos. En todo caso, en tu web de producción es recomendable no superar 300 o 400 kB del peso total de cada página web si quieres tener una buena optimización de la velocidad de carga.

Puedes pensar en reducir al máximo el número de archivos a cargar, por ejemplo, reducir la cantidad de imágenes, pero valora si tienes que ofrecer un compromiso o no entre estética y carga rápida. Podemos reducir el peso de algunos archivos y no cargarnos totalmente la estética.

Nota: cómo optimizar imágenes lo veremos en la segunda parte de este artículo, en el próximo post.

Para optimizar tu plantilla puedes seguir algunos de estos pasos:

  1. Optimizar el código si la plantilla la has creado tú, eliminando capas innecesarias, etc.. Si usas frameworks como Bootstrap, valora si realmente vas a utilizar todo lo que ofrece o solo algunas partes. En la web de Bootstrap encontrarás opciones para seleccionar aquellos elementos que vas a utilizar, personalizarlos y descargarlos.
  2. Agrupar en lo posible los archivos de las CSS y los javascript. Tener varios nos puede resultar más cómodo y organizado como diseñadores o programadores, pero es más efectivo agruparlos en un archivo en la fase de producción. Trabajar con SASS o LESS te hará la vida más fácil con las CSS con sus opciones de importación de los parciales a un archivo final.
  3. Minificar las CSS, los javascript y, si puede ser, el HTML. Si no eres diseñador o programador y no sabes minificar tus propios archivos, algunos plugins para CMS, como W3 Total Cache, lo hacen y además los agrupan. Para las CSS, con SASS y LESS podrás exportar el archivo final comprimido (o minificado) en un solo archivo.
  4. Reducir el peso de las imágenes y los elementos multimedia. Hablaremos de ello en el siguiente post: Cómo aumentar la velocidad de carga de una web (II)

Los plugins son geniales, pero, ¡cuidado!

Lo mejor es comparar entre varios que cumplan la funcionalidad que buscas. Lee comentarios y valoraciones de otros usuarios. Afortunadamente, WordPress, Joomla y demás tienen buenos foros. Además, es fácil encontrar comparativas muy serias, especialmente en inglés. Algunas incluso ofrecen datos sobre su optimización y si suponen o no un carga para la velocidad de tu sitio web.

Es posible hacer un análisis de uso de recursos en nuestro propio sitio con un plugin y es especialmente recomendable en las fases de desarrollo. Cuando deseo comprobar internamente cómo carga mi web y ver qué recursos consume, yo empleo P3 Plugin Profile. Muestra métricas con gráficos y quesitos para comprobar qué plugin gasta más recursos y cuántos y los consumidos por el theme. No abuses mucho si no quieres cansar al servidor web. Y una vez pases la web a producción, desinstálalo.

Lógicamente los plugins nos ofrecen funcionalidades de las que no podemos prescindir. Quizá uno muy rápido no tenga todas las que necesitamos, pero sí las ofrece uno un pelín más lento. Yo optaría por la funcionalidad, pero el más funcional y eficiente posible.

Como ejemplo de sacrificio de velocidad por funcionalidad me referiré a los plugins de seguridad. Wordfence, iThemes Security o All In One WP Security & Firewall (mi favorito últimamente) lastran en mayor o menor medida la velocidad del sitio web, sin embargo, es mejor tener funcionando alguno de ellos que ninguno. También me resulta difícil prescindir de Yoast SEO, aunque P3 Plugin Profile me diga que es que más consume y engaña a las métricas.

En el siguiente post hablaré sobre algunos plugins que te ayudarán a optimizar la velocidad de tu sitio web.

Un pequeño resumen de lo visto hasta ahora

Queda más por explicar, aunque no quiero alargar mucho este artículo y dejaré el resto para el siguiente post.

En todo lo que llevamos visto, podemos concretar en una idea lo qué debemos hacer para mejorar la velocidad de una web: reducir el peso a cargar en cada página. Existen diferentes caminos, como revisar y analizar la carga de código, reducir el número y el peso de archivos externos (hojas de estilo, scripts, imágenes, etc.), o controlar el consumo de recursos de los plugins que utilizamos y buscar los más eficientes. Pero ante todo, lo que nos dará mayor velocidad y fiabilidad, es la elección de un hosting bien optimizado.

Más pasos y herramientas en el próximo post

Y hasta aquí esta primera parte sobre cómo aumentar la velocidad de carga de tu web. Continuaré en el próximo post, donde citaré los plugins que me han ayudado a optimizar la velocidad de mi sitio web y algún otro que no cumplía con lo prometido. Además, algunas recomendaciones sobre las consultas a bases de datos. También citaré algunas herramientas muy útiles para reducir fácilmente el peso de las imágenes sin tener que abrir Photoshop ni ningún otro editor de imágenes. Os haré una lista de las tipografías que no consumirán recursos del servidor web. Y por último, otras técnicas que aún no he probado.

Hasta el próximo post.

<< Volver al blog


Deja un comentario

Tu dirección de correo electrónico no será publicada.