Miércoles, 28 Diciembre 2016 23:40

Cómo mejorar la velocidad de WordPress en 2017

Escrito por 
CMS:  WordPress |  Versión:  Todas |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  15 minutos


mejorar la velocidad de WordPress


¿Cómo acelerar algo que de por sí ya es rápido? ...puede que suene utópico pero lo cierto es que aún siendo un gestor de contenidos muy rápido, principalmente el núcleo, cuando se le añaden plugins de otros desarrolladores y temas con muchas funcionalidades, acaba convirtiéndose en una instalación pesada.

Es evidente que si comparamos los tiempos de carga de WordPress con los de otros CMS (no es la intención), a la hora de mejorar la velocidad de WordPress, este se lleva la palma consiguiendo tiempos buenos, a veces incluso con muchos plugins añadidos.

Saber qué temas "son pesados" y que plugins alargan los tiempos de carga de la página donde muestran resultados, junto con la optimización de valores del servidor de alojamiento de WordPress, ayudan a tener una instalación que funcione, que sirva los contenidos deseados y además "que sea rápida".

 

¿En que se fija Google cuando analiza tu web?

  • Como sirves la página (con o sin alias www/con o sin SSL).
  • Si Minificas HTML, CSS y JavaScript.
  • si la respuesta del servidor es rápida (En páginas dinámicas lo habitual es usar algún sistema de caché).
  • Si tus imágenes están optimizadas ¡TODAS!

Hay otros parámetros que también son observados cuando se rastrea una página para indexarla y posicionarla, pero los citados son los más destacados y que tu web debe observar.

 

¿Como acelerar WordPress?

No existe una única fórmula que aplicada permita acelerar una instalación de WordPress para obtener una puntuación 100/100, pero si hay muchas formas de optimizar una web hasta obtener una buena, a base de rascar aquí y allá parámetros e ir mejorando las configuraciones.

Los puntos más destacados para obtener una velocidad de carga buena son los siguientes:

  • Escoger un buen Hosting
  • Utilizar un tema rápido y ligero
  • Usar plugins ¡pero solo los necesarios!
  • Gestionar el caching con WP Super Cache, u otras soluciones como caché de servidor tipo Varnish
  • Optimizar las imágenes
  • Optimizar la base de datos
  • Mejorar la carga de js y css (tener en cuenta también la caché de estáticos)

Claro que siempre a estos le puedes añadir el uso de un CDN como CloudFlare u otros para mejorar aún más los tiempos de carga gestionando los estáticos externamente, pero no siempre es necesario aplicarlo y a veces puede ser hasta contraproducente. Por ejemplo con la llegada de HTTP2 ya no es necesario dividir la carga de estáticos en diferentes subdominios para mejorar la velocidad de descarga de estáticos, porque HTTP2 soluciona este problema de raíz y permite descargar los estáticos de forma óptima en paralelo (Para usar HTTP2 es necesario que la web funcione bajo HTTPS).

Conocer los detalles de tu sitio web te aportará pistas sobre qué elementos de la página están contribuyendo a ralentizarla, de forma que puedas centrarte primero en corregir esos problemas y luego a base de análisis de carga con diferentes herramientas (no te centres solo en una) evaluar los avances que vas consiguiendo a base de depurar problemas detectados.

No te vuelvas loco queriendo corregir todo de golpe pues lo más probable es que acabes liándola más gorda aún; usa el sentido común y corrige los posibles problemas de uno en uno, y tras cada corrección ejecuta un análisis para tener certeza de que ese punto ha quedado solventado con la intervención realizada.

 

Escoger un buen Hosting

La elección de un buen Hosting para tus proyectos con WordPress es el pilar a partir del cual podrás construir la estabilidad de tus webs y hacer que la carga sea rápida sin descuidar factores importantes como la seguridad y la accesibilidad.

Existen muchos y buenos Hostings, eso es indiscutible y en España y América Latina hay cada vez más propuestas serias y profesionales para alojar webs.

Es importante que dediques tiempo a investigar qué servicios requiere tu proyecto web y luego analices las propuestas que los diferentes proveedores de alojamiento te ofrecen, evaluando su experiencia en la implantación y optimización de sus servidores para que WordPress se ejecute en las mejores condiciones.

Apuesta siempre por proveedores que dediquen esfuerzos a potenciar WordPress, que desarrollen herramientas específicas para que tu puedas evaluar el comportamiento de tus webs y que te den el soporte necesario cuando los problemas se presentan.

Hay mucho debate con respecto a si se debe alojar un proyecto de WordPress en un servidor compartido o en uno dedicado. No pretendo entrar en este debate pero si te puedo decir, fruto de la experiencia adquirida los últimos 3 años que en servidores compartidos pueden convivir numerosas instalaciones de WordPress sin que unas acaben afectando negativamente a las demás, siempre y cuando tu proveedor de Hosting tenga claro cómo gestionar los límites de cada cuenta y las mantenga aisladas entre ellas.

Para ello surgieron tecnologías como CloudLinux que usan las nuevas herramientas del núcleo (kernel) de Linux que permiten gestionar cuentas de cPanel como contenedores virtuales, lo que permite asegurar más las cuentas a nivel de seguridad y de consumo de recursos.

 Puedes encontrar aquí más información sobre las medidas que tomamos en Webempresa para que WordPress vuele.
 

Utilizar un tema rápido

Los temas son la identidad de tu sitio web, sin ellos volveríamos al pasado, donde existían pocos gestores de contenidos y apenas un par de layouts o plantillas ¿recuerdas Nuke? ...y todos se parecían a todos.

Ahora existen numerosos sitios que ofrecen plantillas (temas en WordPress) de calidad y gratuitas, también desde el dashboard de WordPress puedes obtener muchos temas rápidamente y gratis e instalarlos en tu web con apenas uno o dos clics ...luego toca adaptarlos, peor nada que no hagas sin necesidad de ser desarrollador.

Escoge temas que realmente cubran todos los campos o apartados que necesitas para tu web, que pasen por procesos de actualizaciones regulares, que sean fluidos (Responsive Web Design) de manera que se adapten correctamente a cualquier dispositivo en el que tu web se muestre.

Los temas comerciales son una apuesta importante que no debes dejar de lado pues existen buenos desarrolladores que publican regularmente temas de calidad que cumplen muy bien con los requisitos necesarios de usabilidad, accesibilidad, SEO y además son elegantes.

Hay temas que requieren el uso de un framework para funcionar pero que en ocasiones sobrecargan innecesariamente tu instalación web. estudia bien si realmente necesitas un tema de largo recorrido, con muchos elementos visuales y de complejas configuraciones, es posible que al final acabes solamente utilizando un 20% de todas las funciones que el tema incorpora.

Utilizar temas pensados para proyectos grandes en pequeños sitios webs es un error que con el tiempo acabas pagando, pues conviertes un núcleo ligero en un tren de mercancías con numerosos vagones "sin nada útil que aportar" que acabas teniendo que arrastrar.

Es importante que analices bien las necesidades de tu proyecto y no caigas en la trampa de mostrar cuanta más información, módulos, widgets, etc... mejor, es mejor optar por un enfoque minimalista si quieres que tu web sea rápida.

 

Usar plugins ¡pero solo los necesarios!

Soy fan de los plugins ¡son buenos, son necesarios! y solo un purista te dirá que no debes usarlos basado en su teoría de que usar funciones y otras forma de implementar acciones en WordPress es más viable que delegar esto en desarrolladores externos (los creadores de plugins).

Eso sí, hay que tener conciencia de que instalar plugins es como instalar Apps en tu móvil, ni todas son buenas, la mayoría posiblemente las utilices una vez o nunca tras instalarlas y muchas de ellas posiblemente acabarán comiéndose el espacio de tu dispositivo, la memoria disponible de ejecución y serán como un árbol de navidad lleno de cosas que solo lucen.

Los plugins para utilizarlos deben tener un cometido, cumplir una función que de otra manera no puedes realizar, aportar características nuevas a las que el núcleo de WordPress por defecto incorpora, de lo contrario serán bonitas luces de navidad en tu proyecto web.

Hay plugins que son necesarios (de caching, backups, optimización), también hay plugins para construir contenidos de forma diferente, para relacionarte con tus lectores, clientes o usuarios y otros para rellenar (si te es posible huye de estos últimos).

Los plugins por si solos no necesariamente ralentizan la carga de tu web, eso es una creencia muy extendida que no siempre está debidamente argumentada y que sólo mediante pruebas de benchmarking se puede contestar adecuadamente.

Algunos simplemente entran en conflicto con otros porque disputan funcionalidades similares, otros porque están mal programados o tienen código que no está muy depurado y acaba generando errores 500 en conjunción con otros plugins o determinados temas, pero ni son todos los plugins y tampoco es el escenario habitual.

La máxima que debe imperar en el uso de plugins es:

 Si no lo necesitas ¡desinstálalo!
 

Gestionar el caching con WP Super Cache

Este es uno de los puntos fuertes de la aceleración de WordPress, los tiempos de carga, que se mejoran al cachear contenidos, principalmente estáticos, de tu web y hacer que no sea necesario pedírselos al servidor donde se aloja la web constantemente, o que este devuelva resultados cacheados a peticiones recurrentes de información de tu web.

Plugins como WP Super Cache te ayudan a cachear contenidos de manera muy sencilla, rápida y con resultados inmediatos.

 En Webempresa ofrecemos un servicio de Caché a nivel de servidor que aún acelera más la carga.

WP Super Cache

 

Optimizar las imágenes y ajustar su tamaño

Recuerdo cuando los móviles hacían fotos que pesaban 1 MB y eso nos parecía una exageración. Hoy día el que más o el que menos hace fotos de 16MB con resoluciones de 5312 x 2988 (16:9) ¡sin despeinarse! ...y eso mi querid@ amig@ es una barbaridad en términos de espacio.

En este caso que te cuento, lo más importante primero sería ajustar el tamaño de la imagen antes de subirla. La imagen de 5312 píxeles de ancho no cabe ni en un monitor 4K, tendrías que hacer muchos scrolls para visualizarla, habitualmente estas imágenes se muestran reescaladas mediante los atributos width y height de la etiqueta img, pero imagina el absurdo de cargar una imagen de 16MB cuando realmente podrías escalarla a su tamaño normal, pasando a ocupar por ejemplo 500KB. Este paso es el más importante. Luego asegúrate de que la imagen está optimizada, por que podrías hacerla pasar de 500Kb a 200KB con una buena optimización.

El espacio es "limitado", eso es un hecho, y como tal los servidores modernos, que trabajen con discos SSD, tendrás capacidades de almacenamiento limitadas, por lo que tu cuenta de Hosting, te guste o no, tendrá un espacio físico determinado (aunque te hayan vendido lo contrario).

Pues basándome en ese espacio finito, y teorizando con un Hosting de 2GB (por ejemplo) si tienes una única instalación de WordPress con plugins, un tema más o menos complejo (con sus correspondientes imágenes) y una Biblioteca de Medios que almacene contenidos de la misma imagen en varios formatos, digamos que con 100 imágenes (algo muy normalito hoy día) que subas de 16 MB hechas con tu móvil a tu Hosting estamos hablando de 1,6GB ocupados solo en imágenes mal optimizadas.

Optimizar las imágenes antes de subirlas a WordPress, a tu Biblioteca de medios, o por medio del plugin de sliders, productos de WooCommerce, etc., es tan importante o más que centrarse en minificar o comprimir CSS por ejemplo.

De qué te sirve centrarte en detalles como que el JavaScript se ejecute al final de la carga de la página si luego la misma página carga 5 o 10 imágenes de 16 MB cada una ralentizando la carga de la misma.

En Webempresa nuestros clientes cuenta con una herramienta gratuita, accesible desde su Área de Cliente, llamada ImageOptimizer que les permite con un par de clic optimizar TODAS las imágenes de su Hosting, las que han subido a la Biblioteca, las que usa el tema instalado activo y los demás temas instalados "desactivados" y otras imágenes que se encuentren en el espacio del cliente en el Hosting.

Conoce el Optimizador de Imágenes de Webempresa ¡más a fondo!
Lectura recomendada:  

Optimizar la base de datos

Este es otro de los aspectos del mantenimiento de WordPress que los usuarios más habitualmente pasan por alto, realizar un mantenimiento regular de los registros de la base de datos en uso, ¿que quiere decir esto? ..básicamente que la mayoría se centran en trabajar con su web y dejan el mantenimiento de los registros generados por comentarios, plugins, pingbacks, etc., para un momento futuro que muchas veces no llega.

La base de datos va engordando y llega un momento en que las consultas que se realizan son más lentas porque la petición tarda más tiempo en completarse al tener que filtrar más datos de registros de tablas en la base de datos hasta encontrar el dato solicitado.

Optimizar la base de datos es tan importante como realizar copias de seguridad regularmente, hay que hacerlo frecuentemente, por sanidad de las tablas y como medida para mejorar los tiempos de carga de la web.

Plugins como WP-Optimize hacen que esta tarea sea rápida y sencilla de llevar a cabo aún por el más neófito de los usuarios.

 

Mejorar la carga de JavaScript y CSS

Los espacios en blanco de tu web, los comentarios, líneas en blanco y cualquier cosa redundante en tu código sin un objetivo específico es inservible para un servidor y contribuye a aumentar el espacio ocupado y los tiempos de consulta de registros.

Los ficheros estáticos de Hojas de Estilo en Cascada (CSS) o JavaScript se sirven directamente desde Nginx (servidor web similar a Apache), por lo que habilitas la compresión GZip desde tu Panel de Hosting (cPanel) esta no será efectiva para estos ficheros, ya que sólo se aplica a los ficheros servidos por Apache.

Cuando se utiliza Nginx como proxy inverso las opciones de plugins como WP Performance Score Booster u otros similares pueden no afectar a algún archivo JS o CSS.

Si quieres gestionar este tipo de compresión en WordPress, sin hacerlo en el Hosting, puedes añadir el siguiente código en tu archivo .htaccess:

## Habilitar compresión para WordPress
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
AddOutputFilterByType DEFLATE image/svg+xml .svg .svgz
</IfModule>
 

Es importante también asegurate que permites el indexado a Google y otros bots de indexado en tu archivo robots.txt de estos archivos añadiendo lo siguiente:

User-Agent: Googlebot
Allow: /*.css$
Allow: /*.js$

Puedes ver los detalles en la documentación oficial de Google PageSpeed Insights.

Para habilitar la compresión GZip en WP sin editar el archivo htaccess ni instalar plugins, puedes hacerlo a través de las opciones del Panel de Administración de WordPress.

Estas opciones se encuentran ocultas, por lo que tienes que seguir estos pasos para ver el campo a cambiar:

  1. Accede a tu panel de administrador de WordPress (dashboard) y en la barra de direcciones veras: http://tu_dominio.com/wp-admin/
  2. Agrega option.php dejando la URL de esta forma: http://tu_dominio.com/wp-admin/options.php
  3. Busca la palabra Gzip, que se encuentra dentro de las opciones y verás un campo con valor cero que tendrás que cambiar a valor uno 1.
  4. Guarda los cambios.

Es importante que realices una copia de seguridad antes de proceder con estos cambios.

Los detalles te los cuento en este artículo:

 

Medir, medir, medir...

Esa es la palabra mágica y alcanzar el nirvana de la velocidad de carga pasa necesariamente por invertir mucho tiempo en análisis de carga, y no solo con una herramienta, ya que tener un contraste es básico para centrarte en lo importante y no obcecarse con detalles de determinada herramienta de medición de tiempos.

Las siguientes herramientas de análisis de velocidad de carga deberían formar parte de tu trabajo de campo en la aceleración de WP:

¿Hay otras?, sí, pero estas son las más conocidas y las que utilizan la mayoría de usuarios de WordPress que quieren mejorar los tiempos de carga.

 

Conclusiones

La seguridad de un sitio web es muy importante, que tenga un buen SEO on-page es fundamental para que tu sitio posicione mejor y que Google y otros buscadores lo vean con buenos ojos, la estética es otro factor que el usuario final tiene en cuenta, pero si hay un punto que incide directamente en el usuario y su grado de aceptación de tu sitio web ese es la velocidad de carga.

Dedicar tiempo y esfuerzo a conseguir que tu web pase de ser "una tortuga" a competir en la maratón de webs que se disputen los usuarios no solo por sus contenidos sino por lo rápido que los sirven, es la acción más importante a la que deberías dedicar todos tus esfuerzos tras construir tu sitio con WordPress.

Al final se trata de enamorar a Google (a sus bots) y a los usuarios que podrán acabar convirtiéndose en habituales de tus contenidos, compradores de tus productos o consumidores de los servicios que ofreces.

Antes de concluir me gustaría dejarte un plugin como referencia para que lo pruebes, analices los resultados que tu web obtiene tras su uso y evalúes si te sirve de ayuda para mejorar la velocidad de carga de tu web.


WP SpeedUp

 

La velocidad de carga no es algo que preocupa solamente a Google, otras empresas del sector como Microsoft, AOL, Bing, Alexa, reconocen lo importante que es tener un sitio web que cargue rápido.

...hay muchos más puntos a tener en cuenta para mejorar la carga de un sitio web, como la reducción del número de peticiones https, el reemplazo de código PHP por HTML, la precarga de imágenes, texto, etc., y todos ellos también forman parte del proceso de mejora de una web.

Explicarlos todos daría para varios artículos, por lo que decir que este artículo contiene todas las pautas que debes considerar sería una osadía, mejor diré que es el principio de otros artículos que se pueden escribir sobre este apasionante capítulo dedicado a la optimización de carga de WordPress.

 

¿Cómo reaccionas tú cuando visitas un sitio web lento? ...esa es la experiencia que los que visitan tu web se llevan si tu no te preocupas de mejorar la carga de WordPress.

     

¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+