Mejorar la velocidad carga en WordPress o cualquier página web se convierte a veces en un verdadero dolor de cabeza, ya que pensamos que para conseguir optimizar la velocidad carga web tendremos que tener conocimiento técnicos muy avanzados, pero déjame decirte que no es así y si sigues estas 8 claves que aquí te describo conseguirás optimizar al máximo la velocidad de carga.

Por qué es tan importante mejorar la velocidad de carga

Es importante para mejorar el SEO

1.- Es un factor muy importante para el posicionamiento web.

2.- Afecta a la experiencia de usuario.

3.- Google analiza todas y cada unas de tus páginas de manera independiente (“fast” o “slow”).


Te recomiendo leer:

Cómo configurar W3 Total Cache + 3 Video tutoriales

40 Plugins de WordPress Insuperables en 2016 – Lo mejor de lo mejor

Cómo crear una página web profesional con WordPress


 

Es importante para mejorar la experiencia de usuario

paciencia usuario

Cómo puedes ver ya ha cambiando mucho el tiempo de espera de 8 segundos que tenían los usuarios en el año 2000, ahora quieren la información al instante.

Una velocidad de carga lenta puede aumentar el porcentaje de rebote de una página web y reducir el tiempo de permanencia de la visita, y afectar negativamente a tu posicionamiento web.

 

La importancia de crear una página web o Blog en WordPress

WordPress es el CMS más utilizado de Internet, esto no lo digo yo, sino que algunas consultoras reconocidas a nivel mundial publican cada año porcentajes de uso de la mayoría de CMS del mercado (al menos de los más utilizados) y esos datos posteriormente son difundidos por Internet en blogs y foros de la temática.

En Internet hay billones de sitios web, pues bien, el 26% de TODOS los sitios de internet utilizan WordPress como CMS, pero esta no es la única cifra interesante, ya que de TODAS las webs del mundo que usan un CMS (no código propio), el 59% usan WordPress, por lo que WordPress dentro del terreno de los CMS, tiene una buena cuota de mercado y supera ampliamente al resto de CMS que se reparten el 41% restante, teniendo en cuenta a CMS muy usados como Joomla, Drupal, Prestashop o Magento.

logo wordpress

Como digo siempre, lo que hace que WordPress sea especial, es la comunidad. A pesar de que WordPress está desarrollado y mantenido por una empresa privada (Automattic), la comunidad es quien se encarga de traducir el CMS, desarrollar nuevos plugins para aumentar funcionalidades o desarrollar themes para que la apariencia de los sitios web pueda cambiar.

De todos los CMS que conozco, WordPress es el que más plugins y themes tiene disponibles, tanto Premium como de forma gratuita.
La ventaja de tener tantas opciones, es lo que WordPress sea un CMS flexible y escalable, pero eso también es lo que hace que se ralentice la instalación y aumente el consumo de recursos cuando tenemos muchos plugins instalados y activados.

Cuando WordPress se vuelve lento y consume muchos recursos, podemos seguir una serie de puntos clave para acelerar la velocidad de carga e intentar mitigar el consumo de recursos, y precisamente esos puntos son los que vamos a comentar en este artículo.

 

Clave 1.- Sistema de Cache

¿Qué es un sistema de Cache y cómo optimizarla?

Un sistema de cache funciona de forma simple, se basa en guardar una copia previamente procesada para servirla a los visitantes de forma que no sea necesario procesar el código de la web cada vez que un visitante entra al sitio web.

Existen varios tipos de cache y el cache puede ser guardado en varios sitios:

  • El cache puede ser cache de página, cache de objetos, cache de consultas a la base de datos, etc…
  • El cache puede ser guardado en disco, en RAM (usando Memcached, Redis o algún servicio similar) o incluso en la base de datos.

En el caso de WordPress, lo más común es usar un plugin que proporcione un sistema de cache de página que guarde el cache en disco, si usamos discos SSD conseguiremos mejorar bastante el cache guardado en disco al mejorar la eficiencia al servir archivos pequeños.

El cambio entre usar y no usar un cache en WordPress es radical, se puede notar en mayor o menor medida dependiendo totalmente del servidor. En un servidor Apache puedes ver la diferencia en la siguiente comparativa:

comparativa pagespeed

Existen muchos plugins de WordPress para la Cache, de hecho, existen algunos “míticos” como WP Super Cache y algunos que son casi una suite de optimización como W3 Total Cache.

A pesar de que el catálogo de plugins de cache para WordPress es muy largo, normalmente recomiendo los siguientes:

  • W3 Total Cache: Es una suite completa y gratuita de optimización para WordPress, permite 3 tipos de cache (pagina, objetos y DB) y además permite guardar el cache en distintas ubicaciones como disco, APC, Memcached o Redis.
  • WP Rocket: Es un plugin Premium, personalmente, uno de los mejores plugins de cache que he visto nunca, ya que, aunque solo permite cache de página en disco, tiene algunas funciones interesantes como el precache DNS, el precache de página usando el sitemap o la integración con servicios de CDN.
  • WP Fastest Cache: Normalmente recomiendo esta opción como alternativa gratuita a WP Rocket, ya que, aunque no es tan efectivo y no tiene tantas funcionalidades en su versión gratuita, es un plugin bastante efectivo y fácil de configurar.

Si tienes un blog simple o web simple en un hosting compartido, te bastara con WP Rocket o WP Fastest Cache, si usas WooCommerce o cualquier plugin complejo de este tipo, te recomiendo W3 Total Cache o WP Rocket, en caso de instalaciones WordPress con mucho tráfico, todo depende del servidor donde se aloje el proyecto, pero suelo recomendar W3 Total Cache.

 

Clave 2.- Mejores CDN para mejorar la velocidad de carga

¿Qué es un CDN y cómo afecta a la velocidad carga?

Un sistema de CDN es un servicio distribuido que permite servir contenidos estáticos de un sitio web (imágenes, videos, javascript, css, pdf, etc…) desde servidores ubicados más cerca del cliente o visitante geográficamente hablando.

El concepto es simple, si se reduce la distancia entre el servidor que sirve los contenidos y el visitante que descarga los contenidos, se consigue mejorar la velocidad de carga en todas las peticiones, por otro lado, en la mayoría de los CDN, al paralelizar las cargas eso también ayuda a mejorar la velocidad de carga.

CDN mundo

Antes solo se recomendaban los servicios de CDN para los sitios web de mucho tráfico, pero actualmente debido a la globalización que ha sufrido Internet en todos los aspectos, es recomendable tener un servicio de CDN en cualquier sitio web para que la velocidad de carga sea igual en España que en América Latina.
He puesto este ejemplo porque es el más común que me plantean, esto lo suelen necesitar normalmente clientes que tienen una web alojada en un servidor en España o en Europa y quieren mejorar la velocidad de carga en América Latina.

A continuación, puedes ver una foto donde muestro el caso de carga con y sin CDN de una web alojada en España, realizando la carga desde Australia con el CDN activado y sin el CDN activado para comparar:

con y sin cdn

El CDN usado para esta prueba ha sido CloudFlare CDN en su versión gratuita pero no se ha usado cache de página.

Actualmente existen muchos servicios de CDN, es más, si comparamos el número de servicios conocidos de CDN que tenemos ahora y los que teníamos hace un año disponibles, el numero puede que se haya duplicado.

5 Mejores CDN para WordPress

Aunque existen muchas opciones disponibles, normalmente yo siempre suelo recomendar los mismos servicios tras probarlos de forma intensiva en proyectos grandes con mucho tráfico o proyectos orientados a un público específico:

  • CloudFlare: Es el único que se puede considerar CDN gratuito, además también es uno de los pocos que funcionan mediante proxy inverso Nginx.
  • Amazon CloudFront: En general Amazon AWS es un sinónimo de garantía de buen funcionamiento, por eso su CDN es una excelente opción para cualquier tipo de proyecto, además dispone de muchos POPs alrededor del planeta.
  • KeyCDN: Es un CDN que ha empezado a coger mercado hace menos de un año y que desde que lo he probado, no he parado de recomendarlo, ya que tiene muchos POPs alrededor del mundo y un buen panel.
  • MaxCDN: Es un CDN bastante conocido, tiene un panel muy bueno, pero tiene pocos POPs por la zona hispanohablante, pero es un excelente CDN para sitios web orientados al mercado estadounidense y Centroeuropa.
  • CDN77: Un CDN muy similar a KeyCDN, pero más orientado a sitios web grandes y a streaming de video.

A la hora de elegir un buen CDN para tu proyecto web, debes elegir muy cuidadosamente el servicio, ya que debes tener en cuenta cosas como el certificado SSL, el precio de servir contenidos desde determinadas zonas geográficas o la forma de coger el contenido del servidor o hosting de la web.

 

Clave 3.- Minificar, Combinar y Comprimir

En este caso, vamos a explicar previamente lo que es cada concepto de los tres mencionados.

  • Minificar: Se trata de bajar el peso de los archivos HTML, CSS y JS mediante la eliminación de saltos de línea, comentarios en el código y espacios en blanco, en resumen, elementos que no son necesarios para que el navegador interprete los archivos.
  • Combinar: Se trata de bajar el número de peticiones que se realizan al servidor uniendo uno o varios archivos del mismo tipo (CSS con CSS y JS con JS)
  • Comprimir: Se trata de comprimir mediante GZIP o Deflate, esta compresión la realiza el servidor web y la descompresión en el cliente la hace el navegador web del cliente, de forma totalmente transparente para el usuario que navega por Internet.

Una vez dicho esto, vamos a separar por un lado minificar y combinar, y por el otro lado comprimir.

Antes de nada, decir que minificar y combinar no siempre es posible de forma automática en WordPress, ya que los themes son cada vez más complicados y usan muchas librerías externas.

3 Plugins de WordPress para minificar y combinar JS y CSS

Si quieres combinar y minificar el JS y CSS de tu web para optimizar la carga en tu WordPress con theme Premium, vas a necesitar hablar con un programador, pero si quieres hacerlo con un plugin y tu theme es tan simple que no vas a tener problemas, te recomiendo probar los siguientes plugins:

  • Autoptimize: Es el plugin perfecto para combinar y minificar HTML, JS y CSS, además lleva un sistema de cache que mejora bastante la estabilidad de los tiempos de carga.
  • WP Rocket: Aunque es un plugin de cache, lleva integradas funcionalidades para combinar y minificar, además si tienes un problema de compatibilidad, solo tienes que hablar con su soporte y harán las modificaciones oportunas.
  • W3 Total Cache: Aparte de todos los sistemas de cache que permite implementar W3 Total Cache, también lleva un potente y avanzado sistema para minificar y combinar JS y CSS, e incluso HTML.

Adicionalmente, este tipo de plugins también permiten configurar el javascript para que cargue de forma asíncrona, pero esto también suele dar problemas con los themes actuales debido a la gran cantidad de librerías que necesitan los elementos que se carguen durante el principio de la carga de la página.

La compresión GZIP o Deflate de la que hemos hablado al principio de este punto, también es recomendable activarla, sobretodo porque mejora la puntuación de PageSpeed, aunque la compresión conseguida no sea demasiada debido a que solo actual sobre los archivos estáticos de base texto (que se pueden abrir con el editor de texto) servidas a los visitantes.

imagenes comprimidas

Existen casos en los que no es posible activar la compresión GZIP, en estos casos tu proveedor de hosting debería poder explicarte el problema.

 

Clave 4 – Reducir las peticiones durante la carga

Algo que debemos tener muy en cuenta es que cada vez que el visitante carga una página, se realizan muchas peticiones al servidor para cargar todos y cada uno de los elementos de la página en cuestión.

Cada petición realizada al servidor o hosting donde se aloja la web consumen una serie de recursos, si las peticiones realizadas por cada visitante son muchas, cuando la web tenga mucho tráfico la web consumirá muchos recursos y tendremos problemas de viabilidad en el sitio web.

reducir peticiones servidor

Existen varias formas de reducir las peticiones, vamos a comentar algunas formas:

  • Se puede reducir el número de peticiones que se realizan al servidor si implementamos un CDN para servir el contenido estático, pero aun así el número de peticiones seguirá siendo el mismo.
  • Se puede reducir las peticiones realizadas combinando archivos JS y CSS, aunque como ya he dicho, esto no siempre es posible.
  • Podemos reducir el número de peticiones uniendo varias imágenes en una misma imagen y usando sprites con CSS para cargarlas desde un único archivo, esto lo tiene que hacer un desarrollador web normalmente.
  • La forma más efectiva para reducir las peticiones es sacando los elementos de la web que más peticiones ocasionan al servidor.

Recuera de que las peticiones, además de consumir recursos en el servidor web, también aumentan el tiempo de carga total de la página, y eso es lo que justamente intentamos reducir para que la web cargue mas rápido.

 

Clave 5 – Reducir el peso del sitio web

Junto con la reducción de peticiones, bajar el peso general de la web también ayuda bastante, ya que el tiempo de descarga de los elementos y contenidos de la web disminuye y por esa razón mejora la velocidad de carga.

Podemos reducir el peso del sitio web realizando algunas acciones que vamos a comentar a continuación:

  • Podemos optimizar las imágenes con el fin de reducir drásticamente el peso de la web, cuanto más optimizadas estén las imágenes mejor, de hecho, esta es una de las primeras cosas que debemos hacer para poder optimizar un sitio web WordPress en el que el problema no sea el first byte.
  • Podemos reducir el peso de la web combinando y minificando el JS y CSS, aunque como he comentado anteriormente, con esto no se consigue bajar demasiado el peso y el visitante apenas lo notara en el tiempo de descarga.
  • La compresión GZIP o Deflate teóricamente también debería notarse, pero a no ser que tengas archivos CSS y JS de tamaño “sobrenatural” o páginas con tanto scroll que tengas que estar media hora bajando para verla toda, no vas a notar ninguna mejoría.

En la siguiente imagen puedes ver una comparativa de carga entre antes y después de optimizar imágenes con EWWW ImageOptimizer.

foto7

En la siguiente imagen puedes ver una comparativa de un antes y después de optimizar las imágenes, como ves, el peso ha bajado más de la mitad y eso se nota en la velocidad de carga, como también puedes comprobar.

4 Plugins de WordPress para comprimir imágenes

Ya que optimizar las imágenes es una de las cosas que más efectiva suele ser, vamos a comentar algunos plugins útiles para optimizar imágenes en WordPress:

  • EWWW ImageOptimizer: Es un plugin gratuito que optimiza PNG y JPEG (o JPG), además utiliza las librerías del servidor para optimizar y no tiene ninguna limitación ni de tamaño ni de velocidad o cantidad.
  • WP Smush: Se trata de otro plugin de optimización de imágenes muy conocido, que utiliza un servicio externo (antes de Yahoo) para optimizar las imágenes, pero en su versión gratuita tiene la limitación de tamaño máximo por imagen 1 MB.
  • io: Es un servicio online externo, pero tiene plugin para WordPress, es de lo mejor que he visto comprimiendo y optimizando imágenes sin perdida, pero es Premium y hay que pagar por uso.
  • TinyPNG: Se trata de un servicio de optimización muy potente, en compresión más o menos tiene el mismo nivel que Kraken.io, y también dispone de plugin oficial para WordPress, y también es de pago.

También está disponible la opción de optimizar las imágenes antes de subirlas al WordPress con Photoshop u otro editor de imágenes.

 

Clave 6.- Auditoría de plugins

Cuando hablamos de plugins, hablamos de otro tema diferente a todos los puntos clave que hemos tratado hasta el momento en este artículo.

Cuando nos metemos en temas de plugins, el terreno es bastante “pantanoso” y todo es relativo y variable.

Lo que más recursos consume del servidor en una instalación de WordPress, son los plugins, ya que cada plugin añadido añade código PHP que debe ser procesado por el servidor, y aunque este tiempo de proceso y consumo de recursos puede ser mitigado usando algún sistema de cache o similar, siempre es recomendable hacer una auditoria para ver que plugins están consumiendo más recursos y que plugins podemos desactivar porque no los necesitamos.

auditoria plugins

El problema viene cuando tenemos que construir un sitio muy complejo que implementa una tienda online y al mismo tiempo un sistema de formación, por poner un ejemplo, ya que WooCommerce (lo más usado para tiendas online con WordPress) al combinarlo con plugins específicos suele dar bastantes problemas relacionados con los tiempos de carga y el consumo de recursos.

A pesar de que el código sea complejo y los tiempos se ralenticen, siempre es posible mitigar un poco estos dos problemas usando un OPCache en el servidor, como por ejemplo ZendOPCache.

4 Plugins de WordPress que consumen muchos recursos

Estos son algunos ejemplos de plugins que suelen consumir bastantes recursos en WordPress:

  • WooCommerce suele consumir bastantes recursos y su consumo se duplica al combinarlo con más plugins para WooCommerce.
  • Broken Link Checker suele consumir bastantes recursos al analizar una web.
  • YARPP (y casi cualquier plugin de artículos o paginas relacionadas) suele consumir bastante y suelen esquivar los sistemas de cache.
  • Jetpack for WordPress si se activan todos los módulos suele tener un consumo de recursos superior a la media ya que hay módulos integrados que son pesados.

2 Plugins para detectar los plugins de wordpress que más recursos consumen en mi Blog

A la hora de detectar que plugins consumen recursos en una instalación de WordPress, hay varias herramientas que podemos utilizar para este fin.

  • P3 Profiler: Este plugin es muy conocido, pero poca gente lo sabe usar correctamente ya que poca gente sabe “leer entre líneas”. La información que ofrece el plugin raramente sirve para algo si no se tiene experiencia en la resolución de este tipo de problemas.
  • WPTOP: Es una combinación de plugin con extensión para PHP (XHPROF) que usamos para detectar funciones que tardan más de lo normal y que, por lo tanto, al tardar más en procesarse, también consumen más recursos de procesador.

A pesar de tener herramientas, el descarte y el instinto juegan papeles muy importantes en la resolución de este tipo de problemas y son importantes a la hora de realizar auditorías de plugins.

 

Clave 7.- Software del servidor

Cuando hablamos de software en el servidor, vamos a hablar de los servicios que tiene instalado un servidor web o servidor de hosting para poder ofrecer servicio.

Para ofrecer un mismo servicio, suelen existir varias formas de hacerlo o varios softwares que ayuden con la tarea.

Lo que está muy claro, es que el servidor juega un gran papel en la velocidad de carga de un sitio web, y aunque la culpa no es siempre del servidor, es la base para conseguir el objetivo: una web rápida con unas velocidades de carga buenas y estables.

software servidor

En la imagen anterior puedes ver la diferencia entre un servidor que usa Nginx y un servidor que usa Apache, y también uno que usa una combinación de ambos servidores web funcionando como proxy inverso.
Como puedes observar, con Nginx la velocidad de carga es superior, pero no solo eso, sino que el consumo de recursos también es mucho menor en igualdad de condiciones.

Pero no solo eso, antes hemos hablado de OPCache para PHP. Un OPCache es un tipo de cache que normalmente se carga en el intérprete PHP en forma de modulo o extensión, y sirve para guardar código preprocesado en la memoria RAM, de modo que se facilita el acceso y mejoran los tiempos de respuesta y el consumo de recursos.

En la siguiente imagen puedes ver un benchmark entre los distintos tipos de OPCACHE, evidentemente cuanto más alto es el valor mejor, ya que significa que más peticiones por segundo puede procesar en igualdad de condiciones:

foto10

Como puedes ver, un OPCache puede ayudarte bastante a mejorar el rendimiento.

La versión de PHP también influye mucho en la velocidad de carga, en la siguiente imagen puedes ver la diferencia entre PHP5.4 y PHP7.0:

foto11

foto12

En los dos casos anteriores el hosting tenía 256 MB de RAM y poca CPU asignada, pero la diferencia se nota de forma radical.

También debemos tener en cuenta, que, aunque las versiones 5.5 y 5.6 de PHP van a dejar de tener soporte oficial dentro de poco, la versión 7.0 aún puede ser incompatible en muchos casos, ya que los programadores deben adaptar su código PHP.

 

Clave 8.- Auditoría de peticiones externas

En la mayoría de los casos la velocidad de carga total de un sitio web se puede ver gravemente afectada por las peticiones externas que cargan desde otros servidores.

Por mucho que optimicemos la velocidad de carga de nuestro sitio web, si posteriormente las cargas de elementos como el cuadro de Facebook cargan lento, nuestro sitio cargara lento incluso activando la carga asíncrona.
Incluso en algunos casos, puede darse el caso de que peticiones intermedias de librerías a servidores externos puedan llegar a retrasar la carga de todo el sitio web.

foto13

No todos los servicios tienen servidores lentos, pero, por ejemplo, yo he visto los siguientes casos:

  • Facebook y su cuadro de Facebook.
  • Google Plus y su cuadro de Google Plus.
  • Google Adsense al cargar redes de terceros.

La solución realmente no es sacar estos elementos, sino que debemos valorar cuales necesitamos obligatoriamente y de cuales podemos prescindir sin problema.

Lo que debemos tener en cuenta es que, si tenemos muchos elementos que carguen externamente y que carguen lento, tendremos una web lenta por mucho que invirtamos en hosting y en optimización.

 

4 Herramientas para analizar la velocidad de carga de una página web

 

Page Speed Insights

pagespeed insight blog

Una optimización móvil por encima de 60 está bien, pero lo perfecto es consigas un page speed móvil por encima de 70.

El objetivo es conseguir un pagespeed de ordenador superior a 70, aunque lo ideal es que consigamos optimizar a más de 80.

Pingdom Page Speed

pingdom pagespeed

Me gustan 2 aspectos de esta herramientas; su velocidad, ya que realiza un análisis en muy poco tiempo y el gráfico de carga donde puedes ver todos los elementos del proceso de carga, y así discernir cuál son los elementos que están haciendo lento la velocidad de carga web.

 

Webpage Test

webpage test

Esta herramienta nos analizar aspectos muy interesantes como el “Primer Byte”, entre otros aspectos que nos ayudarán a mejorar la velocidad de carga de wordpress.

Gtmetrix

gtmetrix

Gtmetrix es una buena herramienta que nos ayudará a analizar la velocidad de carga y a ver qué elementos tenemos aún por optimizar y mejorar.

aumentar velocidad de carga en wordpress infografia

Conclusiones

Si sigues todos los consejos de este artículo te garantizo que podrás mejorar la velocidad de carga en WordPress considerablemente, y esto te ayudará a mejorar tu experiencia de usuario y a impulsar el posicionamiento web de tu página web o Blog en WordPress.

Es importante que tengas en cuenta que toda esta optimización de la velocidad de carga afectará tanto a la experiencia del visitante desde un ordenador como un dispositivo móvil.

Te recomiendo que ahora mismo analices la velocidad de carga de tu Blog con la herramienta de pagespeed de Google, y utilices varias páginas de tu blog, no solo la home, recuerda que Google analiza todas y cada una de tus páginas de tu sitio web, y si ves que el valor no es muy bueno, pues comienza a aplicar estas 8 claves para conseguir mejorar la velocidad carga web.

Si te ha gustado el post, puedes compartirlo con un amigo/a