SEO & WPO Web Performance Optimization

De un tiempo a estar parte, la WPO o Web Performance Optimization se ha convertido en una suerte de estándard ampliamente conocido, en cuanto a la optimización de la velocidad de carga de una aplicación web, ya que existen variadas y diferentes herramientas online que tienden a tratar de entregar soluciones a esto. Sin embargo, la WPO es mucho más que “velocidad de carga”; pese a que estas herramientas online entregan diferentes detalles para trazar un camino y conseguir, en la medida de lo posible, esa anhelada rapidez de carga que como cliché y falso positivo (la velocidad de carga no es siempre un factor real, pero claramente afecta al SEO y el rendimiento web en el plano de la estrategia), se utiliza comúnmente para hablar de una baja porcentual en la tasa de rebote.

¿Qué aspectos considera, entonces, esta WPO generalizada que apunta sólo a la velocidad de carga? Los aspectos son múltiples, y de carácter técnico.

Servidor de Alojamiento Web

Si tu compañía está asentada en Chile, y sus principales clientes o mercado son del mismo país, utiliza un servidor ubicado en Chile. ¿Por qué? Cuando abrimos un sitio web en el navegador, se genera una petición entre tu red de conexión a Internet y el servidor de alojamiento del sitio. Puntualmente, no se genera un retraso enorme para ejecutar esto, pero cuando se trata de WPO, cada milésima de segundo cuenta. Incluso, tus trabajadores lo agradecerán, porque los servicios asociados a tu sitio web como FTP y SSH, se verán mejorados en rapidez de manera increíble. Otro punto importante de esto, es lo siguiente: existen diferentes tipos de servidores de alojamiento web; los más conocidos son: hosting, VPS, cloud y servidor dedicado. El primero (hosting), es un servicio de alojamiento web compartido, es decir, no sólo estará tu sitio web allí, sino que compartirás espacio con otros cientos o miles de sitios web, los cuales comparten los mismos recursos de hardware, por lo tanto, al contratar un servicio de hosting, si hay 200 sitios web en ese apartado, y varios de ellos tienen buen tráfico, tu web cargará con delay durante el día y con un poco de mayor rapidez durante la noche; con la VPS es casi lo mismo, con la diferencia de que los recursos son un poco más definidos y no tendrás que compartir la memoria RAM, aunque ojo, VPS (virtual private server) es un servidor virtual, es decir, sea como sea, sigue estando alojado en un servidor que podría compartir espacio con otras VPS; el cloud, hoy en día, es el servicio de alojamiento web por definición más óptimo, ya que ayuda en cuatro (y muchas otras más, dependiendo del proveedor) principales áreas: velocidad de carga, seguridad, respaldos y escalabilidad. Finalmente, si eres emprendedor o microemprendedor, olvídate de tener un servidor dedicado, ya que es altamente probable que requieras de un enlace o conexión de Internet para empresas, una persona o compañía del rubro para configurar, mantener y administrar tu servidor dedicado.

¿Es realmente la Web Performance Optimization, un área dedicada exclusivamente a la velocidad de carga de los sitios web? La respuesta es, evidentemente, no. Sin embargo, los números siempre son los que hablan; según Daniel An, Líder de Productos Globales Web / Mobile en Google, los datos son claros: 1 a 3 segundos de carga en móviles, tiene una probabilidad de 32% de rebote; 1 a 5 de 90%; 1 a 6 de 106%, y 1 a 10 de 123%.

 

  • https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

 

La WPO está supeditada en gran medida a configuraciones de lado del servidor. ¿Haz pensado o ya tienes activo plugins de cache para WordPress con el objetivo de acelerar la carga del sitio? Los plugins de cache en realidad generan más problemas que beneficios, ya que al depender del CMS se originan capas de cache en el mismo servidor de alojamiento, añadiendo nuevos y adicionales tiempos de demora en la respuesta del sitio web. ¡La recomendación es no utilizar plugins de cache!

Google Page Speed Module
Google Page Speed Module

El camino correcto sigue siendo optimizar la performance con herramientas y procedimientos técnicos. Los dos servicios que por excelencia aceleran la carga y el tiempo de respuesta de un servidor son el módulo PageSpeed de Google (disponible para Apache y Nginx) y Varnish, ambos de código libre, es decir, sin costo (Varnish tiene soporte comercial y un spin-off de las mismas carácterísticas que incluye servicios de seguridad informática). Las indicaciones técnicas de implementación paso a paso, son públicas y están declaradas en los siguientes enlaces:

 

  • https://developers.google.com/speed/
  • https://developers.google.com/speed/pagespeed/module/
  • https://varnish-cache.org/
  • https://varnish-cache.org/docs/index.html

 

Algunas herramientas que ayudarán a evaluar la implementación:

 

  • https://www.pingdom.com/
  • https://developers.google.com/speed/pagespeed/insights/
  • https://testmysite.thinkwithgoogle.com/intl/es-419

 

CMS, Content Management System

Antes de aventurarte a usar cualquier CMS o Sistema de Gestión de Contenidos, por favor, define de manera clara y lapidaria el uso que tu sitio web tendrá. Si tu web será informativa (sin blog o sección de noticias, ni carro de compras), no uses WordPress, Drupal y menos aún Joomla, trabaja con HTML o CMS’s como Monstra, Cmsimple, Grav y PICO CMS, pesan mucho menos que todos los CMS anteriores, obteniendo agilidad y rapidez.

Base de Datos SQL

¿Sabías que una buena cantidad de tráfico web puede ralentizar tu sitio al punto de dejarlo inutilizable? Da exactamente lo mismo si tu web está alojada en Google Cloud o Amazon, porque si la base de datos que utiliza tu CMS no está optimizada para funcionar de manera que crezca y reciba muchas peticiones o querys, tendrás un sitio lento, muy lento, o simplemente nadie podrá visitarlo. En el caso de WordPress y Woocommerce, para la fecha de 2018, y pese a lo anteriormente dicho acerca del tipo de servidor y su ubicación, los dos mejores proveedores de alojamiento web son Wpengine y Kinsta (muchas veces hay que sacrificar una cosa por otra), ya que, como pocos, son los dos proveedores por excelencia que mantienen un alto rendimiento de las bases de datos, alcanzando miles de visitas diarias sin que esto afecte al rendimiento de la base de datos.

Uno de los grandes problemas de WordPress de cara al WPO, es el funcionamiento de la base de datos, a diferencia de otros CMS que por defecto soportan una gran cantidad de consultas simultáneas sin la necesidad de configuraciones específicas, pero claro, no tienen todas las ventajas que WordPress entrega. En vista de que MySQL es el sistema de bases de datos relacional más usado en el ámbito web, podemos optimizar el rendimiento de la base de datos de diferentes maneras, aunque todas ellas implican tener un alto conocimiento de programación ya que cualquier error puede dejar una base de datos inutilizable. Por esta razón, antes de cualquier intento al tratar las opciones que a continuación se detallan, es obligación realizar un respaldo de la base de datos; recomendaciones de Anna Filina para aumentar la velocidad de las consultas de una base de datos:

 

  • https://opensource.com/article/17/5/speed-your-mysql-queries-300-times
  • https://speakerdeck.com/afilina/speed-up-your-database-300-times

 

MySQLTuner, un script en Perl que automatiza el proceso de identificación y recomendaciones para optimizar el uso general de bases de datos relacionales:

 

  • http://mysqltuner.com/
  • https://github.com/major/MySQLTuner-perl
  • https://github.com/major/MySQLTuner-perl/blob/master/mysqltuner.pl
  • https://linode.com/docs/databases/mysql/how-to-optimize-mysql-performance-using-mysqltuner/

 

Plugins: así como la optimización manual de bases de datos requieren de mucho cuidado y experiencia, el uso de plugins para este fin no es recomendado, ya que suelen instalarse cuando la web está online, por lo tanto, el uso de plugins como WP Optimize y WP-DB Manager, debe aplicarse en un ambiente de trabajo que permita probar las configuraciones para una vez que hayan sido validadas, replicarlas en la web online:

 

  • https://wordpress.org/plugins/wp-optimize/
  • https://wordpress.org/plugins/wp-dbmanager/

 

Seguridad Informática

¿qué ocurre si para tu proyecto web eliges un CMS, un template y plugins o módulos que no son seguros? Cuando tu web sea indexada y publicada en Google, tendrá un 95% de ser hackeada en menos de 6 meses. Esto afecta en tres pilares fundamentales del marketing digital: el valor de marca, el posicionamiento web, y la continuidad de tu negocio; tu branding se verá dramáticamente afectado si tu web es hackeada y lo llegan a saber tus clientes (pueden borrar tu base datos, leer tus emails y publicarlos, etc.); tu posicionamiento orgánico se verá malogrado, porque usualmente quienes hackean sitios web usan el sitio para hacer spam y scam (publicarán páginas con redirección a otra para venta de viagra, etc.); y lo más complejo, la continuidad de tu negocio se será llevada al patíbulo. Sin ir más lejos, cuando un atacante vulnera tu seguridad, podrá hacer uso del ancho de banda tu servidor de alojamiento para enviar correos spam por ejemplo, dejando tu web con una velocidad de carga increíblemente lenta, o inaccesible (en la mayoría de los casos).

Imágenes: alojamiento, carga y optimización

CMS como WordPress, por ejemplo, tienen plugins de caché, que permiten generar una capa de contenido para una velocidad de carga mayor. Sin embargo, no es recomendable usar ese tipo de plugins porque generan problemas a la hora de trabajar el sitio (tus trabajadores agradecerán que no uses plugins de caché en WordPress). En este sentido, en términos generales, las mejores opciones para carga de imágenes en base a WPO, son: cifrado de imágenes en base64, módulos de servidor como Varnish y/o Google Page Speed, y CDN. Si gustas, puedes utilizar las tres opciones al mismo tiempo (recomendado), pero por favor, no uses plugins de caché. ¿Está demás decir que el peso de una imagen influye en su descarga? No, mientras menos KB, mejor (se recomienda 500 KB por imagen; una buena herramienta gratuita para esto es Gimp).

Como CDN para imágenes, el más recomendado para WordPress es KeyCDN, por su facilidad de integración y bajo costo de inversión:

 

  • https://wordpress.org/plugins/cdn-enabler/
  • https://www.keycdn.com/

 

En el caso de la codificación en base64, se debe considerar que, si bien es cierto agiliza la rapidez de carga de un sitio, aumenta el peso de la web, ya que una imagen al codificarse en base64, pasa a formar parte del código fuente, eliminando las peticiones HTTP para consulta y descarga de imágenes, pero añade código adicional en el DOM, por lo tanto, la recomendación es bajar el peso de una imagen disminuyendo su calidad antes de codificarla en base64. Esta práctica es ampliamente utilizada por grandes del marketing, como Google por ejemplo, en los SERP, todas las imágenes están codificadas en base64. La mejor forma de implementar esta codificación de imágenes, es manual o personalizada, aunque para WordPress hay un plugin recomendado:

 

  • https://wordpress.org/plugins/base64-images/

 

Dos ejemplos de implementación simple:

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH4SURBVDiNpZPNaxNRFMV/7828JDWJiiJN1RZbQVMJaLJwI37hQkF3GrpRN4KF+AcoKHQvLvwAhSKKiuBCUKzUZSnoKmKjtNSPtqANlmBKY5M0yUxmnouoVTNV0bO897xzL+e+IzqvFjX/AflXJAFiiZ4J0L5ccnKbolDVtAYF68KSDSskE3MuZ4drtIUEtw61MJJz+DDvUrbg2ojFbEU3NvhYdJmtaHrjPo5EFZGg4PhAhXirJJVQpGcccuUGp6dbEVDwuaYXN3A0XExbZIua83v9tJiC6aLLk6k691/XWR+WlGx4lnXwGXBuuObtwYM3NpMFl0hIkIwqTg/VeJFzOLFVcfOVRW9cceW5tbSJjobL6QbhVMKHkhAJCg50mZhSULJgLO82m/gjBqfqnClp2kKCni2K7tWSe+M2x2KK6xnrV3rzGR0Xbo/aAPTt8HNwo8l43iVgwsBE/c8CAHdGbfIVjSHh7pjN4c0ml9IWrseX8xRYsDU3XtpYDjzNOnSulAxONk//SSCV8PE4uYzYmkZpT4fBw7c2yaiiP2N7Tv8u4DcglVBsWiXZ3WGyq91g+1qDofcO+7tMHr2zvV/z9QqGFEzPa2bKLp8WNBf2BQDo2+lHCtC/iZv4lsawT3A0prAcTaGqqdYbGfEb0J+xqHhbsCjwr/gCLF7BFwLWqosAAAAASUVORK5CYII=”>

<style type=”text/css”>
.cssclase {
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH4SURBVDiNpZPNaxNRFMV/7828JDWJiiJN1RZbQVMJaLJwI37hQkF3GrpRN4KF+AcoKHQvLvwAhSKKiuBCUKzUZSnoKmKjtNSPtqANlmBKY5M0yUxmnouoVTNV0bO897xzL+e+IzqvFjX/AflXJAFiiZ4J0L5ccnKbolDVtAYF68KSDSskE3MuZ4drtIUEtw61MJJz+DDvUrbg2ojFbEU3NvhYdJmtaHrjPo5EFZGg4PhAhXirJJVQpGcccuUGp6dbEVDwuaYXN3A0XExbZIua83v9tJiC6aLLk6k691/XWR+WlGx4lnXwGXBuuObtwYM3NpMFl0hIkIwqTg/VeJFzOLFVcfOVRW9cceW5tbSJjobL6QbhVMKHkhAJCg50mZhSULJgLO82m/gjBqfqnClp2kKCni2K7tWSe+M2x2KK6xnrV3rzGR0Xbo/aAPTt8HNwo8l43iVgwsBE/c8CAHdGbfIVjSHh7pjN4c0ml9IWrseX8xRYsDU3XtpYDjzNOnSulAxONk//SSCV8PE4uYzYmkZpT4fBw7c2yaiiP2N7Tv8u4DcglVBsWiXZ3WGyq91g+1qDofcO+7tMHr2zvV/z9QqGFEzPa2bKLp8WNBf2BQDo2+lHCtC/iZv4lsawT3A0prAcTaGqqdYbGfEb0J+xqHhbsCjwr/gCLF7BFwLWqosAAAAASUVORK5CYII=’)
}
</style>

Por supuesto, siempre existe la opción de aminorar el peso de una imagen por medio de la disminución en su calidad, y el mejor programa para este objetivo no es Photoshop, sino que Gimp:

 

  • https://www.gimp.org/
  • https://docs.gimp.org/en/gimp-tutorial-quickie-jpeg.html
  • https://docs.gimp.org/en/gimp-using-web.html

 

No es lo ideal, pero, como última opción, es posible depender de algunos plugins como WP Smushit (compresión de imágenes) y BJ Lazy Load (carga de imágenes supeditado al scroll del usuario):

 

  • https://wordpress.org/plugins/wp-smushit/
  • https://wordpress.org/plugins/bj-lazy-load/

 

Archivos CSS y JS

Al igual que la carga de imágenes, los archivos CSS deben, en la medida de lo posible, estar minificados, y ser únicos; un archivo de estilo CSS para todo el sitio web; esto, claro está, en un mundo ideal.

Para los archivos CSS y JS que pueden ser minificados, scripts o programas como YUI compressor (yui-compressor) permiten minificar archivos CSS y JS. No obstante, sólo deben ser minificados estos archivos cuando el proceso de diseño e implementación de un sitio web ha terminado, ya que deben ser testeados antes de publicarlos puesto que la minificación sin review de estos archivos puede generar la desactivación de funciones en la web así como también cambios en el look and feel.

 

  • http://yui.github.io/yuicompressor/

 

Ejemplo de CSS normal:

<style type=”text/css”>
.cssclase {
atributo: valor;
}
</style>

Ejemplo de CSS minificado:

<style type=”text/css”>.cssclase{atributo:valor;}</style>

WPO & Penalizaciones de Google

Penalización de Google a Sitios Web con Uso de Pop-up
Penalización de Google a Sitios Web con Uso de Pop-up

No obstante, la Web Performance Optimization no sólo abarca los aspectos de velocidad de carga, se relaciona directamente con la experiencia de usuario; la forma de comunicarnos con los usuarios. Es así como, por ejemplo, Google penaliza los sitios web que malogran la performance para dispositivos móviles usando pop-ups:

 

  • https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html
  • https://searchengineland.com/google-confirms-rolling-mobile-intrusive-interstitials-penalty-yesterday-267408

 

Y aspectos relacionados a la indexación con Googlebot también afectan la Web Performance Optimization:

 

  • https://webmasters.googleblog.com/2017/01/what-crawl-budget-means-for-googlebot.html
  • https://searchengineland.com/google-explains-crawl-budget-means-webmasters-267597