{"id":72654,"date":"2021-10-01T11:59:39","date_gmt":"2021-10-01T09:59:39","guid":{"rendered":"https:\/\/internetrepublica.com\/?p=72654"},"modified":"2022-04-19T17:15:38","modified_gmt":"2022-04-19T15:15:38","slug":"herramientas-para-optimizar-el-wpo-de-tu-web-de-forma-sencilla","status":"publish","type":"post","link":"https:\/\/internetrepublica.com\/blog\/herramientas-para-optimizar-el-wpo-de-tu-web-de-forma-sencilla\/","title":{"rendered":"Herramientas para optimizar el WPO de tu web de forma sencilla"},"content":{"rendered":"

El pasado 24 de septiembre nuestra Laura L\u00f3pez, SEO manager en Internet Rep\u00fablica, particip\u00f3 en el SEOnderground<\/strong> el mayor evento de marketing digital de LATAM. Colabor\u00f3 con su ponencia sobre Herramientas para optimizar el WPO<\/em> de forma sencilla sin necesidad de conocimientos sobre programaci\u00f3n o desarrollo.<\/p>\n

\u00bfQu\u00e9 son y c\u00f3mo afectan las Core Web Vitals al rendimiento de una p\u00e1gina web?<\/h2>\n

 <\/p>\n

El Web Performance Optimization (WPO<\/strong>) o Core Web Vitals<\/strong>, es el conjunto de acciones y mejoras aplicados a un sitio web con el objetivo de conseguir reducir su velocidad de carga, haciendo\u00a0que\u00a0la experiencia de usuario sea lo m\u00e1s positiva posible.<\/p>\n

Partiendo de esta premisa, Laura nos comenta que la evoluci\u00f3n de las Core Vitals y su implicaci\u00f3n en el rendimiento de las webs est\u00e1 bastante discutido entre los que piensan que s\u00ed afectan dentro del ranking y otros que creen que no. Compartiendo las palabras de John Mueller podemos afirmar que las Core Web Vitals s\u00ed afectan al posicionamiento en el ranking, pero no quiere decir que vaya a ser lo \u00fanico que afecte a nuestra web.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Bajo la experiencia, Laura nos confirma que optimizar este rendimiento es un hecho que ayuda en el posicionamiento por lo que es algo que debemos tener muy en cuenta a la hora de optimizar nuestras p\u00e1ginas.<\/p>\n

 <\/p>\n

\u00bfC\u00f3mo podemos mejorar el rendimiento en nuestra web?<\/h2>\n

 <\/p>\n

Es importante saber qu\u00e9 es lo que est\u00e1 mal y c\u00f3mo y con qu\u00e9 herramientas vamos a analizarlo.<\/p>\n

Por lo tanto, vamos a dividir este proceso en tres partes. La primera es analizar el rendimiento de mi web, obteniendo estos datos podremos ver qu\u00e9 es lo que est\u00e1 afectando de forma negativa a nuestra web y por \u00faltimo y m\u00e1s importante c\u00f3mo lo podemos mejorar.<\/p>\n

 <\/p>\n

\u00bfC\u00f3mo analizar el rendimiento de mi web?<\/h2>\n

 <\/p>\n

Existen infinidad de herramientas en las que apoyarnos y analizar el rendimiento de nuestras p\u00e1ginas web. En su presentaci\u00f3n Laura nos muestra las que, para ella, son las m\u00e1s relevantes.<\/p>\n

    \n
  • Lighthouse<\/strong>: Nos permite analizar el rendimiento de la p\u00e1gina sin salir del navegador, lo cual nos da rapidez a la hora de hacer un primer informe.<\/li>\n
  • PageSpeed<\/strong>: Si queremos m\u00e1s detalle del rendimiento de la p\u00e1gina esta herramienta nos permite ver qu\u00e9 es lo que est\u00e1 mal y lo que est\u00e1 bien en nuestra web. Con un sistema de puntuaciones y colores es muy sencilla de entender.<\/li>\n
  • DevTools<\/strong>: Dentro de esta herramienta tenemos una opci\u00f3n que nos permite ver en qu\u00e9 momento se ejecuta cada elemento dentro de la p\u00e1gina, lo que es interesante para ver todos los marcadores que Google tiene en cuenta en las Core Web Vitals.<\/li>\n
  • Web.dev<\/strong>: Esta herramienta es muy parecida a Pagespeed, sin embargo, esta herramienta en cada uno de los errores que nos identifica nos da una soluci\u00f3n con gu\u00edas, paso a paso, para mejorarlo.<\/li>\n
  • Chrome UX Report<\/strong>: Este informe de experiencia de usuario de Google es interesante porque nos lleva a generar data estudios donde nos hace una evoluci\u00f3n del rendimiento de las Core Web Vitals de nuestra web y su competencia. Esta herramienta nos permite hacer un seguimiento y ver los resultados de las acciones en el momento.<\/li>\n
  • Pagespeed<\/strong> Compare<\/strong>. Es una herramienta que nos permite a\u00f1adir urls de los competidores que queramos y nos da sus m\u00e9tricas principales en comparaci\u00f3n con todos los competidores seleccionados. Esto es muy interesante sobre todo si quieres hacer un an\u00e1lisis de benchmark r\u00e1pido sobre las Core Web Vitals.<\/li>\n
  • Google Search Console<\/strong>: Esta herramienta nos da los errores y la calidad de las urls y lo m\u00e1s importante es que nos da ejemplos de otras p\u00e1ginas web, lo que nos permite obtener pistas sobre lo que podemos mejorar.<\/li>\n
  • Google Analytics<\/strong>: Nos permite anotar alg\u00fan hito relevante a nivel de rendimiento.<\/li>\n
  • Screaming Frog + Pagespeed<\/strong>: A la hora de priorizar el trabajo es imprescindible analizar qu\u00e9 url y qu\u00e9 m\u00e9tricas tenemos peor en funci\u00f3n del rendimiento de sus Core Web Vitals. Esto lo podemos medir a\u00f1adiendo en la herramienta Screaming Frog la API de Pagespeed, lo cual nos permitir\u00e1 el an\u00e1lisis exhaustivo de cada url.<\/li>\n<\/ul>\n

     <\/p>\n

    \u00bfQu\u00e9 me esta penalizando?<\/h2>\n

     <\/p>\n

    Habitualmente los errores que nos salen en estos informes sobre las Core Web Vitals suelen ser los mismos en todas las urls, pudiendo variar el nivel en unas y otras p\u00e1ginas web.<\/p>\n

    Las puntuaciones negativas suelen ser por:<\/p>\n

      \n
    • Tama\u00f1o de las im\u00e1genes<\/li>\n
    • Tiempo de respuesta del servidor<\/li>\n
    • Recursos que bloquean el renderizado<\/li>\n
    • Formatos de nueva generaci\u00f3n<\/li>\n
    • CSS que no se est\u00e1 usando<\/li>\n
    • Minificar CSS<\/li>\n
    • Minificar JavaScript<\/li>\n<\/ul>\n

       <\/p>\n

      \u00bfC\u00f3mo puedo mejorar?<\/h2>\n

       <\/p>\n

      Laura nos ayuda a darle la vuelta a estos rendimientos negativos sin la necesidad de programar, a base de herramientas y plugins sencillos de manejar.<\/p>\n

      Uno de los problemas m\u00e1s comunes en la optimizaci\u00f3n de p\u00e1ginas web es el tiempo de respuesta del servidor<\/strong>. \u00bfEn qu\u00e9 afecta esta m\u00e9trica? Principalmente en el TTFB (Time To First Byte), SI (Speed Index), FID (First Input Delay) y en el LCP (Largest Contentful Paint). Para mejorarlo es imprescindible mantener nuestro site actualizado, as\u00ed como nuestros accesos a la base de datos y nuestro Api. Mejorar nuestro hosting y la cach\u00e9 tambi\u00e9n es algo b\u00e1sico para optimizar el rendimiento.<\/p>\n

      Si estamos trabajando con WordPress lo primero que debemos realizar es una actualizaci\u00f3n del propio CSS <\/strong>y de los plugins<\/strong> que estamos utilizando a su \u00faltima versi\u00f3n, siempre con cuidado y realizando una copia de seguridad ya que afectan a la parte t\u00e9cnica del proyecto.<\/p>\n

      Otra de las partes que m\u00e1s ralentizan la web es el JavaScript y CSS<\/strong>, afectan a las siguientes m\u00e9tricas: FCP (First Contenful Paint), el TTI (Time To Interactive), el TBT (Total Blocking Time), el LCP (Largest Contentful Paint) y el FID (First Input Delay). Para mejorar este punto debemos, minificar y unificar el c\u00f3digo, carga diferida (es decir que los recursos que no sean cr\u00edticos no se carguen en primer plano), la pre-carga (para esos recursos que si son necesarios en una primera carga) y eliminar el c\u00f3digo sin usar.<\/p>\n

      Para realizar estas mejoras podemos usar los siguientes plugins: WP Rocket, Autoptimize y Total Cache<\/strong>. Otras herramientas para comprimir ser\u00edan CSSCompressor y JScompress<\/strong> que nos permitir\u00e1n optimizar la parte del c\u00f3digo que seleccionemos consiguiendo as\u00ed un rendimiento mejor.<\/p>\n

      Otro de los puntos que se suelen indicar en las auditorias sobre la Core Web Vitals son las im\u00e1genes y multimedia<\/strong>. Esto nos puede afectar en el FCP (First Contentful Paint) o CLS (Cumulative Layout Shift). En este caso \u2018arreglar\u2019 estos archivos es muy sencillo, debemos optimizar las im\u00e1genes, redimensionarlas, comprimirlas o en el caso de los videos utilizar el Lazyload para que se carguen en una fase posterior y no en la carga inicial de la p\u00e1gina.<\/p>\n

      Las herramientas que nos recomienda Laura para mejorar estas m\u00e9tricas son Cloudinary<\/strong> y el plugin de WP Smush. <\/strong>Herramientas que nos permiten analizar y gestionar todo lo que necesitemos. Otras herramientas de compresi\u00f3n de im\u00e1genes son compressjpeg y compresspng<\/strong> que nos permiten optimizar y reducir las im\u00e1genes que vayamos a utilizar. Otro plugin imprescindible es Lazy Load<\/strong>, para evitar que los videos se carguen en primer plano y conseguir una mejora del rendimiento sencilla y muy r\u00e1pida.<\/p>\n

      Por \u00faltimo, otra de las cosas que siempre nos marca Google es la cach\u00e9<\/strong>. La cual afecta principalmente al FCP (First Contentful Paint), al TBT (Total Blocking Time) y al CLS (Cumulative Layout Shift). La forma de mejorarlo es muy sencilla, optimizando la cach\u00e9 o indicando el tiempo de almacenamiento que vamos a tener esta cach\u00e9.<\/p>\n

      Los plugins m\u00e1s recomendados para estas mejoras son WP Super Cach\u00e9, TotalCache y WP Rocket<\/strong>.<\/p>\n

      Con estas cuatro bases (Servidor + JavaScript y CSS + Im\u00e1genes y multimedia + Cach\u00e9) tendr\u00edamos controlado los cuatro pilares de optimizaci\u00f3n que nos pide Google.<\/p>\n

       <\/p>\n

      \u00a1Si quieres ver el evento al completo no te lo pierdas aqu\u00ed \u2b07\ufe0f!<\/p>\n