- Escrito por José Peña
- Fecha de publicación:
Si tu web no carga rápido, el usuario no esperará y acudirá a la página de tu competencia, por eso voy a contarte como mejorar la velocidad de carga de una página web.
Dicen que el usuario no aguanta más de 2 segundos en abrir una página, esto es muy relativo ya que depende de lo que este buscando esa persona.
Lo que si es importante es que hagamos una optimización de velocidad web para mejorar el posicionamiento en Google y de esta manera aumentar la velocidad de carga del sitio.
Puedes creer que no es para tanto si dos, tres, diez o veinte personas no tienen paciencia para esperar a que cargue tu web, he de decirte que si es importante.
¿Y si esa persona que no ha querido esperar te hubiera comprado si tu web hubiera tenido una buena velocidad de carga? Estarías dejando en el aire a un posible usuario o comprador.
Sabes que Amazon deja de ganar miles de Euros cada vez que su página sube 0,1 segundos.
- Amazon comprobó que si reducían la carga de sus páginas web una décima de segundo aumentaban un 1% sus ventas.
- Google pudo comprobar que si los resultados de su buscador tardaban medio segundo más en cargarse las búsquedas se reducían en un 25%.
- Firefox redujo el tiempo medio de carga de sus páginas en 2,2 segundos y aumentó sus descargas un 15,4%.
- Los usuarios esperan que las páginas web se carguen en un tiempo de 2 a 4 segundos. Después de 4 segundos los abandonos, falta de conversiones y descenso de las ventas se ven afectados muy negativamente.
- El 74% de los usuarios de dispositivos móviles abandonan un sitio web si no se carga en 5 segundos
Amazón deja de ganar mucho dinero cuando su web se ralentiza, es por ello que Google insiste tanto en dar valor y rapidez al usuario a la hora de valorar el posicionamiento web de una empresa, esto forma parte del Seo y es fundamental.
Google tiene que dedicar más recursos a las páginas mal optimizadas, el tiempo que las arañas de Google pierden en tu web pudiendo rastrear más sitios impiden que muestren resultados de mejor calidad, aunque tampoco hay que alarmarse.
Si quieres optimizar al máximo tu web lo ideal es que contrates a un Consultor SEO Profesional pero si quieres hacerlo tú mismo, te voy a dar los puntos esenciales para hacer un buen WPO (Web Performance Optimization) y que consigas mejorar la velocidad de carga de tu web y aumentes tu posicionamiento Seo.
Opciones básicas para mejorar la velocidad de una página web
Tienes que tener en cuenta que cada web es diferente por eso voy a mostrarte diferentes métodos para aumentar la velocidad de una web sobre todo enfocado al CMS WordPress
Te dará problemas en algunos campos como:
Velocidad de carga (LCP) , interactividad (INP) y Estabilidad visual (CLS) + Experiencia de usuario
- LCP: Despliegue del contenido más extenso dentro de la ventana de visualización: Imágenes, video, article, aside…
Óptimo:Menos de 2,5 segundo
- INP Interacción por 1ª vez: cuando hace clic, botón,javascript…
Óptimo:Menos de 100 mls
- CLS: Cuando se mueve la pantalla mientras carga
Óptimo:Menos de 0.1 puntos o menos
Una vez veas que va lenta ten en cuenta estos factores,
-
No hagas tanto caso a Page Speed Insights
Las puntuaciones de Pagespeed son muy estrictas, no te obsesiones con ellas y analiza tu sitio con otras herramientas como Pingdom o Gtmetrix para calcular la velocidad en internet de las páginas web.
La herramienta de PageSpeed Insights no analiza la velocidad real de tu página web, en realidad, lo que analiza es la optimización de los recursos de tu página. Su objetivo es el de ayudarte a hacer que la página sea ligera pero sobre todo fácil de rastrear, por eso es tan exigente en su test.
Google Page Speed puede incluso llegar a ralentizar tu web como le hagas caso. No tiene sentido por ejemplo que te diga que tienes que meter Google Analtics en el head por ejemplo y luego decirte que ralentiza tan arriba.
Además No puedes hacerle caso si te pide que renuncies a ciertos aspectos que realmente no están ralentizando tu web y pueden estar generándote ingresos por ejemplo.
Piensa que habrá ocasiones en que tendrás que medir eventos de analytics o insertar en tu web el pixel de Facebook ads si quieres crear una campaña publicitaria y todo esto resta velocidad y Page Speed lo valorar muy mal
-
¿Plugin de pago o plugins gratuitos para mejorar la velocidad de carga?
Depende, yo utilizoWPRocket, se trata de un plugin impresionante que te ayudará a mejorar la velocidad de carga muchísimo.
Es de pago y puedes comprarlo aquí y seguro que te ahorras muchos disgustos ya que si lo configuras bien tu web irá como un rayo y te ahorras trabajo seguro ya que sólo instalándolo ya mejoras.
Ahora que lo tienes claro, vas a aprender a mejorar la velocidad de carga de cualquier web gracias a esta Masterclass de WPO
¡Vamos a ello!
Cómo optimizar la velocidad de carga (WPO)
HOSTING
Asegúrate que tu hosting tiene:
- Última versión de Php
- Compresión Gzip
- Http/2 (http2.pro)
- Disco duro SSD
- Servidores Apache (antiguo) Mejor: Nginx y Litespeed
- Tareas Cron
Un servidor de calidad es fundamental, de él va a depender en un porcentaje muy alto la velocidad de tu sitio web.
Un mal servidor como 1and1 puede ser el primer lastre en la optimización de la velocidad de carga de tu web.
Si no quieres gastarte mucho opta por servidores económicos pero de calidad
Que debe tener un buen hosting para darnos rapidez en internet:
- El servidor a ser posible, debe estar en tu país o cerca de el, de esta manera el tiempo de respuesta será menor y los problemas relacionados con la conectividad de la red serán mucho más bajos.
- Es importante que el Hosting que uses cuente con discos SSD. El acceso a los datos de tu web será más rápido usando gracias a estos discos.
- Un hosting que tenga las últimas tecnologías a nivel servidor es muy importante. Contar con la última versión de PHP.
Asegúrate que tu hosting cuenta con la versión PHP última o penúltima y que esta activado por tu servidor o actívalo tu mismo desde su panel de control.
- Normalmente cuando contratas un servidor, este es compartido, es lo normal, pero tiene el inconveniente que cuando otro cliente que comparte contigo ese alojamiento, tenga un alto pico de visitas o un elevado consumo de recursos, la velocidad de tu web se podría ver afectada; para evitar esto es importante que tu hosting cuente con un sistema que genere departamentos para cada cliente (enjaulado de cuentas)
- Las imágenes son importantísimas como vamos a ver después, hay que reducirlas siempre al máximo antes de subirlas, esto le dará a tu web muchísima puntuación (es de los principales factores de velocidad), si tu hosting (como es el caso de Webempresa con su sistema imgOptimizer) lo tiene, optimizarás todavía más las imágenes subidas
- Aunque no te parezca que tiene que ver con la velocidad, el que un Hosting utilice cortafuegos para detectar el tráfico SPAM es importante. Tu web será más fluida ya que evitarás intentos de login innecesarios que acabarían retardando tu sitio.
Como ves son pequeños factores que ayudaran cada uno en su medida aportando un granito de velocidad.
Como siempre digo un poquito de cada cosa «hace un mucho».
Estos son algunos de los factores determinantes a la hora de elegir hosting que hará que juegues con ventaja respecto a tu competencia, si quieres saber más datos sobre webempresa y conocer porque deberías elegirlos como una buena opción de garantía para tu web puedes leer el artículo sobre el mejor hosting para wordpress
Aprovecha estas ofertas ahora
Si quieres vivir de internet ¡Suscríbete!
Recibe Consejos sobre SEO/GEO y Monetización
Información básica sobre protección de datos:
- Responsable: José Manuel Peña Fernández
- Finalidad: recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
- Legitimación: tu consentimiento de que quieres comunicarte conmigo.
- Destinatarios: tus datos serán guardados en Webempresa, (proveedor de hosting de Tu Web de Cero) dentro de la UE.
- Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
- Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.
- Raiola: con un 20% de descuento aquí (5,95 €/mes)
- Webempresa: Utiliza el código: tuwebdecero25 y obtendrás un 25% de descuento aquí (Desde 7 €/mes)
- Siteground: Sobre el 70% descuento el primer año (Desde 3,99 €/mes) Ver precios
- Sered: Código descuento (2MESES GRATIS) pago mensual (Desde 5,5 €/mes) : tuwebdecero Contratar | Código descuento (10%-Dominio gratis) pago anual (Desde 59,40€/año): tuwebdeceroanual Contratar
- Dinahosting: con descuentos del 50 %. (Desde 2,95€/mes) Ver planes
- ¿Necesitas un hosting WordPress más Económico para empezar? Hostinger (hasta un 90% de descuento para planes más largos + cupón del 10% usando el código: tuwebdecero10) (Desde 0,99€/mes) Contrátalo aquí
IMÁGENES
- Bajar peso y tamaño
- Herramientas: Riot o Tinypng
- Lazy Load
PLANTILLA
Usa una plantilla rápida
Usar una plantilla con un buen código y optimizado es otro de los factores predeterminados para conseguir que tu wordpress sea rápido.
Shortcodes o sliders no hará otra cosa que sobrecargar el tema y pueden generar bloqueos de contenido con excesivo javascript
La solución a ese javascript es que cargue el contenido al final de la página o que lo hagan de forma asíncrona, para esto hay plugins que verás al final de artículo pero pueden crear problemas de visualización y no siempre son fáciles de optimizar.
Ten en cuenta que son muchos los datos que vas a ir insertando en tu sitio web, el que estos no generen «errores» en página harán que tu sitio fluya mucha mejor por eso todo lo que evites mejor.
Es muy normal optar por plantillas tematizadas pensando que es la mejor opción y estas normalmente llevan opciones innecesarias y pesadas. La mejor opción son las plantillas Multiproposito.
No caigas en la tentación de elegir un tema por su inclusión de demos, sin duda pueden aligerar la tarea al tomarlos como base pero la cantidad de recursos que consumen es enorme, imágenes, videos o plugins por defecto que harán que antes de meter contenido tu web ya este perdiendo valores de velocidad.
¿Te gustan las tipografías verdad? Ten en cuenta que las tipografías que la plantilla incluye y que se alojan en el servidor ralentizarán menos la web que las que son de google fonts, estas últimas realizan llamadas externas y salvo que las incluyas con código dentro del theme jugaran un poco en tu contra al optimizar la velocidad de la web.
Si quieres cambiar de tema puedes ver los 23 themes más atractivos y optimizados para wordpress de pago y gratis.
Yo te recomiendo Generatepress, Tom Usborne esta empeñado en que Generate press sea ligero y lo es, a pesar de que se puede pensar que al ser muy personalizable puede llegar a ser pesado, no es así.
CACHÉ, CSS, JS, CÓDIGO
- Comprimir css y js
- Carga aplazada (scripts)
- Carga condicional
- Eliminar css innecesario
- Dev Tools (coverage)
Mejorar LCP
- TTFB: Servidor, base de datos(maquetadores, temas, consultas…)
- Cache
- Preconnect o dns prefectt.
Mejorar INP:
- Reducir el tiempo de Javascript, terceros, usar condicional, minimizar
Mejorar CLS:
- Incluir atributos de tamaño en imágenes y video o reservar espacio
- No meter contenido por encima del actual (excepto respuesta a interacción de usuario)
- Hay que reservar el espacio (anuncios)
- Fuentes web que causan FOIT/FOU (flashes de texto invisibles y sin estilo)
- Fuentes google local y Display Swap
El que se sirva toda la información de tu web rápido se consigue con un plugin de caché.
Tu web se mostrará mediante una copia sin tener que recurrir a servirla completa evitando así la carga innecesaria de recursos.
Con un plugin de Caché, cuando un usuario vuelve a visitar tu página no necesitará descargar esos ficheros de nuevo desde Internet, sino que los descarga de su propio navegador, con la consiguiente ganancia en velocidad.
Existen varios tipos de plugin de caché.
Wp Rocket como te he comentado al principio del post es el que uso en la actualidad y sin lugar a dudas el mejor plugin de caché. Si me pides consejo invertiría sin duda en él y te diría que lo compraras ahora mismo.
Yo hasta conocer Rocket he usado Wp supercache, aunque desde hace tiempo uso Wp Rocket y no hay color.
Los plugin de caché deberían reducir los archivos javascript y los archivos CSS para evitar hacer tantas peticiones al servidor y esto a veces se hace mal.
BASE DE DATOS
Limpia la base de datos Wp Optimize
Este plugin Wp Optimize hace limpieza de tu base de datos eliminando datos innecesarios, spam, metadatos, elementos temporales, residuos de otros plugins antiguos…º
Instalar y desinstalar plugins puede dejar suciedad en tu wordpress. Elimínalos con Wp Optimize y verás como mejorar la velocidad de tu sitio.
Aunque Wp Optimize los elimina, te recomiendo que desactives en la opción comentarios de tu wordpress los pingbacks y trackbacks, además de que evitarás el spam, será un puntito a favor de la velocidad.
Desactiva este plugin una vez lo uses, no consumirá recursos.
ELIMINA PLUGINS INNECESARIOS
Estudia que plugins necesitas realmente
Estudia que plugins realmente no necesitas y elimínalosYa he comentado en más de una ocasión que la sobrecarga de plugin no es buena para tu web.
Influye el peso da cada uno más que la cantidad que tengas.
He usado web con más de 25 plugins instalados y son webs más rápidas que otras que usan 10. Evita los plugins pesados.
Consejos:
- Desactiva aquellos plugin que necesitas usar en momentos puntuales como pueden ser de optimización de base de datos, análisis de enlaces rotos o copias manuales de seguridad. Esto hará que no consuman recursos.
- Igual que las plantillas, mantén siempre actualizados los plugins e intenta que los que descargues estén actualizados recientemente.
- No uses plugin que su función ya la haga otro plugin que ya tienes instalado.
- No uses plugin innecesarios. Si puedes insertar y ver todas los datos de Google Analytics desde la página oficial ¿Es necesario gastar un plugin para ello?
Puedes ver como insertar el código fácilmente a través del Tutorial sobre Google Analytics.
Resumen, aspectos que más empeoran la velocidad de carga
- Google fonts (tipografías)
- Videos (mejor Youtube)
- Embeds redes sociales
- Recaptcha
- En WordPress exceso de plugins
- Maquetadores
- Publicidad (adsense)
- Codigo Analytics
- Pixel de Facebook
- Dashicons, iconos
- Animaciones
- Redirecciones
Muy buen post José M.
La verdad que es muy útil tener todos los plugins a mano. Yo utilizo desde hace tiempo Autoptimize con mi web y el resultado es buenísimo. Si que es verdad que no me funciona con todas.
Hace poco leí sobre un plugin que recortaba y comprimía la imagen eliminando la original y dejando la versión optimizada. Te suena? Lo leí y lo olvidé. jejej. Me gustaría probarlo porque podría solucionar problemas con webs que pesan una barbaridad sin tener que descargar imagen a imagen.
Un saludo crack 😉
¡Hola Miguel!
Así es, cada web es diferente, influye lo que tu le hagas pero también la configuración que tenga por defecto el tema, las características del hosting etc. No se puede decir que hay un patrón mágico de optimización de velocidad porque no es así.
No conozco ese plugin, Imsanity reduce y escala las imágenes pero sólo las nuevas que insertes desde que lo instalas. Si dieras con él me lo comentas 😉 porque sería muy bueno para webs que ya tienen las imágenes subidas, aunque habría que tener cuidado.
¡Gracias máquina!
Pedazo de post crack, imposible no compartirlo o comentarlo! La verdad que un gran trabajo a ver si me pongo a intentar utilizar algunos de estos pasos que todo lo que sea mejorar siempre ayuda a posicionar. 😉 Muy pro!
Gracias Claudio.
Es difícil sacar tiempo para la parte más técnica de un blog pero creo que es necesario y la velocidad es otro pasito más, a largo plazo todo suma.
No hay formula mágica y cada web es un mundo pero hay que estudiarla un poquito porque hay factores que ni imaginamos la mejora que podemos tener con un simple cambio.
Muchas gracias por el comentario, se agradece. 😉
Muy buen post. Hay una cosa que yo no recomiendo utilizar. El autoptimize es un plugin que puede dar más problemas que beneficios. Yo lo usé para alcanzar el 100/100 en google page speed pero al final acabé quitándolo sobretodo por el javascript. Se cepilla demasiadas cosas.
Hola Manu,
Depende de la plantilla y como este el código de la web funciona mejor o peor. Para cada proyecto es distinto, a mi en algunas como dices no me ha ido bien aunque en otras me ha funcionado genial. Todo es probar.
Saludos ;D
Hey.. Una pasada tu post… Mi página pesa 2.36MB y logré un tiempo de carga de 2,6segundos definitivamente muy útil!
Saludos!!!
Gracias Andoni.
Me alegro que te haya servido, genial ;D
Me Parece muy practica tus indicaciones para la agilidad en cuanto velocidad para WordPress. Yo trabajo como analista de sistemas y mi Tarea es mantener un portal de automatización navegando al pelo y se hizo bajo el sistema de gestión de WordPress ya que este permite la creación de cualquier tipo de pagina web y pues la orden de mi Jefe es mantener ese portal navegando al 100%… de aquí saque varios tips
muchas gracias
Muchas gracias a tí Karen, muy contento de que hayan servido algunos de los consejos.
Un saludo
Felicidades tardías por el post, compañero (benditos RT). Supercompleto, valioso e interesante. No tardaré en ponerlo en práctica, que falta me hace.
Muchas gracias por compartir estos truquillos, crack! 🙂
A ver que tal te resulta, ya me contarás 😉
Muchas gracias por la información, últimamente leo mucho sobre este tema para mejorar las pautas de velocidad marcadas por Google y este es uno de los mejores a nivel practico que he leído, mi más sincera enhorabuena.
Una pregunta por favor, según tu punto de vista, ¿cuál de las medidas en particular ha conseguido mejorar la eliminación de los recursos que bloqueaban el renderizado de tu web? En actualidad la herramienta de pagespeed insights te ofrece una mejora de 0,43 ms para este post y es un valor realmente óptimo
Hola Ana, ¡gracias por el cumplido!
El renderizado de la web es una de las partes más complicadas de eliminar ya que el uso de Javascript es casí siempre casi obligado. Depende mucho de la plantilla, plugins y estructurada para conseguir una mejor o peor mejora pero el Plugin Wp Rocket (que es el que uso en la actualidad) hace una muy buena compresión. Merece mucho la pena.
De todas formas y como digo en el post no son medidas que funcionan para todo el mundo pero Wp Rocket por norma general mejora casi cualquier web muchísimo.
Hola, a hoy Febrero del 2019 sigue funcionando bien el WP Rocket? quiero saber si contrato con ellos o no, gracias
Va increíblemente bien Daniel.
Te dejo mi link de afiliado por si lo compras pero ya sabes que lo recomiendo porque es la bomba pero si lo compras por aquí me estás invitando a una cerveza!! https://shareasale.com/r.cfm?b=1075949&u=1973944&m=74778&urllink=&afftrack=
Te aseguro que vas a notar la velocidad un montón!
Nunca vi tanta información valiosa junta, hay varios plugins de optimización que desconocía, tuve resultados muy parecidos al test final, a pesar que uso un tema multipurpose. Gracias.
Gracias Juan, el post en antiguo y todavía se le puede sacar mucho más!.
Me alegro que te haya gustado. Gracias por el comentario!!!
pero se puede meter el autoptimitze y el rocket juntos ? no son incompatibles ?
y otra cosa, yo por lo general primero le meto a las imagenes el regenerate y luego el stmut pro, para comprimir, .es bueno despues de hacer el trabajo desactivarlos ?
y que theme recomiendas, el generalexpres , ocean, genesis orbital ,astra…., los quiero para afiliación de amazon
gracias crack
Se pueden usar juntos y antes funcionaban muy bien. Ahora con el Rocket es para la mayoría de los proyectos mejor.
Rocket detecta las opciones marcadas en autoptimize y los respeta.
Hay opciones en smush automáticas que si lo descativas dejarán de funcionar.
En cuanto al tema para nichos yo me quedo con Generatepress porque te permite usar hooks y por sus buenas opciones de personalización. Cada vez hay que tener un mejor diseño que no huela a típico nicho que es lo que hace Orbital.
Orbital funciona muy bien, es muy sencillo para no complicarse pero se queda corto en otras opciones que también influyen en el SEO
Un saludo Miguel
¡Hola Jose!
Una vez más, enhorabuena, es el mejor post sobre velocidad que he leído.
3 preguntas rápidas:
1. Tengo Webempresa y como recomiendas hacer la compresión en los archivos Gzip, voy a hacerlo. ¿Existe algún riesgo de que pueda estropear la web? (pregunta desde la ignorancia total)
2. Hablas tan bien de WP Rocket que voy a comprarlo (desde tu enlace 😉 ) pero antes quiero estar seguro de que sabré optimizarlo correctamente ¿tienes algún tutorial como el que hiciste de WP Super Cache?
3. He notado que los comentarios en tu web se cargan más tarde que el resto de la página. ¿Esto también ayuda a mejorar la velocidad? ¿Cómo lo haces?
¡Muchas gracias y un abrazo!
Hola Diego, gracias!!
Te contesto:
1. Nada, no te preocupes, la compresión GZIP no debe romper nada. De todas formas haz una copia de seguridad antes si vas a tocar esto y más cosas de WPO, pero en la mayoría de los casos marcar y desmarcar opciones en plugins de optimización no suele provocar nada. Si se ve mal, desmarcar la opción y listo
2. Wp Rocket es la bomba, vas a alucinar porque es supersencillo y te hace todo solo. Marcas y desmarcas y pruebas. Luego tiene unas opciones más complejas como la precarga en la que puedes hacer más cositas pero es hilar fino. No tengo todavía creado ningún post pero echa un vistazo por internet porque alguno que he visto está muy bien. A ver si lo creo. Lo que sí te digo es que si vas invertir lo compres pero ya porque no tiene que ver con ningún otro. Además ahora han incluido otra opción que manda al CSS al final que baja segundos y todo en un clic. Es super sencillo
3. Es un plugin Lazy Load For comments. Si tienes pocos comentarios no hace falta pero si tienes mucho hace una carga diferida de ellos.
Ya me cuentas y si tienes alguna duda del Rocket me dices!
¡Gracias por tu respuesta!
¿Al instalar WP Rocket también es necesario instalar Autoptimize para optimizar el código HTML, Javascript y CSS o ya se encarga WP Rocket de hacerlo?
Si sigue siendo necesario instalar Autoptimize tengo una duda… Ahora hay 2 opciones que no aparecen en la captura que hiciste al escribir el post:
– Unificar todos los archivos JS
– Unificar archivos CSS
¿Recomiendas marcarlas? (En Autoptimize de primeras aparecen marcadas)
¡Muchas gracias por todo tu trabajo!
P.D. Ya te contaré qué tal con WP Rocket
Hace tiempo hice pruebas y la combinación de ambas era muy buena pero desde hace más de 1 año ya no. Instalas Wprocket y listo. Te hace perfectamente la compresión y minimizado del códgio y la optimización del código (autoptimiza). Con sólo Wprocket tienes caché y optimización de archivos, además de otras cosas como Heartbeat, limpieza de base de datos o poder meter el pixel o analytics en local. Una maravilla.