Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

casos-reales-wpo-68.svg

4 casos reales de WPO y optimización de una página web en WordPress

En una situación como la actual donde los usuarios y Google priman la velocidad de carga de las páginas web, no puedes obviar este aspecto. Para ello debes optimizar tu página web, también conocido como WPO, y procurar que sea lo mejor posible tanto para los usuarios como para Google. Pero, ¿cómo lograrlo?

En abril del año pasado tuvo lugar la 1ª edición del Pro Marketing Day, un evento de marketing digital organizado por Aula CM en el que se pudo disfrutar tanto de ponencias de profesionales expertos del ámbito digital como de casos prácticos reales con empresas de las personas asistentes.

En este caso, Ernesto G. Bustamante y Roberto Ortega, ambos profesores de Aula CM, nos hablaron sobre la importancia que tiene la optimización de las páginas web o WPO. Para ello usaron como ejemplo la optimización realizada de la web de Aula CM y cómo habían optimizado las de otras tres empresas Eventos Mágicos MadridCasa Jardín Oriental y Marketin.tv.

Aquí tienes el vídeo de la ponencia:

 

9 34¿Qué es el WPO y por qué se debe hacer?

Podemos definir el WPO como la optimización de la página web orientada a la mejora de los tiempos de carga. Lo que busca es reducir el tiempo que tarda la página web en mostrar la totalidad de su contenido a los usuarios y por lo tanto mejorar su experiencia.

¿Por qué debes optimizar tu página web?

  • Experiencia de usuario: Hay que ofrecer a los usuarios páginas rápidas y fluidas que le permitan navegar por la web buscando lo que quiere siendo lo más rápido posible, porque si la página tarda en cargar el usuario se va.
  • Posicionamiento SEO: Google tiene en cuenta, y cada vez más, la velocidad de carga de las páginas web y, además, el contenido para rankear la web en mejor o peor posición.

Posicionamiento WebCasos prácticos de WPO

La ponencia está basada fundamentalmente en 4 casos prácticos de optimización web. Por un lado tenemos el caso de estudio de Aula CM y por otro lado están las optimizaciones de las otras tres empresas que participaron en el congreso.

La herramienta utilizada para conocer el estado de las páginas web fue GT Metrix, que es una herramienta profesional, muy útil para hacer WPO, basada en los insights de Google Page Speed y el YSlow de Yahoo. Con ella se pueden obtener datos como el tiempo de carga de la página web, el peso de la misma y las peticiones. Además, evalúa la página web diciendo dónde se encuentran los fallos para que puedas corregirlos y tengas la web optimizada.

 Estudio Aula CM – Ernesto G. Bustamante

WPO - optimizar página web

 

Optimización de imágenes

Las imágenes pueden lastrar la optimización de una página web al aumentar el peso de la web. Esta optimización se puede realizar directamente al editar la fotografía en programas como Photoshop, utilizando páginas como Tinypng o plugins como WP Smush en el caso de tener CMS como WordPress.

En el caso de la optimización de la web de Aula CM se utiliza la herramienta ImgOptimizer. Está herramienta es propia del hosting Web Empresa donde Aula CM tiene alojada la web. Esta herramienta es muy útil, ya que realiza una gran optimización de las imágenes.

 

Combinar imágenes con sprites

En el caso de Aula CM, la página tiene un megamenú y para cada servicio existía un icono diferente. Esto hacia que la web tuviese una gran cantidad de peticiones al servidor, lo que ralentizaba la carga.

Para solucionarlo se combinaron todos los iconos en una imagen en png a través de un sprite. Y luego gracias a la utilización de código CSS se puso la imagen como fondo y para cada icono se añadió un desplazamiento, también con CSS, para que se visualizará correctamente.

Gracias a esto la página paso de tener una petición por cada icono a realizar solo una petición, ya que se habían agrupado todos los iconos.

WPO - cómo optimizar una página web

 

Leverage Browser Caching: Cachear URLs

Cachear significa guardar una copia estática de la web en el servidor que va a servir a los usuarios para no tener que estar haciendo una consulta a la base de datos.

Si las URLs que hay que cachear son internas, se pueden utilizar plugins como WP Rocket o W3 Total Caché.

La dificultad radica en cuando estas URLs son externas, para conseguir optimizar la página web hay que seguir los siguientes pasos:

  1. En el caso de Aula CM las URLs que se necesitaban cachear provenían de Analytics y Facebook Events, por lo que se opto por cargar el código de Analytics y FBEvents de forma local en el hosting.
  2. Luego se creó un script que ejecuta una tarea programada cada 4 horas y se guarda en un directorio las versiones actualizadas de los scripts de Analytics y FBEvents.
  3. Por último, se editó el header.php y se cambiaron las URLs de ambos códigos para que cargasen desde local.

De esta forma se consiguió mejorar el WPO tanto de la velocidad de carga como el YSlow.

Imágenes escaladas

En algunas ocasiones se utilizan imágenes en tamaños más pequeños de los que tiene la imagen subida a la web. Esto como consecuencia hace que la página pese más de lo que necesita y por lo tanto será necesario realizar una optimización de la web o WPO.

Se pueden utilizar plugins como:

  • SVG Support: puedes optar por utilizar un formato SVG en tus imágenes, lo que hará que tenga un peso menor incluso que los PNG, y las imágenes tenga una calidad infinita.
  • Regenerate Thumbnails: Con este plugin se puede hacer un redimensionado de las imágenes a un tamaño que nosotros fijemos. Para que la web utilice el tamaño dado, debes utilizar código.

 

Defer Parsing of Javascript

Esto sucede cuando en la cabecera de la página web se están realizando una gran cantidad de peticiones Javascript que bloquean la fluidez de la página.

Para optimizar el Defer Parsing puedes reducir el número de archivos javascript que hay en la web, de esta forma se consigue que haya menos llamadas. Dos buenos plugins para eliminar este problema son:

  • WP Rocket
  • JS & CSS Script Optimizer

Otra forma de optimizarlo sería utilizando cargas asíncronas.

La carga asíncrona hará que los archivos carguen de forma paralela, los archivos serán cargados cuando les necesitemos

Para realizar la carga asíncrona de la web, podemos usar plugins como:

  • WP Rocket
  • Asynchronous Javascript

 

Remove Query Strings

Hacen referencia a las URLs dinámicas que se crean en algunos archivos y que pueden ralentizar la carga de la página web.

  • Se puede solucionar con el plugin Remove Query Strings o WP Rocket.
  • También se puede solucionar este problema a través del código:

 

WPO - optimizar página web

 

Lazy Loading – Carga perezosa

Consiste en cargar las imágenes de la página web de manera progresiva, cargándose solamente las que ve el usuario.

Para solventar este problema se pueden utilizar plugins como:

  • BJ Lazy Load
  • WP Rocket
  • Speed Booster Pack

 

Caché de servidor

Consiste en realizar un cacheado del servidor. En este caso se realizó a través de la herramienta Magic Caché de Web Empresa, que redujo el tiempo de carga y mejorar el First Byte.

El First Byte es el tiempo que tarda tu servidor en servir el primer byte de la página web

WPO - optimización de la página de Aula CM

 

Estudio 2: Eventos Mágicos Madrid – Roberto Ortega

WPO - cómo optimizar una página web

 

Remove Query Strings

La opción más fácil sería instalar el plugin Remove Query Strings y se soluciona el problema. Pero se quiso buscar mejorar aun más, por eso se instalo Speed Booster Pack. Con este último plugin se consiguió:

  • Se resolvió el problema de Query strings
  • Se añadió lazy load a los recursos.
  • Y finalmente se realizó un script to the footer, que significa bajar el script al footer.

 

Minify CSS y JS

Los archivos CSS y JS pueden llevar espacios en blanco o saltos de página. Esto son elementos que debemos optimizar para mejorar la web. Para ello se pueden utilizar dos plugins que tienen un resultado similar:

  • Better WordPress minify
  • JS & CSS Script Optimizer

Con estos plugins lo que se consigue es combinar todos los archivos de CSS y JS de tal manera que se deja solo un archivo de cada uno.

 

Mapa de Google Maps

El elemento de Google Maps genera muchas peticiones, por lo que es aconsejable no tener este mapa en las landings page.

Para evitar estas peticiones se puede cambiar el elemento Google Maps por una captura del mapa. Con este cambio se evitan las peticiones que realizan los mapas y se mantiene el apartado visual.

WPO - optimizar una página web

 

 Estudio 3: Casa Jardín Oriental

Cambio de hosting

Tener un hosting bueno puede ayudar a mejorar la velocidad de carga de una página web, ya que no necesita tanto tiempo de respuesta. En este caso cambiando de hosting a Web Empresa y la velocidad de carga mejoró 1 segundo.

 

Plugin W3 Total Caché

Es un plugin configurable con el que cachear las páginas y conseguir una gran optimización de la web o WPO.

En este caso se activaron las configuraciones de:

  • Page caché
  • Object caché
  • Database caché
  • Browser caché

Este plugin debe configurarse poco a poco para ver que efectos tiene y si afecta al rendimiento de la web de forma positiva o si nos algún problema.

WPO - optimizar página web

 

 Estudio 4: Marketin.Tv

Optimización de imágenes

En este caso el principal problema de la web eran las imágenes y sus optimizaciones. Para resolverlo se han utilizado plugins como ImgOptimizer o WP Smush.

WPO - optimizar página web

 

Conclusiones

Esta ponencia tenía como fin enseñar qué es el WPO y cómo optimizar una página web. Finalmente Ernesto G. Bustamante dio un checklist de cosas a tener en cuenta para optimizar una página web:

  1. Optimiza siempre tus imágenes antes de subirlas a la web.
  2. Utiliza el tamaño correcto de las imágenes, no subas imágenes de 1000×1000 si vas a utilizar un tamaño más pequeño.
  3. Cachea todo lo que puedas, con plugins como WP Rocket o W3 Caché para aumentar el rendimiento de la web.
  4. Combina y minimiza archivos, reduce la cantidad de archivos dentro de la web.
  5. Reduce peticiones request utilizando Lazy Loading.
  6. Utiliza cargas asíncronas y mejora el rendimiento de la web.
  7. Lleva todas las llamadas que puedas del header al footer para no ralentizar las cargas.
  8. Utiliza un hosting de calidad, tener un buen hosting es importante.
  9. Optimiza y analiza constantemente tu web, no dejes pasar mucho tiempo.

 

¿Eres de los que constantemente están optimizando su web o la tienes olvidada? ¿Conoces alguna otra técnica de WPO?

¿Quieres asistir al PRO Marketing DAY?

logos promarketingday definitivos-07Si no pudiste acudir a la cita celebrada en abril de 2017, estate atento porque volvemos con más ponencias, más ejercicios prácticos en tiempo real y más estrategias de marketing online.

 

Más artículos sobre el PRO Marketing DAY

4 casos reales de WPO y optimización de una página web en WordPress
4 (80%) 1 voto
Artículos relacionados

Análisis y detección de problemas SEO de una página web, con MJ Cachón

La primera edición del PRO Marketing DAY,
2018-02-22 17:57:36
milena

10

19 claves de Diseño Web para hacer la Landing Page perfecta

En este post te voy a dar un montón de consejos útiles y herramientas prácticas para que consigas
2017-11-16 17:37:44
ernesto

10

8 ideas de negocios rentables por Internet que puedes crear fácilmente con WordPress

WordPress ya ocupa el 30% del mercado mundial de las webs. Es decir, casi una de cada 3 webs que
2017-07-19 17:05:55
rafa

10

Sobre el Autor 

Publicista enamorado del Marketing Digital. Voy aprendiendo día a día en esta profesión tan apasionante.

    Más en:
  • linkedin
  • twitter
Christian Leis4 casos reales de WPO y optimización de una página web en WordPress

4 comentarios

Únete a la conversación
  • Rubén Alonso - 13 abril, 2018 responder

    Brutal 👏👏👏
    Sobre todo me ha molado el WPO de AulaCM, con los iconos en sprites y lo de llevaros los códigos externos a local. Esto lo estuve pensando en hacer muchas veces, pero siempre me daba “cosilla” el tema de que se actualizasen esos códigos y tener que copiarlos a mano de nuevo… Pero no había pensado en hacer algún script que los vaya actualizando… ¡Me mola la idea! 🙂
    Muy bueno Christian!

    Christian Leis - 20 abril, 2018 responder

    Muchas gracias, Rubén.
    Espero que ya hayas podido probar a hacer el script con los iconos del menú y te haya salido bien.
    Un saludo.

  • Posicionamiento web Valladolid - 16 abril, 2018 responder

    Muy buen material y muy interesantes los casos de uso , esperamos aplicar las recomendaciones en algunos de los casos en nuestros proyectos.

  • Stephanie - 16 abril, 2018 responder

    Wow, en serio es difícil encontrar un artículo tan completo y de fácil comprensión, muchas gracias!

Únete a la conversación