Cómo mejorar la velocidad y pagespeed de tu blog

COMO mejorar la velocidad de tu web
Compartir esto:

En este artículo vamos a compartir todo lo que sabemos sobre cómo mejorar la velocidad de tu web.

Nos vamos a centrar especialmente en webs que tienen instalado WordPress, pues es el gestor de contenidos más popular y sobre el que tenemos más experiencia.

Actualmente, WordPress ocupa una cuota de mercado del 33 %. 

Ya son más de 10 años que llevamos trasteando con WordPress y nos hemos enfrentado a muchas dificultades para mantener nuestras webs rápidas.

Existen muchos artículos y vídeos sobre cómo hacer que nuestras webs carguen más rápidas. Sin embargo, no todas estas guías están completas.

Hay factores muy importantes que influyen en la velocidad de carga de una web y que muchos tutoriales pasan por alto.

En esta guía vamos a tratar TODOS los aspectos que influyen en la carga de una web o blog.

Tenemos que intentar huir de las optimizaciones estándar.

Están muy bien para hacerte una idea de qué aspectos influyen en la carga de una web pero no es lo mismo optimizar la velocidad para una web corporativa que se encuentra alojada en un hosting compartido que una optimización para una tienda online alojada en un servidor dedicado.

Cuando los usuarios siguen al pie de la letra los tutoriales que ven en algún lado pueden acabar teniendo problemas pues quizá los plugins que recomiendan en dichas guías no son los adecuados para las características de su negocio.

Vamos a realizar una primera gran diferenciación según el tipo de web: no es lo mismo una web estática que una web dinámica.

Webs estáticas

Aquí se engloban la mayoría de webs realizadas con WordPress.

Estamos hablando de blogs y webs corporativas.

Una web estática no quiere decir que no cambia nunca. Dentro de este rango englobaríamos, por ejemplo, a blogs que se actualizan un par de veces al día.

Cantina Marketera entra dentro de esta categoría de web estática.

Este tipo de webs tienen una caracterísitca fundamental que afecta a la velocidad de carga: la mayoría de peticiones son atendidas desde la propia caché del servidor. El tiempo de respuesta es cortísimo.

Las peticiones no deberían consumir demasiados recursos.

Webs dinámicas

Aquí nos encontramos con las tiendas online, foros creados con bbPress o BuddyPress, Membership Sites o academias online.

En este tipo de webs, los usuarios están constantemente realizando peticiones y los datos de las webs cambian cada pocos segundos.

Esto quiere decir que no podemos usar la caché del servidor para contestar todas las peticiones.

El número de usuarios concurrentes en este tipo de webs es más elevado ya que están participando en el hilo de un foro o están viendo la lección de un curso, por ejemplo.

Necesitamos un servidor más potente porque además de tener más usuarios simultáneos no podemos servirles la web cacheada tan fácilmente.

Elegir un alojamiento de alto rendimiento para tu web

Hay que elegir muy bien la empresa en donde vayas a alojar tu web.

Estas empresas tienen diferentes planes de alojamiento desde donde sirven a los usuarios todos los datos almacenados en tu web.

Es vital que elijas el tipo de alojamiento adecuado que se amolde de manera eficiente con las características de tu web.

Vamos a ver los diferentes tipos de alojamientos.

Servidores compartidos

servidores compartidos

Es el nivel más bajo de alojamiento para una web.

Prácticamente todas las empresas de hosting tienen diferentes planes de alojamiento compartido.

Utilizan CPanel para administrar el servidor. Es un panel muy intuitivo para usuarios que no tengan mucha experiencia y donde puedes añadir tus webs, instalar WordPress, crear emails personalizados…

Los precios del alquiles de este tipo de hostings son los más económicos.

Como ya dijimos al principio de este artículo, llevamos años manejando multitud de webs y hemos pasado por muchas empresas de hosting.

Después de tantos años, nos vamos a centrar en recomendarte una empresa que es la mejor en cuanto a prestaciones y atención al cliente.

Nosotros usamos, y recomendamos, Raiola Networks.

Sin embargo, nunca recomendamos contratar el plan más económico de un hosting compartido, ya que los tiempos de carga suelen ser excesivos debido, entre otras cosas, al alto valor que da TTFB (Time To First Byte).

Este valor es el tiempo que tarda el servidor en responder a una petición y al ser un servidor compartido con otras muchas webs y con un uso limitado de CPU, pues este valor se te puede ir hasta los 5 segundos.

Eso se traduce en tiempos de carga excesivos o errores 500.

Si una web con la que compartes servidor tiene algún tipo de problema de consumo excesivo de recursos, tu web puede verse afectada.

Atención al modo de cobro de este tipo de servidores

Pongamos como ejemplo la empresa de alojamiento Siteground.

Imagina que quieres empezar un blog o una web y te han dicho que para empezar te vale con el plan más económico (un hosting compartido por 3,95 € al mes sin IVA).

Problemas

Dices, «por ese precio voy a probar», pero a la hora de la verdad, la gente de Siteground te da la opción de contratar 1 mes de prueba por esos 3,95 € + 12 € de «configuración» ¿?

Toral, que si quieres probar solo un mes con Siteground el plan más económico te va a costar el primer mes:

precio hosting siteground

19,30 € por un plan que va a hacer que tu web cargue más lenta que el «caballo del malo».

Con Raiola te ahorras esa «configuración» que se han sacado de la manga los de Siteground y el plan más barato de esta empresa gallega te sale por 5,95 € + IVA (7,20 €).

Aun así, no recomendamos contratar el plan más barato de ninguna empresa.

Servidor Virtual Privado (VPS)

Las personas que ya tienen un poco más de experiencia en el manejo de webs y quieren un servidor un poco más potente y estable, suelen optar por contratar un VPS.

Dentro de los VPS también hay diferentes planes.

Siteground no ofrece VPS y estos son los diferentes planes de los VPS optimizados de Raiola:

precios vps raiola

Si tienes Woocommerce instalado y tienes un cierto flujo de visitas, ya deberías optar por alguno de estos planes.

En este tipo de VPS que contratas a una empresa, ellos realizan toda la configuración por ti y te ofrecen un soporte 24/7.

Existe otra opción de contratar tú mismo un servidor virtual privado en OVH y montarlo a tu gusto. Esta opción es mucho más barata pero tú te tienes que ocupar de todo y sacarte las castañas del fuego cuando empiecen los problemas.

VPS administrado

Esta opción incluye un soporte mucho más implicado contigo. Ellos mantienen siempre actualizado y optimizado tu VPS.

También te van a resolver cualquier tipo de problema que tengas como por ejemplo un ataque DDOS.

Servidores dedicados

Un servidor dedicado es un tipo de servidor remoto que está completamente dedicado a una persona, empresa o aplicación (por ejemplo, una herramienta SEO).

También suele estar implementado, alojado y administrado por un tercero. Raiola tiene varios planes para servidores dedicados.

Un servidor dedicado es exclusivo y no se comparte con ningún otro cliente, servicio o aplicación.

Ya hemos visto uno de los factores que inciden en el tiempo de carga de la web: el servidor.

Ahora vamos con otro factor importante del lado del servidor.

PHP 7 o superior para un mejor rendimiento

PHP es un lenguaje de programación que predomina en el lado del servidor.

WordPress y todos sus plugins están escritos con PHP.

Es necesario que tu hosting tenga tu plan actualizado a la versión 7 de PHP.

Si contrataste hace tiempo tu alojamiento, puede que sigas teniendo una versión antigua de PHP.

PHP 7 es un 10 % más rápido que sus anteriores versiones.

Si tienes una cuenta de hosting compartido con Raiola, puedes actualizar tú mismo la versión PHP desde el CPanel.

actualizar php raiola

Si no trabajas con CPanel siempre puedes abrir un ticket a tu proveedor de hosting y pedirle que verifique que estás trabajando con la versión más actual de PHP.

Elije un hosting que use NGNIX

Tu servidor puede funcionar con Apache (la mayoría) o NGNIX.

Si quieres tener un servidor potente deberás optar por esta última opción. Es la que usan las webs más potentes de Internet como puedes ver en esta gráfica.

Debes usar el protocolo HTTP/2

HTTP/2 optimiza las conexiones de las webs sin cambiar la semántica de la aplicación existente.

Esto significa que puedes aprovechar las características de HTTP/2 para mejorar el rendimiento y la reducción de la latencia de tu web.

Los cambios más importantes de HTTP/2 afectan a la forma en que se formatean y transportan los datos entre los clientes y los servidores.

Elige un servidor que tenga un datacenter cercano al país de donde son tus visitas

Antes de contratar un hosting necesitas saber de qué país provienen la mayoría de tus visitas.

Si tus visitas están cerca del datacenter de tu hosting, se reducirá el tiempo de latencia en la transmisión de datos.

El TTFB del que hablábamos más arriba será menor porque se reduce el tiempo entre la petición y la respuesta del servidor.

En el inspeccionador de elementos de Chrome podemos ver el TTFB:

ttfb consola chrome

Ahí podemos ver que Cantina tiene 34 milisegundos de TTFB, lo cual es poquísimo. Cuanto más bajo sea ese Tiempo de Transferencia para el primer Byte, mucho mejor.

1) En Analytics verás desde qué país provienen tus visitas

En el apartado de «Audiencia», «Datos demográficos», puedes ver de dónde proceden tus visitas.

En nuestro caso vemos que la mayoría de visitas las recibimos desde España, por tanto, elegiremos un hosting que tenga un datacenter en España o en un país vecino.

En Raiola usan un datacenter ubicado en Francia pero ellos te proporcionan una ip española. Sin embargo, también usan datacenters en América.

2) Formas adicionales de reducir el TTFB

  • Mantener WordPress, Plugins y Temas actualizados.

    WordPress, los desarrolladores de plugins y los themes, a menudo agregan optimizaciones de rendimiento a sus actualizaciones.

    Esto significa que han optimizado las consultas que su código ejecuta en la base de datos o han realizado actualizaciones que afectan a la eficiencia del código PHP.

    Se recomienda mantener solo los plugins y themes que necesitas y eliminar el resto. Por lo tanto, revisa periódicamente tus plugins y plantillas.

    La calidad de los plugins también puede afectar al TTFB, así que no instales plugins que afecten al rendimiento de tu web.

    Por ejemplo, el plugin Broken Link Checker, que comprueba los enlaces rotos que hay en una web, está diseñado para ejecutarse en segundo plano, revisando los enlaces rotos de vez en cuando. El resultado es una ralentización de WordPress y un aumento del TTFB.
  • Reducir el número de peticiones.

    A menudo, la cantidad de consultas que tu web está ejecutando para obtener información de la base de datos puede afectar al TTFB.

    Para ayudar a identificar los cuellos de botella, puedes instalar un plugin de diagnóstico como el 'Query Monitor'.
  • Usar la caché.

    Una de las maneras más fáciles de disminuir el TTFB es configurar el almacenamiento en caché en tu web ya que ayuda a reducir el tiempo de procesamiento del servidor.
  • Usar un CDN.

    El uso de una CDN de buena calidad puede ayudar a entregar tu contenido estático, como imágenes y scripts, más rápido a los usuarios a través de una red de servidores repartidos por todo el mundo.

    Esto significa que si tu servidor está ubicado geográficamente en Europa, por ejemplo, y algunos de tus usuarios se encuentran en Latinoamérica, recibirán el contenido de tu web desde un datacenter más cercano a ellos.

    Esto reduce la latencia de la red entre el servidor de tu web y esas visitas.
  • Usar un servicio de DNS Premium.

    Consulta con tu servidor si tienen la opción de instalarte un servicio DNS Premium.

Elige una plantilla WordPress optimizada

Ojo con los themes preciosos que ves por ahí, especialmente en Themeforest. Tienen un código muy recargado que llena de peticiones tu servidor y aumenta el tiempo de carga de tu web.

Evita Themes que tengan muchos efectos tipo sliders, desplazamientos de imágenes, que usen Google Fonts y efectos de Parallax.

A continuación vamos a recomendarte algunos themes que destacan por sus buenos tiempos de carga.

GeneratePress

GeneratePress es uno de los mejores themes de WordPress que existen en la actualidad.

Es un tema gratuito de WordPress creado por Tom Usborne , un desarrollador de Canadá.

El tema actualmente tiene más de 100.000 instalaciones activas, con más de 768 calificaciones de 5 estrellas.

generatepress mejor theme

Es súper ligero y rápido. Te permite habilitar / deshabilitar cosas que no quieres que se ejecuten. Incorpora datos estructurados para mejores resultados en las SERPs….

Estos son los datos que nos da GeneratePress en una instalación de WordPress limpia cuando le hacemos un test con Pingdom:

GeneratePress es completamente gratuito, sin embargo, tiene una opción premium con 14 complementos que te permiten personalizar ciertos aspectos del theme.

Esta opción Premium viene con la posibilidad de importar plantillas ya predefinidas, con sus módulos creados, imágenes, formularios…

También hemos realizado un test de velocidad para una de estas plantillas y estos son los resultados que hemos obtenido:

plantilla generatepress pingdom

El tiempo de carga de la web sigue siendo bajo.

En un entorno real habría que sumarle el código de Analytics y otros plugins que aumentarán el número de peticiones pero también podremos cachear la web y comprimir el html y el CSS.

Astra

Astra es uno de los themes gratuitos más populares que se encuentran en el directorio de temas de WordPress.org.

Desarrollado por Brainstorm Force, es uno de los primeros themes que encontrarás en la sección de más populares.

Tiene más de 200.000 instalaciones activas y prácticamente todas las reviews que tiene son de 5 estrellas.

astra theme velocidad

Hemos hecho lo mismo que con GeneratePress. Hemos instalado Astra en un WordPress limpio y estos son los valores de carga que nos ha dado:

tiempos de carga

Después hemos añadido un theme de su librería premium y nos ha dado estos valores:

astra demo velocidad

OceanWP

OceanWP es un theme que no está creado por un desarrollador con una larga trayectoria. 

Dicho esto, el desarrollador es muy rápido para resolver cualquier problema que pueda surgir, lo que demuestra su dedicación a OceanWP.

Volvemos a hacer la misma prueba que con los anteriores themes. Instalamos OceanWP en un WordPress limpio y estos son los datos que nos ofrece Pingdom:

datos pingdom oceanwp

Este theme tiene más de 300.000 instalaciones activas y la gran mayoría de sus calificaciones son de 5 estrellas.

Algo que debes saber sobre los constructores de páginas

Estos 3 themes que hemos probado suelen funcionar muy bien con constructores visuales como, por ejemplo, Elementor.

De hecho, muchas de sus plantillas usan estos constructores visuales.

Sin embargo, debes saber lo siguiente sobre los constructores visuales:

  • Algunos de estos constructores "secuestran" tu web de por vida, es decir, en el momento en que quieras prescindir de dichos constructores, tu web quedará completamente descuadrada y en algunos casos llena de shortcodes.
  • Todas las funcionalidades extravagantes que agregan estos constructores tienen un coste: la velocidad de tu web y el tamaño de de la misma.

En cualquier caso, existen constructores visuales que presciden de shortcodes y que, a pesar de todo, están muy bien optimizados.

Si no recargas tu página de efectos deslizantes que requieran de javascripts o efectos parallax, no supondrán un aumento excesivo en los tiempos de carga.

La combinación de GeneratePress + Elementor es una excelente opción si quieres tener más libertad a la hora de diseñar tu web.

La gran ventaja que te da el usar este combo es que te puedes ahorrar la instalación de muchos plugins que aumentarían aún más la carga de la web.

Cuidado con los plugins

No empieces a instalar plugins como un loco.

Solo instala los necesarios y aquellos que no supongan un consumo excesivo de recursos del servidor. Fíjate en las calificaciones de los plugins antes de instalarlos y en las reviews de otros usuarios.

Algunos dicen que hay que limitar la cantidad de los plugins. Nosotros nos fijamos en la calidad más que en la cantidad de los mismos.

Un WordPress con 20 plugins puede cargar más rápido que uno que solo tenga 10.

Un problema desconocido de algunos plugins

Muchas personas instalan plugins para probarlos en su web y, si no les convencen, los desinstalan según el método normal (Desactivar y borrar).

El problema es que muchos plugins añaden tablas a la base de datos de tu WordPress y aunque luego desinstales dichos plugins, las tablas siguen quedando.

Ahora súmale a esto decenas de tablas que van dejando los plugins que vas probando. Esto al final se traduce en problemas de carga para tu web.

filas residuales plugins

Esas filas son de un plugin que borramos… y ahí siguen estando.

Hay plugins como el Wordfence que te dejan un montón de tablas y filas y residuales aunque borres el plugin.

¡Y no solo dejan tablas residuales en la base de datos! También dejan carpetas:

carpeta residual wordfence

¿No te ha pasado alguna vez que has usado y configurado un plugin de una determinada manera y luego lo has desinstalado y meses más tarde lo vuelves a instalar y te guarda la configuración?

Eso es porque sigues teniendo sus tablas en tu base de datos.

Esto es una mala praxis por parte de los desarrolladores.

Existen usuarios de WordPress que después de muchos años con su blog tienen miles de tablas en su base de datos.

Esto implica muchas más peticiones en el servidor y por tanto sus webs se vuelven lentas.

Configura tu WordPress para que sea más veloz

1) Cambia la url del inicio de sesión de tu WordPress

La url por defecto para entrar al panel de administración de WordPress es tudominio.com/wp-admin

Eso lo saben todos los hackers así que cuando lanzan ataques masivos para descifrar contraseñas de WordPress suelen usar el wp-admin para forzar el login.

Estos ataques suelen ser muy comunes y aunque no logren descifrar finalmente la contraseña, los continuos intentos hacen que tu WordPress se ralentice.

Se recomienda cambiar esa url de acceso ya no solo por cuestiones de seguridad, sino también para evitar problemas de carga de la web.

Nosotros usamos 2 plugins para contrarestar estos ataques:

1) WPS Hide Login: para cambiar la url de acceso.

2) Loginizer: limita los intentos de login.

cambiar acceso wordpress

2) Desactiva los Pingbacks

Los pingbacks son esos comentarios que se generan en un post cuando alguien enlaza dicho post. 

También existen los autopingbacks que son lo mismo pero cuando enlazas algún artículo del blog.

Estos pingbacks generan peticiones innecesarias y puedes prescindir perfectamente de ellos.

Para desactivar los Pingbacks solo tienes que ir a «Ajustes», «Comentarios» y desactivar esta opción:

desactivar los pingbacks

3) Limita el número de publicaciones en la página de tu Blog

Si la página de tu blog es tu página de inicio, con más razón deberías limitar el número de publicaciones.

Pon una paginación ya que si tienes muchas publicaciones junto a muchas imágenes destacadas, esto hace que esa página se ralentice.

WordPress pone que por defecto se carguen 10 post. En «Ajustes», «Lectura», puedes modificar ese valor.

La caché

La caché es uno de los elementos más importantes a la hora de reducir el tiempo de carga de una web.

Cómo funciona la caché

Cuando un usuario va a tu web, en realidad, está haciendo una petición a tu servidor que este tiene que procesar, resolver y enviársela al usuario.

Aquí es donde la caché se vuelve un factor importante.

La caché es una copia de algunos archivos de tu web que se sirven rápidamente al usuario para ahorrar ese tiempo de procesamiento.

Tipos de caché

1) Almacenamiento en caché del nivel del servidor

Los servidores web también pueden almacenar solicitudes en caché, devolviendo respuestas sin tener que contactar a los servidores de aplicaciones.

El almacenamiento en caché del lado del servidor incluye varios protocolos de almacenamiento en caché que se utilizan para el almacenamiento en caché de WordPress:

1) Almacenamiento en caché de página.

2) Caché de consultas de base de datos.

3) Caché basado en objetos.

4) Almacenamiento en caché de Opcode.

2) Almacenamiento en caché del lado del cliente

Una web contiene una gran cantidad de datos no textuales y estáticos, como imágenes, archivos CSS y Javascript.

Una vez que se descargan, tu navegador es lo suficientemente inteligente como para no volver a descargarlos cada vez que presiones el botón F5.

Simplemente sirve esa información del caché local, es decir, los datos almacenados en caché guardados en el disco duro de tu ordenador.

Por eso se recomienda limpiar la memoria caché de tu navegador de vez en cuando, ya que ahorra mucho espacio y mejora el rendimiento.

Este proceso de reutilización de los datos almacenados en caché desde el ordenador del cliente se conoce como almacenamiento en caché del lado del cliente.

El almacenamiento en caché del lado del cliente ayuda a evitar la redundancia de datos (es decir, descargar los mismos datos una y otra vez) y ahorra una gran cantidad de recursos del servidor

3) Almacenamiento en caché gracias a un plugin

Si tu hosting no te proporciona almacenamiento de caché para tu web, entonces necesitas un plugin como WP Rocket (de pago), pero también tienes otros plugins de caché gratuitos que funcionan muy bien.

Optimización de las imágenes

Uno de los problemas más comunes en la carga de una web está relacionado con las imágenes de alta resolución y widgets de fotos.

¿Cómo reducir el tamaño del archivo de una imagen?

Existen muchas herramientas que optimizarán tus imágenes: algunas de ellas se pueden descargar en tu PC, como Gimp Save for Web, mientras que otras se pueden usar directamente en línea como Web Resizer o Compressor.io

Plugin Imagify

Puedes optar por un plugin de WordPress en lugar de una herramienta de optimización de imagen en línea.

La gran ventaja es que te ahorra mucho tiempo.

El plugin Imagify está desarrollado por WP Media, la misma compañía detrás de WP Rocket. 

Con este plugin, las imágenes se optimizan cuando las subes a tu WordPress. Su peso se reduce considerablemente sin perder calidad de imagen.

Conclusiones

Reducir el tiempo de carga de una web no solo se limita a instalar unos plugins y ya.

Es algo que empieza desde la elección del servidor y de sus diferentes planes de alojamiento.

Esperamos que esta guía te haya servido de ayuda.

Si tienes alguna duda o quieres aportar algo que se nos haya pasado por alto, puedes dejarnos tu comentario.

Te ha gustado este post?

Suscríbete para que te avisemos con nuevas entradas

[Total:0    Promedio:0/5]
Compartir esto:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *