50 TECNICAS PARA WORD PRESS

50 técnicas WPO
para WordPress
EL EBOOK QUE TE AYUDARÁ A
OPTIMIZAR TU WORDPRESS
alvarofontela.com
raiolanetworks.es
CONTENIDO
1.Cache de página .................................................................................................... 7
2.Cache de objetos ................................................................................................... 9
3.Cache de consultas ............................................................................................... 11
4.Cache de navegador .............................................................................................. 13
5.Optimizar imágenes (compresión)........................................................................ 15
6.Optimizar imágenes (escalado)............................................................................. 17
7.Lazy load al cargar imágenes ............................................................................... 19
8.Minimizar el Javascript ........................................................................................ 21
9.Combinar el Javascript ......................................................................................... 23
10.Carga asíncrona de JavaScript (en todos los casos) ......................................... 24
11. Minificar CSS ...................................................................................................... 26
12. Combinar CSS ..................................................................................................... 27
13.Carga condicional ............................................................................................... 28
14.Cargar jquery desde CDN .................................................................................... 29
15.Optimizar Google Fonts ...................................................................................... 31
16.Optimizar Font Awesome .................................................................................... 32
17.Desactivar los query strings ............................................................................... 33
18.Optimizar entrega de CSS ................................................................................... 35
19.Lazy load en iframes y vídeos ............................................................................ 37
20.Resource hints ..................................................................................................... 39
21.Configurar un servicio CDN ................................................................................ 40
22.Desactivar emojis y dashicons ........................................................................... 42
23.Optimizar la carga de Gravatar .......................................................................... 44
24.Controlar el API Heartbeat ................................................................................. 45
25.Desactivar cart fragments en WooCommerce ................................................... 47
26.Optimizar los comentarios ................................................................................. 48
27.Desactivar OEMBED y EMBEDS ........................................................................... 49
28.Desactivar el WP_cron.php ................................................................................. 50
29.Desactivar pingbacks y trackbacks .................................................................... 51
30.Limpiar el header de WordPress ........................................................................ 53
31.Desactivar jquery migrate .................................................................................. 55
32.Definir el wp_memory_limit .............................................................................. 56
33.Cambiar las tablas a INNODB ............................................................................. 57
34.Limpiar la DB de WordPress ............................................................................... 58
35.Parámetros “autoload” en la DB ........................................................................ 60
36.Domain sharding ................................................................................................. 61
37.Subdominion cookie-less ................................................................................... 63
38.Reducir las peticiones externas ......................................................................... 65
39.Cargar analítica y píxeles desde local ................................................................ 66
40.Evitar los contadores de datos ........................................................................... 67
41.Compresión GZIP ................................................................................................ 68
42.Compresión Brotli ............................................................................................... 70
43.Actualizar la versión PHP ................................................................................... 72
44.HTTP2 y HTTP3 .................................................................................................... 74
45.Servidor web potente ......................................................................................... 75
46.DNS geodistribuidos anycast ............................................................................. 76
47.Elegir un theme simple y mobile first ................................................................ 77
48.Detectar problemas de rendimiento .................................................................. 79
49.Disponer de los recursos necesarios .................................................................. 81
50.Lógica y planificación realista ........................................................................... 83
ÁLVARO FONTELA
(CEO de Raiola Networks)
Álvaro Fontela inició su camino como emprendedor digital en 2014, cuando
cofundó la empresa de hosting y dominios Raiola Networks. Aunque para
entonces ya tenía varios años de experiencia con WordPress, fue en ese
momento cuando empezó a especializarse en la aplicación de técnicas WPO.
En este tiempo, Álvaro ha adquirido conocimientos suficientes como para
ofrecer sus servicios como consultor WordPress, ha iniciado múltiples nuevos
proyectos digitales y se ha convertido en uno de los pocos expertos en WPO
que existen en España.
Como resultado, asiste como ponente a congresos nacionales e
internacionales de forma habitual y también suele ser invitado a dar clase de
WordPress, WooCommerce y WPO en diversos másteres y escuelas de negocios.
50 técnicas WPO para WordPress
Álvaro Fontela
4
INTRODUCCIÓN A LAS TÉCNICAS WPO
El WPO ha llegado para quedarse. Aunque el concepto se inventó en 2004, solo hace 5 o
6 años que se empezó a aplicar como herramienta para mejorar el SEO de una web
desde el punto de vista del crawl y de la experiencia de usuario.
¿Pero qué es el WPO? Para que sirva como introducción, podemos decir que las técnicas
WPO consisten en una serie de buenas prácticas que nos permiten tener un sitio rápido
y efectivo.
Se apoyan en estos 3 pilares básicos:
En la mayoría de los casos, para implementar técnicas WPO es necesario disponer de
conocimientos técnicos. Por esta razón, un consultor WPO debe tener nociones de
desarrollo web y de administración de sistemas.
Ahora bien, esto no quiere decir que un profesional del mundo web o del marketing
digital no tenga la obligación de aprender qué técnicas puede aplicar a su WordPress.
Por eso, en este libro he incluido una lista de 50 técnicas WPO que se pueden aplicar a
un sitio web fácilmente, así como enlaces a fuentes donde ampliar la información.
50 técnicas WPO para WordPress
Álvaro Fontela
5
Como nota final, quiero recordarte que el WPO está en constante evolución y cambio.
Estamos viviendo un momento clave en el que las conexiones y dispositivos móviles
tienen un aumento significativo de la cuota de mercado en el tráfico web. Como
resultado, el WPO es cada día más exigente.
Este blog resultará interesante a los que quieran aprender WPO para WordPress y
todos los conceptos que lo rodean: https://alvarofontela.com/blog/
También encontraras artículos sobre WPO en el blog de Raiola Networks:
https://raiolanetworks.es/blog/
Si lo que se busca es un hosting rápido y eficiente, en Raiola Networks ofrecemos
planes con LiteSpeed y cPanel: https://raiola.link/hostingwp/
Y ahora, ¡manos a la obra!
50 técnicas WPO para WordPress
Álvaro Fontela
6
1.CACHE DE PÁGINA
(page cache)
El cache de página debe ser siempre la primera técnica WPO que pongas en marcha.
Resulta totalmente indispensable para tener una buena velocidad de carga en cualquier
web. Teniendo en cuenta la complejidad de las webs actuales a nivel dinámico, el hecho
de no tener un cache de página puede implicar un cuello de botella importante.
Un cache de página, ya sea mediante plugin o mediante un servicio en el server,
ayudará a ahorrar recursos en la ejecución de la web. Además, mejorará los tiempos de
respuesta tanto para el usuario como para el bot de Google.
50 técnicas WPO para WordPress
Álvaro Fontela
7
Aunque un cache implementado con un servicio como Nginx o Varnish es más efectivo y
directo, con un plugin de cache para WordPress la implementación es mucho más
flexible para el administrador del sitio web. De hecho, suele suceder que el webmaster
solo tenga la posibilidad de activar un cache en formato plugin.
Existen distintos plugins de cache para WordPress, pero en Raiola Networks
normalmente recomendamos estos tres:
WP Rocket: Uno de los más efectivos y, al mismo tiempo, el más fácil de
configurar. El único hándicap es que es de pago.
W3 Total Cache: Una completa suite de optimización para WordPress. Es el
plugin más completo, pero también el más complejo de configurar.
LiteSpeed Cache: Más que un plugin de cache, es otra suite de optimización para
WordPress. Lo malo es que necesitamos un hosting con LiteSpeed Web Server para aprovecharlo al máximo.
https://raiola.link/enlace1
50 técnicas WPO para WordPress
Álvaro Fontela
8
2.CACHE DE OBJETOS
(object cache)
El cache de objetos es un gran desconocido dentro del mundo de WordPress y, como
consecuencia, muy poca gente lo utiliza. Es una lástima, porque puede ayudar mucho
con la velocidad de webs muy dinámicas; por ejemplo, tiendas online WooCommerce o
redes sociales BuddyPress.
El cache de objetos no es exclusivo de WordPress o de sistemas web, para no entrar en
temas complejos a continuación veremos la función que cumple en WordPress.
En resumen, lo que hace es guardar pequeños fragmentos de código PHP procesado en
la memoria RAM mediante un servicio instalado en el servidor. Además, en WordPress
no solo cachea código PHP, sino que puede ahorrar ciertas consultas a la base de datos.
Los datos se guardan en RAM, de modo que el acceso a ellos resulta mucho más
rápido. Ahora bien, para eso hay que tener instalado ese servicio en el servidor que
trabaje como cache de objetos.
Los más comunes son Redis y Memcached.
50 técnicas WPO para WordPress
Álvaro Fontela
9
Ahora que el servidor tiene uno de estos servicios instalado (o bien está funcionando en
alguna instancia), para implementarlo en WordPress es necesario utilizar un plugin.
Algunas posibilidades son:
Memcached Redux: Un plugin bastante rudimentario que sirve para usar
servidores Memcached para el cache de objetos.
W3 Total Cache: Una completa suite de WPO para WordPress que, entre otras
funcionalidades, permite configurar object cache con Redis y Memcached, además de
con otros servicios.
Redis Object Cache: Un plugin bastante sencillo para utilizar Redis en
WordPress.
https://raiola.link/enlace2
50 técnicas WPO para WordPress
Álvaro Fontela
10
3.CACHE DE CONSULTAS
(query cache)
El cache de consultas a la base de datos, también conocido como query cache, es un
buen complemento al cache de objetos cuando hay que aumentar la velocidad de sitios
web muy dinámicos.
El cache de consultas sirve para guardar el resultado de las llamadas realizadas a la
base de datos. De este modo, se ahorran tiempo y recursos cuando se vuelven a realizar
esas consultas más tarde.
Los principales sistemas de bases de datos que se pueden utilizar con WordPress llevan
configuración para implementar query_cache. Sin embargo, hay que tener en cuenta
que en las tablas innoDB no es indispensable hacerlo (de hecho, es posible que resulte
contraproducente).
50 técnicas WPO para WordPress
Álvaro Fontela
11
En instalaciones WordPress muy dinámicas, el cache de consultas ayudará con el WPO
de la web siempre y cuando se realicen las exclusiones necesarias.
También se puede implementar el cache de consultas a la base de datos mediante
plugins. Actualmente, la única solución efectiva es el Query Cache de W3 Total Cache.
Un cache de consultas bien implementado es como uno de objetos eficiente: acelerará
el back-end o dashboard de administración de WordPress.
https://raiola.link/enlace3
50 técnicas WPO para WordPress
Álvaro Fontela
12
4.CACHE DE NAVEGADOR
(browser cache)
El cache de navegador o browser cache es un tipo de cache diferente a todos los
mencionados hasta ahora.
Su funcionamiento es simple: se guardan los archivos estáticos en el navegador del
visitante durante la primera visita para así ahorrar ancho de banda, peticiones y tiempo
de descarga en visitas posteriores.
El browser cache no tiene influencia alguna sobre el crawl por parte del bot de Google,
pero sí beneficia a la experiencia de usuario y al nivel de usabilidad.
50 técnicas WPO para WordPress
Álvaro Fontela
13
Normalmente, el cache de navegador se configura en el .htaccess del host o en el
archivo de configuración correspondiente del servidor web.
Puede parecer una tontería, pero resulta sorprendente el ancho de banda que se ahorra
al cachear elementos estáticos pesados, como las imágenes.
Teniendo en cuenta que la navegación mediante conexiones de datos móviles tiene una
cuota de mercado altísima, el browser cache supone una gran mejora en la mayoría de
los casos.
Lo único que hay que tener en cuenta es que, en algunos casos, si no se configura bien
el cache de navegador puede haber problemas con las actualizaciones de contenido si
los archivos llevan el mismo nombre.
https://raiola.link/enlace4
50 técnicas WPO para WordPress
Álvaro Fontela
14
5.OPTIMIZAR IMÁGENES
(compresión)
El 99% de los sitios web de Internet (incluyendo los ecommerce) tienen un problema
tanto con la compresión como con el escalado de imágenes.
Comprimir una imagen consiste en utilizar algoritmos para reducir su peso a costa de
perder un poco de calidad. Dicha pérdida, en muchos casos, no es perceptible para el
ojo humano.
La eficacia de la compresión depende del algoritmo utilizado y del nivel de compresión.
Es necesario tener en cuenta que, cuanto más se comprima una imagen, peor será su
calidad y menor será su peso.
50 técnicas WPO para WordPress
Álvaro Fontela
15
Se pueden comprimir las imágenes antes de subirlas a la web utilizando una aplicación
de escritorio o un servicio online. Otra opción es instalar un plugin para WordPress que
optimice las imágenes al cargarlas
Algunos de los mejores complementos para comprimir imágenes en WordPress son los
que usan servicios externos más eficientes y no las librerías del servidor:
Imagify: Potente y flexible, de pago por uso. Un plugin de optimización
desarrollado por el mismo equipo que creó WP Rocket.
Resmush.it: Una opción gratuita. No es la más potente, pero es de las mejores
que están disponibles sin coste.
Otras alternativas son Kraken.io o TinyPNG.
EWWW Image Optimizer: Otro plugin para WordPress que automatiza la optimización de imagenes. Tiene version gratuita y de pago.
https://raiola.link/enlace5
50 técnicas WPO para WordPress
Álvaro Fontela
16
6.OPTIMIZAR IMÁGENES
(escalado)
El escalado de imágenes es un método de optimización menos conocido que la
compresión, pero está basado en la lógica.
Es muy simple: si el layout de una web tiene un máximo de 1200px de ancho, no hay
razón para subir imágenes más amplias. Por CSS se van a mostrar más pequeñas,
aunque van a pesar exactamente lo mismo, lo que ralentizará la carga.
Aunque hace ya tiempo que WordPress carga distintas versiones y miniaturas de las
imágenes para utilizar la que mejor se adapta al tamaño mediante srcset, nunca está de
más cuidar el escalado.
50 técnicas WPO para WordPress
Álvaro Fontela
17
Al igual que sucede con la compresión, el proceso de escalado puede hacerse antes de
subir las imágenes o después, utilizando un plugin específico. En realidad, la mayoría de
plugins de optimización también tienen funcionalidades específicas para escalar
imágenes al tamaño máximo que indique el webmaster.
En Raiola Networks recomendamos que se escalen las imágenes en local, en el
ordenador, y teniendo en cuenta el layout del sitio web al que se van a subir.
De todas maneras, si se desea utilizar un plugin la mejor opción es Imsanity, que es un
complemento gratuito disponible en el repositorio.
https://raiola.link/enlace6
50 técnicas WPO para WordPress
Álvaro Fontela
18
7.LAZY LOAD AL CARGAR IMÁGENES
Lazy load es una técnica WPO que permite retrasar la carga de contenido web que no es
necesario en un primer momento.
Cuando aplicamos lazy load con imágenes, estas se van cargando según el usuario va
haciendo scroll o bajando por la página.
De este modo, se reducen las peticiones y el ancho de banda utilizados, ya que es
posible que el usuario nunca llegue a hacer scroll hasta el final de la página.
Hasta hace poco, para utilizar lazy load era necesario utilizar una librería JavaScript.
50 técnicas WPO para WordPress
Álvaro Fontela
19
Sin embargo, en la actualidad, los navegadores como Google Chrome ya han integrado
lazy load nativo.
Con el lazy load nativo se elimina una petición JavaScript, con lo que eso conlleva. Al
mismo tiempo, se consigue mayor eficiencia en los dispositivos menos potentes.
La técnica lazy load no hace milagros, pero ayuda a agilizar la renderización de la
página para los usuarios con navegadores muy lentos. Además, también ahorra ancho
de banda en conexiones de datos móviles.
https://raiola.link/enlace7
50 técnicas WPO para WordPress
Álvaro Fontela
20
8.MINIFICAR JAVASCRIPT
La minificación es una de las técnicas de optimización de archivos JavaScript más
conocidas y, al mismo tiempo, más difíciles de implementar.
La minificación de JavaScript consiste en reducir al máximo el tamaño y peso de los
archivos JavaScript. Para conseguirlo, se realizan las siguientes acciones:
Eliminar los comentarios en el JS.
Eliminar los saltos de línea en el JS.
Eliminar los espacios, siempre que sea posible.
Se mantiene la sintaxis del archivo, pero se eliminan todos los caracteres que no son
interpretables por el navegador y que ocupan espacio en el archivo.
Cuanto más ligeros sean los archivos JavaScript, menor será su impacto sobre el
rendimiento del navegador del visitante y mejores puntuaciones se obtendrán en
métricas como las de Google PageSpeed Insights y Google LightHouse.
Existen dos formas de realizar la minificación de JavaScript: manual y automática.
Para minificar de forma manual, son necesarios conocimientos avanzados de JavaScript
y tiempo.
50 técnicas WPO para WordPress
Álvaro Fontela
21
En cambio, si se minifica de forma automática a través de plugins, habrá que añadir
exclusiones para afinar sin romper nada.
Actualmente, los archivos JS de los plugins y themes para WordPress son tan complejos
que es normal tener problemas al minificar. En muchos casos, ni añadiendo exclusiones
a la minificación automática se podrá conseguir un buen resultado.
Algunos plugins de cache, como WP Rocket o LiteSpeed Cache, implementan
herramientas para minificar el JavaScript. También existen soluciones específicas como
Autoptimize.
https://raiola.link/enlace8
50 técnicas WPO para WordPress
Álvaro Fontela
22
9.COMBINAR JAVASCRIPT
El combinado de JavaScript es otra técnica que ayuda a simplificar la carga de un sitio
web.
En el pasado, el objetivo del combinado de JavaScript era reducir el número de
peticiones realizadas durante la carga de la web.
Sin embargo, hoy en día el combinado ya no resulta tan efectivo como antes, debido a la
aparición del protocolo HTTP/2. Ahora, salvo que el número de archivos JS que hay que
cargar sea exageradamente alto, puede ser incluso más eficiente enviar varios archivos
más pequeños.
El combinado consiste en unir varios archivos JavaScript en un único archivo. Esto
funciona bien en teoría, pero en la práctica puede provocar problemas de
dependencias.
Al igual que en el caso de la minificacion de JavaScript, el combinado puede realizarse
de forma manual y también de forma automática.
En el caso de hacerlo de forma manual, harán falta conocimientos profundos de
JavaScript y también tiempo. Cuanto más complejo sea el theme o plugin, más tiempo
se tardará y más soltura con JavaScript será necesaria.
Para minificar de forma automática pueden utilizarse plugins que identifican patrones,
como en el caso de la minificación. No obstante, habrá que añadir exclusiones para
afinar la carga.
Como se ha mencionado, el combinado ya no resulta tan efectivo como solía, pero
tampoco podemos considerarlo todavía como una técnica WPO obsoleta.
Algunos plugins para llevarlo a cabo son WP Rocket y LiteSpeed Cache, como en el caso
de la minificacion. También existen soluciones específicas como Autoptimize.
https://raiola.link/enlace9
50 técnicas WPO para WordPress
Álvaro Fontela
23
10.CARGA ASÍNCRONA DE JAVASCRIPT
La carga asíncrona es una de las técnicas WPO más efectivas en lo que se refiere al
JavaScript.
La carga asíncrona es una modificación simple. Se trata de conseguir que ningún script
JavaScript bloquee la carga esperando por dependencias o por cualquier otra razón.
Para conseguirlo, los scripts JS se cargan en paralelo en lugar de hacerlo en serie.
Si se configura una carga asíncrona efectiva, los visitantes podrán ver el sitio web
antes de que acabe de cargar por completo, de modo que se mejorarán la experiencia
de usuario y la velocidad de carga que percibe esa visita.
50 técnicas WPO para WordPress
Álvaro Fontela
24
Además, la carga asíncrona resulta totalmente imprescindible para mejorar las
puntuaciones asignadas por Google en Google PageSpeed y Google LightHouse.
Se puede implementar fácilmente la carga asíncrona con plugins como Async JavaScript
(de los creadores de Autoptimize) o con plugins de cache como WP Rocket o LiteSpeed
Cache.
https://raiola.link/enlace10
50 técnicas WPO para WordPress
Álvaro Fontela
25
11.MINIFICAR CSS
Al igual que en el caso del JavaScript, se pueden minificar las hojas de estilo CSS con el
fin de reducir el tamaño de los archivos y agilizar la carga.
Las acciones que hay que llevar a cabo para minificar los archivos CSS son exactamente
las mismas:
Eliminar los comentarios en el CSS.
Eliminar los saltos de línea en el CSS.
Eliminar los espacios, siempre que sea posible.
El objetivo es eliminar todos los caracteres que no son interpretables por el navegador.
Como en el caso de la minificación de JavaScript, esta continúa siendo una técnica
efectiva y que se debe aplicar siempre que resulte posible.
Sin embargo, en el caso del CSS no ocurre como en el JavaScript: el CSS no suele influir
demasiado sobre el rendimiento del navegador del visitante, aunque resulte excesivo.
Se puede minificar el CSS de forma manual o automática.
Si se hace de forma manual, habrá que tener conocimientos amplios sobre CSS. En
cambio, si se hace de forma automática es posible que haya que añadir muchas
exclusiones para afinar la carga y evitar que se rompa el diseño del sitio. Todo
dependerá de la complejidad del theme utilizado.
Al igual que sucede con técnicas anteriores, la minificación de CSS influye directamente
sobre la puntuación asignada por Google en Google PageSpeed y Google LightHouse.
Resulta posible minificar el CSS con plugins específicos como Autoptimize o con plugins
de cache como WP Rocket o LiteSpeed Cache.
https://raiola.link/enlace11
50 técnicas WPO para WordPress
Álvaro Fontela
26
12.COMBINAR CSS
El combinado de CSS, al igual que el de JavaScript, es una técnica WPO que ha dejado
de resultar tan efectiva como en el pasado. Igualmente, no se trata de una técnica
obsoleta.
El combinado de CSS consiste en unir varios archivos CSS en un único archivo con el
objetivo de agilizar la carga al reducir el número de peticiones.
Al igual que en el caso del combinado de JavaScript, en webs que cargan con HTTP/2
no es necesario utilizar el combinado de CSS salvo que el número de archivos CSS sea
exageradamente alto.
El combinado de CSS también se puede llevar a cabo de forma manual y automática.
Para el método manual son necesarios conocimientos avanzados de CSS y tiempo. Para
hacerlo de forma automática existen plugins, pero hará falta añadir las exclusiones
necesarias para no romper el diseño del sitio web.
Si al combinar CSS no se respetan las dependencias o no se ajusta correctamente la
sintaxis de los archivos, es posible que el diseño de la web salga perjudicado.
Se puede combinar de forma automática el CSS mediante plugins como Autoptimize o a
través plugins de cache como WP Rocket o LiteSpeed Cache.
Sin embargo, hay que tener en cuenta que la complejidad de los themes actuales
dificulta muchísimo el combinado de CSS. Por otro lado, aunque quizá resulte más
eficiente servir varios archivos en lugar de uno al utilizar HTTP/2, puede ser interesante
minificar debido a que los themes actuales usan demasiados archivos CSS.
https://raiola.link/enlace12
50 técnicas WPO para WordPress
Álvaro Fontela
27
13.CARGA CONDICIONAL
La carga condicional es una técnica WPO especialmente útil en instalaciones WordPress
muy sobrecargadas de plugins.
El objetivo es especificar lo que se carga y lo que se deja de cargar en las distintas secciones de la web. Lo ideal es que un plugin solo se cargue cuando va a ser utilizado,
pero esto en la práctica no es así.
Esta técnica WPO es específica de los CMS, ya que en desarrollos a medida no suele ser
necesaria.
Si se consigue afinar bien la carga condicional, se obtendrán beneficios en tres áreas:
Mejoras en el rastreo por parte del bot de Google.
Mejoras en las puntuaciones de Google PageSpeed y Google LightHouse.
Mejoras en la experiencia de usuario al sobrecargar menos el navegador.
Para implementar una carga condicional efectiva mediante un plugin con interfaz gráfica como Perfmatters es necesario aplicar la lógica: si solo se utiliza la funcionalidad de
un plugin en una página en concreto, simplemente se debe desencolar su carga en toda
la web excepto en esa página específica.
Desde hace unos años, han ido apareciendo plugins como WP Shifty, Perfmatters o Asset
CleanUp Pro que facilitan la implementación de la carga condicional en WordPress.
https://raiola.link/enlace13
50 técnicas WPO para WordPress
Álvaro Fontela
28
14. CARGAR JQUERY DESDE CDN
Siendo JavaScript el lenguaje client-side más utilizado del mundo y jQuery su librería
más utilizada, con más del 90% de cuota de mercado, resulta interesante optimizar al
máximo la carga de esta librería.
Es posible agilizar la carga de jQuery cargando la librería principal y sus dependencias
desde un CDN especializado.
¿Qué CDN existen para cargar jQuery?
CDNJS (usa la red de CloudFlare CDN)
jsDelivr
Google Hosted Libraries
La implementación de un CDN para jQuery varía en función del servicio CDN concreto
que se quiera implementar.
50 técnicas WPO para WordPress
Álvaro Fontela
29
Los que aparecen listados más arriba alojan todas las versiones de jQuery y sus
dependencias (con sus versiones) para ser totalmente compatibles con los plugins y
themes instalados.
Si ya se está utilizando un CDN para el resto de archivos de la web, puede que este tipo
de servicios para el jQuery no sean necesarios. Eso dependerá totalmente de la
configuración.
Un ejemplo de plugin útil para configurar fácilmente un CDN para jQuery es commonWP.
https://raiola.link/enlace14
50 técnicas WPO para WordPress
Álvaro Fontela
30
15.OPTIMIZAR GOOGLE FONTS
Actualmente, Google Fonts es utilizado por la mayoría de webmasters porque son
muchos los themes para WordPress que cargan estas fuentes.
En muchos casos, la carga de Google Fonts desde los servidores de Google puede
suponer un cuello de botella que ralentizará la carga de toda la web.
Hay que tener en cuenta que, cuando se carga un tipo de fuente en diferentes tamaños y
tipos (negrita, cursiva, etc.), se realizan distintas peticiones al servicio de Google Fonts:
una por cada combinación.
Y, precisamente, el principal problema de Google Fonts es que se cargan distintas
peticiones desde los servidores de Google, que no siempre son rápidos.
Una buena opción para agilizar la carga de fuentes desde Google Fonts es, simplemente,
combinar todas las peticiones en un único archivo y configurar la carga asíncrona.
Para hacerlo, el primer paso deberá ser guardarlas en local, ya que en caso contrario no
se podrán modificar las peticiones realizadas a los servidores de Google.
Existen plugins específicos como Self-Hosted Google Fonts Pro, aunque otros como
Asset CleanUp Pro o WP Rocket incluyen las funcionalidades necesarias.
https://raiola.link/enlace15
50 técnicas WPO para WordPress
Álvaro Fontela
31
16.OPTIMIZAR FONT AWESOME
Font Awesome es la librería de iconos más utilizada actualmente. De hecho, incluso una
instalación básica de WordPress utiliza Font Awesome para cargar los iconos.
El problema de esta librería es que, a través de diversos archivos, se cargan muchos más
iconos de los que realmente se utilizan.
Por ello, es posible afinar y agilizar la carga de Font Awesome eliminando del CSS todos
aquellos iconos que no estén en uso en la web.
Además, este proceso conllevará el alojamiento de una copia local de Font Awesome, lo
que permitirá optimizar aún más su carga.
Si el webmaster decide ir un poco más allá, puede incluso pasar esos iconos de Font
Awesome a formato SVG, mucho más eficiente.
Por otro lado, en sitios web que no utilizan Font Awesome y donde su carga no es
deseable, esta se puede desactivar desde el front-end, aunque esto dependerá
totalmente del theme y las dependencias.
Una última consideración que no se puede perder de vista es que la versión actual de
Font Awesome es la 5 (a fecha de redacción de esta guía), pero se utiliza cargando un
script llamado shim.js para ser compatible con Font Awesome 4. Si no es utiliza la
versión 4, lo más conveniente es desactivar dicho script.
https://raiola.link/enlace16
50 técnicas WPO para WordPress
Álvaro Fontela
32
17.DESACTIVAR LOS QUERY STRINGS
Los query strings son algo que todo el mundo ve en las URL de carga de una web, pero
muy poca gente sabe para qué sirven ni qué influencia tienen sobre el WPO del sitio.
La mejor forma de entender lo que son los query strings es a través de una imagen:
Ese “?ver=1.4.1” es un query string que, teóricamente, sirve para mostrar la versión de
los recursos cargados y, precisamente, evitar el cacheado.
El problema de los query strings es que pueden dificultar el cache de recursos a través
de CDN o servicios de proxy inverso como Nginx o Varnish.
WordPress, de forma nativa, utiliza query strings en absolutamente todos los recursos
JavaScript y CSS que cargan los plugins y themes. Como consecuencia, si se desea
optimizar de forma efectiva un WordPress con cache y CDN, habrá que desactivar los
query strings para que las rutas a los recursos aparezcan limpias. Sin embargo, cada vez
más CDN tienen en cuenta los query strings.
50 técnicas WPO para WordPress
Álvaro Fontela
33
Para desactivar los query strings existen tres opciones:
Utilizar plugins que incluyan esta opción, como WP Rocket o Perfmatters.
Utilizar plugins específicos de los que podemos encontrar gratis en el repositorio de plugins de WordPress.
Usar un código en el functions.php.
https://raiola.link/enlace17
50 técnicas WPO para WordPress
Álvaro Fontela
34
18.OPTIMIZAR LA ENTREGA DE CSS
Los sitios web actuales incluyen una cantidad considerable de CSS. Por esa razón, todas
las optimizaciones llevadas a cabo sobre las hojas de estilos van a tener un resultado
notable sobre la velocidad de carga.
La optimización de la entrega del CSS es una de las reglas que suele aparecer en Google
PageSpeed Insights y en Google LightHouse.
Lo que se logra al aplicar esta técnica es que la carga del CSS no bloquee la
visualización del sitio web a los visitantes.
No existe una forma exacta de optimizar la entrega de CSS, sino que hay que seguir
varias buenas prácticas:
Cuantos menos archivos CSS se carguen, mejor.
La parte superior de la web debe contener CSS simple.
Debe incluirse el menor número posible de @import.
No se debe usar CSS en las etiquetas del HTML.
En los themes multipropósito actuales, muchas veces es imposible cumplir con la
mayoría de estas buenas prácticas, debido a la complejidad que ostentan.
En sitios web que realicen numerosas peticiones de archivos CSS a servicios externos,
resultará imposible optimizar la entrega del CSS. El motivo es que no se podrán unir
todas las peticiones externas en un solo archivo CSS combinado sin que se rompa algo.
50 técnicas WPO para WordPress
Álvaro Fontela
35
Al fin al cabo, esta técnica de optimización se basa en la carga de hojas de estilo CSS
depuradas y limpias, una situación que rara vez se da en casos reales de themes
WordPress.
Algunos plugins, como WP Rocket, permiten optimizar la entrega del CSS. Sin embargo,
los resultados obtenidos varían mucho en función de la complejidad de la plantilla
utilizada.
https://raiola.link/enlace18
50 técnicas WPO para WordPress
Álvaro Fontela
36
19.LAZY LOAD EN IFRAMES Y VÍDEOS
La técnica lazy load no solo se puede aplicar a la carga de las imágenes, sino también a
los iframes y a los vídeos incrustados.
El objetivo es exactamente el mismo que en el caso de las imágenes: reducir el impacto
sobre el rendimiento al cargar los scripts y contenidos solamente cuando se necesitan
al hacer scroll y no en la primera carga de la web.
En el caso del lazy load en iframes y vídeos incrustados, se conseguirá un beneficio
mayor incluso que con las imágenes.
50 técnicas WPO para WordPress
Álvaro Fontela
37
Al implementar lazy load en vídeos de YouTube o iframes que cargan cuadros sociales,
se evita la carga de ciertos scripts JavaScript y archivos CSS que consumen recursos en
el navegador de los visitantes.
El lazy load sobre este tipo de elementos puede definirse como una especie de carga
asíncrona específica.
Esta técnica de optimización puede implementarse para iframes y vídeos a través de
plugins de cache como WP Rocket y de plugins específicos como Lazy Load.
https://raiola.link/enlace19
50 técnicas WPO para WordPress
Álvaro Fontela
38
20.RESOURCE HINTS
(precarga)
Los resource hints pueden considerarse como una técnica WPO bastante reciente, pero
que empieza a ganar peso debido a las mejoras de HTTP/2.
Se trata de una serie de acciones que sirven para agilizar la carga de una web a través
de la precarga de recursos.
Preconnect: Se fuerza al navegador a preconectarse con el hostname. Se
superpone al DNS Prefetch.
DNS Prefetch: Se fuerza al navegador a realizar la petición DNS antes de que se
necesite.
Prerender: Se fuerza al navegador a pre-renderizar la página que le indiquemos
antes de que el visitante la pida.
Preload: Se fuerza al navegador web a precargar un recurso como una imagen,
un JavaScript o un CSS antes de que el navegador del visitante lo pida.
Prefetch: Se fuerza al navegador a que cargue ciertos recursos y elementos
cuando se termine la carga de la web.
El objetivo no es aplicar todas las acciones al mismo tiempo, sino ir combinándolas
para conseguir optimizar al máximo el tiempo de carga de elementos en el navegador
del visitante y minimizar así los tiempos muertos.
Los resource hints pueden obtener una mejoría muy notable en la carga de peticiones a
servidores externos.
Pueden implementarse mediante etiquetas en el código del header, aunque lo ideal es
hacerlo con un plugin como PreParty Resource Hints.
https://raiola.link/enlace20
50 técnicas WPO para WordPress
Álvaro Fontela
39
21.CONFIGURAR UN SERVICIO CDN
Los servicios CDN son cruciales para garantizar una buena velocidad de carga desde
cualquier punto geográfico del planeta.
Lo que hace un servicio CDN es servir los archivos estáticos (imágenes, JavaScript, CSS,
PDF, etc.) desde servidores que se encuentran físicamente más cerca del visitante.
Como resultado, se reducen las latencias y se mejora la velocidad de respuesta y de
descarga.
Hace unos años, los servicios CDN solo se recomendaban para webs grandes como
YouTube, Facebook, etc. Sin embargo, actualmente es recomendable que todas las webs
que tengan un porcentaje de tráfico “lejano” cuenten con esta ayuda adicional. Por
ejemplo, una web española alojada en España con una cantidad importante de tráfico
originario de América Latina.
50 técnicas WPO para WordPress
Álvaro Fontela
40
Existen cientos de servicios CDN, pero algunos de los más eficientes son CloudFlare,
Amazon CloudFront, KeyCDN o CDN77.
Para implementar un CDN en WordPress se pueden utilizar distintos procedimientos y
plugins. WP Rocket, Perfmatters o CDN Enabler son tres complementos que permiten
esta opción.
https://raiola.link/enlace21
50 técnicas WPO para WordPress
Álvaro Fontela
41
22.DESACTIVAR EMOJIS Y DASHICONS
Es importante tener en cuenta que cualquier elemento que se cargue en una web va a
generar un impacto sobre su velocidad.
Cuando se cargan emojis o dashicons, aunque resulten curiosos o llamativos a los
visitantes, lo cierto es que se generan peticiones adicionales.
Existe un caso muy frecuente: cuando no se utilizan ni los dashicons ni emojis, pero aun
así se cargan en cada visita.
50 técnicas WPO para WordPress
Álvaro Fontela
42
Las peticiones generadas por la carga de estos iconos no provocan un gran problema de
rendimiento, pero todo suma.
En caso de que ni los emojis ni los dashicons se estén utilizando realmente en la web, lo
mejor es desactivar ambas peticiones con un tweak o a través de un plugin.
https://raiola.link/enlace22
50 técnicas WPO para WordPress
Álvaro Fontela
43
23.OPTIMIZAR LA CARGA DE GRAVATAR
Desde el nacimiento del concepto de la web 2.0 y de los blogs, Gravatar se ha ganado el
puesto del servicio centralizado de avatares más implementado.
WordPress, de forma nativa, permite cargar los avatares de la gente que comenta en un
post directamente desde Gravatar.
Lo que hace WordPress, para cargar el avatar correspondiente desde los servidores de
Gravatar, es utilizar el email que el visitante utiliza para dejar un comentario en la web.
Aunque las imágenes de avatar cargadas desde Gravatar son pequeñas y tienen un peso
relativamente reducido, cuando una página reúne muchos comentarios el resultado es
la carga de numerosas imágenes pequeñas. Esto implica realizar múltiples peticiones a
los servidores de Gravatar.
Un buen método para optimizar la carga de Gravatar pasa por cachear las imágenes de
los avatares desde local, es decir, en el propio servidor.
Podemos cachear los avatares utilizando plugins como Optimum Gravatar Cache o FV
Gravatar Cache, ambos gratuitos y disponibles en el repositorio oficial de plugins de
WordPress. También plugins como LiteSpeed Cache nos permiten optimizar la carga de
Gravatar.
https://raiola.link/enlace23
50 técnicas WPO para WordPress
Álvaro Fontela
44
24.CONTROLAR EL API HEARTBEAT
El API Heartbeat de WordPress es una funcionalidad muy importante que hace posible
que funcionen la mayoría de características dinámicas del CMS.
El API Heartbeat logra que el código AJAX se comunique con el núcleo de WordPress
para dar vida a funcionalidades tan importantes como, por ejemplo, los carritos de
WooCommerce o el envío de formularios con condicionales de Gravity Forms.
El funcionamiento del API Heartbeat de WordPress es muy simple: se envía un “pulso”
cada cierto tiempo (de forma nativa, cada 15 segundos) entre el navegador del visitante
y el servidor con el fin de sincronizarse.
Este pulso tiene un impacto sobre la velocidad de carga de la web. No obstante, es posible reducir dicho impacto simplemente aumentando el tiempo que pasa entre pulsos de
15 segundos hasta 120 segundos.
50 técnicas WPO para WordPress
Álvaro Fontela
45
No es recomendable desactivar por completo el API Heartbeat, ya que se perderán
funcionalidades vitales de WordPress.
El API Heartbeat suele funcionar a través del archivo admin-ajax.php de WordPress o, en
WooCommerce, a traves de la query wc-ajax=get_refreshed_fragments.
Existen plugins para modificar el funcionamiento del API Heartbeat, como Heartbeat
Control, Perfmatters o WP Rocket. Además, también se puede hacer de forma manual
modificando el functions.php.
https://raiola.link/enlace24
50 técnicas WPO para WordPress
Álvaro Fontela
46
25.DESACTIVAR CART FRAGMENTS EN
WOOCOMMERCE
WooCommerce es un plugin que sirve para convertir una instalación de WordPress en
una solución ecommerce bastante más compleja que el CMS original.
WooCommerce utiliza el API Heartbeat para gestionar las peticiones dinámicas en AJAX
y mejorar la experiencia para los compradores y visitantes de la tienda.
La función cart fragments sirve para gestionar todas las partes dinámicas del carrito:
añadir, eliminar o modificar productos sin necesidad de recargar la página.
De forma nativa, siempre que WooCommerce esté activado en WordPress se cargará la
funcionalidad cart fragments. Como resultado, se producirá un consumo de recursos
bastante elevado tanto en el servidor como en el navegador del visitante.
Lo más recomendable es desactivar la funcionalidad cart fragments siempre que no se
necesite el carrito de la tienda online.
Por ejemplo, en una tienda online WooCommerce con blog se puede desactivar la
funcionalidad cart fragments en todo el blog, ya que no será necesario que se cargue el
carrito de forma dinámica.
También se puede desactivar esta funcionalidad allí donde no resulte necesaria a través
de plugins como WP Rocket o Perfmatters, así como de forma manual con un tweak en
el functions.php.
https://raiola.link/enlace25
50 técnicas WPO para WordPress
Álvaro Fontela
47
26.OPTIMIZAR LOS COMENTARIOS
Los comentarios de WordPress son una de las partes más importantes de la web 2.0, ya
que permiten a los visitantes interactuar con el autor del contenido.
Cuando en una publicación hay muchos comentarios, la carga de todos los elementos
que los forman puede suponer un problema para el rendimiento de la web. El motivo es
que aumentarán de forma exponencial los elementos DOM y las peticiones necesarias
para cargar el sitio.
Una de las optimizaciones que se pueden realizar es la carga local de Gravatar, como se
explicaba en páginas anteriores. No obstante, eso no evita que se tenga que cargar todo
el contenido.
Además, si la página no está cacheada el problema será aún mayor, ya que habrá que
realizar todas las peticiones correspondientes a la base de datos MySQL de WordPress.
Existen varias formas de optimizar la carga de los comentarios en WordPress. Una de
ellas consiste en aplicar lazy load a los comentarios.
Al aplicar esta técnica de optimización, no se cargarán todos los comentarios de golpe
al abrir la página, sino que se cargarán cuando el usuario vaya navegando y haciendo
scroll.
Otro método para optimizar la carga de los comentarios pasa por paginarlos. De este
modo, también se evita que se carguen todos de golpe nada más llegar a la página.
Se puede configurar lazy load para los comentarios nativos de WordPress a través Lazy
Load for Comments. Si lo que se desea es paginar los comentarios, Show All Comments
permite hacerlo fácilmente.
https://raiola.link/enlace26
50 técnicas WPO para WordPress
Álvaro Fontela
48
27.DESACTIVAR OEMBED Y EMBEDS
Desde hace tiempo, WordPress incluye una funcionalidad que sirve para incrustar
contenido en las páginas fácilmente, simplemente pegando el enlace.
Evidentemente, para que esto funcione el enlace debe vincular un servicio compatible
con oEmbed. Por supuesto, la mayoría de los servicios online más conocidos (como
YouTube, Vimeo, ScriDB, etc.) cumplen esta condición.
El problema es que esta compatibilidad con los incrustados fáciles oEmbed, incluso si
nunca la utilizamos, provoca una petición más a un archivo JavaScript en toda la instalación de WordPress.
Pero eso no es todo. Resulta que una instalación de WordPress también puede funcionar
como servicio incrustable, permitiendo así incrustar un post de un WordPress en otro a
través de oEmbed.
Los oEmbed pueden desactivarse fácilmente mediante un filtro en el functions.php del
theme activo, así como mediante plugins de tweaking como Perfmatters, Asset CleanUp
Pro o Disable Embeds.
Además, esto no implica que se pierda la posibilidad de incrustar elementos como los
reproductores de YouTube, ya que siempre se pueden añadir de forma manual (y mucho
más personalizada) con el código proporcionado por el servicio.
https://raiola.link/enlace27
50 técnicas WPO para WordPress
Álvaro Fontela
49
28.DESACTIVAR EL WP-CRON.PHP
En WordPress, las tareas programadas se ejecutan a través de un cron virtual.
Este cron virtual opera con el archivo wp-cron.php y se ejecuta con cada visita no
cacheada, comprueba si hay tareas programadas y (en caso afirmativo) las ejecuta.
Con el wp-cron.php se ejecutan tareas simples, como la comprobación de
actualizaciones del núcleo de WordPress, pero también otras más avanzadas registradas
en el cron por los plugins.
Esta forma de funcionar no es eficiente, pero es la única posible para un cron virtual que
no cuente con ninguna configuración realizada por el usuario al instalar el CMS.
Afortunadamente, WordPress cuenta con un procedimiento que permite desactivar el
wp-cron.php y confiar la ejecución de tareas programadas al cron de Linux.
Al hacer esto. se reduce el consumo de recursos PHP en el servidor web porque el
wp-cron.php se ejecuta solo cada ciertos minutos, en lugar de con cada visita.
El primer paso será desactivar la ejecución continua del wp-cron.php en el wp-config.
php. A continuación, habrá que activar la ejecución periódica del cron de Linux en el
panel de control del hosting.
Si se desea comprobar el correcto funcionamiento del wp-cron.php, existen plugins
gratuitos como Advanced Cron Manager o WP Control.
https://raiola.link/enlace28
50 técnicas WPO para WordPress
Álvaro Fontela
50
29.DESACTIVAR PINGBACKS Y TRACKBACKS
Existen dos funcionalidades relacionadas que vienen integradas en el núcleo de
WordPress desde hace bastante tiempo: los pingbacks y los trackbacks.
Con los pingbacks se notifica a una instalación de WordPress de que otra ha
mencionado uno de sus contenidos. Se trata de un proceso totalmente automático y
transparente.
Sin embargo, los trackbacks son diferentes. Son manuales y deben ser creados por el
autor del contenido en un comentario en el WordPress al que desea notificar.
Tanto los pingbacks como los trackbacks (sobre todo los pingbacks) consumen recursos
de ejecución, aunque sean mínimos. Su impacto sobre el rendimiento es todavía mayor
cuando entran en juego los self-pingbacks, que tienen lugar cuando se enlazan
contenidos de forma interna, es decir, de un lugar a otro de un mismo sitio web.
Además, en la mayoría de los casos tanto los pingbacks como los trackbacks son
utilizados con finalidades relacionadas con el SPAM o los ataques.
En WordPress resulta relativamente fácil desactivar los pingbacks y los trackbacks a
través de la configuración del sistema.
50 técnicas WPO para WordPress
Álvaro Fontela
51
Tan solo hay que desactivar la opción “Permitir avisos de enlaces de otros blogs
(pingbacks y trackbacks) en las nuevas entradas”.
https://raiola.link/enlace29
50 técnicas WPO para WordPress
Álvaro Fontela
52
30.LIMPIAR EL HEADER DE WORDPRESS
En la cabecera de cada página cargada con WordPress se insertan unos enlaces que
proporcionan compatibilidad con servicios obsoletos o que apenas se utilizan.
Algunos de los scripts cargados en la cabecera que se pueden eliminar son:
RSD Link
Compatibilidad con emojis
Enlace corto de wp.com
Enlaces múltiples a los feeds RSS
Enlace WLW
Etiqueta con la versión de WordPress
Carga de bloques de Gutenberg
Algunas de estas funcionalidades añaden scripts adicionales a la carga, mientras que
otras insertan enlaces que no sirven para nada. Al eliminarlas, el objetivo es limpiar el
código y agilizar la carga.
50 técnicas WPO para WordPress
Álvaro Fontela
53
Se puede limpiar la cabecera manualmente con códigos independientes (un tweak para
cada cosa) en el functions.php o utilizando plugins de tweaking como Perfmatters o
Machete.
https://raiola.link/enlace30
50 técnicas WPO para WordPress
Álvaro Fontela
54
31.DESACTIVAR JQUERY MIGRATE
JavaScript es el lenguaje client-side con la mayor cuota de mercado en Internet,
mientras que jQuery es la librería JavaScript más utilizada del mundo con una
diferencia aplastante.
El uso de jQuery está muy extendido y, por esta razón, existe bastante segmentación de
versiones.
Para mantener la compatibilidad con versiones antiguas de jQuery al mismo tiempo que
se usan versiones nuevas de esta librería, existe jQuery Migrate. Se trata de una librería
de transición que se carga siempre en cualquier instalación WordPress.
Si un WordPress está al día y utiliza componentes (theme y plugins) que han sido
actualizados recientemente con librerías actuales, no hará falta en absoluto jQuery
Migrate, que solo servirá para consumir recursos al cargar una petición más.
Algunos plugins de cache, como WP Rocket o LiteSpeed Cache, dan la opción de
eliminar la carga de jQuery Migrate. Además, también podemos hacerlo de forma
manual a través de un código en el functions.php.
https://raiola.link/enlace31
50 técnicas WPO para WordPress
Álvaro Fontela
55
32.DEFINIR EL WP_MEMORY_LIMIT
WordPress es un CMS desarrollado en PHP con base de datos MySQL. Como cualquier
aplicación PHP, ejecuta procesos en el servidor web mediante el intérprete PHP.
Cada acción PHP ejecutada en el servidor tiene un límite, lo que puede resultar
restrictivo en el caso de procesos complejos.
En el caso de WordPress, el límite viene dado por dos valores principales.
En primer lugar, el límite de memoria PHP que puede utilizar el intérprete PHP para
cada proceso y que se configura en el servidor.
En segundo lugar, el límite de memoria PHP que pueden utilizar el front-end y el
back-end y que WordPress incluye de forma nativa.
Con sus opciones predeterminadas, WordPress solo puede utilizar 40MB de memoria
RAM por proceso. Esto, en algunos casos con plugins y themes muy complejos, puede
llegar a quedarse corto.
Por ejemplo, las tiendas online WooCommerce suelen verse excesivamente limitadas
con tan solo 40MB de RAM, lo que provoca problemas de rendimiento, errores y
ralentización en mayor o menor medida.
Una vez se modifica el límite en el servidor, el cambio en Wordpress es bastante simple.
Tan solo hay que añadir un nuevo parámetro al wp-config.php de WordPress para
indicarle cuál es la RAM máxima que se puede utilizar.
Es recomendable que coincida con el valor configurado como límite en la configuración
de PHP del servidor.
https://raiola.link/enlace32
50 técnicas WPO para WordPress
Álvaro Fontela
56
33.CAMBIAR LAS TABLAS A INNODB
WordPress guarda los datos y parte de su configuración en la base de datos MySQL o
MariaDB.
Dentro de la base de datos de WordPress constan la información y los contenidos del
sitio web organizados en tablas.
Estas tablas tienen una estructura de campos para guardar la información.
En resumen, existen dos motores de almacenamiento en base de datos que se suelen
utilizar en WordPress: MyISAM e InnoDB.
Entre MyISAM e InnoDB, a nivel teórico, existen diferencias de capacidades y
operaciones realizables. Sin embargo, a nivel práctico, en instalaciones de WordPress
muy saturadas se percibe un mejor rendimiento con InnoDB.
Por esta razón, puede decirse que en WordPress es más recomendable InnoDB que
MyISAM. Ahora bien, esto no significa que InnoDB sea siempre la mejor opción, ya que
MyISAM tiene también ofrece ventajas comparativas.
Actualmente, la mayoría de instalaciones de WordPress se suelen instalar ya con todas
las tablas en InnoDB, si bien hasta hace relativamente poco tiempo algunas tablas aún
se instalaban con MyISAM.
Para cambiar las tablas de MyISAM a InnoDB, se puede hacer a través de phpMyAdmin.
Se trata de un proceso crítico, por lo que resulta recomendable guardar antes una
copia de seguridad. De todas maneras, en instalaciones de WordPress no se suele
romper nada en este tipo de proceso.
https://raiola.link/enlace33
50 técnicas WPO para WordPress
Álvaro Fontela
57
34.LIMPIAR LA DB DE WORDPRESS
Como se ha mencionado en páginas anteriores, en la base de datos de WordPress se
guarda toda la información relativa al contenido del sitio web, así como parte de la
configuración.
No obstante, el contenido y parte de la configuración no son lo único que se almacena
en la base de datos. También se guardan datos temporales, datos cacheados y mucha
información “meta” que ayuda con la coherencia de datos en el CMS.
Al almacenar diferentes tipos de contenidos de distintos orígenes (plugins, usuario,
core, etc.) es normal que la base de datos se vaya llenando de basura innecesaria.
Uno de los principales generadores de basura son los plugins que se instalan en
WordPress y que, al desinstalarlos, dejan rastros en la base de datos que no sirven para
nada.
Por esta razón, es recomendable probar los plugins siempre en una instalación de
pruebas y no en la web en producción. De este modo, se mantiene la base de datos de la
instalación limpia y en buen estado.
Las opciones antiguas de los plugins desinstalados no son la única basura. También
están los transients (que son datos que sirven de cache), los registros de
funcionamiento de algunos plugins y las copias o borradores generados por el usuario y
autoguardados por el editor.
Por todo esto, es importante ejecutar limpiezas de la base de datos periódicamente
para así simplificarla y reducir su tamaño.
50 técnicas WPO para WordPress
Álvaro Fontela
58
Un exceso de peso de algunos MB en la base de datos quizá no resulte perceptible, pero
un exceso de varios GB sí se notará.
Existen muchos plugins específicos para limpiar la base de datos de WordPress. Otros
complementos de cache, como WP Rocket o LiteSpeed Cache, también incluyen
herramientas para realizar esta tarea.
https://raiola.link/enlace34
50 técnicas WPO para WordPress
Álvaro Fontela
59
35.PARÁMETROS “AUTOLOAD” EN LA DB
Es importante mantener la base de datos de WordPress limpia con el fin de reducir al
máximo el tamaño y agilizar su carga. También hay que tener cuidado con lo que se
carga a través del parámetro “autoload”.
Hay datos guardados en la tabla wp_options de la base de datos de WordPress que son
opciones de configuración que tienen que cargarse cada vez que WordPress genera una
página para enviársela al visitante (sin cache). Estos datos llevan el parámetro
“autoload” y se cargan mediante la función wp_load_alloptions().
Cuantos más campos lleven el parámetro “autoload”, más datos tendrá que cargar la
función wp_load_alloptions() y, por lo tanto, mayor será el impacto sobre el
rendimiento.
Hay muchos plugins que, al desinstalarse, dejan atrás campos que contienen opciones
de configuración con el parámetro “autoload”. Estos datos se cargan una y otra vez
junto con el resto de configuraciones, aunque no sirvan para nada.
Por esta razón, es muy importante limpiar la base de datos y también revisar cada cierto
tiempo cuánto pesa la consulta realizada por la función wp_load_alloptions().
Se podrá saber lo que se carga con este parámetro observando la tabla wp_options con
phpMyAdmin.
Para ver cómo está funcionando la función wp_load_alloptions() puede utilizarse el
plugin Query Monitor para WordPress.
https://raiola.link/enlace35
50 técnicas WPO para WordPress
Álvaro Fontela
60
36.DOMAIN SHARDING
(carga paralela)
Aunque el Domain Sharding o carga paralela es una técnica WPO que ha perdido cierto
sentido con la aparición de HTTP/2, en casos muy extremos puede ser útil, sobre todo si
la combinamos con cookie-less domain.
No debemos confundir el Domain Sharding o carga paralela con la implementación de
un CDN. Aunque normalmente para implementar un CDN se aplica algo similar al
Domain Sharding, el objetivo no es exactamente el mismo. Lo único que tienen en
común es que se usan uno o varios subdominios.
El objetivo es enviar los archivos de forma paralela al navegador web del visitante en
lugar de hacerlo de forma secuencial. De esta forma, se agiliza la carga en sitios web con
muchas peticiones.
50 técnicas WPO para WordPress
Álvaro Fontela
61
Para lograrlo, se configura WordPress para cargar desde esos subdominios los archivos
estáticos como imágenes, JavaScript y CSS.
La teoría podría indicar que, cuantos más subdominios tengamos al paralelizar las cargas, más rendimiento se va a conseguir. Sin embargo, esto no es realmente así.
Lo recomendable al configurar Domain Sharding es tener entre 2 y 5 subdominios
adicionales a través de los que cargar contenido.
Cualquier plugin que permita configurar un CDN dará también la opción de configurar
Domain Sharding. Por ejemplo, WP Rocket o LiteSpeed Cache permiten configurar la
carga paralela, pero también CDN Enabler (aunque solo un único subdominio).
https://raiola.link/enlace36
50 técnicas WPO para WordPress
Álvaro Fontela
62
37.SUBDOMINIO COOKIE-LESS
Una de las ventajas de configurar Domain Sharding o carga paralela en un sitio web es
que, normalmente, van a ser subdominios sin cookies.
Cuando Google PageSpeed o GTMetrix muestra “Serve Static Content From a Cookieless
Domain” se refiere precisamente a esta técnica WPO.
Aunque con la implementación de HTTP/2 no es tan necesario como antes servir los
contenidos estáticos a través de un subdominio sin cookies, sigue siendo una optimización fácil de implementar.
En sitios web con muchas cookies, se ahorran recursos en la carga de la web en el
navegador del visitante al no tener que interpretar las cookies.
Lo que se suele hacer es configurar Domain Sharding a través de varios subdominios con
un plugin que permita cargar los JS, CSS e imágenes desde ahí.
50 técnicas WPO para WordPress
Álvaro Fontela
63
Cuando los subdominios están funcionando y apuntan correctamente al dominio
principal, hay que definir en el wp-config.php de WordPress cuál es el dominio libre de
cookies.
Como se ha mencionado antes, esta técnica actualmente no aporta una mejora muy
sustancial, pero tampoco está obsoleta del todo.
https://raiola.link/enlace37
50 técnicas WPO para WordPress
Álvaro Fontela
64
38.REDUCIR LAS PETICIONES EXTERNAS
Las peticiones externas son uno de los grandes cuellos de botella que existen en WPO.
El problema es que las peticiones externas se cargan desde servidores de terceros sobre
los que el webmaster no tiene capacidad de decisión o de configuración.
Al no tener ningún control, aunque optimice al máximo su sitio web, si los scripts y
archivos cargados mediante peticiones externas tardan en cargar, se ralentizará toda la
web.
Cuantas más peticiones externas se realicen durante la carga de una página, más difícil
será tener una buena velocidad de carga y una buena puntuación en Google PageSpeed
o Google LightHouse.
Se trata de un problema común a muchos servicios de Internet de uso generalizado:
Google Adsense
Botones y cajas sociales de Facebook o Twitter
Códigos de tracking de diferentes servicios
En muy resumidas cuentas, todo servicio SaaS externo que se integre en una web va a
provocar que se deban servir peticiones externas.
Para reducir las peticiones externas no existe ningún método “mágico”. Simplemente
habrá que valorar si realmente se necesitan de verdad todos los servicios integrados en
el sitio web.
https://raiola.link/enlace38
50 técnicas WPO para WordPress
Álvaro Fontela
65
39.CARGAR ANALÍTICA Y PÍXELES DESDE
LOCAL
Ya se ha comentado que uno de los problemas habituales al tratar de optimizar un sitio
web es la carga desde servicios externos.
En webs corporativas o en ecommerce es muy común encontrar múltiples scripts o
píxeles de conversión que sirven para medir y ejecutar acciones de marketing digital.
En la mayoría de los casos, estos scripts son externos y el webmaster no puede
hacer nada para optimizar sus peticiones. Por ejemplo, el JavaScript que carga Google
Analytics provoca un error de TTL en browser cache en Google PageSpeed.
Existe la posibilidad de cargar algunos scripts y píxeles de conversión de servicios
externos desde local:
Hay plugins y métodos para guardar una copia de Google Analytics en el propio
servidor o hosting y servirla a tus visitantes.
Otros plugins pueden guardar el píxel de conversión de Facebook en local y
servirlo desde ahí.
El problema de esta técnica es que puede haber problemas si el proveedor actualiza los
scripts mientras la copia está guardada en local, ya que puede provocarse una
incoherencia de datos o problemas de medición.
El plugin WP Rocket para WordPress es uno de los pocos que permite hacer esto tanto
con Google Analytics como con el píxel de Facebook Ads.
Existen otras alternativas como, por ejemplo, el plugin CAOS.
https://raiola.link/enlace39
50 técnicas WPO para WordPress
Álvaro Fontela
66
40.EVITAR LOS CONTADORES DE DATOS
Los contadores de datos pueden ser un arma de doble filo.
Suponiendo que un contador de datos obtiene datos de algún sitio y no simplemente
por “postureo”, se consumen recursos en la obtención y modificación de esos datos.
Algunos ejemplos de contadores de datos que se leen y se modifican constantemente:
Contadores de interacciones sociales en Twitter y Facebook que leen datos de
servicios externos.
Contadores de votos insertados en los posts o contenidos, que están
constantemente obteniendo y modificando datos en la DB.
Contadores de vistas de un contenido, que con cada visita leen y modifican los
datos.
Contadores de visitas en el front-end de la web.
Todos estos tipos de contadores dificultan el cache de página y pueden provocar dos
reacciones: pueden fallar al cachearlos o provocar que directamente no se use cache en
las páginas que tengan este tipo de contadores.
No existe ningún método “mágico” para eliminar los contadores. Únicamente habrá que
valorar si son realmente necesarios o no.
En caso de no necesitarlos o creer que pueden dar más problemas de los que resuelven,
simplemente hay que eliminar esta funcionalidad del sitio web.
Lo anterior, por supuesto, no atañe a los contadores de “postureo” se pueden insertar
con maquetadores como Elementor o WPBackery.
https://raiola.link/enlace40
50 técnicas WPO para WordPress
Álvaro Fontela
67
41.COMPRESIÓN GZIP
Gran parte de los datos que se envían del servidor web al navegador del visitante
durante la carga de un sitio web son archivos de base texto.
Si algo tienen los archivos de base texto es que pueden comprimirse fácilmente con
excelentes tasas de éxito.
También hay que tener en cuenta que existen formatos y algoritmos de compresión que
comprimen bastante los archivos de base texto y que los descomprimen casi al instante
y con un consumo mínimo de recursos.
Todo ello hace que actualmente sea obligatorio configurar el servidor web para que
comprima los datos antes de enviarlos.
El formato más común y soportado por todos los servidores web y navegadores es GZIP.
Un ejemplo real: Netflix consiguió ahorrar un 43% de ancho de banda en su cliente web
simplemente activando GZIP.
Todo el proceso de compresión y descompresión de contenido resulta totalmente
transparente para el usuario y no hay ningún tipo de retraso en la carga.
50 técnicas WPO para WordPress
Álvaro Fontela
68
Cuando se aplica compresión GZIP a todos los archivos de base texto de un sitio web, se
pueden conseguir tasas de compresión tan buenas como las de la imagen anterior.
La compresión GZIP se activa desde el servidor web. En el caso de Apache, puede
hacerse desde el .htaccess. En el caso de Nginx o LiteSpeed, se activa desde la
configuración del servidor.
https://raiola.link/enlace41
50 técnicas WPO para WordPress
Álvaro Fontela
69
42.COMPRESIÓN BROTLI
Brotli es un nuevo formato de compresión que mejora los resultados obtenidos con GZIP
en la compresión de recursos web, por lo que ha tenido una gran acogida.
Se han realizado varios estudios y, en muchos casos, se han observado mejoras de hasta
el 40% en la latencia o retraso. Brotli quizás sea algo más lento al comprimir en el
servidor, pero es más rápido al descomprimir en el navegador visitante.
Sin embargo, aún hay muchos servidores web que no son compatibles. Como resultado, actualmente necesitas un servidor web con una versión muy actualizada para poder
utilizar Brotli.
50 técnicas WPO para WordPress
Álvaro Fontela
70
LiteSpeed es compatible con Brotli casi desde el principio y CloudFlare en su proxy
inverso también ha añadido compatibilidad hace tiempo.
Muchos CDN tradicionales como KeyCDN o CDN77 también son compatibles.
https://raiola.link/enlace42
50 técnicas WPO para WordPress
Álvaro Fontela
71
43.ACTUALIZAR LA VERSIÓN DE PHP
La aparición de PHP 7.0 ha provocado que la actualización de la versión del intérprete
PHP en el servidor sea una obligación a nivel rendimiento, más que a nivel desarrollo.
La mejora de rendimiento al pasar de la versión 5.6 a la versión 7.0 fue exponencial.
50 técnicas WPO para WordPress
Álvaro Fontela
72
Con PHP 7.0 no solo se mejoraron los tiempos de respuesta al procesar scripts PHP, sino
que también se redujo mucho el consumo de recursos al ejecutar PHP.
Han pasado ya unos años desde la aparicion de PHP 7.0. Por ello, también se ha podido
comprobar una mejora sustancial en el rendimiento (aunque no tan marcada) en PHP
7.3 y 7.4 en comparación con la versión 7.0.
Actualmente, las versiones 8.0 y sucesivas de PHP también han aportado una mejora de
velocidad, aunque no tan radical como fue el caso de PHP 7.0.
Actualmente, existen aplicaciones web muy complejas como las tiendas online
WooCommerce o instalaciones WordPress con BuddyPress o LearnDash, que se
benefician mucho del rendimiento que ofrecen las nuevas versiones de PHP.
La version PHP se configura en el servidor o hosting. La forma concreta dependerá del
panel de control y stack del servidor.
https://raiola.link/enlace43
50 técnicas WPO para WordPress
Álvaro Fontela
73
44.HTTP2 Y HTTP3
La versión HTTP/1.1 era el protocolo por los sitios web desde hacía mucho tiempo, hasta
que hace unos años apareció HTTP/2 con cambios importantes en el funcionamiento
que afectaban al rendimiento.
De cara al WPO, HTTP/2 supone ventajas importantes:
La multiplexación actual, de forma muy similar a una carga paralela, permite
atender las peticiones de forma paralela en lugar de en serie.
Con server push se pueden enviar recursos al navegador del visitante antes de
que interprete el HTML y sepa que los necesita.
La compresión de cabeceras limita la redundancia en el envío de información y
reduce considerablemente su tamaño porque se envían comprimidas.
Ahora aparece HTTP/3 con mejoras en el protocolo para servir contenidos de forma
rápida y eficiente.
Al fin y al cabo, HTTP/3 es HTTP/2 con QUIC, que es un protocolo de red basado en UDP
en lugar de TCP. Su objetivo es mejorar el rendimiento en las conexiones a aplicaciones
web. En ambos casos, las conexiones se realizan por HTTPS con SSL.
Para activar HTTP/2 o HTTP/3, hay que implementarlo en el servidor web y este debe ser
compatible. Por ejemplo, LiteSpeed es compatible tanto con HTTP/2 como con HTTP/3.
Servicios CDN como CloudFlare CDN o KeyCDN también lo son.
https://raiola.link/enlace44
50 técnicas WPO para WordPress
Álvaro Fontela
74
45.SERVIDOR WEB POTENTE
Uno de los problemas habituales al optimizar un sitio web es el servidor o hosting.
Junto con una versión antigua de PHP, una dificultad añadida es contar con un servidor
web Apache.
Apache no resulta eficiente ni rápido. De hecho, tanto Nginx como LiteSpeed son
muchísimo más veloces al servir peticiones.
Actualmente, utilizar Apache solo (sin un proxy inverso como Nginx o Varnish por
delante) es estar en clara desventaja al servir contenidos.
Apache es el servidor web más “compatible” con paneles y complementos,
además del .htaccess. Como contrapartida, es poco eficiente y lento.
Nginx resulta muchísimo más veloz y eficaz que Apache, pero no es compatible
con el .htaccess y es menos compatible con paneles.
LiteSpeed es de pago, más o menos igual de rápido que Nginx, pero es
compatible con el archivo .htaccess y tiene ventajas interesantes en lo que se refiere al
rendimiento.
Apache es el servidor web más utilizado del mundo, pero esto se debe a que fue el
primero y a su compatibilidad.
Para tener un sitio web rápido y eficiente es muy recomendable que la web se ejecute
sobre un Nginx o LiteSpeed con una versión reciente de PHP.
Si pagar LiteSpeed no es una opción, se pueden servir sitios web de forma eficaz
combinando Nginx como proxy inverso para Apache.
Apache consume hasta 10 veces más recursos y tarda 3 veces más en servir la misma
imagen que Nginx o LiteSpeed.
https://raiola.link/enlace45
50 técnicas WPO para WordPress
Álvaro Fontela
75
46.DNS GEODISTRIBUIDOS ANYCAST
La mayoría de proveedores de hosting ofrecen DNS para sus productos.
Salvo que exista un problema grave, en la carga de un sitio web no se consume mucho
tiempo en la resolución DNS. Sin embargo, si se desea afinar al máximo la carga y ya se
usa un CDN, el siguiente paso sería utilizar un DNS geodistribuido.
Lo que hace un DNS geodistribuido anycast es propagar los registros DNS por servidores
DNS sincronizados alrededor del mundo y contestar los dns lookup desde puntos
geográficos más cercanos al visitante. De este modo, al igual que con los CDN, se
reducen mucho los tiempos de respuesta y las latencias.
Además, no todos los DNS son igual de rápidos, ya que existen proveedores
especializados que son más rápidos que los demás.
Las de CloudFlare y las Route53 de Amazon AWS son las DNS geodistribuidas anycast
más rápidas que existen en Internet. Tanto CloudFlare como Amazon AWS gestionan las
DNS geodistribuidas anycast a través de la misma red de nodos de sus servicios CDN.
Hay que reiterar que la mejora, en muchos casos, puede ser de solo unos milisegundos.
Sin embargo, con este tipo de DNS no solo se gana velocidad, sino también
estabilidadad al servir tráfico desde la web a cualquier parte del planeta.
Cambiar las DNS resulta muy sencillo. Tan solo hay que cambiar los nameservers en el
panel del registrador del dominio y, a continuación, configurar los registros en el
servicio DNS.
https://raiola.link/enlace46
50 técnicas WPO para WordPress
Álvaro Fontela
76
47.ELEGIR UN THEME SIMPLE Y MOBILE
FIRST
Puede parecer obvio, pero actualmente se crean muchos sitios web con un
planteamiento inicial erróneo.
Debido al aumento considerable de la cuota de visitantes que utilizan navegadores
móviles para acceder a Internet, es importante desarrollar y diseñar los nuevos sitios
web utilizando mobile first.
El estándar mobile first consiste en diseñar o desarrollar primero para dispositivos
móviles (pantalla pequeña) y después “expandirlo” para ordenadores (pantalla grande).
El objetivo es construir interfaces web mucho más sencillas y así ofrecer una
experiencia de usuario óptima.
50 técnicas WPO para WordPress
Álvaro Fontela
77
Al crear una web con WordPress y un theme multipropósito, en el 90% de los casos se
renuncia al estándar mobile first.
En cambio, maquetadores visuales como Bricks Builder, Elementor Pro o Beaver
Builder permiten diseñar sitios web siguiendo este planteamiento
No hay que olvidar que desde 2019 el mobile first ha cobrado una importancia especial.
¿El motivo? Que Google anunció ese año que usaría GoogleBot en formato móvil para
rastrear todas las webs.
https://raiola.link/enlace47
50 técnicas WPO para WordPress
Álvaro Fontela
78
48.DETECTAR PROBLEMAS DE RENDIMIENTO
Muchos WordPress que están en activo tienen problemas de rendimiento PHP por sus
plugins y no lo saben.
Instalar plugins en WordPress es muy fácil. Sin embargo, siempre hay que ser consciente
de que cada plugin produce, en mayor o menor medida, un impacto sobre el
rendimiento de la web.
Un solo plugin puede provocar unos consumos tan altos en el hosting o servidor que
provoque la caída de toda la web por sobreuso de recursos.
Las razones por las que un plugin puede causar un problema de rendimiento pueden ser
varias, desde un wait en la ejecución de código hasta una consulta SQL demasiado larga
y compleja a la base de datos.
50 técnicas WPO para WordPress
Álvaro Fontela
79
No existen muchas herramientas para hacer profile de los plugins y ver cuántos recursos
consume una web al ejecutar PHP y en qué se los gasta. Query Monitor es un plugin para
WordPress que ofrece esta información de forma estructurada.
Otra opción es utilizar el plugin Code Profiler o, si tu hosting tiene X-Ray también puedes utilizarlo para detectar el consumo de CPU y RAM de los plugins.
Si un plugin consume demasiados recursos de CPU y memoria pero no es posible
prescindir de él o cambiarlo por otro, lo único que se puede hacer es mitigar la espera
de respuesta o wait cambiando a un servidor más potente o implementando un cache
de objetos como Memcached o Redis.
Es muy común que instalaciones con muchos plugins o muy complejas tengan consultas
muy largas que provocan retrasos y sobreuso de recursos.
https://raiola.link/enlace48
50 técnicas WPO para WordPress
Álvaro Fontela
80
49.DISPONER DE LOS RECURSOS
NECESARIOS
Para que un servidor web pueda servir páginas a los visitantes, debe tener recursos
disponibles para realizar la ejecución de PHP, las consultas a la DB y para que el
servidor web pueda enviar los contenidos solicitados.
Algo que puede parecer lógico pero que no se cumple en muchos sitios web es tener
“abundancia” de recursos para evitar problemas en situaciones extremas como picos de
tráfico y ataques.
El usuario principiante no suele ser consciente de que los planes de hosting, los
servidores VPS y los servidores dedicados tienen un límite de potencia de
procesamiento y de memoria RAM. Estos dos recursos son los principales para que el
servidor web funcione.
50 técnicas WPO para WordPress
Álvaro Fontela
81
Si los recursos se acaban o empiezan a ir justos, se darán errores y ralentizaciones
importantes en la carga de las webs. Además, en esa situación ninguna de las técnicas
WPO explicadas en este book servirán de nada.
Por este motivo, el servidor es lo primero que se debe revisar antes de empezar a
aplicar técnicas de optimización web.
Siempre es recomendable contar al menos con el triple de recursos de los que se
utilizan normalmente.
https://raiola.link/enlace49
50 técnicas WPO para WordPress
Álvaro Fontela
82
50.LÓGICA Y PLANIFICACIÓN REALISTA
La última y más importante técnica de optimización de todas: la lógica.
La lógica es la técnica WPO más eficaz, ya que en la mayoría de los sitios web se
mejorarían los tiempos de carga simplemente aplicando la lógica al hacer el desarrollo
o implementación.
Al fin y al cabo WordPress, en conjunto con sus plugins y theme, es una aplicación web
como cualquier otra.
Si se utiliza la lógica desde el principio, no se necesitarán ni la mitad de las técnicas
WPO explicadas en este ebook.
Hay que ser conscientes de que los milagros no existen. En la mayoría de los casos, para
mejorar significativamente la velocidad de carga y el consumo de recursos, será
necesario sacrificar elementos o funcionalidades del sitio web.
50 técnicas WPO para WordPress
Álvaro Fontela
83
Adictos al buen hosting
Email: [email protected]
Web: raiolanetworks.es