7 Secretos para MEJORAR la velocidad de tu sitio web en WordPress

Mejorar la velocidad de carga de un sitio web en WordPress es uno de los trabajos que más me solicitan cuando desean una optimización o un mantenimiento web mensual, ya que si no se corrige la velocidad de tu sitio web, esto puede causar literalmente la pérdida de ventas e ingresos para tu negocio.

No estoy siendo exagerado con esta declaración, sino tienes un sitio web rápido las personas se irán con la competencia que si tenga una web en optimas condiciones.

Ten en cuenta que acelerar una página web en WordPress no es una tarea fácil porque éste problema puede ser afectado por un theme mal optimizado, un código insertado por un hacker o la propia capacidad del hosting.

Sin embargo, hay ciertos «trucos» que se pueden hacer para mejorar considerablemente la velocidad de carga de un sitio web y estoy 100% seguro que si aplicas las recomendaciones que escribo a continuación, tendrás una web veloz como flash.

¿Por qué es tan importante la velocidad de una página web?

Porque lo dice Google jaja, y no solo eso, sino porque hoy en día la capacidad de atención de un usuario que busca algo en Internet es de 8 segundos  y muchos expertos dicen que ésta tendencia será cada vez mayor en los próximos años.

Incluso el propio Google dice que el promedio de una web que carga de 1 a 3 segundos ya tendría un 32% de rebote, pero la cuestión es que el 70% de las páginas web en todo el mundo tienen un tiempo medio de 7 segundos de carga.

Con este dato estoy siendo optimista porque hay otras empresas que han hecho investigaciones recientes en más de 5 millones de páginas web con resultados deprimentes de 10.3 segundos de velocidad de carga en versión PC y 27.3 segundos desde un smartphone para un sitio web promedio.

Lo peor de todo es que hay muchos propietarios de negocios, freelance y agencias de diseño web que no le están dando importancia a estos datos alarmantes.

Otro estudio hecho por la empresa Portent, tiene como resultado de que una tienda online que cargue entre 1 a 2 segundos tendrá un 8% más de conversiones y ventas que aquellas que tienen de 7 a 9 segundos.

Además de este dato, también te puedo comentar que el promedio de las páginas web que se encuentran en la primera página de los resultados búsqueda de Google tienen tiempos de carga rápidos en comparación a su competencia, esto quiere decir que si quieres mejorar tu SEO tu web debe ser veloz.

Entonces ya sea por más ventas o mejor posicionamiento en Google, la velocidad de una web está vinculada directamente con el éxito de un negocio online. ¡Así de importante es este factor!

Herramientas para medir la velocidad de un sitio web

Afortunadamente el proceso de optimización web puede ser un poco menos tedioso gracias a sitios web que sirven para medir y analizar las recomendaciones de este propósito.

Estás son algunas de las herramientas que uso con frecuencia:

• PageSpeed Insights
• GTmetrix
• WebPageTest
• Think with Google

PageSpeed Insights

Es mi herramienta favorita cuando analizo un sitio web, basta con colocar la URL de la web en el campo y presionar el botón «Analizar» para que la herramienta me de los resultados detallados de los problemas que causan el tiempo lento carga.

GTmetrix

Es mi segunda opción al realizar un test de velocidad y la uso porque puedo elegir la ubicación del servidor más cercano a donde están la mayoría de los visitantes del sitio y también puedo elegir una emulación de una velocidad de Internet estimada que tengan los usuarios, para que el analisis sea el más certero posible.

WebPageTest 

Da un análisis mucho más profundo y detallado el cual de forma global mide incluso la seguridad del sitio web y su distribución con interesantes gráficas que te ayudarán a identificar de una manera más clara los problemas que tiene tu sitio web.

Think with Google

Por último pero no menos importante en esta lista uso Think with Google que califica solamente la versión móvil de una web.

Por experiencia, las recomendaciones que arroja esta herramienta son las más exigentes y complejas de solucionar.

Teniendo esta información ya presente a continuación procederé a enumerar mis 7 secretos para mejorar la velocidad de un sitio web en WordPress.

Esta guía la haré con una web de un cliente reciente, por lo que al final del artículo te compartiré la web de mi cliente para que midas y pruebes la veracidad de este artículo.

NOTA SUPER IMPORTANTE: Antes de comenzar con esta guía, te recomiendo encarecidamente que hagas una copia de seguridad de todo el sitio para que así puedas estar seguro de los cambios que harás.

¿Estas listo?

¡Comencemos!

1. Optimiza y comprime las imágenes

La razón principal por la que muchas páginas web cargan lento son las imágenes mal comprimidas y optimizadas.

Para encontrar las imágenes que causan los problemas de lentitud, colocamos nuestro sitio web en PageSpeed Insights y nos dirigimos a esta sección:

Si haces clic en el título de una de estas opciones, PageSpeed Insights te dirá cuales son las imágenes que debes mejorar, para que la descargues y le reduzcas sus dimensiones con alguna herramienta sencilla como paint por ejemplo.

La principal razón por la que muchos plugins de optimización de imágenes no funcionan es porque no se comprimen las imágenes antes de cargarlas al sitio web.

Un sitio web que te puede ayudar con esta compresión es Optimizilla.

Como puedes ver: una imagen con un peso de 417kb se puede reducir en un 68% su peso pero aún así mantiene casi la misma calidad en su definición.

¿Cómo debes usar esta herramienta correctamente?

Reduce primero las dimensiones de la imagen  (su ancho y alto) antes de cargarla a optimizilla para que tenga una mejor compresión.

Si una «imagen de fondo» pesa 120kb o menos entonces vas por buen camino.

Una vez que ya cargues la imagen con sus dimensiones reducidas, y optimizada con optimizilla, por favor instala un plugin  llamado WP Smush Image este complemento para WordPress en su versión gratuita te ayudará a reducir de forma masiva las imágenes que tengas cargadas en tu sitio web, reduciendo aún más su peso en un 50% aproximadamente.

Una característica que me encanta de este plugin es que a medida que voy cargando imágenes a la biblioteca de multimedia, WP Smush se va encargando de optimizar las imágenes de forma automática, despreocupandote definitivamente por la optimización de las imagenes que vayas cargando.

Cómo configurar WP Smush

Sigue los pasos a continuación para solucionar la recomendación que hace PageSpeed Insights sobre los siguientes puntos:

• Pospón la carga de imágenes que no aparecen en pantalla: Con WP Smush la solución de este problema puede aplicarse en mediana proporción ya que esta función aún está en modo beta. Para aplicarlo nos dirigimos a Smush> Lazy Load> y presionamos donde dice «Activar».

Para esta guía estoy usando la versión PRO de WP Smush. No te preocupes, la opción de Lazy Load también está disponible para la versión free.

Cuando activamos esta función le estamos diciendo a imágenes de todo tipo de formato (png, jpg, gif, svg etc)  que están por debajo de lo primero que ve el usuario cuando carga el sitio web, que carguen solamente cuando el usuario se desplace hasta que visualice la imagen.

La función Lazy Load está en modo beta aún porque hoy en día todavía existen muchos navegadores que no tienen compatibilidad con esta función:

Como puedes ver, solo un 71,47% de los usuarios a nivel mundial tienen compatibilidad con la función Lazy Load en sus navegadores en las versiones existentes.

Safari de IOS es el navegador que más preocupa, pero existe una forma de solucionarlo medianamente habilitando esta opción en WP Smush.

He hecho nuevamente el análisis del sitio web y me encuentro con este resultado:

Obviamente aún falta por reducir esos segundos que indica la herramienta de Google, teniendo en cuenta que aún no he optimizado todas las imágenes hemos pasado de 45.9 segundos a 4.65 con solamente habilitar Lazy Load en WP Smush.

Seguimos con las otras recomendaciones…

Usa un tamaño adecuado para las imágenes

Este es de los problemas más comunes cuando se trata de optimizar imágenes.

La mayoría de mis clientes me envían imágenes en super alta calidad y cuando veo las dimensiones de las mismas resulta que tienen 20.400 de ancho x 14.400 de alto y por supuesto ese tipo de medidas hará que tu web cargue en 2 años y medio.

¿Cual es mi secreto para esta recomendación de Google?

Coloca un tamaño adecuado para las imágenes de acuerdo a cómo la vayas a usar.

Te coloco un ejemplo sencillo.

Esta es la lista de imágenes que Google me dice que debo optimizar, si le doy clic en la primera descubro que las dimensiones son muy grande en comparación al uso que se le da en la web, que viene siendo en esta sección:

Lo que se hace es descargar la imagen y reducir sus dimensiones con cualquier editor de fotos, luego pasar la imágen por optimizilla y después subirla a nuestro WordPress.

Es un proceso tedioso pero esto servirá para que WP Smush haga su trabajo correctamente.

La opción «Bulk Smush» lo que hace es reducir el peso de las imágenes que se encuentren cargadas en tu sitio web, y lo genial de esta función es que irá optimizando de forma automática las imágenes que subas en el futuro.

Activar Super-Smush

¿Recuerdas que te dije que Smush, en teoría, puede reducir a la mitad del peso la imagen?

Solo debes activar este check para que esa función surta efecto.

(Digo en teoría porque no se aplica para todas las imagenes)

Publica imágenes en formatos de próxima generación

Las imágenes con formato de próxima genereación se trata de imágenes con características superiores de comprensión y calidad en comparación a los clásicos formatos PNG y JPG.

Se trata de formatos como JPEG 2000, JPEG XR y WebP.

Con WP Smush puedes hacer que las imágenes que hayas cargado en formatos como PNG y JPG se transformen automáticamente en WebP lo cual es genial.

Debes tener en cuenta que NO todos los navegadores son compatibles con WebP.

2. Integrar un almacenamiento caché

El almacenamiento caché del navegador tiene la función de guardar en el navegador del usuario datos como el logotipo, menu de navegación, pie de página e incluso algunas imágenes. Esto con el objetivo de cargar la web más rápido cuando un usuario la visita en más de una ocasión; ya que no tendría que cargar siempre los mismos datos cada vez que el usuario entre al sitio.

En pocas palabras, tener esta función activada en tu sitio web la hará más rápida y ahorrarás recursos de ancho de banda en el servidor.

En la herramienta de Google se muestra una advertencia, el cual hace alusión al almacenamiento caché:

Existen muchos plugins  gratuitos con millones de descargas como W3 Total Cache, LiteSpeed Cache o WP Fastest Cache que tienen la funcionalidad para habilitar el guardado caché.

Puedes buscar la opción de «Habilitar Caché» en algunos de estos plugin y el plugin hará todo el trabajo.

Para esta guía yo usaré usaré WP Rocket el cual me ayudará no solo a habilitar el almacenamiento caché sino que también me ayudará en otros puntos que te comentaré más adelante.

Al activar WP Rocket ya estamos activando el almacenamiento caché de manera predeterminada, pero si quieres ser más específico WP Rocket te presenta estas opciones:

Una pequeña observación, es que si tu web tiene la funcionalidad de registrar usuarios en una sección de «mi cuenta», recomiendo activar la caché para usuarios conectados a WordPress:

El resto de opciones te recomiendo dejarlo tal cual como está.

3. Optimización de archivos CCS/JS

No voy a marearte con términos complejos en programación en este punto, solo te comentaré lo que necesitas hacer para poder cumplir con esta recomendación de Google PageSpeed Insights.

En este paso te recomiendo muchísimo chequear la web repetidas veces cuando hayas habilitado una opción, para que así puedas identificar cual check es el que podría ocasionar un problema en funcionalidad o diseño para tu sitio web.

El mismo plugin WP Rocket nos da esta serie de opciones el cual se presenta de la siguiente manera:

Al intentar habilitar cualquier opción seguramente te aparecerá un mensaje similar al que muestro a continuación:

Por eso es necesario una vez que activemos una opción, siempre verificar en modo incógnito la web para buscar posibles errores que haya causado WP Rocket.

A continuación te presentaré la lista de opciones que debes activar para poder cumplir de la  mejor manera las recomiendaciones de Google con respecto a los archivos CSS Y JavaScript.

Por favor activa cada opción una por una y verifica viendo tu web si hay algún error, en caso de que lo haya, desactiva la opción que causó el error sigue y con las demás opciones:

Configuración de opciones Archivos CSS

• Minificar archivos CSS: ACTIVADO
• Combinar archivos CSS: DESACTIVADO (Si tu sitio web soporta HTTP/2 no es necesario activar esta opción; para comprobar que tu sitio web soporte HTTP/2 puedes ir a este sitio web  y colocar el dominio de tu página)
• Excluir los archivos CSS: Deja lo que está escrito de forma predeterminada
• Optimizar la entrega del CSS: ACTIVADO
• LOAD CSS ASYNCHRONOUSLY: ACTIVADO
• Ruta crítica CSS alternativa: DEJAR EN BLANCO

Ajustes de opciones de archivos JavaScript

• Minificar archivos JavaScript: ACTIVADO
• Combinar archivos JavaScript: DESACTIVADO
• Excluir archivos JavaScript: Deja lo que está escrito de forma predeterminada
• Cargar archivos JavaScript de manera diferida: ACTIVADO
• Excluir archivos JavaScript de manera diferida: Deja lo que está escrito de forma predeterminada
• Retrasar la ejecución de JavaScript: ACTIVADO
• Excluir archivos JavaScript de manera diferida: DEJAR EN BLANCO

4. Elegir un hosting rápido y optimizado para WordPress

Muchas veces me encuentro con clientes que solicitan mis servicios de diseñador web y ya tienen un hosting contratado, veo las especificaciones del hosting y son realmente deprimentes.

En este paso las características del hosting deben ser acordes a los objetivos o necesidades que requiera tu web.

Te coloco un ejemplo de la vida cotidiana para que se entienda mejor este punto:

Imagina que tienes un terreno para construir tu casa, le dices al arquitecto que quieres una casa grande de 4 pisos y de aproximadamente 840m², en un terreno de 700m², que además de ser pequeño no tienes acceso agua y a energía eléctrica, claramente el arquitecto te dirá que necesitas más espacio y que tenga estos dos servicios comunes.

Lo mismo pasa con un hosting, depende del alcance que quieras tener con tu negocio necesitarás ciertas características de ese hosting que te ayuden a cumplir esas necesidades.

Cuando vayas a contratar un hosting  debes fijarte en los siguientes factores:

Suficiente ancho de banda

El ancho de banda es la cantidad de datos que se pueden descargar de tu sitio web cuando se generan peticiones al servidor, te colocaré un ejemplo sencillo:

Compara el ancho de banda con los datos o megas que tengas para navegar en tu celular; al recargarle dinero a tu celular tienes un límite de megabytes para usar (al menos en muchas compañías telefónicas es así) y depende si ves artículos en internet o cargues un video en YouTube, tus megas se consumiran en menor o mayor proporción al uso que le des.

En el caso del ancho de banda, viene siendo lo mismo pero al revés. Una página web promedio tiene un peso de 2 a 4 megabytes, y cuando un usuario entra a ese sitio web, se «descuenta» del ancho de banda esa cantidad de megabytes, ahora imagina tener miles de visitas por mes. Al tener un ancho de banda muy limitado, la web corre el riesgo de que colapse y no se muestre el contenido porque ya alcanzó el límite establecido por el servidor.

Buena memoria física ram del servidor

La memoria física es el factor más crucial para mejorar la velocidad de tu página web, una buena memoria ram traerá como resultado las siguientes ventajas:

• La carga de datos de manera más rápida.
•  Evitar que el CPU tenga que recuperar datos del disco duro con tanta frecuencia.
• Evitar errores 500 o 503 que en algunos casos puede ser porque al servidor web le haga falta más memoria ram.

También es necesario mencionar que el CPU debe ser potente y que el número de uso de Inodos debe ser descente. En estos temas no me voy a extender ya que es algo más complejo de explicar.

He creado un artículo más extenso donde recomiendo los mejores hosting para WordPress, explicando sus ventajas, desventajas, precios y características que debes tener en cuenta a la hora de contratar uno.

5. Mejorar velocidad en páginas internas reduciendo los archivos CSS y JS que no se usen

Antes de mencionar cómo puedes mejorar el rendimiento de tu sitio en este punto quiero mostrarte la puntuación hasta ahora de la página de mi cliente el cual estoy usando para escribir este artículo:

Puntuación perfecta para ordenador

Puntuación regular para smartphone

Ahora si, sigamos con el quinto paso. 🙂

Reducir los archivos CSS y JavaScript que no se usen, es una recomendación que aparece en PageSpeed Insights de la siguiente manera:

A simple vista está muy relacionado con lo que hicimos en el punto 3 de optimizar los archivos CSS pero aquí es un poco más especifico, es decir, aquí Google me dice que retrase o reduzca los archivos CSS que no se muestren en la primera vista de la página.

Por ejemplo:

Supongamos que en la página de inicio de tu sitio web NO estás mostrando el formulario de contacto, pero aún así al momento de que un usuario visita la página de inicio, el servidor carga los archivos CSS y JS que corresponden a ese formulario.

¿Por qué?

Si no estás mostrando el formulario en tu página de inicio ¿por qué el servidor carga recursos de forma innecesaria en lugares que no es necesario mostrarse? Es algo que no tiene sentido ¿cierto?

Para solventar este ploblema, puedes localizar las URL de cada archivo .css y .js y colocarlas en WP Rocket para que omita esos archivos. Pero yo personalmente uso un plugin específico para eso y es instalando Asset CleanUp: Page Speed Booster.

Siguiendo las recomendaciones de Google, nos dirigimos a los archivos que necesitan ser deshabilitados o reducidos y nos fijamos al nombre o la terminación del mismo:

Deshabilitando achivos para mejorar la velocidad de carga

Nos dirigimos a la página interna donde se encuentra este archivo, en este caso sería la página de inicio y luego procedemos a activar este switche:

Al activar «Unload on this page», le estamos diciendo que solo se deshabilite ese archivo en la página de inicio, por lo tanto, seguirá funcionando en el resto de las páginas.

Este procedimiento lo aplicarías con el resto de archivos. Pero siempre, siempre, siempre, cuando cambies algo, debes verificar en modo incógnito que la web funcione correctamente.

6. Implementar AMP para mejorar la velocidad web en smartphones

AMP es la abreviatura de Accelerated Mobile Pages.

Esta implementación AMP es un proyecto desarrollado por Google para ayudar a que las páginas web en versión smartphone, carguen mucho más rápido.

Funciona eliminando código innecesario que relentiza considerablemente una web, trayendo como consecuencia de que este tipo de páginas sea un poco más simple en cuanto a funcionalidad y diseño.

Un ejemplo sencillo de algunos sectores que aplican correctamente AMP a sus páginas, son los diarios, revistas online, blogs entre otros.

Tu también puedes habilitar este tipo de tecnología en tu sitio web, si tienes pensado tener un blog donde publiques mucho contenido; para hacerlo puedes instalar el plugin AMP for WP:

AMP fo WP con más de 100.000 instalaciones activas y va posicionándose como uno de los mejores plugins para esta tarea, en lo personal me gusta mucho porque es muy sencillo de configurar y además tiene toda la información que necesito en un solo lugar.

Por ejemplo puedes elegir mostrar el header o menu de navegación en distintos diseños predeterminados, obviamente con la libertad de cambiar la tipografía y colores de acuerdo a la identidad gráfica de tu logo.

Un tema importante es que cuando no tienes implementado AMP en un artículo del blog, la puntuación promedio en Google es de 55 a 70 (haciendo todas las configuraciones que te mencioné anteriormente) pero una vez lo implementas ya puntuación está entre 70 a 90 según PageSpeed Insights.

Los autores de este plugin explican muy bien cómo configurarlo, pero si deseas que escriba un artículo detallado sobre este tema, puedes dejarlo en los comentarios. 🙂

7. Eliminar el execeso de animaciones o efectos CSS

Se ve agradable a la vista cuando una web tiene animaciones o efectos de movimientos cuando el usuario hace scroll en la página, todo eso es muy lindo en el atractivo de una web, pero no es optimizado.

Siempre cuando me encuentro con páginas web de este tipo, estoy en estos dos estados mentales al mismo tiempo:

• Estresado por la lentitud de la web.
• Impactado por las animaciones (cuando son bien hechas)

Pero… ¿Te digo la verdad?

Casi siempre termino abandonando esos sitios porque mi paciencia no es tan grande e imagino que la de otros usuarios tampoco lo es.

Por eso, la mayoría de las veces evito colocar tantas animaciones o directamente no colocarlas.

Por lo tanto, no te recomiendo colocar ese tipo de efectos ya que empeoran la velocidad web. ¿Recuerdas que te comente que cada segundo que tarda una web en cargar, equivale a un 32% menos de tráfico?

Ese 32% es mejor que un par de animaciones que no afectan en nada en la motivación del usuario en querer comprar tu producto o servicio.

Conclusión: Recomendación general

Consejo de última hora y quizás tendría que habértelo dicho desde un principio, pero si has llegado hasta aquí te comento lo siguiente: NO TE OBSESIONES con el puntaje de  PageSpeed Insights en querer llegar al 100%.

Por experiencia se que la velocidad medida con un cronómetro cuando se accede a una web es la mejor forma de confirmar de que las configuraciones se han hecho correctamente.

Mira por ejemplo la puntuación de Amazon en su nivel de optimización:

Un regular 60% en versión smartphone y algo de 75% para ordenador

¿Está muy mal para ser Amazon verdad?

No necesariamente…

Yo medí la velocidad con un cronómetro, con una conexión 4G en mi smartphone y la web se demoró 2.3 segundos en mostrarse en su totalidad.

También he visto el caso contrario, páginas con puntuación casi perfecta pero tardan 5 a 7 segundos en cargar completamente.

Por lo tanto, esa información debes tenerla presente, usa las herramientas de medición como una referencia y no como un veredicto final.

¡Esto ha sido todo!

Te he compartido mis 7 secretos para mejorar la velocidad de un sitio web en WordPress, y estoy muy seguro de que te será de utilidad.

Sin mas que agregar, ahora te pido una cosa…

Comenta abajo los resultados que obtuviste con esta guía y si tienes alguna duda también comentala y te ayudaré

¡Chao!