Este documento proporciona información sobre optimización web (WPO) y técnicas que un usuario de WordPress puede implementar fácilmente para mejorar el rendimiento de un sitio web. Explica conceptos como optimizaciones a nivel de servidor, compresión de imágenes y videos, uso de CDNs, configuración de caché y más. El objetivo es mejorar la velocidad de carga y la experiencia del usuario en la web.

1. Deja de ser un
Caracol Digital
(El WPO que un usuario mortal de
WP puede realizar fácilmente)

2. “
La Optimización Web es
el nuevo SEO
2
Expertos

3. “
La velocidad no es solo
una Característica, es la
Característica
3
Ingeniero Jefe Google

4. “
La web va como el culo
illo!
4
Emermedia

5. “
La velocidad es una
moneda con la que
pagamos las
funcionalidades de una
web
5
Gerardo.G.Asensio

6. ¿Qúe es WPO?
6
WPO Web Performance Optimization de una web
es el análisis y las técnicas de optimización.
En todos los niveles del sistema que compone una
web.
Con el objetivo de mejorar:
▪ Time To First Byte
▪ Tiempo de carga general
▪ Modo de carga
▪ Previsualización inicial
▪ Navegación web

7. Servidor y Red
Optimizaciones que afectan/se realizan en el servidor y mejoran el
intercambio de datos en la Red
7

8. ▪ Hardware
8
▪ Centros de datos
▪ Tipo de Servidores de archivos y BD
▪ Discos Duros SSD
▪ Procesadores y Capacidad de proceso
▪ Conexiones y Ancho de banda de datos
▪ Memoria RAM
▪ Servidores VIP (menos cuentas por host)
▪ CDN
HARDWARE A TENER EN CUENTA

9. ▪ Software
9
▪ Linux Windows
▪ Apache Nginx
▪ Versión de Php
▪ Tipo de Base de Datos
▪ Protocolos Https y Http2
▪ Tipo de DNS
▪ Compresión Gzip
▪ Nuevas Tecnologías
▪ Herramientas adicionales del servidor
SOFTWARE A TENER EN CUENTA

10. Medidas en
el Servidor
10
Técnicas que podemos aplicar desde el servidor.
Configuraciones y herramientas
del servidor
▪ Versión de Php
▪ Https / Http2
▪ Compresión Gzip
▪ Optimizar la Base de Datos
▪ Aumentar la memoria de WordPress
▪ CDN

11. Medidas en
el Servidor
● PHP 7.x
11
Utiliza la versión PHP 7 o superior, duplica la
velocidad respecto a las versiones anteriores de PHP
5.6
Utilizar la última versión de PHP
● https://ayudawp.com/cambiar-version-php-wordpress/
Recomendado
Facil
Inocuo

12. Medidas en
el Servidor
● Https
● Http 2
12
Http2 es el protocolo actualizado de comunicacion
de internet, mejora la eficacia de envío de los datos.
▪ Reduce el tiempo de espera y mejora la carga de
las peticiones.
▪ Envío y recepción de múltiples peticiones.
▪ Mejora el orden de carga y prioriza elementos.
▪ Deja abierta la conexión.
▪ Comprime las cabeceras HTTP.
Cambiar a Https / Http 2

13. Medidas en
el Servidor
● Https
● Http 2
13

14. Medidas en
el Servidor
● Https
● Http 2
14
Entre un 10% - 30% de mejora de velocidad
Requisito para utilizar http2 es tener https
Comprueba https://tools.keycdn.com/http2-test
Ojo con otras medidas o trucos de WPO cómo “Keep
alive” “compresión y tipo de carga de códigos”
Cambiar a Https / Http 2
● https://rafarjonilla.com/tutorial/certificado-ssl-gratis-de-lets-encrypt/
Recomendado
Técnico

15. Medidas en
el Servidor
● Gzip
15
Los datos se comprimen en el servidor antes de
enviarlos y se descomprimen en el navegador.
▪ .htaccess
▪ Opciones del servidor
▪ Algunos plugin de cache
Compresión Gzip
● https://sensacionweb.com/compresion-gzip-wordpress/
Recomendado
Facil
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

16. Medidas en
el Servidor
● Base de
datos
16
La base de datos con el paso del tiempo se llena de
elementos temporales u obsoletos que tenemos que
eliminar. Plugin WP-Optimize
▪ Revisiones de los post
▪ Borradores y papelera de post
▪ Comentarios no aprobados, papelera o spam
▪ Opciones transient
▪ Pingbacks y trackbacks
▪ Otros metadatos
▪ Optimizar la base de datos
Limpiar y Optimizar la BD
● https://sensacionweb.com/wp-optimize-lmipia-optimiza-la-base-
de-datos-wordpress/
Recomendado
Facil

17. Medidas en
el Servidor
● Base de
datos
17
Acceder a la BD desde phpMyAdmin y
borrar las tablas de los plugins
desinstalados.
Las Tablas suelen indicar el nombre del
Plugin.
Consejos:
•Si no sabes lo que tocas no lo hagas…
•Es mejor tener una BD un poco sucia que
crear un error catastrófico.
•Llama a un profesional.
Limpieza avanzada de Base de
datos
Técnico
Dificil

18. Medidas en
el Servidor
● Base de
datos
18
Reducir el número de revisiones de post
que se pueden generar.
Copias el código en el archivo de wp-
config.php
▪ Limita las revisiones a 3
define( 'WP_POST_REVISIONS', 3 );
▪ No generar revisiones
define( 'WP_POST_REVISIONS', false );
Ajustar el número de
revisiones
Técnico
Facil

19. Medidas en
el Servidor
● Aumentar
memoria
19
Aumentar la memoria de WP puede solucionar
errores y mejorar la velocidad de los procesos.
Puedes aumentar el límite de memoria modificando
este código en el archivo wp-config.php
define( 'WP_MAX_MEMORY_LIMIT', '256M' );
Memoria de WordPress
Técnico
Fácil
● https://www.youtube.com/watch?v=aE-Z1wP12og

20. Medidas en
el Servidor
● CDN
20
Servicio de Red de entrega de contenidos, es una red
de servidores, estratégicamente situados en distintas
partes del mundo que sirven nuestra web.
El contenido se distribuye desde el servidor más
cercano al usuario aumentando la velocidad.
CDN
● https://sensacionweb.com/cdn-gratuita-wordpress/
Técnico
Dificultad media

21. Medidas en
el Servidor
● CDN
21
Cloudflare
● https://sensacionweb.com/cdn-gratuita-wordpress/
Técnico
Dificultad media

22. Medidas en
el Servidor
● CDN
22
Beneficios WPO y de Seguridad
● https://sensacionweb.com/cdn-gratuita-wordpress/
Técnico
Dificultad media /
alta
OPTIMIZACIÓN
● Mejora de velocidad de carga
● Mejora del ancho de banda
● Reducción de peticiones
● Aumenta la cantidad de visitas que soporta nuestro host
● Comprensión de códigos
● Cache propia
SEGURIDAD
● Protección ataques DDoS
● Protección del hotlinking
● Protección frente a robots de análisis
● Protección de Spam
● Firewall (P)

23. Medidas en
el Servidor
Tipo de DNS
23
DNS Anycast
Técnico
Dificultad media /
alta
Un paquete enviado a una dirección Anycast es entregado a la
máquina más próxima o eficaz desde el punto de vista del
tiempo de latencia.
● Balanceo del servicio de resolución DNS.
● Las peticiones son redirigidas a los servidores disponibles
automáticamente.
● La latencia disminuye, y por tanto la velocidad de
respuesta aumenta.
Si tu proveedor de dominio te lo ofrece intenta utilizar la
característica IP Anycast para los dominios de tu web para
mejorar el tiempo de carga de las DNS.

24. Medidas en
el Servidor
Tipo de DNS
24
Representación DNS Anycast
Técnico
Dificultad media

25. Imagen y Medios
Optimizaciones para las imágenes, videos y otros
25

26. Medidas en
WordPress
Imagénes
26
Tamaño de Imágenes
Dificultad Baja
Ajusta el tamaño de las imágenes al tamaño en el que se van a
visualizar.
https://sensacionweb.com/optimizar-imagenes-web-wordpress/

27. Medidas en
WordPress
Imagénes
27
Formato de las imágenes
Dificultad Baja
Elegir correctamente el formato de la imagen afecta directamente
al peso del archivo de la imagen.
PNG
● Logos
● Capturas de pantalla
● Imágenes planas
● Imágenes con transparencias
JPG
● Fotografías
● Imágenes con muchos
detalles
● Gran calidad
GIF
● Imagenes en movimiento
● Cortos de videos
SVG
● Vectores Graficos
● Escalabilidad total

28. Medidas en
WordPress
Formato
Imagénes
futuro
28
Formato WebP
Dificultad Baja
Formato que comprime las imágenes JPG y PNG mucho más.
Hasta un +35% de compresión PNG
Hasta un +40% de compresión JPG sin pérdida (85% con
pérdida)
● No es un estándar
● No se puede usar en WordPress nativo
● No es compatible con muchos navegadores
https://ayudawp.com/usar-archivos-webp-wordpress-mejorar-los-
tiempos-carga/

29. Medidas en
WordPress
Carga de la
imagen
29
Carga de la imagen
Dificultad Baja
La carga normal de las imágenes empieza a cargar los pixeles
superiores de la imagen.
Usa la carga progresiva JPEG o entrelazada PNG para mejorar
la velocidad de carga de las imágenes.
Se crean varias capas de la misma imagen con diferente calidad.

30. Medidas en
WordPress
Compresión
de imágenes
30
Compresión de Imágenes
Dificultad Baja
Las imágenes se pueden comprimir para reducir el peso del
archivo, de esta forma cargarán antes en la web.
Comprimir reduce o elimina datos de la imagen y puede afectar a
la calidad.
http://optimizilla.com/es/ herramienta online puedes con
previsualización.
https://tinyjpg.com/ el compresor más utilizado.
https://es.wordpress.org/plugins/wp-smushit/ Plugin para
comprimir imágenes.
https://sensacionweb.com/tutorial-wp-smush/

31. Medidas en
WordPress
Calidad de
imágenes
31
Compresión y calidad
de Imágenes
Dificultad Baja
Una alta compresión puede reducir la
calidad de las imágenes.

32. Medidas en
WordPress
Miniaturas
32
Miniaturas de Imágenes de WP
Dificultad Baja
Las miniaturas o thumbnails son copias en distintos tamaños de
las imágenes que subimos a la biblioteca de WordPress.
https://sensacionweb.com/miniaturas-de-wordpress/

33. Medidas en
WordPress
Videos
33
Videos
Dificultad Baja
Los videos en la web también tienen que ser
optimizados de manera similar a las imágenes.
● Tamaño de los videos
● Formato MP4 WebM
● Comprime los videos
Herramienta https://clipchamp.com

34. Medidas en
WordPress
Lazy Load
34
Carga Lazy Load
Dificultad Baja
Carga perezosa es una técnica de optimización que hace que los
elementos no carguen hasta que el usuario no llega a ellos.
● Para imagenes
● Para Videos
● Para Otros elementos (iframes, widgets..)
Plugins:
● Lazy Load
● BJ Lazy Load
● Lazy Load for Videos
https://sensacionweb.com/lazy-load-wordpress/

35. Medidas en
WordPress
Plataformas
Externas
35
Alojar los archivos multimedia en
plataformas externas
Dificultad Baja
Cargar los archivos multimedia desde plataformas externas
reduce el peso de la web y ahorra recursos
Imagenes: Flickr, Printerest, Instagram, Imgur, Photobucket
Videos: YouTube, Vimeo
Audios: SoundCloud, Ivoox o Spreaker.

36. Sistema de Caché
Caches a diferentes niveles del sistema y caché de WordPress
36

37. Caché
37
Caché de WordPress
La caché es un sistema que copia temporalmente una serie de
datos para servirlos rápidamente sin tener que generarlos una y
otra vez para cada usuario.
Existen muchos tipos o niveles de caché.
● Cache de navegador
● Cache en WordPress
● Memcached
● Cache CDN
● Cache Proxy
● Cache balanceador servidor

38. 38
Niveles de Caché

39. Caché de
navegador
39
Caché de navegador
Tecnico / Dificultad
Media
Es generada por el navegador del usuario, podemos indicarle en
el .htaccess cuándo deben expirar los archivos de nuestra web.
# EJEMPLO de Expiración de caché
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
# Expiracion de cache

40. Plugins de
cache
40
Sistemas de Caché en WordPress
Tecnico / Dificultad
Media
Existen un montón de plugins de caché que generan o
administran varios tipos de caché en WordPress.
Plugins de cache web
● W3 Total Cache (Técnicas WPO adicionales, perfecto para
necesidades especiales, puede ser demasiado técnico)
● WP Super Cache (Sencillo, el más utilizado, solo cache)
● WP Rocket (+Técnicas WPO adicionales, el más sencillo de
utilizar, el mejor para usuarios no técnicos )
● SG Optimizer ( Para SiteGround, cache + memcached)
https://sensacionweb.com/como-configurar-wp-rocket-cache/
https://sensacionweb.com/tutorial-wp-super-cache/

41. Plugins de
cache
41
Otros Sistemas de Caché en
WordPress
Tecnico / Dificultad
Media
Plugins que cachean otros elementos de WordPress
● Autoptimize plugin de compresión de código que cachea
los archivos que minifica. Compatible con WP Rocket
● FV Gravatar Cache plugin que cachea las peticiones a
gravatar el sistema de perfiles de usuarios de automattic

42. WP Rocket
vs
W3 Total
Cache
Vs
Super Cache
42
Tutorial WP Rocket
https://sensacionweb.c
om/como-configurar-
wp-rocket-cache/
Tutorial WP Super
Cache
https://sensacionweb.c
om/tutorial-wp-super-
cache/

43. Compresión Code
Compresión de código y archivos CSS y JS
43

44. Comprimir
codigos
44
Comprimir y Combinar código HTML
CSS y JS
Tecnico / Dificultad
Media
Plugins con minificado de código.
● Autoptimize
● W3 Total Cache
● WP Rocket
https://sensacionweb.com/tutorial-autoptimize/
Comprimir archivos elimina los comentarios y espacios en blanco
de los códigos, normalmente es siempre recomendable.
Combinar archivos de código en uno solo puede reducir el número
de peticiones, pero puede tardar más en cargar un archivo grande
que varios archivos pequeños sobre todo si se usa HTTP/2

45. Comprimir
codigos
45
Comprimir y Combinar código HTML
CSS y JS
Tecnico / Dificultad
Media
Combinar los archivos disminuye las peticiones sobretodo en
plantillas multipropósito o instalaciones con muchos plugins
Sin minificación
Con minificación

46. Comprimir
codigos
46
Comprimir y Combinar código HTML
CSS y JS
Tecnico / Dificultad
Media
Esta técnica es de las que más errores produce.
Cuando Comprimas y Combines código comprueba:
● Los errores del navegador.
● Los elementos como sliders, efectos parallax, efectos css y js.
● El formulario de contacto.
También hay que comprobar la navegación entre páginas y el scroll.

47. Otros
Caches a diferentes niveles del sistema y caché de WordPress
47

48. Medidas en
WordPress
Fuentes
48
Google Fonts
Tecnico / Dificultad
Baja
Cada fuente que utilizamos en la web hace una petición a los
servidores de Google para cargarlas.
Utiliza 2 fuentes de Google con las variantes necesarias.
Unificarlas si es necesario.
● WP Rocket
● Autoptimize

49. Medidas en
WordPress
Comentarios
49
Zona de comentarios
Tecnico / Dificultad
Media
La zona de los comentarios de un Blog puede llegar a consumir
muchos recursos de tu web.
Cada comentario envía una petición a los servidores de Gravatar
Cachea esas peticiones con: FV Gravatar Cache
Cambia el sistema de comentarios: Disqus

50. Medidas en
WordPress
Precarga
DNS
50
Precarga de las DNS
Tecnico / Dificultad
Media
Puedes precargar las direcciones DNS en la cabecera HTML para
aumentar la velocidad de respuesta de algunos servicios.
● Google Analytics
● Google Fonts
● Herramientas externas que carguen siempre
Cuidado con sobrecargar la cabecera.

51. Medidas en
WordPress
Heartbeat
51
Heartbeat - Latido
Tecnico / Dificultad
Baja
Heartbeat controla el tiempo en el que el WordPress lanza o recoge
datos y afecta a la zona de administración.
En la edición de post se ejecuta cada 15 segundos.
En el panel de administración cada 60 segundos.
Esta información se administra a través del archivo admin-ajax.php
Plugins
https://wordpress.org/plugins/heartbeat-control/
Tutorial
https://www.siteground.es/tutoriales/wordpress/como-limitar-
heartbeat/

52. Medidas en
WordPress
Query
Strings
52
Query Strings de archivos
Tecnico / Dificultad
Media
La Query String Es la parte de una URL que contiene datos
Apenas afecta a la carga de la web pero mejora las estadísticas
Error “Remove query strings from static resources”
Ejemplo: Datos de la versión de un archivo

53. Desarrollo/Diseño
Cómo afectan los elementos, y tipos de diseño a la Web
53

54. Medidas en
WordPress
54
Funcionalidades
Elige las funcionalidades necesarias para el tipo de web que quieres
crear.
Tipo de Web
● ¿Landing Page?
● ¿Web corporativa?
● ¿Ecommerce?
● ¿Periodico Digital?
● ¿Foro?
Planificar
● ¿Qué elementos necesita mi web?
● ¿Puedo sustituir esos elementos?
● ¿De que elementos puedo prescindir?
● ¿Puedo externalizar esa funcionalidad?

55. Medidas en
WordPress
Desarrollo
Optimizado
55
Plugins y Alternativas
Plugins y alternativas
● Plugin Antispam o reglas de WordPress
● Plugin de redirecciones o htaccess
● Mailpoet o sistema de newsletter externo
● Plugin para traducir o poedit
● Plugin de Botones sociales
● Plugins de copias de seguridad
● Pasarelas de pago
● Plugin de formulario

56. Medidas en
WordPress
Diseño
Optimizado
56
Diseño Optimizado
Plugins y alternativas
● Plugin de Slider o Cabecera simple
● Plugin de Galerias o Instagram
● Transiciones de página CSS o JS ¿En Serio?
● Efectos de aparición de Imágenes y texto
● Efectos en botones
● Efectos parallax
● Diseño plano o diseño recargado
● Librería de Iconos o imágenes

57. Medidas en
WordPress
57
Barra lateral o Footer
La barra lateral es una zona que aparece en la mayoría de las
páginas de un Blog.
Recarga de elementos la barra lateral afecta a casi todo nuestro
contenido relevante.
Pon en ella solo los elementos justos y necesarios.
● Imagen de autor
● Redes sociales
● Botones de like y suscripción
● Enlaces de RSS
● Anuncios
● Mapas
● Formularios

58. 58
Si tienes dudas sobre esta presentación puedes
contactar o visitar mi web.
Visita o contacta:
▪ Sensacionweb.com
▪ @gerardogasensio
¡¡Gracias a Todos!!