Cómo hacer mantenimiento WordPress #4: Mejorar el Rendimiento

Ahora que ya hemos visto cómo hacer copias de seguridad de nuestra web, cómo mantenerla actualizada y cómo mejorar la seguridad. Vamos a otro punto importante en el mantenimiento de nuestra página web hecha en WordPress: Cómo optimizar nuestra web para mejorar su rendimiento.

El tiempo de carga de una web afecta de forma directa a la conversión de la misma. Es por eso que debemos cuidar nuestra web y optimizarla para que la carga sea fluida. Y que la navegación de nuestro usuario sea rápida y sencilla tanto en ordenador como en dispositivos móviles.

Factores del alojamiento web que afectan al rendimiento de nuestro WordPress

El sitio donde tenemos alojada nuestra web afecta al rendimiento de nuestro WordPress de forma directa, ya que según los recursos que tenga nuestro plan de hosting, el tipo de disco duro (los SSD permiten acceder los archivos de forma más rápida y son menos vulnerables) que se utilice y las características de nuestro servidor, variará el tiempo que tarde en cargar nuestra web.

Localización del servidor

El país en el que esté situado el servidor en el que se aloja nuestra web influirá en la distancia que tienen que recorrer los datos entre el servidor y el ordenador del usuario de nuestra web.

Por ejemplo, si nos dirigimos a un público objetivo localizado en España, lo mejor será que el servidor que contratemos esté también en España. O al menos en un país de Europa cercano como Reino Unido o Francia por ejemplo. Ya que si estuviera en América, tardarían más tiempo en transmitirse los datos.

Sin embargo, si nos dirigimos a un público de América, lo mejor será que esté situado en América, aunque nosotros estemos en España. Puede que a nosotros nos tarde algo más en cargar la página, pero a nuestros clientes les cargará más rápido y eso es lo importante.

Servidor

El tipo de servidor en el que alojemos la web también afecta a su rendimiento. En el caso de WordPress, el servidor debe soportar conexión con PHP. Te recomendamos que sea de uno de los siguientes tipos:

Es importante que independientemente del tipo de servidor que utilicemos, esté actualizado a la última versión estable para que sea seguro y fiable.

Si vamos a utilizar un servidor virtual privado propio (VPS), deberemos asegurarnos de mantener al día la versión del servidor y las herramientas que utilicemos en el mismo.

Normalmente contrataremos un plan de hosting con una empresa externa que gestionará por nosotros las versiones. Solo deberemos preocuparnos de que el alojamiento web que contratemos utilice versiones recientes y se mantenga al día.

Por otro lado también es importante que en el servidor que utilicemos dispongamos de las últimas versiones de PHP y de las extensiones PHP necesarias para que WordPress funcione correctamente: bcmath, curl, dom, exif, fileinfo, hash, json, libsodium, mbstring, mysqli, mysqlnd, openssl, pcre y xml.

Base de Datos

Otro punto importante en el servidor son las bases de datos. En el caso de WordPress se suelen utilizar sistemas de bases de datos basados en MySQL.

Normalmente se suele utilizar MySQL, aunque también se pueden utilizar MariaDB y Percona MySQL Server que tienen un rendimiento incluso mejor, aunque la mayoría de los alojamientos web no tienen soporte para estos dos últimos.

Cómo afecta nuestro tema al rendimiento

Cuándo empezamos a utilizar WordPress, solemos instalar y probar varios temas hasta encontrar el que nos gusta a nivel estético, pero no solemos tener en cuenta cómo afectará nuestra elección al rendimiento de la página.

Tenemos a nuestra disposición una gran cantidad de themes gratuitos en el repositorio de WordPress y también existe una gran cantidad de páginas en las que se venden temas de pago o «premium».

Debemos tener cuidado, que un tema sea de pago no significa que sea bueno. Hay muchos themes de pago que tienen un rendimiento pésimo porque incorporan funcionalidades dentro del propio theme.

Una práctica que no se recomienda para el rendimiento y la seguridad, pero que aplican muchas de las páginas de venta de temas más conocidas.

Como por ejemplo ThemeForest (Avada, The7 o Bridge). También hay themes gratuitos que tienen un rendimiento muy bueno como por ejemplo Astra.

Leer también :   5 Claves para trabajar desde casa

Algunos themes tienen una opción gratuita que podemos encontrar en el repositorio y una versión premium con características extra que podemos contratar en la web del desarrollador. Algunos ejemplos serían Astra o GeneratePress.

A la hora de elegir nuestro tema, deberemos ver que aparte de un diseño que nos guste, que no incorpore plugins y CPT dentro del theme.

* Custom Post Types: tipos de publicaciones que no sean los que vienen por defecto con WordPress: Entradas y Páginas.

En el caso de ThemeForest por ejemplo, suelen incorporar en la gran mayoría de temas los plugins Slider Revolution y Visual Composer, herramientas muy poco recomendadas, si me permites el atrevimiento…

hero header placeholder

MANTENIMIENTO WORDPRESS

Ayudamos a empresas y emprendedores a resolver los problemas o necesidades que puedan surgir en sus webs con WordPress

El rendimiento y los plugins

Otra cosa que solemos hacer cuándo empezamos con WordPress es probar varios plugins para ver qué hacen. Lo más recomendable es probar los plugins en una instalación de prueba en lugar de hacerlo en nuestra propia web. Es una buena práctica para evitar que se creen tablas en la base de datos que no se van a utilizar más adelante.

Muchas veces se suele hablar sobre el número de plugins que hay en una instalación y se comenta que no es bueno tener muchos plugins, pero hay algo que deberíamos ver también y es el tamaño de estos plugins y cómo afectan al rendimiento de nuestro WordPress

Puede que estemos usando un plugin demasiado pesado para hacer algo que podríamos hacer con dos líneas de código o con un plugin mucho más sencillo y ligero.

Hay plugins que tienen incorporados varios plugins en su interior. JetPack es uno de ellos. Incluye un buen número de funcionalidades que normalmente irían en varios plugins. Otro ejemplo es Booster for WooCommerce que incorpora más de 100 funcionalidades en un solo plugin. Si activáis estos dos plugins es como si tuvieras más de 100 plugins a la vez aunque solo veas dos.

Algunos son complejos y necesitan una gran cantidad de archivos para funcionar correctamente. Solo deberíamos usarlos en caso de ser necesarios, como por ejemplo WooCommerce, que nos ayuda a crear una tienda online con WordPress. Pero que no tendría sentido utilizar si no vamos a vender productos en nuestra web.

Y por último hay plugins que no están bien optimizados o podrían hacer lo mismo con mucho menos código y cargando menos la página. Como por ejemplo en el caso de Slider Revolution, WpBakery, WPML … (este último lo uso pero la verdad que nos ha dado muchos dolores de cabeza con incompatibilidades).

Si se juntan pueden dar al traste con el rendimiento de nuestra web y para los cuales existen alternativas mucho más ligeras.

Te recomiendo revisar los plugins que tienes instalados y ver cuáles utilizas realmente, cuáles son prescindibles y cuáles se podrían sustituir por opciones más ligeras o mejor optimizadas.

Desinstala los plugins que no vayas a utilizar, deshazte de los que sean prescindibles y si puedes, busca opciones más ligeras para plugins que veas que son bastante pesados o que afectan negativamente al rendimiento de la página.

Para detectar qué plugins cargan más tu página, puedes desactivar todos los plugins e ir activándolos por bloques para comparar los resultados de carga.

Habilitar la compresión Gzip

Una forma de mejorar el rendimiento de nuestro WordPress es habilitar la compresión Gzip de los archivos. De esta forma ocuparán menos y se transmitirán más rápido, afectando positivamente a la velocidad de carga.

Para habilitarla tenemos dos opciones. La primera es añadir este código en el archivo .htaccess debajo del contenido que haya actualmente:

<IfModule mod_deflate.c>
  # Habilitar la compresión para HTML, CSS, JavaScript, Text, XML y fuentes
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Arreglar problemas en navegadores web (solo para versiones muy antiguas)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Y la segunda es utilizar un plugin para ayudarnos a activarla como por ejemplo Enable Gzip Compression. Si tienes la web alojada en Siteground podrías activarla desde el plugin SG Optimizer también.

¿Quieres comprobar si ya tienes habilitada la compresión Gzip en tu web? Puedes comprarlo por ejemplo con esta herramienta.

Optimizar Imágenes

Cuándo creamos nuestra web solemos subir imágenes para que quede más bonita, pero la mayoría de las veces las subimos sin optimizar. Lo cuál ocupa espacio en nuestro alojamiento y además hace que la página tarde más tiempo en cargar.

Leer también :   Modelos de negocio rentables: modelos replicables y escalables

Podemos optimizar las imágenes antes de subirlas con programas de edición de imagen como por ejemplo PhotoShop, que tiene una opción para guardar las imágenes optimizadas para la web y la opción de cambiar el tamaño de la misma.

Otra opción para optimizar las imágenes manualmente de forma individual es utilizar un optimizador online como por ejemplo Image Compressor o Web Resizer.

Pero si prefieres que se gestione automáticamente con un plugin, puedes utilizar Optimizador.io o Smush por ejemplo.

¿Te gusta lo que estás leyendo? ¡Suscríbete!

Caché

Otra de las cosas a tener en cuenta a la hora de mejorar el rendimiento de nuestra web con WordPress es la caché. WordPress genera el contenido de forma dinámica, pero la mayoría de las páginas siempre cargan el mismo contenido y se puede usar una versión simplificada y guardada en caché para que cargue más rápido.

Hay que usar con cuidado la caché. Si no se configura o gestiona de forma correcta, podría darnos problemas con algunas características, como por ejemplo el carrito de compra en el caso de una tienda.

No es recomendable activar la caché en páginas que incluyan registros o pagos para evitar problemas como por ejemplo que un cliente vea el carrito de otro.

Hay varios tipos de caché pero para simplificar vamos a distinguir tres tipos, la caché del navegador, la caché de página y las redes de distribución de contenido (CDN).

Caché del navegador

Esta es la caché que se guarda en el navegador que utiliza el usuario que accede a nuestra web.

Podemos definir cuánto durará esta caché añadiendo el siguiente código debajo del contenido que tengamos en el archivo .htaccess

# Especificar la caducidad de la caché de los diferentes tipos de archivos de nuestra web
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000
 
<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault A2592000
</FilesMatch>
 
<FilesMatch "\.(css)$">
ExpiresDefault A2592000
</FilesMatch>
 
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
ExpiresDefault A2592000
</FilesMatch>
 
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault A2592000
</FilesMatch>
</IfModule>
 
<IfModule mod_headers.c>
  <FilesMatch "\.(txt|xml|js)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
 
  <FilesMatch "\.(css)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
 
  <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
 
  <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
</IfModule>

Otra opción es añadir este otro código, que quizás te resulte más intuitivo (no añadas los dos, solo uno de ellos):

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg «access plus 60 days»
ExpiresByType image/png «access plus 60 days»
ExpiresByType image/gif «access plus 60 days»
ExpiresByType image/jpeg «access plus 60 days»
ExpiresByType text/css «access plus 1 days»
ExpiresByType image/x-icon «access plus 1 month»
ExpiresByType application/pdf «access plus 1 month»
ExpiresByType audio/x-wav «access plus 1 month»
ExpiresByType audio/mpeg «access plus 1 month»
ExpiresByType video/mpeg «access plus 1 month»
ExpiresByType video/mp4 «access plus 1 month»
ExpiresByType video/quicktime «access plus 1 month»
ExpiresByType video/x-ms-wmv «access plus 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType text/javascript «access plus 1 week»
ExpiresByType application/x-javascript «access plus 1 week»
ExpiresByType application/javascript «access plus 1 week»
</IfModule>

Caché de página

La caché de página es la que se guarda en nuestro servidor para agilizar la carga de las páginas. Se suele gestionar con un plugin, aunque en algunos casos puede hacerse desde el propio servidor. Como por ejemplo en el caso de Siteground que aunque se gestiona desde el plugin SG Optimizer, se activa a nivel de servidor y no a nivel de plugin. Otros hostings como WebEmpresa disponen de opciones similares también (Magic Caché en este caso).

Si vuestro alojamiento web no dispone de opción para activar y gestionar caché a nivel de servidor, tendríais la opción de usar un plugin de caché.

Uno de los plugins de caché más conocidos es W3 Total Caché, pero es un plugin muy pesado y difícil de configurar que no te recomiendo. Tienes opciones mucho más ligeras y gratuitas como por ejemplo WP Super Cache o LiteSpeed Cache. También tienes opciones de pago bastante completas pero más ligeras y fáciles de configurar como por ejemplo WP Rocket.

De todas formas es preferible optimizar bien la página en otros aspectos y dejar la opción de habilitar la caché de página solo en el caso de webs con tráfico masivo, muy pesadas y/o que no tengan otra opción posible de optimización.

Redes de distribución de contenidos (CDN)

Las redes de distribución de contenidos, más conocidas como CDN, son redes de ordenadores con copias de datos. Están localizadas en varios puntos de una red para reducir la latencia y los tiempos de respuesta cuándo se sirve contenido a diferentes zonas geográficas.

Si tu web va a enfocarse a públicos que se encuentren en diferentes localizaciones geográficas que estén lejos entre sí, como por ejemplo Latinoamérica y España o Norteamérica y China, podría ser interesante revisar la opción de habilitar una CDN.

Leer también :   Crear una marca personal

Para simplificarlo, podemos pensar que una CDN está compuesta por varias capas de caché que se almacenan en diferentes puntos del planeta y que, dependiendo de la zona desde la que accede el usuario, se transmite la página almacenada desde un punto o desde otro.

Una de las redes de distribución de contenido más conocida es Cloudflare, que tiene un plugin para integrarse con WordPress: Cloudflare.

Combinar y minimizar CSS y JavaScript

Normalmente nuestra web carga varios archivos CSS y JavaScript separados y con anotaciones y espacios por el medio. Lo que que supone hacer varias consultas y transferencias diferentes para llegar a cargar los estilos y efectos de nuestra página.

Una opción para reducir el número de consultas es combinar los archivos CSS por un lado y los archivos JavaScript por otro, de forma que solo se cargue uno de cada (se combinan y guardan en un solo archivo). Lo minimizamos para eliminar todos los comentarios y espacios que tengan los archivos.

Existen varios plugins para activar tanto la combinación como la minificación de archivos CSS y JavaScript. Uno de los más conocidos es Autoptimize que nos permite también optimizar el código HTML:

Ajustes de Autoptimize

Por lo general podemos optimizar el código HTML sin problema, pero en el caso de JavaScript hay que tener cuidado. Ya que puede hacer que dejen de funcionar correctamente algunas opciones como registros o pagos. Por lo que o bien excluimos los archivos que correspondan o mejor no activar la optimización de JavaScript para evitar problemas.

En el caso del CSS, hay que revisar también que funcione todo bien al activar la optimización y minificación. Ya que algunas opciones nos pueden dar problemas con el theme o con algunos plugins.

Optimizar la base de datos

Podemos utilizar algunos plugins para ayudarnos a mantener la base de datos limpia y optimizada. Aunque antes de utilizarlos siempre es recomendable hacer una copia de seguridad por si algo se tuerce.

Dos de los plugins más conocidos para limpiar y optimizar la base de datos de nuestro WordPress son: WP Sweep, que funciona muy bien y es bastante ligero. Y WP Optimize, que también dispone de otras opciones de optimización como por ejemplo comprimir imágenes y habilitar caché de nuestras páginas.

Más cosas a tener en cuenta

Además de todo lo que hemos visto. Hay más cosas que añadimos en el contenido de la página que ralentiza su caga. Saber detectarlos y corregirlos, ayudará mucho a mejorar el rendimiento del sitio web en WordPress.

Algunas de las cosas que más cargan la página son por ejemplo los Sliders o carruseles.

Hay varios experimentos que demuestran que aparte de cargar la página, los sliders no ayudan a la conversión. Lo que lo mejor es olvidarnos de ellos y no utilizarlos.

Otra de las cosas que carga la página innecesariamente son las animaciones dinámicas. Normalmente hechas con JavaScript. Nos permiten mostrar transiciones y movimiento a la hora de cargar algunos elementos como imágenes, vídeos o secciones de nuestra web.

Es mejor evitar las animaciones y usar solo CSS para la apariencia, aplicando diferentes estilos a elementos al posarnos encima con el ratón, al hacer click o para diferenciar si ya se ha visitado un enlace por ejemplo. Estos «efectos» son sencillos y no cargan la página.

Conclusión

  • Evita elementos innecesarios que carguen la web.
  • Utiliza un theme optimizado.
  • Revisa tus plugins para quitar los que no utilices o no te hagan falta.
  • Sustituye si es posible los plugins que sean muy pesados o complejos por plugins ligeros.
  • Habilita gzip.
  • Optimiza tus imágenes.
  • Mantén optimizada tu base de datos.
  • Especifica la caché de tu navegador para mejorar el rendimiento de tu página web.

Puedes analizar el rendimiento de tu web con herramientas como GTMetrix, Pingdom o Page Speed Insights.

Resultados de GTMetrix para destaca.es

No te obsesiones con los resultados, pero estas herramientas te pueden servir de guía para mejorar la carga de tu web 😉

Servicio Mantenimiento WordPress

¿Cruzas los dedos cada vez que actualizas la versión de WordPress? ¿Se te acumulan los avisos de actualizaciones de plugins? ¿Pierdes horas intentando realizar cambios y mejoras en tu web?

Necesitas que alguien se ocupe de ella de forma continuada, cuidándola y asegurándose de que funcione 24 horas al día sin sufrir contratiempos.

En Destaca ayudamos a emprendedores o empresas que tienen una web en WorPress pero no saben o no quieren perder tiempo con temas técnicos, de actualización, configuración y mantenimiento.

Céntrate en hacer crecer tu proyecto con la seguridad de tener un partner tecnológico acompañándote cada día.

Empieza desde 39€/mes o solicita un presupuesto personalizado 😉

Artículos Relacionados

seguridad wordpress

copias de seguridad wordpress

Deja un comentario

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

Ir arriba
Abrir chat