La velocidad de carga es uno de los factores claves del posicionamiento web.
A lo largo de este artículo veremos diferentes formas de mejorar la velocidad de carga de WordPress.
¿Cómo mejorar la velocidad de carga de mi Wordpress?
Comentaremos algunas acciones importantes que nos permitirán optimizar la velocidad de carga de Wordpress.
Nuestro principal objetivo debe ser el de reducir el número de peticiones HTTP y reducir el tamaño de nuestra página.
Hagamos que el servidor trabaje menos y que el usuario no tenga que descargar datos innecesarios y podamos por lo tanto mejorar la experiencia de usuario y el posicionamiento web.
Para google algo realmente importante es el TTFB, es decir el tiempo que transcurre hasta que el navegador del usuario recibe el primer byte.
Para mejorar este parámetro es importante no sobrecargar al servidor, reducir el peso de nuestro contenido para que éste tarde menos en llegar hasta el usuario y mantener optimizada la base de datos.
Veamos los valores ideales de TTFB, Peticiones, Peso y Tiempo de carga:
| TTFB | Pet. | Peso | T.Carga |
| <100ms | <40 | <1MB | <3s |
¡Haz que tu WordPress vuele como un cohete! ?
Herramientas análisis de velocidad
Existen diferentes herramientas de análisis de velocidad, aunque unas nos darán mayor información, es decir nos ayudarán más que otras (bueno, esto va un poco a gustos). Seguro que conoces PageSpeed de Google, es una herramienta a tener en cuenta siendo de quien es, pero, te aconsejamos probar también:
| ☝? Antes de empezar a efectuar cambios realiza una copia de seguridad y analiza tu sitio web. |
¿Qué nos puede decir PageSpeed de nuestro Wordpress?
Empezaremos este artículo comentando algunas de las pegas que nos puede sacar PageSpeed, intentaremos solucionarlas y conseguir que Google nos quiera un poquito más ?
*Por cierto, a veces me vengo arriba poniendo emojis y tengo que deciros que también pesan, que también hay que cargarlos...
- Reducir el tiempo de respuesta del servidor: este es sin lugar a dudas un factor clave para el posicionamiento SEO, nuestro principal objetivo. Para poder obtener un tiempo de respuesta óptimo deberemos contar con un hosting medianamente bueno ¿Tienes un hosting de calidad?
No hace falta que tengas un hosting caro, pero sí que tenga una calidad aceptable, dos hostings que sin lugar a dudas os recomendamos para WordPress son Lucushost y Webempresa. Y si buscas algo barato y que funcione bien con Wordpress Sered es una buena opción, además con el código 10ANUALBTS tendrás un 10% de descuento.
Otros temas a tener en cuenta: utilizar una plantilla que pese poco, no instalar muchos plugins (eliminar los que no usemos), hacer uso de algún plugin de caché, evitar o reducir consultas externas, utilizar últimas versiones de PHP, impedir hotlink etc. Es decir, hacer trabajar menos a tu servidor, reducir el número de peticiones, algunas de las cosas que veremos a lo largo de este artículo, mejorarán el tiempo de respuesta de tu servidor. - Reduce el número de solicitudes y el tamaño de transferencia: con este aviso vemos claramente que lo estamos haciendo mal, tenemos demasiadas solicitudes y seguramente, demasiadas imágenes pesadas. Es lógico que el tiempo de respuesta de nuestro servidor sea elevado, le estamos haciendo trabajar mucho y más si se trata de un hosting compartido. Pues lo dicho en el punto anterior.
- Elimina los recursos que bloqueen el renderizado ¿Cómo?: lo que nos está diciendo es que estamos sirviendo archivos JavaScript o CSS al inicio del código que podrían esperar.
Como en toda lectura, se lee de arriba a abajo y si se interrumpe esa lectura para descargar y procesar archivos, estamos realizando una pausa, impidiendo que la parte visible de nuestra página web se cargue primero (primer renderizado), lo que hace que nuestro tiempo de carga sea mayor. Las principales opciones para eliminar los recursos que bloquean el primer renderizado, son haciendo uso de Async o Defer, como veremos más adelante. - Pospón la carga de imágenes que no aparecen en pantalla: en este caso, google te dice nuevamente que te centres en el primer renderizado, es decir, en lo primero que verá el usuario al acceder a tu página.
No tiene sentido que cargues todas las imágenes de golpe, no solo por una cuestión de velocidad, sino también por una cuestión de transferencia de datos.
Quizás el usuario no llegue a ver las imágenes que hay al final de tu publiación ¿Para qué se las vas a hacer descargar? Como veremos, esto se soluciona con la carga diferida de imágenes. - Siguiendo con las imágenes, nos puede dar otras sugerencias como el hecho de usar formatos de próxima generación (ojo con la compatibilidad de navegadores), utilizar el tamaño adecuado (suele ser común usar imágenes más grandes de lo que realmente necesitamos) y codificar las imágenes de forma eficaz (algo vital para la velocidad de carga, comprimirlas, reducir el peso)
- Minificar archivos CSS, Javascript o HTML. Para minificar tenemos que eliminar espacios y caracteres innecesarios. Se puede hacer de forma automática, también puede resultar interesante en algunas ocasiones combinar archivos.
Bueno, estas son algunas de las sugerencias que nos daría Google para ayudarnos a que nuestra página cargue más rápido.
Con lo citado a lo largo de este artículo intentaremos solucionar estos y otros problemas para mejorar la velocidad de carga de Wordpress, y la experiencia de usuario.
Es interesante que a medida que apliquéis cambios vayáis analizando de nuevo la página para ver cómo mejora.
En cuanto a la caché, existen muchos plugins de renombre, algunos de pago y otros gratuitos de forma completa o parcial. Pero también existe alguno no tan conocido, es interesante hacer pruebas, ya que dependiendo de la plantilla los resultados pueden variar bastante.
No os obsesionéis con la puntuación, en algunas ocasiones no es coherente. Optimizar principalmente para mejorar la experiencia del usuario, su comportamiento en vuestro sitio web es el que hará que vuestra página suba o baje puestos en las SERPs de Google.
Elegir un Hosting de Calidad
La verdad es que cuando nos hablan de este tema, quizás pueda llegar a sonar repetitivo... Y podemos llegar a pensar que un hosting de calidad es sinónimo de un hosting caro. Nada más lejos, como podrás comprobar en la sección elegir hosting, te hablamos de opciones de todo tipo, para todos los bolsillos, de hecho, antes te hemos citado varias opciones interesantes que deberías contemplar si aún no tienes hosting o si estás pensando en cambiar.
Puede dar pereza, pero a veces cambiar es el mejor paso.
Nosotros tenemos en uno de nuestros proyectos un hosting de ? no sufrimos muchas caídas (por esa parte está bien), pero resulta complicado conseguir mejorar la experiencia de usuario, mejorar la velocidad de carga del sitio.
Es un sitio que fluctúa entre 1000 y 2000 visitas diarias. Ahora bien, a pesar de ser un sector con mucha competencia hemos logrado mantenerlo siempre en primeras posiciones aunque cada vez más, google nos empieza a resaltar que necesitamos un cambio y vemos como otros escalan posiciones con fuerza... Y es que con google, todo suma puntos...
Algo que sí deberemos valorar es el hecho de que el hosting se ecuentre cerca del público objetivo, es decir, si tu página está pensada para usuarios de España, lo ideal es que ese hosting se encuentre en España. Por otro lado, si recibes muchas visitas de diferentes partes del mundo, siempre te puedes llegar a plantear el uso de CDN.
Elegir una plantilla ligera
Os puede sonar absurdo, pero cuando voy a elegir una plantilla, una de las cosas que hago es hacer un test de velocidad en su demo. Así puedo ver la cantidad de mierda que cargan ? en muchas ocasiones uso plantillas gratuitas (las típicas que abajo tienen el enlace del autor), mucha gente habla de que esto afecta al SEO, bueno, hace años cuando hacíamos una web para alguien, casi siempre nos poníamos un enlace en el pie de página de estas, no creo que tenga mayor importancia.
Ahora bien, para proyectos más serios, sí que intentamos buscar alguna buena opción de pago. El problema es que normalmente, salvo excepciones, tienes que estar pagando cada año o cada "x" tiempo para mantenerla actualizada.
Si aún no has elegido un tema (plantilla) para tu Wordpress, te recomendamos echar un vistazo este articulo: las mejores plantillas de WordPress.
El tema está en elegir un diseño ligero, que no tenga multitud de archivos CSS y JavaScript.
Estar pendientes de las actualizaciones
Es importante mantener nuestro Wordpress, sus plantillas y plugins actualizados. Esto nos evitará muchos problemas, sobre todo a nivel de seguridad.
Además es posible que sea necesario contar con las últimas versiones para poder estar a la última en cuanto a la versión de PHP de nuestro servidor.
Y es que de una versión antigua a una nueva de PHP, la diferencia en cuanto a velocidad es bastante significativa.
Desde el panel de tu hosting podrás ver y elegir la versión de PHP que quieras, pero si no mantienes tu Wordpress y sus complementos actualizados, cabe la posibilidad de que tu sitio se rompa al elegir últimas versiones (vuelves a cambiarla hasta que veas qué pasa y ya está).
Habilitar compresión en Wordpress
La compresión Gzip nos permitirá reducir considerablemente el tamaño de los archivos a enviar. Se puede activar de varias formas, mediante PHP (desde la configuración oculta de Wordpress accediendo desde tuweb.com/wp-admin/options.php o mediante un plugin), también puedes activar la compresión mediante Apache, para ello, simplemente deberás insertar uno de los siguientes códigos en tu .htaccess
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Otra alternativa sería habilitar la compresión deflate, también desde el .htaccess
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/shtml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>Actualmente se suele hacer uso de este segundo código.
Al aplicar alguno de estos códigos, cuando el usuario vaya a acceder a nuestro Wordpress, nuestro Servidor Apache hará que el navegador del usuario reciba la información comprimida, de tal forma que se encargará de descomprimirla y mostrarla.
Reducimos significtivamente el tamaño de la información a enviar (tamaño de transferencia). Es decir, es como si en lugar de viajar en avión con 4 maletas, lo hiciésemos solo con el equipaje de mano.
Por lo que es un beneficio grande, tanto para nosotros como para aquellos usuarios de dispositivos móviles que están navegando con datos.
Por un lado ahorramos ancho de banda, los ficheros ocupan menos y debido a esto, llegan antes y además el usuario gasta menos datos ¿lógico no? No es lo mismo descargarse un arhivo de 3Mb que uno de 1Mb, el de menor tamaño se descargará antes.
Otra de las cosas importantes a tener en cuenta es que Gzip es compatible con la mayoría de navegadores y comprime ficheros JavaScript, CSS, HTML, PHP, JPG, GIF, entre otros.
Habilitando la compresión conseguiremos ahorrar incluso más del 80% del ancho de banda, mejorará el proceso de carga de nuestro wordpress y por lo tanto, nuestro posicionamiento SEO. Aunque por otro lado, haremos trabajar más a nuestro servidor.
Activar caché del navegador
Activando la caché del navegador conseguiremos que los usuarios asiduos tengan una mayor fluidez al navegar por aquellas páginas que ya han visto, esto es debido a que la información que descarguen de nuestro sitio, será almacenada por su navegador y por lo tanto no tendrán que volver a descargarla.
Generalmente en los hostings compartidos la caché de navegador ya se encuentra activada, pero de no ser así o si utilizas un servidor dedicado, un VPS o cloud, simplemente deberás insertar el código citado a continuación en tu .htaccess modificando el tiempo de caché que desees para cada tipo de fichero.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 5 months"
ExpiresByType image/png "access plus 5 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-icon "access plus 3 months"
</IfModule>
Para especificar la caché de cada tipo de ficheros, puedes usar: horas (hours), días (days), meses (month/months) o años (years).
Minificación de archivos en Wordpress
La minificación de archivos consiste en eliminar espacios y/o caracteres innecesarios de nuestro código. Se puede llevar a cabo de forma completamente manual, con ayuda de alguna herramienta online o mediante el uso de un plugin (muchos plugins de caché incluyen esta función)
Si has analizado tu Wordpress antes de realizar ajustes para mejorar su velocidad, seguramente te haya indicado que debas minificar JavaScript, HTML o CSS.
Si usas GTMetrix para analizar tu página (una de las herramientas citadas al inicio de esta publicación), podrás descargar desde ella los archivos ya optimizados y simplemente deberías reemplazarlos por los de tu servidor (recuerda relizar copia de seguridad). Otra opción sería haciendo uso de una herramienta online como minifycode.com
En Wordpress existen plugins que nos permitirán llevar a cabo esta función, pero seguro que harás uso de un plugin de caché y la mayoría cuentan con ella.
Optimización de imágenes & Carga diferida
Siempre que utilicéis muchas imágenes, deberéis pensar especialmente en los dispositivos móviles que funcionan con datos. Os explico lo que yo hago:
- Si editas o preparas tus imágenes con photoshop o con algún otro programa similar, es posible que tengas la opción de guardar como página web, bien este será el primer paso.
Te aconsejo que si la imagen no tiene transparencias, uses JPG y si tiene, uses PNG. Existen formatos más ligeros como WEBP o JPEG-XR pero no son compatibles con todos los navegadores. - Una vez tengas las imágenes, haremos uso de una herramienta que nos ayude a comprimirlas al máximo. Yo suelo usar herramientas online como por ejemplo tinypng o compressor. Existen opciones de escritorio, quizás en el listado de herramientas os cite alguna, tanto para comprimir como para reducir las dimensiones.
- Bien, llegados a este punto yo ya utilizo las fotografías, las subo y publico. Pero, si utilizo muchas aún le doy una vuelta de rosca más, solemos usar las mismas imágenes para PC que para dispositivos móviles, pero a la hora de crearlas, las creamos pensando en su resolución en un ordenador ¿Pero realmente las necesitamos tan grandes?
- Yo, en algunas ocasiones, tengo la publicación creada y abierta, introduzco la URL en webpagetest. Una de las herramientas que os hemos citado al inicio de esta publicación.
En esta ocasión la vamos a utilizar para sacar una versión mejorada de nuetras imágenes. Así que introduce la URL a analizar, cuando el análisis se complete pulsa sobre análisis de imagen.
Te mostrará algunas de tus imágenes en diferentes formatos y posiblemente te haya reducido el tamaño de las imágenes al considerar que es excesivo, con lo cual también habrá reducido el peso.
Si decides usar estas imágenes, descárgalas, pero haz copia de las originales por si...
Tendemos a utilizar formatos más grandes de los que realmente necesitamos, por lo que si te propone una reducción del tamaño, seguramente se verá igual de bien.
Unas imágenes bien optimizadas suponen una liberación de carga para nuestro servidor y para el usuario. Y por índole, un considerable aumento de la velocidad de carga de Wordpress.
En Wordpress podrás encontrar interesantes plugins para optimizar imágenes de forma automática o semiautomática, de hecho algunos de los plugins de caché que citaremos después incluyen esta función.
También es interesante tener en cuenta la carga diferida de imágenes (lazy loading).
La carga diferida lo que hace es que las imágenes y/o vídeos se vayan cargando a medida que el usuario haga scroll en lugar de cargar de golpe.
Si el usuario no llega a hacer scroll hasta abajo del todo, ¿para que cargar los archivos multimedia que se encuentren allí? Esta función también viene incluida en algunos plugins de caché, o bien puedes hacer uso de plugins de Wordpress para carga diferida.
Si necesitas insertar vídeos en tus publicaciones, házlo desde plataformas de terceros, como Youtube. Los vídeos pesan mucho como para cargarlos desde tu servidor. Además creando contenido en paralelo en Youtube, no solo conseguirás liberar tu servidor, si no que llegarás a mucha más gente, conseguirás buenos backlinks y harás que tu posicionamiento SEO mejore.
Eliminar plugins que no sean necesarios
¿Realmente necesitas todos esos plugins? Quedan bonitos y en ocasiones nos puede resultar de interés tener plugins para absolutamente todo.
Pero... ¿Somos conscientes de su peso y de los recursos que requieren? Por ejemplo, el otro día quité un plugin popular de creación de formularios en uno de mis proyectos en Wordpress, aluciné como subió la puntuación en diversas páginas de análisis de velocidad.
Ese plugin cargaba una cantidad de ? mierda abismal en toda nuestra web, no solo en la zona en la que se encontraba, y como es lógico nos consumía recursos y era trabajo añadido para nuestro servidor. Sí, hay forma de evitar que los plugins hagan esto, pero preferí sacarlo de ahí...
¿Necesitaba tener un formulario de contacto en ese proyecto? Pues la verdad es que no, de ser así habría buscado alternativa, quien quiera contactar tiene el email o las redes tal y como se cita.
Este es solo un ejemplo, a lo que me vengo a referir es que uses el mínimo de plugins posibles para hacer que el volumen de tu sitio sea menor y que no estés consumiendo recursos tontamente.
Ahora bien, si eliminas algún plugin, recuerda limpiar la base de datos. ??
Optimizar base de datos
Suele ser habitual que nuestra base de datos contenga residuos o información que no vamos a utilizar.
Limpiarla es sencilla, podremos hacerlo con algún plugin o desde nuestro hosting en 5 sencillos pasos:
- Accede a tu hosting
- Accede a phpMyAdmin
- Abre tu base de datos
- Selecciona toda la tabla
- En el desplegable de abajo selecciona "optimizar la tabla"
Verás como de forma instantánea te limpiará la base de datos.
Si no te atreves a realizar esta acción, siempre puedes hacer uso de algún plugin, abajo del todo, os citaremos plugins de lo más interesantes.
Evitar errores 404
Los errores 404 afectan tanto a nuestro posicionamiento web como a la velocidad de carga de nuestro Wordpress.
Pueden ser dados por múltiples factores, utiliza una herramienta o plugin para detectarlos y mantener tu sitio sano.
Puedes comprobar si tienes enlaces rotos desde Search Console, de todas formas más abajo te dejaremos alguna herramienta.
Desactivar Pingbacks y Trackbacks
Los Trackbacks son una forma de notificar a otros blogs de Wordpress que los has vinculado, se les notificará mediante Pingbacks. Puedes leer más sobre este tema aquí.
Desactivar estas funciones es muy sencillo, simplemente deberemos ir a Ajustes/Comentarios y desactivar la casilla:
"Permitir avisos de enlaces de otros blogs (pingbacks y trackbacks) en las nuevas entradas"
También es interesante desactivar "Intentar avisar a cualquier blog enlazado desde la entrada"
Hay quien desactiva también los emojis, esto va un poco a gusto de cada cual (todo lo que sea desactivar funciones déjalo para el final y valora si es necesario)
Desactivar Gravatar
Si tu WordPress tiene muchos comentarios, la imágen que se muestra junto al usuario por defecto, está generando llamadas externas y además no se encuentra optimizada. Deberías valorar desactivar Gravatar (Ajustes/Comentarios) o usar una plataforma externa para los comentarios, como puede ser Disqus.
Otra alternativa sería también la de dividir los comentarios en páginas.
Cambia wp_memory_limit en WordPress
Por defecto WP solo utiliza 40Mb, para aumentar este valor puedes modificar el archivo wp-config.php ubicado en la raíz de nuestro sitio. Bastaría con incluir esta línea indicando un valor mayor:
define(‘WP_MEMORY_LIMIT’, ‘256M’);O también podrías hacerlo mediante el plugin WP Config File editor.
Y con el plugin Server IP & Memory Usage Display podrás conocer el límite de memoria y su uso, la IP y la versión de PHP.
Si tienes un consumo de recursos muy elevado, deberás averiguar también qué plugins te lo están ocasionando. Aunque también puedes limitar algunas funciones de WordPress como HeartBeat o el archivo Cron.
Plugins para mejorar velocidad de Wordpress y algunos extras
Si algo tiene de bueno WordPress es que cuenta con una gran comunidad, la cual hace posible que encontremos fantásticos plugins tanto gratuitos como de pago.
Para mejorar la velocidad de Wordpress necesitaremos algún plugin de caché, y si este no nos permite minificar o cargar de forma async o defer ficheros que bloqueen el primer renderizado, también necesitaríamos otros plugins para tal fin. Tal y como acabamos de ver, también puede ser interesante utilizar algún plugin para cargar de forma diferida las imágenes y/o optimizarlas.
Os dejaremos una selección de plugins y algunos extras para aquellos que estéis registrados.
¡Si te ha gustado comparte!
¡Síguenos! ? Facebook | Twitter
