¿Qué es el WPO o la Optimización del Rendimiento Web? 13 TIPS para tu WEB

El WPO es una disciplina que tiene mucha importancia de cara a la experiencia de usuario. Una correcta implementación de todos los factores que influyen en el WPO de una Web puede ayudarte a escalar más puestos en los resultados de Google.

que es wpo

Gracias a este artículo, vas a poder implementar tú mismo/a muchas de las mejoras relacionadas con el WPO. Analizaremos todos los factores que intervienen en la optimización del rendimiento de una web y diferentes maneras de aplicar estas mejoras en tu web, blog o tienda online.

Vamos a realizar un artículo práctico para los «Juan Palomos», es decir, para aquellas personas que les gusta realizar las mejoras en sus webs ellos mismos.

Si usas WordPress como gestor de contenidos en tu web, lo vas a tener muy fácil ya que no se necesitan conocimientos de programación para implementar la mayoría de recomendaciones para mejorar el WPO de una Web.

¿Qué es el WPO?

El WPO son las siglas en inglés de Web Performance Optimization.

Se refiere a una disciplina que aplica una serie de mejoras con el objetivo de que una web cargue muy rápido. De esta manera se ofrece a los usuarios una experiencia de navegación fluida y rápida dentro de tu web.

¿Qué implicaciones tiene el WPO en el SEO?

Además, la optimización del rendimiento web juega un papel importante en el SEO. Hace unos 10 años, Google agregó a su algoritmo la velocidad de la carga de una web. Un buen rendimiento web es crucial cuando se trata de dispositivos móviles.

La optimización del rendimiento web ofrece muchos beneficios. Voy a destacar únicamente los 4 principales beneficios:

– Mayores tasas de conversión.

– Más visitas a tu web.

– Mejor clasificación en el ranking de Google.

– Menos costos de ancho de banda del servidor.

13 consejos para realizar una optimización WPO

Antes de sumergirnos en los consejos, hay algunas herramientas que debes conocer para que puedas identificar los problemas de rendimiento de tu web. Si conoces dónde se ralentiza o atasca tu web, puedes reajustar tus prioridades.

Mide el tiempo de carga de tu web

Existen varias herramientas muy útiles para medir cuánto tiempo tarda en cargar una web y algunas de ellas te ofrecen información de los aspectos que deberías mejorar. Es mejor usar siempre la misma para que puedas ir comparando las mejoras.

Nosotros usamos GTMetrix ya que es una herramienta gratuita en la que puedes geolocalizar desde dónde se realiza la prueba, te da la puntuación obtenida en el PageSpeed (una métrica oficial de Google que mide aspectos del WPO) y te da información sobre las mejoras que tienes que aplicar.

herramienta velocidad web

13 consejos para optimizar el rendimiento de tu web

Una vez que has realizado al menos 3 pruebas tanto en la página de inicio de tu web como en las páginas más importantes, ahora es el momento de comenzar a aplicar las mejoras.

1) Optimización de imágenes.

Optimizar el peso de las imágenes es uno de los aspectos que más pueden influir en el tiempo de carga de una página. No es lo mismo el tiempo que tarda en cargar una imagen que pesa 1 mega que el tiempo de carga de una imagen que pesa 30 Kbs.

La buena noticia es que es muy fácil reducir el peso de una imagen. Existen herramientas online que te facilitan esta labor. Nosotros solo te vamos a recomendar una: Compress-Or-Die.

Si usas WordPress y tienes muchas publicaciones en tu web o blog, puedes realizar una optimización masiva con algunos plugins que realizan esta labor. Nosotros te recomendamos alguno de estos dos plugins:

También es importante que pongas las imágenes con las dimensiones que tiene el ancho de tu contenido. Por ejemplo, si tu contenido tiene un ancho de 940 píxeles, es necesario que tus imágenes tengan como máximo esa anchura. De lo contrario, WordPress tiene que hacer un proceso de redimensionado.

Para redimensionar las imágenes yo utilizo directamente Photoshop antes de subir una imagen a nuestra web. Me permite crear imágenes con el ancho y el alto que yo quiera. También puedo modificar valores de calidad que hacen que pesen menos sin casi pérdida de calidad.

2) Reducir las peticiones http.

Cuando un navegador obtiene datos de un servidor, lo hace mediante HTTP (Protocolo de transferencia de hipertexto). Es una solicitud / respuesta entre un cliente y un host. En general, cuantas más solicitudes HTTP haga tu página web, más lenta se cargará.

Existen muchas formas de reducir la cantidad de solicitudes, como por ejemplo:

– Reducir el uso de Javascripts externos.

– Usar CSS Sprites.

– Utilizar solo los plugins necesarios y mejor optimizados.

El uso de una buena plantilla o Theme optimizado también ayudará en esta tarea ya que no utilizará tantas peticiones Http. En la captura de pantalla que he puesto más arriba del test de carga que he realizado, puedes ver que en ese artículo se realizan 36 peticiones, lo cual no está mal.

Tienes que tener en cuenta que códigos como el de Google Analytics, píxel de Facebook y Adsense son peticiones a terceros y ralentizan la web.

Con el uso de un plugin de caché, podemos eliminar algunas peticiones innecesarias, como por ejemplo el uso de emojis.

3) Minificar CSS y Javascript.

La minificación de recursos significa eliminar caracteres innecesarios del HTML, JavaScript y CSS que no es necesario cargar, como por ejemplo:

  • Caracteres de espacio en blanco.
  • Caracteres de nueva línea.
  • Comentarios explicativos en dichos archivos.
  • Delimitadores de bloque.

Minificar acelera los tiempos de carga ya que reduce la cantidad de código que debe solicitarse al servidor.

Hoy en día, muchos plugins de caché ya tienen esta opción de minificado entre sus funciones. Deben ir activándose con cuidado, a la vez que comprobamos que la estética y funcionalidad de la web, tanto en escritorio como móvil, se ve y funciona correctamente.

4) Evitar los recursos que bloquean el procesamiento del resto de archivos.

Los recursos que bloquean dicho procesamiento suelen ser códigos CSS o archivos de Javascript. A continuación te muestro algunas buenas prácticas sobre el tratamiento de estos archivos para evitar el bloqueo del procesamiento.

CSS
  1. Llamar correctamente a los archivos CSS.
  2. Usar consultas de medios para marcar algunos recursos CSS como bloqueo de no representación.
  3. Disminuir la cantidad de archivos CSS (concatena tus archivos CSS en un solo archivo).
  4. Minificar el CSS (eliminar espacios, caracteres, comentarios, etc).
  5. Utilizar menos CSS en general.
Javascript
  1. Mover los scripts al final de la página justo antes de la etiqueta de cierre </body>.
  2. Utilizar la directiva async o defer para evitar el bloqueo de procesamiento.
  3. Concatenar los archivos JS en un solo archivo.
  4. Minificar el JavaScript (eliminar espacios, caracteres, etc).
  5. Insertar JavaScript de poco tamaño.

La directiva Async permite descargar los scripts en segundo plano sin bloquear nada. Luego, en el momento en que termina de descargarse, la renderización se bloquea y ese script se ejecuta. El procesamiento se reanuda cuando se ejecuta el script.

Si usas WordPress y tienes un problema de bloqueo del procesamiento, puedes solucionarlo con el plugin Async JavaScript.

5) Reducir la latencia con una red de entrega de contenido (CDN).

Una CDN es una red de servidores colocados en muchas partes diversas del mundo cuya misión es acelerar la entrega de tu web a los diferentes usuarios que se conectan desde diferentes países.

Por ejemplo, si tu servidor está en España y se conecta un usuario desde Colombia, tu CDN le servirá tu web desde el servidor más cercano a Colombia, no desde España. Esto disminuye drásticamente el período de latencia de entrega de tu web.

La empresa de CDN más conocida es Cloudflare. Tendrías que darte de alta en su web y colocar las DNS que te proporcionen. Tienen un plan gratuito y varios planes de pago. Si tienes usuarios desde diferentes partes del mundo, te conviene contratar un CDN.

6) Time To First Byte (TTFB).

El tiempo que transcurre desde que un usuario intenta acceder a tu web hasta que tu servidor manda el primer byte (TTFB) es la medida de la capacidad de respuesta de un servidor web.

Básicamente es el tiempo que tarda un navegador en comenzar a recibir información después de haberla solicitado al servidor. El TTFB de un sitio web se calcula como:

Tiempo de solicitud HTTP + Tiempo de proceso de la solicitud + Tiempo de respuesta HTTP.

ttfb en gtmetrix

En la captura de pantalla de arriba, puedes ver dónde se muestra este valor en la herramienta GTMetrix. Si bien puede dar un valor más elevado de lo normal, la forma más adecuada de medir el TTFB es directamente desde el navegador de Google Chrome:

ttfb inspeccionador elementos

Para localizar este valor, debes abrir el inspeccionador de elementos de Google Chrome, seleccionar «Network» y recargar la página que quieras medir. Después colocas tu cursor en la columna «Waterfall», en la fila correspondiente a la url de la página.

Usar un CDN, un servidor web rápido y un proveedor de DNS confiable, puede reducir drásticamente tu TTFB.

7) Evitar los redireccionamientos 301.

Los redireccionamientos son asesinos del rendimiento. Evítalos siempre que sea posible.

Una redirección generará tiempos de ida y vuelta adicionales (RTT) y, por lo tanto, duplicará rápidamente el tiempo que se requiere para cargar el documento HTML inicial antes de que el navegador comience a cargar otros activos.

8) Almacenamiento en caché.

Caché del navegador.

Aprovechar la caché del navegador es fundamental para una web que no cambia constantemente todos los días. Se recomienda tener una caché máxima de 7 días en tales casos.

El almacenamiento en caché HTTP ocurre cuando un navegador almacena copias de recursos para un acceso más rápido.

Caché del servidor.

Existen diferentes formas de almacenamiento en caché del lado del servidor cuando hablamos de la optimización del rendimiento de una web. Esto generalmente se hace en sitios de mayor tráfico.

Varnish caché es un ejemplo que puede ser muy poderoso cuando se combina con un plugin de caché y un CDN. También puedes utilizar plugins de caché que algunas empresas de hosting proporcionan a sus usuarios, véase Siteground.

9) PHP7.

Mantener actualizados los diversos componentes de un servidor web es fundamental por motivos de seguridad, actualizaciones de rendimiento, etc.

Si estás utilizando PHP (WordPress lo utiliza), la actualización a PHP7 puede ayudar a mejorar enormemente el rendimiento en comparación con PHP 5.6.

comparativa php velocidad de carga

Según los resultados de la imagen anterior, PHP7 puede manejar 204 solicitudes por segundo en comparación con las 96 de PHP 5.6 en WordPress 3.6. Además, PHP7 puede manejar 183 solicitudes más que PHP5.6 en WordPress 4.1.

10) Rendimiento de las Google Fonts.

Casi todas las webs de hoy en día utilizan fuentes de tipografía de Google. Las desventajas de estas tipografías es que agregan solicitudes HTTP adicionales a los recursos externos. Las Google Fonts también bloquean el renderizado.

Lo mejor en estos casos es utilizar las propias fuentes del sistema. Georgia es una gran fuente de sistema que me viene a la mente, se ve genial y facilita la lectura.

Una opción alternativa sería mover las Google Fonts a un CDN.

11) Habilitar la compresión Gzip.

Gzip es otra forma de compresión que comprime páginas web, CSS y JavaScript a nivel del servidor antes de enviarlas al navegador. Esta optimización del rendimiento de una web es fácil de implementar y puede marcar una gran diferencia.

Muchos plugins de caché también ofrecen esta funcionalidad.

12) Alojamiento de calidad.

Tener un alojamiento web rápido es tan importante como cualquier optimización del rendimiento que podamos hacer, ya que es la columna vertebral de tu web.

Mantente alejado de los planes de alojamiento compartidos baratos. Sugerimos contratar un VPS.

13) Optimización de la Base de Datos.

Y por último, pero no menos importante, está la optimización de la base de datos. Muchos plugins que instalamos y que acabamos desinstalando, van dejando tablas en la base de datos.

Para limpiar y optimizar una base de datos, recomendamos utilizar el plugin WP-Sweep. Puedes utilizarlo una vez para limpiar toda la BBDD y luego desinstalarlo.

Resumen

Como puedes ver, hay cientos de ajustes de optimización del rendimiento de una web que puedes implementar para mejorar aún más la entrega y la velocidad de tu contenido. Desde la optimización de imágenes hasta la implementación de una CDN, el almacenamiento en caché del navegador y del servidor, aprovechando Gzip, PHP7 y mucho más.

¿Tienes algunos consejos de optimización del rendimiento de una web que quieras aportar? Si es así, puedes dejarnos tu comentario.

Si te ha gustado este contenido, puedes hacérnoslo saber compartiéndolo en las redes sociales para que publiquemos más artículos similares.
Summary
¿Qué es el WPO o la Optimización del Rendimiento Web? 13 TIPS para tu WEB
Article Name
¿Qué es el WPO o la Optimización del Rendimiento Web? 13 TIPS para tu WEB
Description
El WPO es una técnica del SEO On Page. Vamos a ver de qué se trata y te voy a dar 13 tips para mejorar el rendimiento de tu web.
Author
Publisher Name
Adrenalina
Publisher Logo

Deja un comentario

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