Índice de contenidos
Contenido
La velocidad de carga de una página web cada vez toma más importancia de cara a los buscadores. Hace tiempo que Google viene avisando con su herramienta Page Speed Insights, que nos permite medir la velocidad de nuestra página web. Pero es en 2020 cuando ha implementado los Informes de experiencia de usuario de Chrome, con datos en tiempo real sobre la velocidad de carga de los usuarios que nos visitan.
Además de la influencia que pueda tener de cara a Google u otros buscadores, es obvio que una web más rápida se traduce en una mejor experiencia para los usuarios y una menor tasa de rebote, algo que también nos beneficiará.
Vamos entonces a ver como podemos mejorar la velocidad de carga web de forma significativa.
Medir la velocidad de carga de nuestra web
Lo primero que debemos hacer es medir la velocidad de nuestra web y ver cuales son los puntos débiles y donde podemos mejorar.
Para medir la velocidad de carga podemos utilizar distintas herramientas. Quizá la más popular es la comentada anteriormente: Page Speed Insights de Google. Sin embargo hay otras también conocidas que nos darán más detalle de lo que podemos mejorar, como Pingdom Tools o WebPageTest.
Aunque podemos utilizar cualquiera de ellas, WebPageTest es la que nos dará información exacta de todos los recursos y tiempo consumidos en la carga de nuestra web.
En la parte superior de WebPageTest, nos da una visión general de los resultados de nuestra web:
Haciendo click en cada una de las letras, nos dirigirá donde está la información detallada. Desde el tiempo de carga del primer Byte, hasta la compresión de imágenes, el uso de un CDN o la caché.
En la imágen (click para ampliar) mostramos un ejemplo de los resultados obtenidos en un primer vistazo rápido.
Observamos, por ejemplo, que entre los javascript que nuestra web utiliza, la flecha inferior derecha para volver arriba tarda algo más de 1 segundo en cargar.
Esto no quiere decir que debamos eliminar todo aquello que consume tiempo de carga, pero nos sirve para localizar todos los puntos críticos y solucionar aquellos que sea posible.
Si viéramos el informe completo, podríamos observar que las fuentes requieren bastante tiempo de carga, o que algunas imágenes podrían optimizarse mejor.
Ahora ya podemos hacernos una idea de cuales son los puntos clave para mejorar la velocidad de nuestra web. La gran mayoría podremos optimizarlos de forma sencilla, como redimensionar y optimizar imágenes, otros requerirán de técnicas más avanzadas, como el uso de plugins para optimizar nuestro código, sistema de caché web, uso de CDN o incluso cambiar a un hosting web más rapido en caso de ser necesario.
Velocidad de carga del hosting web
Lo más importante a la hora de contratar un hosting web, es asegurarnos que trabajan con discos SSD y no discos HDD. La principal diferencia es que los discos HDD utilizan la cabeza lectora para buscar la información en el disco, mientras que los discos SSD funcionan por bloques de memoria y localizan la información de manera electrónica. Al no tener partes móviles acceden a la información de forma más rápida. Si multiplicamos por un gran número de consultas (visitantes a nuestra web), esto se traduce en una carga más rápida de nuestra web con los discos SSD.
Es importante también trabajar con la última versión PHP, aunque prácticamente en cualquier hosting disponen de PHP actualizado.
A parte de que debemos contratar un hosting que trabaje con discos SSD, el resto de servicios es una cuestión de comodidad. Algunos proveedores ofrecen CDN gratis, sistemas de caché, etc., pero todo ello podemos instalarlo por nuestra cuenta. Eso sí, hay que tener muy en cuenta, que el hecho que el hosting nos ofrezca este servicio nos asegura una rápida y fácil configuración y optimización de nuestra web, y el evitar la instalación de algunos plugin.
En cuanto a calidad-precio y servicios que ofrece, nos quedamos sin duda con SiteGround, que nos dará una excelente velocidad de carga, y que además, nos ofrece todos los servicios para mejorar la velocidad web. En estas imágenes se muestran los servicios que ofrecen para mejorar la velocidad de nuestra web (click para ampliar):
En ComoCrearWeb también hemos hecho la prueba y hemos montado la misma web en Siteground y GoDaddy durante 3 semanas en cada uno de ellos para ver si tanta diferencia hay en cuanto a velocidad, con unas 200 visitas diarias aproximadamente.
Realmente las diferencias de velocidad han sido mínimas. La principal diferencia es que en GoDaddy debemos montar todo por nuestra cuenta (SSL, CDN, Caché, etc.), mientras que otras te lo dan todo hecho. Más allá de eso, no ha habido diferencias de velocidad de carga muy significativas:
Los picos que observamos en las 3 semanas de Godaddy, corresponden a 53, 28 y 31 segundos de carga de la web. Estos tiempos de carga, obviamente, no son reales y puede deberse a algun error en la recogida de datos o en alguna visita que haya estado haciendo subir la media de velocidad en esos dias puntuales.
Por tanto, para presupuestos más ajustados, es una opción perfectamente válida, siempre que se configure correctamente. Que no os asusten todos estos blogs que recomiendan siempre los mismos alojamientos, ya que la mayoría de ellos va a comisión.
Ahora que ya tenemos la información de lo realmente importante, es cuestión de cada uno decantarse por un hosting web.
Velocidad de carga de WordPress
La velocidad de carga de nuestra web en WordPress (la gran mayoría de páginas web utilizan WordPress) dependerá en gran parte de dos puntos clave:
- El tema que utilizamos
- Los plugins instalados
Vamos a ver que podemos hacer para optimizar estos puntos clave.
Aspectos que hay que tener en cuenta en los temas respecto a la velocidad de carga
WordPress dispone de infinidad de temas con todo tipo de funciones y estilos que se adaptan al tipo de web que necesitamos, aunque es conveniente analizarlos en profundidad antes de empezar a trabajar con alguno de ellos.
Muchos de estos temas destacan por disponer de plantillas con sliders o diversas funciones para nuestra página principal, aunque en estos casos suelen consumir muchísimos recursos y pueden ralentizar la carga de nuestra web.
Somos partidarios de utilizar temas sencillos e ir instalando funciones a medida que sean requeridas.
Un tema muy recomendable, y que ya hemos mencionado en nuestro tutorial para crear una web, es GeneratePress.
Este es uno de los temas más ligeros y rápidos, pero que a su vez no nos dará problemas en la instalación de plugins para sliders, visores de contenidos o elementos anclados a la cabecera. De hecho, en su versión de pago ya incluye alguna de estas funciones y solo necesitaremos configurarlas desde el panel de GeneratePress.
Este tema nos permite añadir elementos a la cabecera, fusionar con el contenido y todo tipo de funciones que no consumirán muchos más recursos.
Si queremos un slider, bastará con instalar un plugin y añadirlo a la cabecera a través de otro Elemento.
En resumen, si queremos tener una web rápida, es preferible instalar un tema ligero e ir añadiendo funciones y contenido a instalar un tema con más funciones de las necesarias y con un consumo de recursos elevado.
Plugins y la velocidad de carga de nuestra página web
Los plugins son herramientas que facilitan nuestro trabajo, insertan código en nuestra web con una sencilla instalación y nos permiten añadir funciones de todo tipo, algunas ya explicadas en otros artículos, como por ejemplo:
- Sliders
- Enlazar a redes sociales
- Visualización y personalización de contenidos
- Traducciones
- Efectos visuales
- Crear tablas de contenidos
- Instalar un live chat para nuestra web
Hay infinidad de posibilidades, aunque debemos utilizarlos con cautela, ya que en muchos casos consumen una gran cantidad de recursos, sobre todo si no están bien optimizados.
Al principio de este artículo hemos explicado como medir la velocidad de carga de nuestra web. Utilizando los informes de WebPageTest podemos detectar las funciones que ralentizan la carga de nuestra web. Si alguna de estas funciones está asociada a alguno de los plugin instalados, podemos verificarlo y tomar medidas si fuera necesario para optimizar la página.
Antiguamente, se podía utilizar el plugin P3 performance profiler para ver automáticamente cuales eran aquellos que más recursos consumían y ralentizaban, pero a fecha de 2020, el proyecto sigue abandonado y este plugin no funciona correctamente. Por desgracia, tampoco hay alternativas que realicen la misma función.
Plugins y recursos para mejorar la velocidad de nuestra página web
Aunque acabamos de decir que hay plugins que puedan perjudicar a la carga de nuestra web, hay otros creados para mejorar la velocidad de carga.
También hay otros recursos que podemos utilizar, ya sea desde nuestro panel de hosting (si ofrece estos recursos) o de forma manual.
Plugins para mejorar la velocidad de carga
El plugin más eficaz y gratis es Autoptimize. Este plugin nos va a permitir optimizar nuestro código y unificar los archivos CSS, HTML o Javascript.
Otra función muy interesante, es la carga en diferido de imágenes (lazy load), que hará que las imágenes vayan cargando a medida que el usuario va haciendo scroll en la página. De este modo ahorramos gran cantidad de recursos al cargar la web, y va trabajando a medida que el usuario va navegando.
Otro plugin muy efectivo, aunque de pago, es WP Rocket. Sus funciones son muy similares a Autoptimize.
Hay otros plugin, aunque no recomendamos tampoco abusar de ellos, ya que un exceso de optimización puede ser perjudicial para nuestra web.
Optimización de imágenes
Es cierto que existen algunos plugin para comprimir nuestras imágenes y aligerar la carga de nuestro servidor.
Sin embargo, en la mayor parte de los casos será suficiente con optimizar las imágenes de forma manual.
Hay dos cosas que podemos hacer para que el tamaño de las imágenes sea el menor posible:
Redimensionar imágenes
No es necesario utilizar muy altas resoluciones, las imágenes no se verán mejor. En todo caso podemos, si fuera indispensable, utilizar una imagen con una resolución adaptada a una pantalla, y enlazarla a la imagen HD. De este modo, la página cargara la imagen con menos resolución, mientras que si el usuario lo desea podrá acceder al contenido de alta definición para descargar o lo que sea necesario.
Utilizar el formato JPG
Simplemente hay que evitar los formatos TIFF, PNG y demás que almacenan más información y hacen que una imagen pueda ocupar 3 o 4 veces más. Pasando a JPG podemos pasar imágenes de entre 1 y 2MB a 200-300Kb.
Si aplicamos estos procedimientos minuciosamente a todas las imágenes de nuestra web, no vamos a necesitar de plugin o aplicaciones externas para comprimir las imágenes.
Utilización de un CDN (Content Delivery Network)
Un CDN almacena información de nuestra página web y nos permite distribuir la información desde distintos servidores localizados por todo el mundo.
Antiguamente era muy importante la localización de nuestro hosting ya que si nuestra web estaba alojada en Europa, por ejemplo, los usuarios de Asia o América tardaban más en recibir la información, más aún con las redes antiguas de comunicaciones.
Hoy en día esto ya no es un problema tan importante, principalmente por las velocidades que hay en las redes de comunicaciones gracias a la fibra óptica y el 5G. Pero además, todavía mejorará más con el uso de un CDN, ya que un usuario localizado en EEUU recibirá gran parte de la información desde un CDN localizado en EEUU.
Como ya hemos mencionado, algunos servidores como Siteground están asociados con algunos proveedores de CDN y ofrecen ya la posibilidad de instalarlo automáticamente. En otros, deberemos instlarlo de forma manual, añadiendo en las DNS ciertos campos que apuntarán al CDN.
Si lo gestionamos a través de un hosting asociado, como Siteground, lo único que hará es añadir estos campos CNAME a nuestras DNS:
CloudFlare es uno de más conocidos y con mayor reputación en todo el mundo. Además del servicio de CDN gratis nos da muchísima información y otras herramientas como los certificados SSL gratis o el Firewall. Otras herramientas están disponibles en los planes de pago, como el caché de analytics, bloqueo de IP o zonas, redirecciones en errores de clase 500, desafios de seguridad, etc.
Este es el panel completo con las herramientas de CloudFlare:
Para instalar el CDN, en caso de que nuestro hosting no sea asociado, será suficiente con dirigirnos al apartado DNS de nuestro dominio y modificar las DNS de nuestro hosting por las DNS de CloudFlare.
Una vez modificadas las DNS, todos los campos en lugar de gestionarlos desde el hosting, se gestionarán desde CloudFlare (hemos ocultado algunos campos por privacidad):
Este es el caso de una web alojada en GoDaddy (que no esta asociada con CloudFlare) con el CDN configurado.
Esperamos que este artículo haya sido de ayuda para mejorar la velocidad de nuestra web.
Como siempre, podeis publicar cualquier duda en nuestra sección de comentarios o directamente en nuestro live chat. Si hay alguien disponible estaremos encantados de ayudaros.
He utilizado algunos de los truquillos que he visto por aquí y la verdad es que se nota cierta mejora en la velocidad. Un 10 la explicación sobre como configurar un CDN.
Gracias! es cierto que un CDN se nota mucho en el rendimiento web y es más sencillo de instalar de lo que parece.
He utilizado algunos de los truquillos que mencionas y algo se nota