Cómo fue la charla «Optimiza tu web: Web Performance Optimization en WordPress»

Los números

Apuntados a la charla: 42 personas.
Asistentes: 26 personas.
Se realizó el pasado 16 de julio de 2018.

IMPORTANTE: Conforme comentamos en la charla, vamos a retomar la herramienta Slack, concretamente el canal #wpalicante de Slack WordPress España para organizarnos mejor y poder compartir la gestión de la meetup. Para apuntarte al slack sigue las instrucciones que aparecen en la siguiente página -> http://wp-es.es/slack/

La charla

En esta ocasión tenemos la suerte de contar para la meetup con un invitado de primera categoría: Antonio Torres https://antonio-torres.es/, Director de Soporte Especializado en Profesional Hosting https://www.profesionalhosting.com/ , consultor y desarrollador web. En una charla tan densa como interesante nos ha comentado todos los entresijos sobre el rendimiento de la web hecha con WordPress, para que la optimicemos y conseguir así no sólo que los usuarios nos quieran más sino también que los buscadores nos posicionen mejor. En inglés se conoce como «Web Performance Optimization» o WPO.

Os compartimos la presentación que preparó nuestro ponente con el resumen de todo lo que explicó.

Os incluimos a continuación algunas notas adicionales que nos parecen interesantes y pueden valer en algunos conceptos como resumen y en otros como aclaración:

Para la satisfacción del usuario es muy importante la velocidad de carga de la web.
Google penaliza las webs lentas, con lo que conseguiremos peor posicionamiento en su buscador.
%conversión: Es el éxito en el objetivo que tengamos para nuestra página (que el usuario haga una compra, que se quede leyendo…).
La rapidez de la página en cargar también mejora el SEO.
Para mejorar la velocidad hemos de revisar tanto el servidor donde alojamos la web como la programación de la misma.

Servidor:

Cuidado con los hostings gratuitos porque suelen ser muy lentos.
Mejor si el procesador es de alto rendimiento, Intel mejor que AMD al ser más estable, Intel I5 por ejemplo, con velocidad de procesador de 2,5GH o superior.
Mejor si el disco duro es SSD Raid.
Centro de datos en España (o donde nosotros tengamos nuestro mercado potencial) porque si está fuera la latencia de conexión es más elevada y eso empeora la experiencia del usuario.
Latencia: tiempo que tarda en comunicarse tu conexión local con el servidor.
Calidad y estabilidad del Centro de Datos: mejor que sea TIER III o IV. Si es inferior se podrá caer más veces a lo largo del año.
Niveles TIER: Son cuatro categorías establecidas por el Uptime Institute para los centros de datos, que se corresponden a unas garantías sobre el material utilizado para asegurar que el sistema no se caerá ante las peores circunstancias al tener además mayor o menor redundancia de componentes.
Configuración especial del servidor para WordPress. Si la compañía tiene servidores especializados en WordPress mejor.
Compatibilidad PHP7 y MySQL 5.6. Si puede cambiar entre PHP7 y PHP5 mejor que mejor.
Sistemas de caché basados en RAM.

Páginas para medir velocidad y rendimiento web

Al final lo importante es medir siempre con la misma herramienta para ver los progresos que hagamos si estamos realizando mejoras. Si vamos saltando de una herramienta a otra no podremos comparar. Se revisan las siguientes:

PageSpeed Insights: Es la peor aunque al ser la de Google nos interesa hacerle un poco de caso sin obsesionarse. Como encima se hace desde EEUU va a medir mayor latencia que la que de verdad vamos a tener con nuestros clientes. Entre un 60 y un 80% ya es aceptable.
Pingdom.com: Es mejor que el anterior.
WebPage Test: Es el mejor. Puedes indicarle dónde está el servidor y realiza tres testeos.
GtMetrix: También puede ser aceptable porque puedes elegir origen (aunque no dentro del país, al menos se puede acercar al continente) y realiza varias mediciones diferentes.

Conceptos interesantes:

First Byte: Primera carga. Es el tiempo que tarda un sitio web en enviar el primer byte. Se disminuye usando caché o mejorando el código.
Speed Index: o Índice de velocidad. Cuánto tardas en cargar la parte visible de la web. Es una fórmula compleja que no necesitamos entender, pero sí saber que cuanto más bajo mejor y que debería ser inferior a 3500.

Programación:

Para la programación, cuidado con instalar demasiados plugins o elegir un tema muy pesado.

En caso de tener problemas con plugins, podemos utilizar otro (plugin, por supuesto) para saber cuál es el que nos está causando problemas:

P3 (Plugin Performance Profiler): Cuidado porque no se mantiene desde hacer tres años, es decir desde el 2015, así que aunque es bueno y merece todavía la pena puede que empiece a fallar al no estar testeado con las últimas actualizaciones de WP. Analiza todos los plugins instalados y da información de cada uno para encontrar cuál nos está dando problemas.

Otra cosa que se puede hacer es minimizar o incluso desactivar el número de revisiones de los posts. En la presentación se indica cómo hacerlo.

Otros plugins interesantes para optimizar:

WP-Optimize: Plugin para limpiar BDD. Se puede programar para hacerlo periódicamente. Hay que llevar cuidado con las opciones en letras rojas.
WP Rocket: Plugin de caché. ES el mejor pero es de pago. Otra buena opción gratuita es W3 Total Caché aunque es más complejo de configurar.
Autoptimize: plugin para automatizar la optimización. Ayuda bastante.

Otros conceptos y herramientas:

Lazy Load: Una forma de carga de lal web donde sólo se carga la parte de la página que está a la vista. Cuando haces scroll es cuando se carga el resto, así se consigue mayor velocidad de carga.
Mod PageSpeed Google: Herramienta de Google muy buena para optimización de webs. No es local sino que se instala a nivel de servidor y lo activas. Hay que ir a buscarlo por tanto al cpanel del servidor. Debería aparecer un icono llamado PageSpeed. Hay que tener cuidado porque se necesita más espacio por parte al menos de las imágenes que tengas cargadas en tu web ya que una de las cosas que hace esta herramienta es guardarse copias optimizadas en el servidor, lo cual ocupará más espacio del que actualmente tienes.
CDN: Es muy útil si tenemos usuarios en países distintos a donde está el servidor. Se aconseja utilizar este protocolo si tienes más de un 20% de tráfico fuera del país de origen. Lo que se hace es replicar toda la información estática en máquinas de diferentes países para que la latencia se reduzca.
HTTP/2: Es aconsejable tener activo en el servidor porque mejora sustancialmente la velocidad. En internet hay webs de test http2 para averiguar si nuestra web está utilizando este protocolo. Si no lo está, hay que hablar con nuestro hosting para que lo activen. Si tenemos esto activo ya no es necesario tener activo el Keep-Alive que se testea en muchas de las webs que miden el rendimiento.
Caché AMP: Es un CDN en unas máquinas específicas. Google tiene una. Las webs que lo usan se identifican por un rayo con fondo azul cuando se buscan en Google. . El problema que hay que tener en cuenta es que se almacena en sus servidores (además de en el tuyo sobre el que tienes control) y eso por lo general no gusta.
HTTPS: Es el “nuevo” protocolo seguro para páginas web porque añade una capa de encriptación al protocolo http que se utilizaba hasta ahora. Para conseguir que nuestra web utilice HTTPS es necesario conseguir un certificado firmado por una tercera entidad que verifique la identidad del sitio web. Hasta ahora había que pagar pero ahora existe una forma de obtenerlo gratuitamente gracias a Letsencrypt. Este se ha de instalar en el servidor así que lo tiene que prover el hosting.