WPO, ¿Qué es y cómo aprovecharlo para rankear mejor?

¡Hola Soywebmaster!
¡Aquí David Ayala de nuevo!

En esta ocasión vengo a presentar un post de invitado que va a realizar un buen amigo y profesional del sector, Álvaro Peña, dueño de la agencia IsocialWeb.

En este artículo va a tratar un tema que nos afecta a todos y que además muy importante a la par de interesante. Se trata sobre el WPO, es decir como optimizar el rendimiento web, velocidad de carga y un largo etcétera de cosas que nos contará a continuación.

¡Vamos a ello!

¿Qué es WPO?

El rendimiento web se refiere a la velocidad con la que las páginas web se descargan y se muestran en el navegador web del usuario. Y la optimización del rendimiento web, en inglés Web Performance Optimization (WPO), es el conjunto de técnicas orientadas a mejorar el rendimiento de la página web, reduciendo así el tiempo de espera.

En el pasado, la optimización del rendimiento web solía ser una mera ocurrencia tardía. A menudo, una tarea prevista para el final del desarrollo de un proyecto web, que se limitaba solo a la minificación, la concatenación, la optimización de archivos y, quizás, algunos ajustes en la configuración del servidor. Pero las cosas han cambiado de manera significativa.

El rendimiento web importa. Y mucho. La optimización del rendimiento web no es solo un asunto técnico: es clave durante todo el ciclo de desarrollo, y al incorporarlo al flujo de trabajo, las decisiones de diseño deben tener muy en cuenta su impacto e implicaciones en el rendimiento web.

Por supuesto, el rendimiento web debe medirse, supervisarse y ajustarse continuamente, y la creciente complejidad de la web plantea nuevos desafíos que dificultan el seguimiento de las métricas, ya que las medidas varían significativamente según el dispositivo, navegador, protocolo, tipo de red y latencia (CDNs, ISPs, caches, proxies, firewalls, load balancers o equilibradores de carga y servidores juegan un papel importante en el rendimiento web).

La realidad es que las experiencias web perfectas comienzan con el tratamiento del rendimiento como una característica fundamental del diseño web y su implementación con buenas prácticas de desarrollo.

La finalidad última del conjunto de técnicas orientadas a mejorar el rendimiento web es mejorar la velocidad de carga y, por lo tanto, reducir el tiempo de espera, mejorando con ella la experiencia de usuario.

El tiempo de espera no es un asunto menor ya que influye en aspectos tan importantes para un negocio online como puede ser: la satisfacción del usuario, el coste de la infraestructura y, sin lugar a dudas, el SEO, ya que mejora la indexabilidad, rastreo, tasa de rebote, tiempo en página…

¿Cuándo es importante el WPO en SEO?

Dicho todo lo anterior lo primero que tenemos que decir es que el tiempo de carga, en webs de bajo tráfico, NO será un valor determinante para el posicionamiento del proyecto, mientras que esté en unos valores aceptables y no afecten de forma significativa en la experiencia del usuario.

Evidentemente cuanto más grande sea la web, más tráfico tenga y más importante sea el tiempo de carga en la finalidad de la interacción del usuario con ese site, mayor será su impacto a nivel de SEO.

Pero ojo, esto no quiere decir que tengamos que tomarnos el rendimiento de la web a la ligera, es un factor más y como tal debemos cuidar los detalles para aprovecharlos al máximo en nuestra estrategia de SEO.

¿Qué herramientas puedo usar para comprobar la velocidad de carga?

Afortunadamente, hay muchas opciones excelentes que ayudan a automatizar la recopilación de datos y a medir el rendimiento web. Pero es importante tener en cuenta que una buena métrica de rendimiento es una combinación de herramientas de monitoreo activo y pasivo.

Las herramientas de monitoreo pasivo se usan sobretodo durante el periodo de desarrollo y simulan la interacción del usuario (por ejemplo, Lighthouse , WebPageTest ) y las herramientas de monitoreo activo son útiles a largo plazo ya que registran y evalúan las interacciones del usuario de forma continua (por ejemplo, SpeedCurve ,New Relic).

Una de las herramientas WPO más útiles tanto para expertos como para principiantes es Pingdom . Esta es una herramienta de medición de velocidad muy fácil de usar, pero no por ello menos potente. Y ayuda a los webmasters y desarrolladores a optimizar el rendimiento de páginas web. Permite identificar, qué ocurre, con una página web rápida, lenta, demasiado grande… qué prácticas recomendadas no se están siguiendo, y así sucesivamente.

También es necesario destacar de manera especial PageSpeed Insights; si bien no es la más completa, es la herramienta que Google ofrece para medir el rendimiento web y conocer la puntuación que el buscador utiliza en el ranking.

No es más que un sencillo test que nos permite saber qué parte de la página web tenemos que optimizar y qué acciones es necesario llevar a cabo para optimizar el rendimiento web. Consta de 10 puntos de optimización, teniendo una puntuación de 0 a 100, siendo a partir de 85 una puntuación positiva.

Otras herramientas interesantes para el análisis de rendimiento web:

* boomerang : librería javaScript que mide el tiempo de carga que experimentan usuarios en tiempo real.

* Calibre : suite de herramientas de análisis de rendimiento web.

* k6: herramienta Open Source orientada a desarrolladores que analiza el rendimiento web de la infraestructura de backend.

* mPulse: recopilación de datos directamente desde el navegador o la aplicación móvil de usuarios en tiempo real.

* pwmetrics): herramienta para la línea de comandos (CLI) y librería para recopilar información de rendimiento web via _LightHouse_.

* Sitespeed.io: set de herramientas Open Source de análisis de rendimiento web.

* SpeedTracker: recurso Open Source que monitorea de forma peródica y proyecta visualizaciones sobre el rendimiento web a largo plazo.

* WebPageTest: herramienta muy completa que ofrece resultados avanzados.

Para más información sobre herramientas y otros recursos sobre la optimización del rendimiento web, os recomendaríamos visitar perf-tooling.today/.

¿En cuánto tiempo debería cargar mi web?

Si nos ceñimos al propio google en menos de 1 segundo. Según el Análisis de dispositivos móviles de PageSpeed Insights:

No es fácil que todo el contenido de una página se cargue en menos de un segundo, pero por suerte, tampoco es necesario.

De hecho, solo hay que renderizar y mostrar el contenido situado en la mitad superior de la página en menos de un segundo; de este modo, los usuarios pueden empezar a utilizarla cuanto antes. El resto de la página puede ir renderizándose progresivamente y en segundo plano mientras los usuarios están en la primera página de contenido.

Esta recomendación de PageSpeed Insights está especialmente enfocada a poder publicar una página en menos de un segundo en una red para móviles, lo cual es un verdadero desafío ya que las latencias de la red son considerablemente más altas que las de una conexión por cable.

Dentro de las optimizaciones posibles, existen una série de criterios principales que ayudan a conseguir este objetivo:

• El servidor tiene que publicar la respuesta.
• El número de redirecciones debe minimizarse.
• El número de ciclos de ida y vuelta para la primera publicación se debe minimizar.
• Se deben evitar archivos JavaScript y CSS externos que bloqueen el renderizado en el contenido de la mitad superior de las páginas.
• Reserva tiempo para la ordenación y el renderizado en el navegador.
• Optimiza el tiempo de ejecución y renderizado de JavaScript.

Sobre el tiempo de respuesta de la interfaz, para que la interacción sea fluida, el interfaz debe responder al input del usuario en menos de 100 ms. Más allá de eso, el usuario percibe la aplicación como lenta.

Para permitir una respuesta de menos de 100 ms, el interfaz debe devolver el control como máximo antes 50 ms. Y en cuanto a las animaciones, lo mejor es no abusar. Cada frame de una animación debería completarse en menos de 16 ms, logrando 60 frames por segundo (1 segundo ÷ 60 = 16,6 ms), preferiblemente menos de 10 ms.

Debido a que el navegador necesita tiempo para imprimir el nuevo frame en la pantalla, el código debería terminar de ejecutarse antes de alcanzar la marca de 16.6 ms.

De todas formas, según Addy Osmani, ingeniero jefe en Google, aunque el contexto no sea el más favorable, (por ejemplo, un dispositivo móvil antiguo en una red 3G a 400 kbps de velocidad de transferencia) es realista mostrar el contenido en menos de 5 segundos y, para las visitas que regresan, en menos de 2 segundos.

Aunque puede ser muy difícil lograrlo, mostrar el contenido situado en la mitad superior de la página en menos de 1 segundo y devolver respuestas a los inputs del usuario en menos de 50 ms es un objetivo final asumible. Pero no es suficiente. En realidad, todos los negocios online deberían tener el siguiente objetivo: ser al menos un 20% más rápido que el competidor más rápido.

De acuerdo con la Ley de Weber-Fechner y otras investigaciones psicológicas, los usuarios de una página web sentirán que es más rápida solo si es al menos un 20% más rápida que la de la competencia.

Así pues, conformarse con un tiempo de respuesta optimo es quedarse corto y es necesario estudiar las páginas web de los principales competidores, recopilar métricas acerca de cómo funcionan en dispositivos móviles y de escritorio, y establecer umbrales que ayuden a superarlos.

¿Qué factores influyen en el tiempo de carga?

Por supuesto, el diseño, la programación, y el servidor son los 3 factores que influyen en el rendimiento web si tenemos en cuenta el lado del proveedor de recursos o servidor.

Pero el contexto del usuario o todos los escenarios posibles que pueden darse si tenemos en cuenta el demandante de recursos o cliente es un factor, quizás, aún más importante. Este último factor es precisamente lo que lleva años defendiendo y priorizando el diseño web responsive.

¿Cómo puedo mejorar mi tiempo de carga con WordPress?

Ya sea un sitio web de alto tráfico de lo cual en iSocialWeb sabemos bastante o un pequeño blog en un servidor compartido de bajo coste, en todos los casos es importante optimizar la instalación de WordPress para que se ejecute de la manera más óptima posible.

En particular, el tema y los plugins tendrán un gran impacto en el rendimiento del sitio web. Un tema rápido y liviano funcionará mucho más eficientemente que uno cargado de gráficos pesados o funcionalidades innecesarias.

La manera más fácil de mejorar el WPO WordPress es no abusar del uso de plugins. Es conveniente desactivar o eliminar plugins que incluyen funcionalidades que no necesitamos. Siempre que sea posible, es preferible usar funciones o plugins que proponen soluciones simples a problemas específicos.

Los temas pueden incluir numerosas funcionalidades para adaptarse a todo tipo de soluciones e incluso pueden incorporar plugins o utilizar de manera excesiva JavaScript. La mayoría de capacidades del tema se incluyen en el fichero ‘functions.php’ y, siempre que el tema no permita otro modo de desactivar las capacidades que incluye por defecto, es una buena idea comentar las líneas de código que registran y activan componentes adicionales que no necesitamos.

WordPress es un gestor de contenidos (CMS) que incluye funciones PHP de alto nivel y, en la mayoría de casos, extender sus posibilidades utilizando sus propias funciones nativas es sin duda la mejor opción. La documentación oficial de WordPress o el WordPress Codex es de consulta obligada para aprender más sobre las funciones de WordPress y otras muchas referencias útiles como hooks, classes, o methods.

Por otro lado, abusar de las peticiones al servidor a través de las funciones no es una buena idea. La reducción o eliminación de queries o llamadas innecesarias o la optimización de las solicitudes a la base de datos contribuyen de manera muy importante a la optimización del rendimiento de WordPress.

Siempre que sea posible es conveniente utilizar valores estáticos y evitar funciones para el contenido dinámico si realmente no es necesario. Además, la base de datos debe ser revisada, optimizada, y reparada periódicamente. Esta tarea se puede llevar a cabo de manera manual con herramientas como phpMyAdmin o con plugins como WP-DBManager.

Finalmente, una de las medidas que más impacto tiene en la optimización del rendimiento de WordPress reduciendo considerablemente el tiempo de carga es la utilización de un plugin de cache.

Los plugins de cache se pueden instalar fácilmente. Almacenan en cache las entradas y páginas de WordPress como archivos estáticos y éstos se sirven a los usuarios, lo que reduce considerablemente la carga de procesamiento en el servidor. Esto puede mejorar el rendimiento de manera muy significativa. Es más. Cuando se combina con una aplicación de cache el lado del servidor, como Varnish o Redis, el resultado puede ser asombroso.

Además de las técnicas orientadas a mejorar el rendimiento web válidas para aplicaciones web en general, existen numerosos recursos que explican prácticas específicas para WordPress que merece mucho la pena revisar:

* Codex: WordPress Optimization

* Codex: High Traffic Tips For WordPress

* The Ultimate Guide to Boost WordPress Speed

* WordPress Optimization Bible

¿Y si mi web no es WordPress?

WordPress es el 30% de Internet. WordPress ocupa un espacio del 60% en del mercado global de CMS; lo que le convierte en el CMS más popular. WordPress es el motor del 14,7% de los 100 sitios web más importantes del mundo. Cada segundo se publican 17 entradas en sitios basados en WordPress.

Cada mes se realizan 37 millones de búsquedas globales en Google para la palabra “WordPress”. Si el 90% de Internet son blogs y la mayoría de blogs están basados en WordPress, la mayoría de sitios web en Internet son WordPress. Si queréis conocer más estadísticas sobre WordPress, echad un vistazo a esta entrada en CodeinWP.

Con todo esto, es muy probable que el motor de tu página web sea WordPress. Y si no lo es, es muy probable que el motor de tu página web sea otro CMS (Drupal, Joomla, &c.). Y si tu página web no utiliza CMS, lo mejor es que empieces a usar uno a menos que sepas lo que estás haciendo.

La mayoría de gestores de contenido o CMS gestionan la creación y/o la modificación de contenido digital en, especialmente, entornos digitales colaborativos. Además, incluyen funcionalidades muy útiles para publicar en la Web, gestión de formatos, control de versiones, indexación, búsqueda, &c.

En definitiva, un CMS es una suite de herramientas imprescindible si para la gestión de cualquier contenido digital: blogs, páginas web corporativas, magazines digitales, tiendas online, &c.

Al menos 2 de los 3 factores que pueden afectar al tiempo de carga de una página web, el diseño y la programación y, en algunos casos, también el servidor, son atendidos por defecto y con excelencia por la mayoría de CMS.

En el caso de WordPress, al tratarse de software Open Source, la comunidad de profesionales y entusiastas más grande del mundo ha aportado las mejores soluciones posibles para la optimización del rendimiento web y, lo más importante, cada día se registran nuevas contribuciones al código que no solo afectan al rendimiento web sino a otros aspectos también muy importantes como la seguridad o la implementación de mejoras.

Así pues, es muy difícil, por no decir imposible, que un solo desarrollador o un equipo de desarrollo, por muy bueno que sea, esté a la altura de desarrollar un CMS tan estable y con funciones PHP de tan altísimo nivel.

Finalmente, si decides no incorporar un CMS a tu página web lo mejor es seguir las recomendaciones que los mejores profesionales y la incansable comunidad Open Source ha ido desarrollando a lo largo de los años. Aquí tenéis algunas checklists que os ayudarán:

* Front-End Performance Checklist 2018

* Frontend Checklist for Websites

* Designers Guide to Web Performance Optimization