15 trucos para mejorar la velocidad de carga de tu sitio web en WordPress este 2023

¿Como mejorar la velocidad de carga de mi sitio web en WordPress?

Todos nosotros nos hemos hecho alguna vez estas preguntas ¿Por qué mi sitio web carga tan lento? ¿Qué puedo hacer para que mi página web carga más rápido? ¿Afecta en algo la velocidad de carga de mi sitio web?

En este artículo nos dedicaremos a esclarecer estas preguntas y darte algunos consejos fundamentales a la hora de optimizar la carga de tu página web en WordPress para este 2023.

Es importante aclarar primero que todo que la velocidad de carga de un sitio web es un factor fundamental a la hora de querer posicionarte en Google u otros buscadores, además según diversos estudios demuestran que si tu sitio web tarda más de 3 segundos en cargar, ¡estás perdiendo dinero!

Bueno, para no darle más vueltas al asunto, te dejamos a continuación 15 de los aspectos más importantes al momento de querer optimizar la velocidad de una web en este 2023.

1.- Define un tamaño adecuado para tus imágenes.

Para nadie es un secreto saber que las imágenes se llevan un gran trozo de la torta al momento de cargar un sitio web, en algunas ocasiones llega a ser entre el 50% al 90% del peso total de la página, es por ello que debes prestar principal atención a “las imágenes”.

Al día de hoy existe una diversa cantidad de dispositivos desde los cuales podemos navegar, pero en promedio cerca del 75% de las buscadas se realizan desde un dispositivo móvil y el otro 25% desde un ordenador.

La primera recomendación es que utilices un tamaño adecuado para cada una de las imágenes que cargaras en tu sitios web, por ejemplo si quieres establecer una imagen como fondo o background no es necesario que supere los 1080P o resolución Full HD (1920x1080px).

Ahora bien, si estamos hablando de un logotipo como regla general, estos no deben superar desde los 300 a 500 píxeles en promedio.

Si no sabes dónde puedes redimensionar o recortar tus imágenes online, te dejamos una herramienta totalmente gratuita en el siguiente enlace iloveimg.com, la cual te va a ayudar en esta tarea y muchas otras más.

2.- Reduce el peso de las imágenes de tu página web.

Acabamos de hablar de lo importante que es utilizar imágenes de un tamaño adecuado para nuestro sitio web, pero no debemos olvidar que estas también pueden ser optimizadas para reducir el peso final del archivo.

Existen varias formas de realizar este proceso y cuál de ella elegir se deberá principalmente a tus necesidades, estableciendo como parámetros cuanto tiempo tienes para dedicarle a este proceso o simplemente a cuál es la cantidad de imágenes que serán utilizadas en tu sitio web.

Si tienes tiempo y no son tantas las imágenes que debes cargar, lo ideal es realizar el proceso de forma manual para verificar que cada imagen se vea con excelente calidad, comprimiéndolas a través de esta herramienta online iloveimg.com.

Por otro lado, si tu página web posee muchas imágenes como puede ser el caso de una tienda online o e-commerce, tal vez sería una excelente opción utilizar un plugin que pueda realizar este trabajo directamente por ti como este wp-smushit o ewww-image-optimizer.

3.- Publica imágenes con formatos de próxima generación como WebP

No es necesario destacar que la tecnología avanza a pasos agigantados año tras año, y cuando hablamos de la web no hay ninguna diferencia en este aspecto, es aquí donde resuenan términos como el nuevo formato WebP, ¿lo conocías?

Se trata de un nuevo formato de compresión de imágenes, el cual viene a destronar a nuestros ya tan conocidos JPEG y PNG, este nuevo formato logra reducir aún más el tamaño de las imágenes y se espera que sea el nuevo paradigma en la web.

Al día de hoy ya existe una gran compatibilidad del formato con distintos navegadores y de acuerdo al reporte emitido por caniuse.com podemos notar que cerca del 97% de los usuarios de internet ya puede visualizar sin problemas este tipo de imágenes de próxima generación WebP.

4.- Pospón la carga de imágenes fuera de pantalla con Lazy Loading.

En el mundo digital existen algunos términos con los que muy probablemente no estés habituado, uno de estos términos es el famoso “Above the fold” y se refiere al contenido que el usuario es capas de ver en una web sin realizar scroll, es decir, el primer vistazo.

Bueno, teniendo en cuenta esta idea es que nace el ya tan aclamado “Lazy Loading” o carga diferida de imágenes, el que tiene como objetivo posponer la carga de todas las imágenes que aún no entran en pantalla, dando prioridad a que se cargue mucho más rápido el contenido inicial de la página.

Esta técnica es muy utilizada y puedes notar que la utilizan de manera nativa una gran cantidad de aplicaciones como Instagram, Facebook y YouTube, entre otras, ya que al ir bajando puede notar como se van cargando solo una cierta cantidad de imágenes o miniaturas.

Sin lugar a dudas esto no es en vano y las compañías saben lo que hacen, así que no esperes más y activa esta opción en tu sitio web de WordPress desde el siguiente plugin, es fácil, rápido y sencillo, solo debes activar autoptimize y dirigirte al apartado de imágenes, para luego tildar la opción de activar carga diferida de imágenes o lazy loading.

5.- Reduce el tamaño minificando tus archivos HTML, CSS y JavaScript.

Existen muchos, muchísimos plugins que te pueden ayudar con esta tarea, pero como parte de las recomendaciones que verás más adelante es “no utilizar demasiados plugins”, trataremos de reutilizar las mismas herramientas y plugins la mayor cantidad de veces posibles.

Es normal que el código de nuestra página no este optimizado, conteniendo caracteres en blanco, saltos de línea, espacios innecesarios o comentarios, es por ello que se vuelve fundamentalmente útil minificar nuestros ficheros HTML, CSS y JavaScript, este proceso elimina todo el contenido no fundamental de nuestros archivos, dejando como resultado solo el contenido esencial para visualizar nuestra web.

Si bien esto es una tarea bastante común o sencilla de realizar, nuevamente con la ayuda de nuestro amigo Autoptimize, bastará solamente con tildar las casillas de optimización HTML, CSS, y JS, solo con hacer esto ya estaremos optimizando valiosos kB de información de nuestra web y acercándonos cada vez a nuestro objetivo de mejorar la velocidad de nuestro sitio.

6.- Reduce la cantidad de solicitudes HTTPS de tu sitio web.

Existe una manera muy sencilla de reducir la cantidad de solicitudes o peticiones de archivos que realiza nuestro navegador al servidor web, y esta técnica se denomina “unificar archivos”, es muy utilizada para optimizar la entrega de código CSS y JavaScript.

En este proceso sé También te recomendamos activar la opción para “Crear data:URIs de imágenes”, ya que en algunos casos puedes omitir algunas solicitudes adicionales.

7.- Elimina el bloqueo del renderizado o Render Blocking.

El “Render Blocking” es un término utilizado para describir cuando la visualización de nuestra página web es detenida porque se encuentra a la espera de contenido esencial para poder mostrar la información, a modo de ejemplo es como cuando estás esperando que carguen las imágenes, estas son tan fundamentales que te impiden ver la web antes de que ellas carguen.

Este bloque de renderizado ocurre a grandes y pequeños rasgos, algunos en realidad son muy técnicos, pero como este artículo trata de ser útil para todo tipo de lector te entregaremos simples pero potentes consejos.

Solo debemos dirigirnos nuevamente a los ajustes de Autoptimize y activamos la opción “Combinar todos los CSS”

Adicionalmente, también podemos optimizar el bloqueo de la renderización del texto en pantalla, esto ocurre principalmente cuando utilizamos alguna fuente personalizada y en el caso de que el usuario no tenga disponible esta fuente, no podrá ver el texto de nuestro sitio hasta que la web se haya cargado por completo.

Existen varias formas de solucionar este problema, una de ellas es utilizar el atributo swap para la carga de nuestras fuentes, esto evitara el bloqueo y simplemente actualizara a la nueva fuente una vez que sea cargada, otra forma un poco más complejas es alojar directamente la fuente de manera local, pero sin el conocimiento adecuado esto puede ser un poco más complicado.

8.- Evita el uso de Sliders y animaciones.

Uno de nuestros principales enemigos, al momento de optimizar los tiempos de carga de una web, es el uso excesivo de JavaScript o librerías como jQuery.

Si bien la gran mayoría de sitios utiliza en su página de inicio o «landing page» algún tipo de slider muy bonito y repleto de animaciones, esto sobrecarga enormemente nuestros tiempos de carga.

Nuestra recomendación aquí es simple, ¡No utilices sliders ni animaciones!

Este sencillo consejo te ayudará a conseguir una mejor puntuación en la gran mayoría de test de velocidad, como pagespeed o gtmetrix y además Google lo tendrá muy en cuenta al momento de posicionar tu página en el buscador.

9.- Utiliza siempre la última versión de PHP.

Si bien esto es un aspecto más técnico, existe un gran cantidad de estudios y benchmarks que demuestran como el utilizar una versión más actualizada de PHP, puede ayudar consistentemente a mejorar los tiempos de respuesta de tu servidor.

Entonces, si cuentas algún servicio de Web Hosting que utilice cPanel, bastara con que te vayas directamente al apartado de SOFTWARE y hagas clic en «Administrador MultiPHP«

Una vez dentro lo primero que debemos hacer es seleccionar el sitio web al cual queremos modificar la versión de nuestro PHP, luego seleccionar la última versión de PHP disponible y finalmente dar clic en aplicar.

Con estos sencillos pasos, ya habremos actualizado la versión de PHP que utilizara nuestro sitio web.

10.- No utilices demasiados plugins.

WordPress es un CMS bastante completo y robusto, es por ello que no debería extrañarte el que encuentres un plugin para todo, así es ¡literalmente para todo!

Pero no debes dejarte engañar, ya que cada vez que sumas nuevas funcionalidades a tu sitio agregando algún plugin extra, el rendimiento de este también se puede ver afectado, haciendo que tu página web tarde mucho más en cargar.

Entonces, como recomendación general, la idea es que solo dispongas y utilices una cantidad mínima de plugins en tu página web, para asegurar y mantener el mejor rendimiento posible.

11.- Habilita la compresión gzip para todos los archivos de tu web.

Por si no lo sabes, la compresión gzip es un proceso en donde el servidor web comprime cada uno de los archivos de tu sitio para reducir el tamaño total y acelerar el proceso de carga, esto puede beneficiarte al disminuir la cantidad de kB necesarios para visualizar tu página web.

Una vez dentro debemos seleccionar donde dice «Comprimir todo el contenido«, para luego dar clic en actualizar configuración.

12.- Utiliza un plugin de caché para generar contenido estático.

Es muy importante para mejorar la velocidad de tu página web, utilizar un plugin de caché, pero ¿qué es lo que hace el caché?

Explicado de manera muy simple, debes saber que WordPress es un CMS que crea todo el contenido de tu web de manera dinámica, cuando utilizamos algún plugin de caché, este lo que hace es crear archivos estáticos y guardarlos para servirlos de una forma mucho más rápida a los visitantes.

Ahora bien, dependiendo de que tan amplio es tu conocimiento técnico en este tipo de tema, te recomendaremos 3 alternativas, desde la más potente y compleja, hasta la más sencilla.
– litespeed-cache: Este plugin posee muchas opciones de configuración y es uno de los más potentes, pero requiere un alto conocimiento en diversos aspectos para utilizarlo.
– wp-fastest-cache: Este plugin tiene una cantidad de opciones más reducida, pero no te dejes engañar, ya que aun así es bastante potente.
– wp-super-cache: Finalmente, tenemos este plugin que es mucho más sencillo, pero sin lugar a dudas tiene todo lo necesario para activar el caché de tu sitio web en WordPress.

13.- Habilita el caché del navegador.

El caché del navegador es una herramienta muy útil para quienes ya han visitado previamente tu web, este consiste en que para las personas que cargaron tu sitio previamente no es necesario que vuelvan a cargar nuevamente el contenido, a menos que algo se haya actualizado.

Para activar esta funcionalidad debemos activar esta opción dentro de los ajustes de nuestro plugin de caché o incluso se puede activar dentro de las opciones del CDN como veremos más adelante

14.- Utiliza algún servicio de CDN.

Una CDN viene del acrónimo Content Delivery Network, lo que en palabras muy sencillas se traduce en una red de entrega de contenido.

A modo de ejemplo, cuando alojas un sitio web en un servicio de hosting, este servidor se encuentra ubicado en solo un lugar geográfico, en cambio, una CDN tiene servidores a lo largo de todo el planeta, seleccionando la ubicación más cercana al visitante de tu web.

Con esto podemos agilizar la entrega del contenido web como imágenes y archivos HTML, CSS y JS, por otra parte, el utilizar una CDN también tiene otros beneficios como la protección contra ataques DDOS realizados por hackers.

En fin, es altamente recomendable que utilices una CDN, ya que te ayudara a mejorar los tiempos de carga y a estar más protegido contra diversas amenazas del internet, si aún no sabes cuál elegir te recomendamos usar Cloudflare, por el hecho de que es gratuita, potente y segura.

15.- Disminuye el LCP o Largest Contentful Paint.

Esta es una de las métricas más importantes para el WPO (Web Performance Optimization), sin ir más lejos Google Search Console, que es la herramienta que Google te ofrece para indexar el contenido de tu sitio web, medir el rendimiento de tus URL’s, comparar estadísticas y mucho más, lo tiene muy en cuenta.

Tanto así que hay un apartado única y exclusivamente para evaluar si tu sitio web está optimizando esta métrica o no, además debo contarte que el nuevo algoritmo de Google cada vez le da más énfasis a la velocidad de tu sitio web en dispositivos móviles.

La verdad es que existen aún muchos factores adicionales que pueden ayudarnos a mejorar cada vez más el rendimiento de un sitio web WordPress, pero aumentan exponencialmente el nivel de dificultad para poder implementarlos.

Es por ello que el consejo final será más simple de lo que esperabas y es que trates de optimizar la entrega de tu contenido, teniendo en cuenta que en la primera parte de tu sitio web (lo que vez antes de hacer scroll), contenga la menor cantidad de imágenes, iconos o elementos pesados como videos.

Esto se traducirá en que los visitantes de tu sitio web tengan una excelente experiencia de carga y luego una vez que haga scroll pueda visualizar sin problemas el resto de tu sitio.

Cuando se trata de mejorar y optimizar la velocidad de carga de un sitio web en WordPress, existen diversos aspectos que tener en cuenta, algunos más complejos que otros.

No se trata de una tarea imposible, pero no te vamos a mentir, requiere bastante tiempo y experiencia para que no termines rompiendo tu sitio.

De todas maneras tenemos buenas noticias para ti, ya que en Rompela, nuestra Agencia de Marketing Digital, nos preocupamos de realizar todas estas optimizaciones en cada uno de nuestros proyectos web.

Si lo que quieres es tener una página web profesional, con carga ultrarápida y 100% optimizada, no lo dudes más y agendemos una reunión hoy mismo.