Que es WPO?
WPO se refiere a web performance optimization y se refiere a la mejora de la velocidad con la que las paginas web se descargan y se muestran en el navegador web del usuario.
Es decir, cuanto mejor seo el WPO de una pagina web mas rapida cargara esta y mejor experiencia de usuario tendra de cara a los posibles clientes que visiten tu pagina web.
[1] – Herramientas de medición de WPO para WordPress
Para medir el wpo de una pagina web en wordpress existen 5 herramientas principales gratuitas:
GTmetrix https://gtmetrix.com/ . La mejor a la hora de medir el wpo de wordpress.
PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ . La herramienta oficial de google que te dara un monton de pequeñas correcciones. Especialmente buena para ver el renderizado de una pagina web.
Pingdom Tools https://tools.pingdom.com/ . Otra herramienta muy similar a GTMetrix pero algo mas visual.
Web Page Test https://www.webpagetest.org/ . La mejor herramienta de WPO para medir cualquier tipo de web desde diferentes dispositivos y velocidades.
Batch Speed https://batchspeed.com/ . Sirve para conocer el WPO de las principales URLs de una pagina web de forma automatica y por dispositivo.
[2] – Aprendiendo a interpretar análisis de velocidad de carga
Aspectos generalaes a tener en cuenta:
Puntuacion de las herramientas
Tiempo que tarda la URL en estar operativa (renderizada)
Tamaño de la URL
Peticiones realizadas al servidor por URL
TTFB
Aspectos secundarios a observar:
Uso de recurso o llamadas externas
Optimizacion de recursos de google (google tag manager, google analytics, adsense, fonts, etc.)
Uso de fuentes y sus variables
Uso de iconos de fontawesome
Recursos mencionados en la clase
GeneratePress https://es.wordpress.org/themes/generatepress/
Elementor https://elementor.com/
Genesis https://my.studiopress.com/themes/genesis/
Artículo de Borja hablando sobre las mejores plantillas WordPress para SEO https://borjaarandavaquero.com/mejores-plantillas-wordpress-seo/
[3] – Errores mortales a nivel de WPO en WordPress
Error N.1 Elegir ua mala plantilla
Utiliza siempre plantillas web optimizadas como generatepress, genesis, ocean wp, astra o divi.
Error N.2 Imagenes mal optimizadas
Utiliza siempre tamaños apropiados y no mas grandes de lo normal
Utiliza plantillas de calidad que muestren imagenes escaladas.
Si utilizas elementor señala que tamaño de imagen necesitas.
Las imagenes nunca deben pesar mas de 100kb. Herramienta online compressor.io
En la medida de lo posible intenta comprimir tu imagen antes de subir a wordpress. El proceso correcto sera compressor.io, photoshop (exportar, guardar para web – guardar como y jugar con la calidad), plugin wordpress.
Siempre utiliza plugin de compresion de imagenes en wordpress como wp smush (gratuito) o imagify (freemium)
Si puedes muestra en tu pagina web imagenes de formato webp.
Error N.3 Google Tag Manager
Muy util para gente sin conocimientos de programacion pero mal optimizado puede ser un autentico dolor de cabeza para tu pagina web y su velocidad de carga.
Solucion: Intenta desplegar las etiquetas justas por URL que sean estrictamente necesarias. Ni toda la URL ha de ser media ni toda URL sera importante.
Error N.4 Google Analytics Externo
Todo suma a la hora de reducir tiempos de carga y alojar el script de google analytics en tu pagina web de forma local reducira el impacto de GA en tu WPO.
Error N.5 Google Maps
Muy util para encontrar tu negocio en internet pero 0 practico en tiempos de carga. Google Maps tira su API y hace una peticion externa a Google.
Solucion: Sustituye el script de google analytics con una imagen y un enlace. Nunca utilices google maps en el footer de toda tu pagina.
Error N.6 Medir Demasiado
Todas las herramientas de medicion y de CRO generan u monto de javascript que relantiza la velocidad de carga de tu pagina web. Preguntate si todas son necesarios en todas las URL.
Error N.7 Utilizar iconos de fontawesome
Los iconos de fontawesome generan un gran impacto visual pero relantizan mucho la velocidad de carga.
Solucion. Mostrar los iconos de forma vectorizada (http://svgicons.sparkk.fr/) o como imagen.
Error N.8 Utilizar demasiadas capas
Como diseñador web no recomiendo utilizar mas de 2 tipos de fuentes, una para titulos, encabezados, y puntos importantes y otra para texto si es necesario.
Solucion. Reducir el numero de fuentes cargas. Si utilizas la plantilla generatepress solo cargas las fuentes necesarias.
Error N.9 Referencias RRSS
La mayoria de plugins para compartir post o para mostrar seguidores en twitter o facebook hacen un monton de peticiones a un servidor externo.
Por todo ello, intentar reducir el numero de plugin de este tipo o utilizar los ya optimizados.
Error N.10 Scripts repetidos en todo el SITE
En muchas ocaciones la instalacion de un simple plugin puede hacer cargar un monton de codigo innecesario en todas las URLs de tu pagina web.
Solucion: El plugin perfmatters.
Recursos mencionados en la clase
GeneratePress Premium (gratis en la pestaña de Herramientas de pago)
Astra Pro (gratis en la pestaña de Herramientas de pago)
Compresor de imágenes https://compressor.io/
WP Smush https://es.wordpress.org/plugins/wp-smushit/
Imagify https://es.wordpress.org/plugins/imagify/
Iconos en forma vectorial http://svgicons.sparkk.fr/
Perfmatters https://perfmatters.io/
[4] – Buenas prácticas de WPO
Controla el «latido» de tu wordpress: Gracias a plugins como WP Rocket o Heartbeat Control.
Activa la compresion GZIP en tu pagina web: Mediante modificacion .htaccess o directamente desde el panel de control de tu hosting.
Utiliza la ultima version estable de PHP de tu hosting: Actualiza siempre que puedas a una mejor version de PHP.
Recursos mencionados en la clase
GeneratePress Premium (gratis en la pestaña de Herramientas de pago)
Astra Pro (gratis en la pestaña de Herramientas de pago)
Plugin Self-Hosteed Google Fonts Pro https://codecanyon.net/item/selfhosted-google-fonts-pro/22176077
Hosting SEO y Hosting SSD de Raiola con un 20% de descuento en la pestaña de Promociones
WP Rocket (gratis en la pestaña de Herramientas de pago)
[5] – Aprendiendo a optimizar tu WordPress (Parte 1)
Optimizando WordPress con WP Rocket
- Plugin de pago (50 euros licencia).
- El mejor plugin (Y mas sencillo para gente sin conocimiento sobre WPO).
- Podrás activar tu CDN desde este plugin.
- Podrás controlar el latido de tu WordPress con el.
- Compatible con Imagify.
- Soporte técnico de alta calidad.
Ajustes WP ROCKET:
a) CACHE:
- Habilitar la cacle para dispositivos móviles.
– Guardar separadamente los archivos para dispositivos móviles (opcional si tienes un tema para escritorio y otro para móvil). - Habilitar la cacle para los usuario conectados a WordPress (opcional si usas un registro de usuarios, ejemplo una tienda online).
- Vida útil de la cache, 10 horas.
- Guardar cambios.
b) OPTIMIZAR ARCHIVOS:
- Minificar archivos CSS.
- Combinar archivos CSS. (No usar si usas Http 2)(GtMetrix Make fewer HTTP request).
- Optimizar la entrega CSS.
- Minificar archivos JavaScript.
- Combinar los archivos JavaScript.
- Cargar archivos JavaScript de manera diferida.
- Guardar cambios.
c) MEDIOS:
- Habilitar para las imágenes.
- Habilitar para iframes y videos. (opcional si tienes videos sino no).
– Reemplaza el iframe de YouTube con una imagen de vista previa. - Guardar cambios.
Optimizando fuentes con Self-Hosted Google Fonts PRO
- Plugin de pago (16 euros licencia).
- Elimina peticiones a Google Font.
- Sencillo de configurar (2 clicks).
- Quita aviso en el Google Page Speed. (Asegúrate de que el texto permanece visible mientras se carga la fuente web).
Ajustes Self Hosted:
- Ir a ajustes, Self-Hosted Google Fonts.
- Enable processing: yes enable. (activar, normalmente viene desactivado).
- Font display behavior: swap.
- Guardar cambios.
- Borrar cache y verficar con la opcion verify now que esta en los ajustes del plugin.
Optimizando imágenes con Imagify
- Plugin de pago pero muy barato (1GB por 10 dólares).
- Optimiza las imágenes y las comprime en bulk.
- Optimiza tamaño de las imágenes si es preciso.
- Convierte imágenes JPG, PNG al formato WebP.
Ajustes IMAGIFY
- Modo Agresivo
- ✅ Optimización automática de imágenes al subirlas.
- ✅ Backup de las imágenes originales.
- Crear versiones webp de las imágenes.
- – Mostrar imágenes en formato webp en el sitio
- — Usar las etiquetas picture preferiblemente.
- ✅ Redimensiona las imágenes mas grandes.
- Guardar cambios.
Extras: GTMetrix
Serve scaled images: Te indica que imagen puedes reducir. En las imágenes de testimonio se usa 150×150 porque no pierde calidad.
[6] – Aprendiendo a optimizar tu WordPress (Parte 2)
¿Qué es un CDN?
La palabra CDN o red de distribución de contenido proviene de la palabra inglesa «content delivery network» y se refiere a un conjunto de servidores situados en diferentes zonas geográficas que contienen copias o backups de diferentes paginas web de clientes.
El principal motivo por el cual se hacen estas copias de seguridad en diferentes servidores del mundo es para poder servir el contenido de una pagina web al usuario lo antes posible.
Solo necesitas un CDN para tu proyecto online si:
- Tu trafico web esta muy repartido entre distintos países.
- Tu trafico web se basa en dos continentes separados (Ejemplo e paginas web en español que posicionan en España y en latam).
- quieres aumentar la seguridad de tu pagina web. Prevenir el Hotlinking.
- Utilizas un montón de archivos de imágenes, etc.
¿Qué tipos de CDN existen?
En la actualidad los mejores para mi son:
- Cloudflare (gratuito). Opción recomendable si no quieres invertir pero cuyo funcionamiento no me acaba de convencer.
- BunnyCDN (pago). Opción extremadamente barata, seria, y muy sencilla de instalar con WP Rocket, pertmatters o cualquier otro plugin de WordPress.
[7] – Aprendiendo a optimizar tu WordPress (Parte 3) – Perfmatters
Optimizando WordPress con Perfmatters
- Plugin de pago (25 dolares licencia)
- Sirve para eliminar un monton de «moralla».
- Podrás instalar tu CDN con el.
- Si no se optimiza bien puede dar conflictos con WP Rocket.
- Lo que realmente vale su precio es su gestor de Scripts.
Ajustes – Options:
- disable emojis
- disable embeds
- remove query strings
- disable xml-rpc
- remove jquery migrate
- hide wp version
- remove wlwmanifest link
- remove RSD link
- Remove shorklink
- Opcional (disable rss feeds y remove RSS Feed Links)
- disable sel pingbacks
- Disable dashicons
- Disable Google Maps
- Disable google fonts (en la ultima versión no esta disponible)
- disable password strength meter
- remove comments URLs
- Autosave Interval: 5 minutos.
Script Manager:
Sirve para deshabilitar cargas de plugins que no son importantantes en todas las URLs.
Cuando apagas una plugin, te saldra 3 opciones:
- everywhere: en toda la pagina web
- current url: en solo esta url
- regex: o por expresiones regulares, por ejemplo en todas las url que tengan la palabra «blog».
Configuracion de ejemplo: El plugin se desactivara en toda la web «Everywhere«, excepto «Current URL» en la pagina que quieras que no se cargue, post type «entradas y paginas».
Que quiere decir, el plugin se cargara en las entradas y paginas y se desactivara en la url home o url que hayas elegido.
[8] – Aprendiendo a optimizar tu WordPress de forma gratuita
- CDN Gratuito cloudflare. En algunos hosting como Siteground o Raiola Networks tiene un instalador gratuito de cloudflare.
- Fuentes alojadas en local de forma gratuita.
OMGF, es la alternativa a self hosted fonts pro.
Subir de forma local la fuente con Use Any Fot. - Google analytics en local de forma gratuita con Host Google Analytics Locally.
- W3 Total Cache la alternativa a wprocket.
- Wp Smush para imágenes. Imagify tiene una versión gratuita de hasta 25mb de imágenes.
- Controla el «latido de tu WordPress» con HeartBeat Control.
- Limpia tu WordPress de forma gratuita con el plugin WP Optimize.
- Lazy load gratuita para tus imágenes con Rocket lazy load.
Datos:
nombre: Borja aranda vaquero.
web: https://borjaarandavaquero.com
María Nodal escritora y publicista digital.