¿QUÉ ES WPO?

Las siglas de la palabra (Web Performance Optimization), que en su traducción vendría a ser Optimización del rendimiento web.

Estrategias de WPO: servidor, caché, código, plugin, imágenes.

El WPO en wordPress, es tendencia, cada vez más queremos tener una página web más rápida, y queremos mejorar la experiencia del Usuario y al mostrarle el web más rápido, la mejoraremos.

Como base a la hora de hacer una página web, es contratar el servicio de un hosting donde vamos alojar la página web.

Hoy en día hay varias empresas donde puedes contratar un hosting, e incluso muchos de ellas ya viene un pack exclusivo para las páginas web que sean en WordPress.
Son varios factores los que tenemos que tener en cuenta:

 Principalmente, y por seguridad y confianza del usuario, que te permita instalar el Certificado SSL. Hoy en día, muchos hostings te lo incluyen dentro de la tarifa y muy fácil de instalar.

 

 Que disponga de Discos SSD y el protocolo http2.

 

Que te permita tener las últimas versiones de php de WordPress.

 

flecha-marcadorY hay algunos incluso que te incluyen la posibilidad de usar CDN, que es como que te sube tus archivos a varios ordenadores en diferentes países, y según la proximidad en la que el usuario se conecte, le muestra ese archivo en concreto más cercano, haciendo posible que se cargue más rápido.

 

*Si queréis profundizar un poco más en el hosting que contratar os dejo este enlace:

descripcion-servicios-maria-de-la-calzada

 

¿CÓMO HACER WPO EN WORDPRESS?

A la vez que se va diseñando la página web en WordPress, hay que ir implementando unas acciones que son muy importantes para mejorar el WPO, si optamos por crear como rutina, una serie de actuaciones por costumbre, nuestra página web, será más rápida.

Este tipo de acciones, serían:

1. IMÁGENES

Respecto a las imágenes, son un recurso muy importante y que poca gente las utiliza como se debería, yo he llegado a ver páginas web en WordPress, con la galería de medios llena de imágenes sin optimizar, subidas tal cual, desde el móvil, recién hechas.

Esto es una locura, estás ocupando mucho espacio, que puedes evitar, ralentizas la carga y puede ser que se muestre al usuario a espacios por lo que empeoras la experiencia del usuario (UX)

En cambio, si tenemos en cuanta antes de subirla, el espacio que va a ocupar, le daremos una dimensión exacta y si las guardamos para web y comprimimos, no perderá calidad y al fin al cabo pesarán menos. Igual que al guardarlas si lo hacemos con el formato WebP o jpeg, evitando en lo más posible el uso del png.

El programa de Photoshop nos ayuda a redimensionar la imagen y guardarla para web y reducir su peso: aquí un video explicativo paso a paso para hacerlo.

Mi recomendación, es que no uséis la propia herramienta de recorte en WordPress, hay una app para Windows que te facilita este proceso e incluso puedes redimensionar varias imágenes a la vez. –> IrfanView es gratuita.

Y para que pesen menos, hay una herramienta gratuita –> Tynipng online que te reduce el peso de las imágenes antes de subirlas a la galería de medios de WordPress.

A lo que se refiere al formato de las imágenes, se pueden utilizar: WebP, Jpeg o Png. Mi recomendación, es que uséis lo menos posible .png solo para casos irremediables como el logo o favicon para incrustarlo sobre un fondo que necesitamos que sea transparente nuestra imagen para que destaque y no quede con un marco feo.

Hoy en día está cogiendo mucha fuerza el formato WebP, pero si deciros que, si lo utilizáis, comprobéis luego con varios navegadores y desde varios dispositivos, porque en ocasiones no está implementado en todos estos formatos y no se mostraría.

Hay una app SQuoosh.app ENLACE que te hace posible guardar las imágenes con este formato.

Con todos estos pasos, te aseguro que, si lo tomas como norma general, tu página web mejorará en velocidad de carga y peso.

2. PLUGIN

Estos son otro de los factores a tener en cuenta en la WPO de páginas web con WordPress, ya que principalmente en su uso, hay mucha gente que se pone a instalar plugin como si no hubiera un mañana, incluso en ocasiones para probar y ahí los deja, aunque no los esté usando.

Malas practicas a seguir con el tema de plugin es que no hay que instalar por instalar, son recursos que generan muchas peticiones al servidor y utilizar muchos recursos. Por lo tanto, hay que tener mucho cuidado con ellos.

Plugin en WordPress - WPO

Lo plugin, nos ayudan a mejorar nuestras páginas web con características y funciones que queremos implementar en nuestra página. Pero estos plugin siempre están activos. Por lo que hay que saber, los que vamos a necesitar en concreto. Y luego los que necesitemos, saber en que páginas los vamos a usar, ya que hay muchos plugin que no se necesitan en todas las páginas.

Es decir, en nuestro proyecto web (todas las páginas) tenemos activo el plugin de formulario, pero resulta que solo lo usamos en una página concreta que es la de Contacto, ¿entonces para que lo tenemos activo en todas las páginas?

Hay que ahorrar recursos a nivel servidor, y decirle que si en la home no necesita el plugin formulario no se lo muestre. Para ello, hay varias técnicas, yo os voy a comentar a nivel básico que lo hagáis con un plugin–> Asset CleanUp. En el podemos configurarlo de tal forma, que indiquemos que plugin queremos activarlo en una página en concreto o en todas.

3. CACHÉ 

Otro recurso a tener en cuenta para la mejora de Caché, que vendría siendo, cuando un usuario visita tu página web, guarda una copia, y la próxima vez que visite de nuevo la página web se le mostrará esa copia y no tendrá que hacer las peticiones oportunas al Servidor y nuevamente se cargará más rápido.

Hay varios Plugin que hacen posible esta acción, como son Autoptmize que es gratuito o WP Rocket de pago. En la mayoría de los casos yo uso, el de pago, porque me realiza más funciones, como limpieza de base de datos, me elimina los emoji de WordPress, que es un recurso que viene por defecto y que no suelo utilizar y así reduzco las peticiones, y más características importantes.

Ambos plugin son buenos, pero al igual que todos, los plugin no es solo descargarlo activarlo y van a empezar a funcionar hay que configurarlos y sobretodo para lo que queremos que funcionen, tenerlo en cuenta.

Interface del plugin Wp Rocket para WPO de tu página Web

4. CÓDIGO

Aquí ya os vengo hablar de lo que sería el código de la página web, y es que para que os quede claro, y aunque vosotros no sepáis nada de código, cuando hacéis una acción dentro de tu web, tanto sea introducir una imagen, escribir un párrafo, poner de un color un título…todas esas funciones se hacen con código.

WordPress es un CMS que lo que ha hecho es facilitar esas funcionales al usuario y sin tener que conocer ni saber código puedas crear tu página web y más ahora con los constructores visuales.

Pero el código es muy importante, ya que en ocasiones realizamos funciones, utilizamos bloques ya diseñados que metemos en nuestra web y cada una de estas acciones llevan un código en concreto, para que lo entendáis, cada funcionalidad que usáis, crea una hoja de estilos. Y al final una página web, puede llegar a tener una “libreta”, llena de hojas y en su mayoría, con espacios en blanco o nombres de estilo (selector) muy largos…

En definitiva, cuanto más limpio sea tu diseño, y menos bloques utilices de plantillas predeterminadas, mejor.

Pero si usas estas plantillas de diseño ya creadas, lo mejor, si no sabes de código, y no quieres ir a archivos de tu página web en el servidor y juntar el código, por miedo a “romper” algo que en ocasiones sin conocer en profundidad puede pasar.

Lo mejor es que utilices algún plugin que te ayude a comprimir, y minificar el código, tanto:

  • El código CSS que es el código que “pone bonito” dándole forma, colores, tamaños…en nuestra página web.
  • Y el código de .js (javascrip) que es código que hace posible animaciones y funcionalidades creativas dentro de la página web.

Hoy en día, ya hay muchas funcionalidades que también se pueden hacer con código CSS que puede evitar el uso de script.
*En mi caso, con el mismo plugin de WP Rocket que te nombré anteriormente para configurar la Caché, tiene otro apartado que me minifica los códigos CSS y js.

Pero si no usáis WP Rocket, podéis usar Fats Velocity Minify. Gratuito

archivos en el servidor de nuestra paginas web - Uso de Hojas de estilo CSS

Y como siempre, una vez que lo activemos y configuremos, siempre observar de nuevo la página por si hay comprimido demás y no se muestra alguna funcionalidad.

HERRAMIENTAS PARA VER EL WPO DE NUESTRAS PAGINAS WEB

Y para terminar, comentaros que hay una serie de herramientas que nos ayudan en ver datos de optimización en nuestra página web. Son herramientas de WPO:

  • GTMetrix
  • PageSpeed Insight
  • Pingdom Tools

Estas tres herramientas, son interesante para detectar algunos errores en tu página web para que puedas solucionarlo y mejorar la velocidad de carga.

Las tres, aunque analizan la misma web, y te muestran datos de WPO, muestran diferentes parámetros. Ya que cada una de estas herramientas, juzga con sus propios criterios, entonces por ello, no obsesionéis con los datos que os da cada una.

IMAGEN: RESULTADOS TRES HERRMIENTAS
GTMETRIX
PAGESPEED

Quedaros con una media de las tres, y pensar que como te muestra errores concretos, hacerlos y así será la única forma de mejorar.

VIDEOTUTORIAL EXPLICACTIVO DE WPO CON GTMETRIX

Os dejo un video, con más de media hora de explicación, donde analizo una página web, y con la herramienta GTMetrix le voy haciendo cambios y se van viendo, sobretodo en este caso me centro en las tipografías que no he hablado en todo el artículo porque o lo muestro en el video, también veréis mejorar las peticiones que hacemos al servidor con ese cambio, y también os comparo esa misma página su análisis con las otras dos herramientas.

Espero que os sea de ayuda:

CONCLUSIÓN: A lo que se refiere el WPO, no es solo velocidad, hay que centrarse en el tiempo de respuesta, carga innecesaria y menos recursos a utilizar por el servidor. Mejorar estas acciones nos ayudará a tener una página web más rápida.

Si eres diseñador web WordPress, estas acciones a tener en cuenta, te ayudarán mucho a implementar como rutina en tus proyectos. Y si eres de los que te has creado tu página web con WordPress tu mismo, con los plugin y herramientas que te enseño podrás mejorar algunos aspectos que igual te has pasado por alto.

18 comentarios en «¿Qué es WPO?🚀 Diseña páginas Web WordPress más rápidas. [Videotutorial + de 30 minutos usando GTMetrix]»

  1. Hola María.
    Enhorabuena por el post.
    Añadiría la mezcla de CDN y WP Rocket para mejorar los tiempos de carga. Yo uso Cloudflare y CDNBunny (súper económico) y con una buena configuración vuelan las páginas.
    Un plugin que me gusta mucho es Sweep, para las bases de datos.
    Muchas gracias por el aporte y sigue así!!!!!
    Un abrazo

    Responder
    • Gracias Roberto por tu valoración y grandes consejos, lo miraré. Lo del CDN, me tengo que poner con ello, y probaré es plugin de Sweep, yo uso WP Rocket y tiene un apartado de base de datos, ves este plugin como complementario a lo que ya tengo con Wp Rocket? o para los que no usan WP Rocket? Gracias de antemano

      Responder
  2. Muy interesante María todo lo que cuentas, es muy importante la velocidad, tiempo de respuesta… Apunto todas las acciones que comentas para tener una página web más rápida. Gracias por tu aporte.
    Un abrazo,
    Nagore García

    Responder
    • Si todo suma, es muy importante hasta para el posicionamiento tener una buena velocidad de carga y ya ni te cuento para la experiencia del usuario. Espero que te sea útil Nagore y gracias.

      Responder
    • Todo cuenta, un proyecto en Internet tiene muchos factores para tener en cuenta: diseño, imágenes que impacten, textos que persuadan, una buena velocidad de carga, un Seo que haga que te encuentren…y me he dado cuenta que con un buen WPO se mejora el ratio de conversión y se consigue más tráfico orgánico. Gracias Sara

      Responder
  3. María la verdad que yo para todo esto me pierdo, y prefiero contar con profesionales como tú que dejan las webs volando como si hubieran tomado alguna bebida energética.
    ¡Super post! ¡felicidades!

    Responder
  4. Creo que si tengo una asignatura pendiente con mi web, es esta… Me parece un galimatías todo eso, prometo darle una vuelta con tu artículo al lado que seguro que así me entero de algo… Gracias María!

    Responder
    • Todo es ponerse, espero que te ayude y aporte el post, cualquier cosa cuando te pongas en «faena» puedes preguntarme, estoy aquí para lo que necesites. Gracias Noemí por tu comentario.

      Responder
  5. Para todo esto de la optimización WPO me pierdo jejej
    código, CSS, javascript,… ¡ mejor cuento contigo que como profesional eres un 10!

    Gracias María!

    Responder
  6. Un articulo muy bien explicado. En cualquier proyecto en Internet la velocidad de carga, es un factor que Google valora a la hora de dar más relevancia a una web, por eso tenerla optimizada es tan importante.
    Un saludo

    Responder
  7. Muchos apuestan por hacer una web por su propia cuenta pensando que con que quede bonita ya es suficiente pero, logren o no ponerlas bonitas y funcionales de cara al usuario casi ningun amateur pone enfasis en este aspecto del WPO y estoy casi seguro que es porque no saben ni por donde empezar ni como empezar.

    Por eso siempre recomiendo a profesionales como tu, porque ya que se hace algo, que se haga bien 🙂

    Responder
    • Gracias Alex, un placer que me recomiendes. La verdad es que es fundamental, yo por eso mis proyectos le dedico su tiempo, porque tengo en cuenta la base (un Plan con sus objetivos y publico objetivo), el SEO para posicionar, el WPO para tener una buena experiencia de usuario y un buen diseño personalizado de photoshop a WordPress que se adapte al concepto del Plan y objetivos finales. Son pocos que hacen el proceso completo, y al final el cliente ve resultados a medias y a mi no me gusta dejar nada a medias jajajaja

      Responder
  8. Maria, gracias por este Post, aunque no es mi área siempre me gusta estar al tanto de aspectos técnicos de la web, para poder tener una cultura y visión general tanto para mi pagina como para los clientes a la hora de cualquier consulta.
    Un abrazo

    Responder
    • Claro, aunque no sea tu sector, viene bien saber algunos aspectos sobretodo si dispones de un proyecto online con una página web y así poder mejorar. Saludos Milagros y gracias por tu comentario.

      Responder

Deja un comentario