Diseño Web Orientado a PageSpeed

Diseño Web Orientado a PageSpeed

Son cientos los artículos que pueden encontrarse en Internet acerca de cómo diseñar páginas web, de hecho, hasta de diseño web en distintas ciudades como diseño web Granada 😛

Diseño Web para SEO

Uno de los aspectos fundamentales en el Diseño Web es que estas sean lo más rápidas posible, por lo que es necesario llevar a tope su rendimiento y optimización, algo que también es de gran relevancia de cara al SEO. Si quieres saber más sobre optimización web de cara al SEO te recomiendo el siguiente artículo Consejos para posicionar tu web en Google

Cabe señalar antes de nada que el objetivo de este artículo no es explicar cómo optimizar el rendimiento de nuestra web al máximo, sino dar unas pautas generales a tener en cuenta.

A continuación, se presentará un resumen con algunos de los puntos principales a tener en cuenta para el diseño web optimizado, plugins fundamentales y fáciles de utilizar para mejorar el rendimiento y Page Speed de nuestro Wordpress, herramientas para medir la velocidad de carga de nuestra web y una breve conclusión.

Diseño Web Optimizado

Hoy día, cuando hacemos un diseño web, es muy importante tener en cuenta distintos factores que antes no existían o eran menos relevantes. Esto es la usabilidad, el Page Speed, el diseño responsive y AMP entre otros. Veamos uno a uno:

Diseño Web con AMP

AMP, como explicamos en artículos anteriores, son las siglas de Acelerated Mobile Pages y son fundamentales en el diseño web dado el auge de la navegación en móviles.

Hemos de integrar AMP en nuestra web para conseguir el mejor rendimiento en móviles. Si quieres saber más sobre AMP te recomiendo el siguiente artículo titulado ¿Qué son las páginas AMP?

Usabilidad y Diseño Web

La usabilidad web es fundamental para que los usuarios de nuestra web encuentren exactamente lo que buscan y disfruten navegando en ella, aumentando así el tiempo que permanece en esta.

Hay infinidad de factores a tener en cuenta en la usabilidad web, desde poner CTAs en cada scroll, colores a utilizar, tamaño del texto, dónde se pone este y hasta visual tracking o mapas de color.

Diseño Web Responsive

Siempre se tiende a ‘mirar’ las páginas desde ordenadores, pero es fundamental señalar que de nada sirve un diseño web espectacular si no está optimizado para móviles y no se ve bien en estos.

Por ello hemos de trabajar el Diseño Web Responsive, cuidando los tamaños, espacios, botones, fotos etc., en móvil.

Plugins Optimización Web

De nada sirve diseñar una web bonita si su rendimiento no es el mejor. Por ello, hay infinidad de plugins para rendimiento web. Me refiero a plugins de carga diferida o asíncrona (async javascript), caché (wp super caché, fastest caché, wp rocket, w3 total caché…) , carga perezosa (lazy load, lazy load by wp rocket…), minificación de código (minify html y los propios de caché también incluyen esta opción) etc.

Conociendo qué plugins utilizar, cómo integrar unos con otros y por supuesto cómo configurarlos, podemos obtener un gran aumento en la puntuación del Page Speed de Google.

Test Velocidad y Optimización Web

Por último, es fundamental  utilizar distintas herramientas de medición para ver la velocidad, el rendimiento y la optimización de nuestra web.

Para ello, hemos de señalar que las más importantes son las de Google, pues es donde tratamos de posicionarnos principalmente.

Estas son el Page Speed, la extensión de Google Chrome Light House, Test my Site y Test AMP. Esta última para ver si funcionan correctamente nuestras páginas AMP.

Otras de gran utilidad son Pingdom Tools y GTmetrix.

Conclusión

Como podemos ver, son muchas las variables a tener en cuenta para hacer un diseño web con un buen rendimiento. Esta optimización debe estar presente en diferentes puntos de una web como son la performance, SEO, accesibilidad y buenas prácticas (siguiendo a Light House).

Por ello, es fundamental tener en cuenta factores como el diseño y la usabilidad de la web en móviles, tablets y ordenadores. Que tenga una estrategia de contenidos con sus H1, H2, una adecuada jerarquía, una buena redacción de cara al SEO y otros puntos principales para este.

Igualmente, hemos de trabajar la parte interna de la web con programas y plugins en caso de WordPress para mejorar su rendimiento y con ello los resultados en page speed insights.