que es wpo
Analítica Web

QUÉ ES WPO (WEB PERFORMANCE OPTIMIZATION)

¡Hola una semana más! Aquí sigo yo ampliando mis conocimientos y los tuyos (si es el caso) para mejorar en la fantástica profesión del Marketing Online. Esta semana trata sobre algo verdaderamente importante a nivel web, que es la experiencia de usuario y la importancia del tiempo de carga de la página. Estas pautas que explicaré van englobadas en algo que se llama “WPO”, es decir, Web Performance Optimization, y para que entiendas un poco más sobre de qué trata, te indicaré primero qué es esto del WPO y luego veremos cómo seguir las pautas. ¿Empezamos?

¿QUÉ ES WPO? ¿QUÉ SIGNIFICA?

Web Performance Optimization (WPO) engloba técnicas que analizan todo el conjunto de una página web y su velocidad de carga a nivel técnico de programación para ofrecer UX de calidad (“User Experience” experiencia de usuario), algo muy importante para cualquiera interesado en la optimización SEO on-page.

La velocidad de carga de un sitio web es decisivo para retener o ahuyentar al usuario. Una página que carga rápido se asegura el aumento de usuarios que permanecen en el sitio, además, todo marketiniano busca obtener una tasa de rebote cuanto más baja, mejor, ¿verdad? Hay que tener en cuenta que hay usuarios de pc con conexión Adsl (y no siempre tienen buena velocidad) y usuarios de dispositivos móviles que descargan datos mediante el 3G o 4G, cuando no están vía Wifi, por eso es importante reducir al máximo el peso de la carga de la web. Que un usuario entre en una página y tarde en cargar (se dice que la carga idónea son 3 segundos y la óptima según Google, son 1,5 segundos) hace que el usuario abandone con mayor probabilidad el sitio web sin obtener lo que andaba buscando que tener paciencia para esperar a que cargue. Si crees que 3 segundos no son nada, párate un momento y con una página en blanco cuenta 3 segundos y verás que es más de lo que parece.

LOS ASPECTOS MÁS IMPORTANTES DEL WPO

TECNICAS WPO

El 80% del tiempo de carga de una web, se debe principalmente a los siguientes componentes (el 20% restante es carga de HTML) :
– Javascript
– CSS
– Imágenes
– Flash (Cada vez menos, ya que prácticamente hoy en día, no se usa.)
Reduciendo todos estos componentes consigues que el renderizado de tu página web sea más ágil y más rápida en cargar, ya que realizará un menor número de peticiones HTTP, es decir, pedirá menos cosas al servidor y reduces el espacio en Kb. Ten en cuenta que no porque simplifiques el diseño de tu web ya es suficiente, te conviene optimizar tu web para obtener mayor satisfacción tanto por parte del usuario como de Google. ¡Todo cuenta!

Vamos punto por punto con los aspectos más importantes del WPO:

  •  Reducir llamadas –> Como te he comentado anteriormente, las llamadas son las peticiones que haces al servidor para cargar todo el sitio web y cuantas más se realicen, más tarda en cargar. Hay técnicas para reducirlas y mejorar el tiempo de carga. Aquí te explico las más comunes:
    – Concatenar JS y CSS –> Por ejemplo: si tienes una página web que carga múltiples archivos JS para conseguir efectos o interactividad en la web o utilizas múltiples archivos CSS (suele ocurrir cuando utilizas librerías de terceros que vienen con sus archivos JS y CSS), puedes combinar todos los archivos JS y CSS con lo que disminuyes el número de peticiones HTTP. Una herramienta que te ayudará para concatenar archivos es: grunt.js  o  gulp.js

  • Minificar HTML, Javascript y CSS –> La minificación de recursos hace referencia a la eliminación de bytes innecesarios, como los espacios adicionales, saltos de línea y sangrías (también llamado “indentación”). Al minimizar los códigos HTML, CSS y Javascript, aceleras la descarga, análisis y tiempo de ejecución. Dispones de herramientas muy útiles que te ayudan a minificar cualquiera de estos 3 lenguajes de programación.
    – Para HTML tienes htmlcompressor.com
    – Para Javascript tienes jscompress.com
    – Para CSS tienes cssminifier.com

Hay multitud de herramientas para ello, incluso también plugins. Si buscas info en Google ¡verás la cantidad de opciones que te aparecen!

Te pongo un ejemplo de código JS normal y otro minificado. Como aclaración decir que “Concatenar” es juntar en un sólo archivo, varios diferentes del mismo lenguaje, es decir, varios de Javascript o varios de CSS y reducir las llamadas HTTP. Y “Minificar” es unirlo todo en usa sola linea para reducir el espacio en Kb, que es el ejemplo que te muestro.

CÓDIGO JS

Codigo JS

CÓDIGO JS MINIFICADO

código js ejemplo

RESULTADO –> Código JS normal 1.174 bytes. // Código JS Minificado 334 bytes.

ejemplo compressión imagen

  • – CSS Sprites –> Los Sprites consisten en la agrupación de varias imágenes en una sola, así si (por ej.) tienes 10 ó 20 imágenes en una página, se realizaría una sola llamada al servidor ya que llama a la parte correspondiente del archivo global de las imágenes. La llamada a una sola imagen la ralentización es poca, pero sumando muchos “pocos” puede llegar a perjudicar de forma considerable.

Un ejemplo de imágenes CSS Sprite sería como la imagen siguiente. Lo que harías mediante código indicar la imagen que deseas aplicando “coordenadas” con píxeles (px). En este enlace podrás ver más info.

css sprites ejemplo

Una herramienta genial para saber la velocidad de tu página web y comprobar los cambios realizados al minificar datos, es la propia de Google: PageSpeed. Al ser el buscador “Rey” de los buscadores, nos importa más lo que dice Google de nuestra web.

pagespeed google

  • Optimizar imágenes –>Las imágenes también es importante optimizarlas, reduciendo su peso pero no su calidad, y para ello hay herramientas muy útiles como: kraken.io y compressor.io, entre muchas otras. No hay referencia exacta para el peso correcto de una imagen, sólo ten como referencia esta frase: “Cuanto menos pese, mejor.”

    Te pongo un ejemplo del uso de un compresor de imágenes. Si te fijas, la foto original pesaba 1,54MB y después de la compresión ¡se reduce a 390,01KB! Te diría que la calidad queda intacta, pero para ser más honesta, sería más bien decir que la diferencia no es perceptible. No lo dudes y aprovéchate de las herramientas que tienes a tu alcance, merece la pena.

ejemplo compresión imagen

  • Activar GZIP en el servidor –> Gzip es una de las técnicas más útiles para hacer que tu página web sea más rápida que sin la activación. La compresión de los archivos HTML y CSS puede llegar a reducir hasta un 70% el tamaño del archivo, y esto significa que tarda menos tiempo en cargar las páginas y consume menos ancho de banda en el servidor. GZIP envía las páginas comprimidas a los navegadores desde el servidor, éstos reciben los datos comprimidos y los descomprimen, mostrando la página web al usuario. (La web es recibida en un formato zip, es decir, como “página.html.zip”.) Imagínate entre esto, la concanetación de JS, CSS y HMTL y su minificación junto con la optimización y compresión de las imágenes… ¡un ahorro de bytes, KB y MB en toda regla!Para realizar la compresión, puede realizarse añadiendo un trozo de código en el “.htaccess”, en la raíz de tu servidor, mediante un FTP como Filezilla o accediendo al panel de control de tu hosting. También existen plugins para ello, pero tienes que tener en cuenta que cuantos más plugins te instales en tu CMS, más tardará la web en cargar, y casi sería como desvestir a un santo para vestir a otro.Ejemplo de código para servidores basados en Apache:<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>
  • Cargar CSS en el <head> –> Para mejorar la velocidad de carga de la página, es conveniente que siempre que sea posible, deberías colocar la carga de archivos CSS en la cabecera, justo antes de la etiqueta </head>. Lo que consigues así es que los estilos de la página se carguen lo antes posible y no se perciba la carga de una web, sino estilos a la que tiene que esperar para que “coja forma”.
  • Cargar el JS en el <footer> –> En el caso del JavaScript es mejor cargarlo al final de la página, en el footer, justo antes de la etiqueta </body>. Cuando el navegador encuentra un fichero JavaScript detiene el proceso de carga mientras el fichero JS se descarga y lo ejecuta para seguir posteriormente con el proceso de carga. Cargando el JS al final, consigues que cargue primero todos los demás elementos de la página para que el usuario pueda empezar a utilizar la página mientras el código javascript se ejecuta después. Si es el caso que no es posible cargarlo en el footer, lo idóneo es realizar la carga de forma asíncrona, en paralelo a la carga del resto de componentes, así no se detiene la carga. Ejemplo de carga asíncrona:
    <script async type=”text/javascript” src=”script.js”></script>
  • La importancia de los CDNs y DNS –> El CDN (Content Delivery Network o Red de Distribución de Contenido) es básicamente una red de servidores ubicados en zonas geográficas alrededor del mundo y cada servidor cuenta con una copia exacta de los archivos de tu sitio web. Así cada usuario que accede a tu página, recibirá su petición con mayor rapidez, ya que sería a través del servidor de la red CDN que esté más cerca geográficamente hablando. Algunos servidores serían: jsdelivr.com, cloudflare.com o akamai.com. Para saber visualmente cómo funciona, te adjunto una imagen clara:
  • cdn ejemploEl DNS (Domain Name System o Sistema de Nombres de Dominio) es el nombre de la página o dominio que accedes con el buscador: www.vanessatejada.com, en vez de una secuencia de números que sería la IP de mi página. Lo que hace el servicio de DNS es “traducir” estos números en caracteres más fáciles de recordar para poder acceder a dicha página. Se trata del intermediario para resolver de forma automática las direcciones URL que se introducen en el buscador del navegador. Para poder registrar un nombre de dominio es imprescindible disponer de un servidor de DNS, y dentro de las DNS, se encuentran 3 grupos:– Clientes DNS –> El que realiza la petición en el buscador, es decir, nosotros desde el pc, smartphone…
    – Servidores DNS –> Cuando introducimos la url del dominio en el navegador, le estamos haciendo la petición a un servidor DNS para que nos muestre el contenido.
    – Zonas de Autoridad –> Grupos de servidores que se encargan de un grupo de dominios como los “.com, .net, .es, .org, etc”
  • Cachear los elementos estáticos –> Existen elementos del sitio web que se cargan siempre que el usuario accede a la página desde tu servidor y existe una opción que hace que el navegador almacene esos archivos para que no tengan que volver a ser descargados de la web la próxima vez que el usuario acceda. Mediante un código que se coloca en el archivo “.htaccess” se puede conseguir que el navegador del usuario guarde ciertos contenidos en su ordenador. Si haces cambios en tu web, acuérdate de desactivar el código ya que sino no verás tus propios cambios al tener cacheados algunos contenidos. Un ejemplo del código que se colocaría en el htaccess sería el siguiente:1 <ifmodule mod_expires.c>
    2 ExpiresActive On
    3 ExpiresDefault A3600
    4 <filesmatch “.(jpg|JPG|gif|GIF|png|css|ico|js)$”>
    5 ExpiresDefault “access plus 7 day”
    6 </filesmatch>
    7 </ifmodule>
    Como ves, le indica que la expiración del caché es de 7 días. Y puedes especificar el caché de diferentes archivos con caducidad independiente para cada grupo.
  • Optimizar web para móvil –> Algo imprescindible a estas alturas, ya que se hace más uso de dispositivos móviles y tablets que de pc. Como ya escribí un artículo sobre el tema en cuestión, te paso el enlace directo que habla sobre ello. “Mobilegeddon“.
  • Lazy Loading –> “Lazy Load” es una técnica que lo que hace es cargar elementos sólo cuando el usuario se desplaza a ellos en un navegador, de esta manera sólo se cargan cuando estén a la vista. Como puedes imaginarte, esto no sólo mejora la rapidez de tu página, sino que también mejora el ancho de banda del servidor. Si el usuario no se desplaza hacia abajo hasta llegar a la parte inferior de la página, los elementos no se cargarán. Es un concepto simple pero muy importante en su conjunto, de hecho no es un concepto nuevo, pero a menudo se pasa por alto. A través del uso de herramientas de “Lazy Load” es como puedes acelerar tu sitio web de manera considerable. ¡Optimización de rendimiento y mejor experiencia de usuario!

keep calm and optimize

Bueno, después de leer todo esto… ¿Ha habido algo nuevo para ti? ¿Hay algo que has encontrado interesante? Espero que la respuesta sea sí, porque para mí lo ha sido ¡y mucho! La cantidad de “detalles” que pueden influir en la carga y mejora de nuestra página web es impresionante. A parte de la optimización Seo On-page básica, está la WPO, Wep Performance Optimization, una forma más técnica de optimizar nuestra web. Así que si quieres rozar la perfección, ve punto por punto.

¡Te espero el próximo lunes! 😉

Y recuerda que si te ha gustado, te animo compartirlo en tus redes sociales y también a suscribirte a mi blog. ¡Obtén todas las novedades de manera más directa! ¿Te apuntas?

Publicaciones anteriores Siguiente publicación

También puede interesarte

8 Comentarios

  • Responder Juan Pablo 27 marzo, 2017 at 6:59 pm

    Excelente la explicación.
    Felicitaciones.

  • Responder Duberney 12 enero, 2017 at 9:35 pm

    Hola Vanessa, tienes alguna fuente al respecto de esto¨
    El 80% del tiempo de carga de una web, se debe principalmente a los siguientes componentes (el 20% restante es carga de HTML) :

    • Responder Vanessa Tejada 13 enero, 2017 at 9:23 am

      Buenos días, Duberney! La fuente principalmente es el análisis a través de https://www.webpagetest.org/ Si pones tu web (o cualquiera) y lo analizas, verás a lo que me refiero en el artículo. (Incluso el Html podría ser menos del 20%.) Piensa que el Html es un documento de referencia que carga todo lo demás, y por consiguiente lo normal es que ocupe mucho menos que un CSS, Img, JS…Sorprendentemente raro sería que no fuera así y el Html ocupara más que cualquier otro archivo. Espero haberte aclarado tu duda. 😉
      Un saludo!

  • Responder Elisenda Pastor Vargas 8 diciembre, 2016 at 8:23 pm

    De todas las respuestas que he buscado sobre el wpo esta es la mas completa, interesante y facil de entender. Muchas gracias Vanessa!

    • Responder Vanessa Tejada 8 diciembre, 2016 at 8:57 pm

      Hola Elisenda! Te agradezco muchísimo tu comentario! Es un placer ver que mis artículos son de utilidad. 🙂 Un saludo!

    Deja una respuesta