En los últimos años hemos visto como los profesionales del marketing colocábamos la velocidad de carga como una de las acciones principales en todo proceso de optimización. En 2017 Google comenzó a insistir en la importancia de la velocidad de carga y en un futura influencia en los rankings, pero hasta el verano de 2018 no hizo oficial esta aseveración.
En este artículo pretendemos ayudar a que por tus propios medios puedas comenzar con la optimización y mejorar la velocidad de carga de tu web. Como todo proceso de optimización existe una parte técnica que puede ser compleja. En SEO Alive siempre que realizamos un artículo de estas características queremos que puedas implementarlo por ti mismo, aunque hay acciones que necesitan un nivel de conocimiento más técnico, pero sinceramente no nos volvamos locos con las optimizaciones y las puntuaciones de las herramientas que utilizaremos para auditar el WPO de nuestra web.
La optimización depende en un parte importante de cómo se haya diseñado la plantilla y no en todas las plantillas se puede sacar el mismo rendimiento, es importante que tengamos esto en cuenta.
¡Comencemos!
Índice de Contenidos
¿Qué es el WPO?
El Web Performance Optimize al que llamamos WPO no es más que la optimización de los distintos procesos que afectan a la carga de una web.
¿Cómo medir la velocidad de carga de una web?
Existen numerosas herramientas para medir la velocidad de carga. Las más populares son:
Antes de comenzar a realizar una auditoria es importante que tengamos presente que la velocidad de carga varía para cada usuario. Tenemos diferentes variables que pueden afectar a que la velocidad no corresponda del mismo modo a un usuario que está en Cuenca a uno que se encuentre en en Ottawa.
Por eso, más que trabajar los tiempos de carga en segundos recomendamos trabajar en la optimización de:
- Peso (mb) de la web
- Peticiones
- Tiempo de respuesta del servidor
Si mejoramos estas 3 áreas, la velocidad de carga mejorará indistintamente de dónde se encuentre el usuario.
Vamos a profundizar en cada una de las áreas y a través de las distintas herramientas veremos cómo trabajarlas para mejorar el rendimiento de cada url, ¿por qué digo cada url? porque, aunque parezca una obviedad, me he encontrado muchos caso en los que solo se valoraban los datos de la home y, por supuesto, todas las páginas de una web no cargan los mismos recursos.
Herramienta de desarrolladores de Google
Antes de comenzar quiero explicar algunas opciones que nos da Google desde su herramienta de desarrolladores. Esta herramienta es una de las más importantes para todo análisis del funcionamiento de una web. Con el botón derecho pulsamos sobre la pantalla que tiene abierta el navegador y nos salen un panel con diferentes opciones, iremos a Inspeccionar (Ctrl + Shitf + I).
Una vez abierta esta herramienta, nos iremos a la opción de NETWORK que encontramos en la parte superior. Si volvemos a pulsar ENTER en el explorador la herramienta mostrará la carga de distintos recursos.
En la parte inferior de la imagen, podemos ver los datos que nos interesan para tener una visión general de la carga de la web.
Analizando más en profundidad este panel desde su parte superior y teniendo en cuenta la estructura por columnas, tenemos:
- Name: nombre del recurso.
- Status: código respuesta del recurso (200, 301, 404…)
- Type: tipo del recurso (script, font, png, jpg, stylesheet…)
- Initiator. Qué recurso activan la petición.
- Time: cuánto tiempo tardó la solicitud.
- Waterfall: Representación gráfica de los tiempos de carga de un recurso.
Si hacemos clic con el botón derecho en la parte superior, podemos añadir y quitar columnas con esta información.
Activar otros elementos informativos como Dominio, Scheme o Cookies nos puede ayudar en casos particulares para localizar recursos que nos estén causando algún tipo de problema, pero en este punto, nos quedaremos con los que vienen predefinidos.
Hay un aspecto que, aunque es muy interesante, comentaré por encima para que lo tengamos en cuenta. La velocidad de conexión, sobre todo en móviles, es una pieza fundamental para la carga de una web. Desde esta herramienta podemos simular velocidades más lentas como el 3G en el móvil.
¿Cómo conocer el peso de una url y cómo reducirlo?
El peso ya sea en Megabytes o en Kilobytes es uno de los principales factores por los que una url tarda en cargar; de ahí que comencemos por profundizar en este aspecto ya que marcara el camino para obtener una buena optimización en nuestra web.
Los siguientes datos son de la herramienta comentada anteriormente GTMETRIX y corresponden a una web que voy a comenzar a optimizar.
Nos vamos a quedar con los datos de la columna de la derecha, los que hacen referencia (Page Details), en concreto con el que indica Total Page Size.
Aparentemente este peso de la web está muy por encima de la media de los sitios, pero tengamos en cuenta que el peso de la web no es tan importante el total sino lo que tarda en cargar por ese peso, ya que existe lo que se conoce como Lazy Load, una función que retrasa la carga hasta que el usuario no necesita el recurso, luego hablaremos de ella.
Esta información la tenemos también en la herramienta de desarrolladores, en el panel que vimos anteriormente y que vuelvo a recordar.
Si veis en la parte inferior, tanto los 7,5 MB como las 215 peticiones se acercan mucho a las facilitadas por GTMETRIX. Es importante que sepáis de dónde saca la información GTMETRIX por si en algún momento queréis utilizar otra herramienta.
Vamos a ver ahora qué es lo que pesa tanto y cómo podemos solucionarlo.
La opción de Waterfall nos ofrece un aspecto visual de cómo se producen las cargas, la url del recurso, el status, domain y la columna Size. Si clickamos sobre esta última columna nos ordena los pesos de mayor a menos y de menor a mayor.
Echando un vistazo a los pesos, podemos ver, como sucede en la mayoría de los casos, que son las imágenes las que tienen gran culpa del excesivo peso de la url.
El peso que debe tener como máximo una imagen no está especificado en ninguna parte, pero nosotros aconsejamos que no sea superior a 100 Kb y que si tenemos opción (si utilizamos Photoshop la tenemos), seleccionemos que la carga de la imagen sea progresiva en JPG y evitar el PNG siempre que no necesites un canal Alpha (transparencia).
Reduciendo el peso de las imágenes mejoraremos mucho la carga de la web, para ello podéis utilizar diferentes herramientas. Yo soy de optimizar con Photoshop pero en internet disponemos de opciones interesantes:
Tanto Gtmetrix como la herramienta de Google nos da la opción de ver los recursos por tipo, es decir, solamente las imágenes, scripts, CSS…
Esto es útil para poder tener una perspectiva más amplia de dónde hay que trabajar. En esta url las imágenes suponen 4 Mb de un total de 7,2 Mb, así que una gran parte del problema respecto a los pesos lo tenemos ahí. Aún así, hay otros recursos que me llaman la atención por ser extremadamente pesados para el tipo de recurso que es un CSS con un peso de más de 700 kb y un Script de más de 300 kb.
En este punto me gustaría aclarar que cuando llevamos acabo una optimización de la velocidad de carga (WPO) tenemos que enfrentarnos a ciertos problemas que, aunque tienen solución, no está en nuestra mano actuar sobre el problema.
En este caso vemos un CSS de gran tamaño, si el diseñador ha creado un CSS de más de 700 kb, tendremos complicado optimizar ese archivo en concreto.
¿Qué podemos hacer para reducir el peso de estos archivos?
Minificar (CSS, JS y HTML)
La minificación es un proceso que busca reducir el peso de los archivos mediante la eliminación de datos innecesarios como pueden ser comentarios, espacios, códigos repetidos y código que no se utiliza. Existen numerosas herramientas para realizar este proceso, salvo la parte del código que no se utiliza, eso es más difícil optimizar y habría que ir manualmente al archivo (cosa que no recomiendo).
Herramientas para minificar archivos
- HTML Minifier http://kangax.github.io/html-minifier/
- CSS Nano https://cssnano.co/
- Uglify http://lisperator.net/uglifyjs/
La suerte que tenemos es que estamos hablando de WordPress y como ya sabemos todos en WordPress es muy raro que no haya un plugin que realice este operación.
Personalmente me gusta utilizar uno enteramente gratuito Autooptimize y otro de pago WP Rocket.
En este artículo no quiero explicarte tanto cómo funcionan estos plugins sino cómo hacer las tareas de optimización. Porque si utilizamos otros plugins también tienen estas opciones y lo mejor es entender qué estamos haciendo.
Minificar con WP Rocket
Esta parte no es compleja, solo tenemos que ir a la pestaña de optimizar archivos y pinchar sobre la casilla de minificar HTML. En WP Rocket esta opción se repite más abajo para los archivos CSS y JS. No obstante te recomiendo que actives esta casilla y pruebes, repite esta opción de una en una, ya que si falla será más fácil detectar el problema.
Antes de comprobar el efecto de la minificación tenemos que borrar la cache, porque sino no veremos el resultado de la actualización del html actual.
¿Cómo borrar la caché del navegador?
Este tipo de plugins traen consigo opciones para borrar la caché, lo vemos en la parte superior.
Y otra forma es a través del navegador una vez activada la herramienta de desarrolladores de Google (Ctrl + Shift + I).
Botón derecho sobre la flecha de «cargar página de nuevo» y seleccionamos «vaciar la caché y volver a cargar de manera forzada»
Minificar con Autooptimize
Con Autooptimize la acción de optimizar es la que realiza la minificación con la particularidad que nos ofrece una opción de mantener los comentarios HTML. Estos comentarios los suelen realizar los programadores para mantener información útil en un futuro.
Para ver que esta optimización ha tenido efecto, iríamos al código fuente de la url y tendríamos que ver algo así:
El código se vuelve ilegible pero el funcionamiento es el mismo.
Estas opciones se repiten de igual forma en WP Rocket y Autooptimize para los archivos CSS y JS. Como he comentado anteriormente, no recomiendo que se optimice todo a la vez, sino 1 a 1. Estos plugins realizan copias de los archivos minificados por lo que el retorno al original es posible deseleccionando la casilla marcada.
Para seguir reduciendo el peso de la página tenemos 2 opciones más:
- Eliminar o reducir plugins que añadan CSS o JS a la carga.
- Eliminar o reducir parte de código que no se utilice en el archivo CSS.
Estas 2 opciones son más complejas y requieren de más conocimiento ya que hay que hilar muy fino y tener certeza de que no hay llamadas desde otras páginas a la parte que se está eliminando.
Si bien la eliminación de plugins no siempre es posible por la necesidad del recurso que ofrecen, sí hay plugins mejor optimizados que otros, es decir menos peticiones y un JS de menos peso, así que en el maravilloso ecosistema WordPress casi siempre hay alternativas.
Tiempo de carga vs Tiempo de respuesta
Es el momento de hablar de peticiones (request), de tiempo de respuesta y de tiempo de carga. En este punto tendremos que mencionar a una parte fundamental del proceso, el servidor. La optimización del servidor no suele estar en nuestras manos así que es importante que optemos por una solución eficiente.
Pero vayamos por partes.
¿Qué es una petición o request?
Una petición o HTTP Request es una solicitud que se realiza desde el cliente al servidor para pedir un recurso determinado. Las peticiones pueden tener distintos servidores.
Las peticiones puede ser tanto HTTP como HTTPS. Si vemos la estructura de una petición podemos analizar dónde se produce la demora en el tiempo.
Análisis del tiempo de una petición HTTP
Vamos a explicar por partes lo que vemos en este gráfico de tiempos.
- La petición está iniciada pero bloqueada o en cola: Si el bloqueo dura mucho tiempo puede ser por diferentes causas: que haya peticiones con mayor prioridad o que existan muchas peticiones para este origen.
- DNS Loockup: El navegador está resolviendo la dirección IP de la solicitud.
- Conectando: El tiempo que tarda en conectarse al servidor para resolver la solicitud. Si el tiempo es elevando podría indicar problemas de red, errores de conexión o un servidor sobrecargado.
- Sending: Se envía la petición del recurso.
- Waiting: Este es el tiempo que tarda el servidor en resolver una petición y enviar una respuesta, si el tiempo es grande, existe un problema en el servidor.
- Receiving: Recibiendo el recurso.
La petición HTTPS añade un paso más, aquí lo vemos.
Estas dos capturas pertenecen a dos webs distintas, una sin optimizar (HTTP Request) y otra optimizada (HTTPS Request).
Si os fijáis bien y comparáis es en el tiempo de espera donde se produce la mayor diferencia. En estos casos habría que analizar más detalladamente el servidor.
Peticiones (Request) al servidor ¿cómo podemos reducirlas?
Cómo hemos visto el número de peticiones está íntimamente relacionado con el tiempo de carga, por lo que reducir el número de peticiones mejoraría los tiempos de carga de una url. En el proceso de optimización influye el sentido común y saber si un recurso realmente es útil para el usuario o para nuestro negocio. Este es el momento de decir adiós a ciertos recursos que no nos aportan nada, pero no seré yo quien decida eso.
No obstante tenemos opciones para mejorar las peticiones, aunque estas acciones no vaya a suponer un gran cambio en la carga de la web. Me vuelvo a repetir, lo mejor es eliminar recursos que no aportan nada.
Combinar CSS y JS
Otra de las acciones más populares a la ahora de optimizar una página web es la de combinar los recursos CSS y JS, pero ¿qué significa esto?
El objetivo de combinar es reducir las peticiones a costa de incrementar el peso del archivo. La combinación es unificar los distintos recursos CSS o JS en uno solo.
Si los tiempos de respuesta son largos, la combinación si puede ser beneficiosa. Si los tiempos de envío son muy lentos, quizá es mejor utilizar otra técnica.
Lo mejor sería combinar pero con un buen servidor, así ganaríamos por las dos partes.
Combinar recursos con WP-Rocket y Autooptimize
La operación de combinar con estos plugins es igual de sencilla que antes, solo tenemos que marcar la casilla correspondiente.
En WP Rocket las opciones tanto para combinar CSS como JS son iguales, los paneles son prácticamente idénticos. Como vemos en la imagen tenemos un cuadro para añadir la ruta de los archivos que no queremos combinar.
Debajo de la casilla también vemos una anotación sobre la no utilización de la opción de combinar si utilizamos HTTP/2, en este artículo nos explican más sobre el HTTP/2.
Autooptimize te ofrece más opciones para trabajar con los CSS y reducir las peticiones. En la opción que marco se combina y te da un aviso sobre el efecto que puede producir, pero al fin y al cabo, esto siempre es relativo.
En esta primera parte del artículo he querido explicar en qué consisten ciertas acciones básicas que solemos ver en, prácticamente, todos los plugins de optimización WPO, pero aún queda mucho que podemos hacer para mejorar tanto en peticiones como en tiempos de carga.
Configuración de la Caché
Sin duda la optimización de la caché es una de las acciones donde vamos a notar mayores mejoras en la carga de la web. En este artículo sobre SEO para WordPress realicé una explicación sobre la caché. Te animo a que le eches un vistazo para entender cómo funciona.
Autooptimize y WP Rocket realizan acciones de cacheado, pero WP Rocket te da un par de opciones más. Cabe decir que los plugins han convertido esta optimización en algo más sencillo, apenas tienes un par de opciones y el proceso es rápido e indoloro.
Como veis WP Rocket te permite trabajar 4 cosas:
- Habilitar la caché para dispositivos móvil.
- Guardar separadamente los archivos para dispositivos móviles.
- Habilitar la caché para usuarios conectados.
- Especificar el tiempo para borrar la caché.
Depende de cada proyecto el señalar una opción u otra pero teniendo en cuenta esto mis consejos son:
- Caché móvil siempre, porque aunque la mayoría de sitios son responsive si es verdad que hay contenido que puedes tener en móvil y no en PC.
- Archivos separadamente.
- No caché para usuarios conectados, sobre todo porque si estoy realizando tareas de modificación no quiero caché.
- Y el tiempo de la caché, el cual depende de la cantidad modificaciones que realices en tu web. Si es una web de noticias diarias corta si es un contenido que no se actualiza frecuentemente más larga.
Lazyload
La función lazyload ayuda a mostrar los recursos (Imágenes e Iframes) cuando el usuario los necesita, es decir el navegador no carga estos recursos hasta que el usuario al hacer scroll no se encuentra con ellos. Esta función se implementa en muchos plugins e incluso viene predefinida en algunos temas de WordPress. Incluso desde la versión 76 de Chrome viene de forma nativa en el navegador.
Esto quiere decir que si añadiendo el atributo loading=»lazy» el navegador ya interpreta la carga diferida de la imagen, pero claro esto no lo va a interpretar todos los navegadores, por lo que recomiendo continuar utilizando el plugin. Aquí os pongo un vídeo extraído de la web.dev donde nos muestra un ejemplo de en qué consiste la carga diferida de imágenes.
Optimización de Iframes
Si utilizamos Iframes para incrustar contenido de otras webs, tenemos dos acciones que podemos utilizar para mejorar nuestra carga.
- Carga diferida a través de la función lazyload
- O sustitución del iframe por imagen hasta que el usuario pinche en el.
Tanto la primera como la segunda opción la podemos activar a través de, nuevamente, nuestro plugin de referencia WP-Rocket.
Esta parte no la tiene Autooptimize pero te ofrece la instalación de un plugin complementario para realizarlo https://wordpress.org/plugins/wp-youtube-lyte/
Cargar diferida archivos JS con Defer o Async
Los archivos JS son uno de los causantes de lo que en las auditorias de velocidad de carga se denomina bloqueo del renderizado de una página. Esto se produce cuando a la hora de renderizar el navegador se detiene para descargar un archivo JS y ejecutarlo. El objetivo de un optimización WPO es poder ofrecer cuanto antes información al usuario, por eso se considera bloqueo, porque no se renderiza nada hasta que se ejecute el JS que ha descargado.
Por eso este tipo de acciones suelen ser marcadas en la auditoría. Al utilizar plugins de terceros o temas que no están bien optimizados, podemos tener JS que bloqueen el renderizado por estar, por ejemplo, en el header.
En estos casos debemos utilizar dos atributos que se añaden en el código de llamada del JS, Deferr y Async. Para que este atributo pueda funcionar los scripts tienen que ser externos.
En SEO Alive, utilizamos el plugin Pre Party Resource Hints, el cual te permite seleccionar qué archivos y qué método de carga quieres aplicar. ¡Una maravilla!
¿Qué diferencia hay entre Defer y Async?
Aunque los dos atributos tienen un objetivo similar, hacer que no se detenga la interpretación del DOM HTML por el JS, existe una diferencia notable entre uno y otro.
Con el atributo Async el recurso se descarga sin detenerse la carga del html pero una vez descargado si que se detiene la carga para ejecutar el JS; con el atributo defer el recurso también se descarga de forma paralela con la carga del html pero se ejecuta al terminar la carga, no hay bloqueo por parte del script.
En este aspecto existen diferencias entre WP Rocket y Autooptimize. WP Rocket te facilita mucho las decisiones y él actúa de una manera semiautomática para evitar que un JS bloquee el renderizado, en cambio en Autooptimize solo puedes marcar la opción de Async.
En Autooptimize en la pestaña extra tenemos esta opción para añadir los JS que queremos que realicen una carga Async, pero para tener mayor flexibilidad nos recomiendan otro plugin complementario «Async Javascript»
Con este plugin podemos trabajar tanto con Defer como con Async, incluso nos da opciones con un solo clic para facilitarnos las cosas. La parte buena de este plugin es que podemos trabajar los scripts y excluir los que consideremos. En cambio, en WP Rocket tenemos que confiar en lo que haga el plugin, eso sí, lo hace bien.
Esta opción está en la misma pestaña de optimización de archivos.
¿Qué es un CDN y cómo nos puede ayudar?
Un CDN es lo que se conoce como un red de distribución de contenidos. El CDN se encarga de guardar parte de la información y de los recursos, para aliviar la carga del servidor de estos recurso y responder mejor a la carga. Los CDN también tiene una función de copia geográfica, para disponer del recurso en diferentes puntos y facilitar este al usuario indistintamente de donde se conecte. Normalmente este tipo de servicios se suele utilizar en archivos pesados como Imágenes y Vídeos.
La contratación de este servicio es importante cuando tenemos sitios con mucho tráfico aunque no debe ser excluyente para webs con poco tráfico.
Otras acciones que nos harán mejorar… un poco más
Para finalizar el artículo nos queda 3 mejoras que aunque no van a producir grandes cambios en los tiempos de carga, si que nos ayudarán a reducir peticiones y al fin y al cambo es lo que queremos.
Optimización de Fuentes
La optimización de fuentes se puede hacer a través de plugins o manualmente editando y optimizando el CSS. Lo ideal sería hacer solo la llamada de la fuente que se va a utilizar y no como sucede en muchos caso descargar un archivo con todas las fuentes de Google Fonts.
Autooptimize tiene una opción para trabajar las fuentes
Es difícil sin ver el proyecto decir qué opción elegir, porque no sé que fuente está utilizando tu plantilla y cuándo la carga, lo mejor es probar y ver el resultado.
Como veis a continuación de las opciones de Google Fons tenemos «Quitar Emoji«, esto nos eliminará una petición al servidor y su función simplemente es convertir símbolos representativos de emoji y en el icono.
WP Rocket nos facilita también desactivar estos emojis y nos también la opción de evitar que se embeba contenido en sitios de terceros.
Al final hay muchas acciones para mejorar la velocidad de una carga. No siempre se puede trabajar a fondo para optimizar todos los recursos porque depende del tipo de negocio y lo que necesite.
Espero que esta Guía de optimización de WPO te sea de utilidad y puedas aplicarla en tus proyectos o para tus clientes.
4 comentarios en «Guía WPO para optimizar la velocidad de tu web»
Gran artículo Alonso.
¿Has probado LiteSpeed para caché? Nos está dando muy buenos resultados.
En cuanto al tema de las fuentes. Sí que es verdad que lo ideal sería hacer solo la llamada de la fuente que vamos a utilizar y no descargar un archivo con todas las fuentes de Google Fonts. Ya tenemos deberes 🙂
¡Un saludo!
Buenas! Sí que lo he probado y suelo utilizar el plugin siempre que el proveedor tenga este tipo de servidor web, ya que no todos lo tienen, sino prefiero WPRocket o Autooptimize.
Ese es un artículo extenso y detallado. Vale la pena considerar los puntos que planteó. Y sin duda, después de que el algoritmo reciente de Google cambia este año, algunos sitios web importantes incluso pierden el 70% de su tráfico, porque no están optimizados según los requisitos de Google.
¡Muchas gracias! Y muy pronto, un artículo detallado sobre los últimos requisitos de calidad de Google 🙂