8 Claves para mejorar la velocidad de carga en WordPress

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.

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.

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:

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.

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.

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.
  

  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.

• 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.

  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.

  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

• Pingdom Page Speed

• Webpage Test

• Gtmetrix

  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.

  Fuente: http://www.marketingandweb.es/marketing/mejorar-la-velocidad-de-carga-en-wordpress/