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.
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.
[Tweet «Optimizar tu página web te ayudará a mejorar el #SEO y la experiencia de tus usuarios»]
Casos 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.
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 comoPhotoshop, 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.
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:
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.
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.
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.
[Tweet «Cachea todas las URLs que puedas para mejorar la velocidad de carga y el YSlow #WPO»]
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:
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
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.
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.
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.
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:
Optimiza siempre tus imágenes antes de subirlas a la web.
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.
Cachea todo lo que puedas, con plugins como WP Rocket o W3 Caché para aumentar el rendimiento de la web.
Combina y minimiza archivos, reduce la cantidad de archivos dentro de la web.
Utiliza cargas asíncronas y mejora el rendimiento de la web.
Lleva todas las llamadas que puedas del header al footer para no ralentizar las cargas.
Utiliza un hosting de calidad, tener un buen hosting es importante.
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?
Si 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.
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!
4 comentarios
Únete a la conversaciónRubén Alonso - 13 abril, 2018
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
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
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
Wow, en serio es difícil encontrar un artículo tan completo y de fácil comprensión, muchas gracias!