!Wow! Cómo optimizar la velocidad de carga de tu web paso a paso

Cómo optimizar la velocidad de carga en WordPress (Pagespeed + Wp Rocket)

Cómo-acelerar-optimizar-tu-wordpress

 

Bienvenid@s a este tutorial.

En esta guía os voy a enseñar cómo acelerar y optimizar  vuestro proyecto en wordpress ya sea un blog, web o tienda online.

Se ha escrito mucho sobre esto, por ello voy a intentar que sea lo más práctico posible.

Os recomiendo leer este artículo de Javier Gobea para que no os obsesionéis con los datos que arroja esta herramienta ni ninguno de los demás.

La razón es bien sencilla, estos datos son orientativos y en el caso de Pagespeed habrá apartados que será muy difícil o hasta imposible solucionarlos. (así todo vamos a pelear con uñas y dientes) 😉

 

Empezamos? 

 Midiendo la velocidad de mi web y sacando conclusiones

Para empezar con el test de velocidad, primero vamos a entrar en una ventana de incognito para simular que somos un usuario nuevo, para ello dependiendo si estamos utilizando Chrome o Firefox vamos a hacer esto:

Chrome -> Ctrl+Mayúscula+N,

Firefox -> Ctrl+Mayúscula+P,

Internet Explorer -> Ctrl+Mayúscula+P

Una vez que se nos abre la ventana privada vamos a dirigirnos a la web de pingdom y escogemos en localización a la más cerca a nuestro hosting, en mi caso el correspondiente para mi hosting Webempresa, será Suecia.

En donde pone url escribimos nuestra web y hacemos click en “Start Test”

 

 Como podéis observar el tiempo de carga de mi blog es bastante mejorable.

acelerar-wordpress-eizagirre-josu

Llegados a este punto tenemos que ponernos en la piel del usuario que entra en nuestra web y preguntarnos esta serie de cuestiones:

¿A ti te mola que cuando entras a una página web, tarde un siglo en cargar?

¿Por mucho que esa web sea muy bonita a nivel de diseño vas a esperar tanto tiempo? ¿o vas a hacer click en otra web que carga el contenido parecido pero mucho más rápido?

Pues así es, si tu web carga lento vas a perder visitas y si vendes por ejemplo cursos, infoproductos vas a perder lo más seguro compradores por la mala calidad que estas ofreciendo a tus visitantes.

Bien para asegurarnos de que a Google ahora mismo no le hacemos mucho “tilín”, vamos a utilizar su herramienta “PAGESPEED”, para ello nos vamos a dirigir a su web de esta forma y una vez escrito nuestra dirección en ella, hacemos click en “ANALIZAR”:

optimiza-acelera-wordpress

optimiza-acelera-wordpress

Y vemos como se confirman los malos augurios 🙁

Tenemos un aprobado raspado en versión pc + móvil  y esta herramienta siendo de google no es una buena noticia que digamos, verdad?

Vamos a ver paso a paso cómo solucionar esta catástrofe que tenemos montado ahora mismo.

Antes que nada deciros que la plantilla de wordpress que estoy ahora mismo utilizando es el tema Rise de THRIVE THEMES, pero el problema lo más seguro que no venga de ahí, si no del page builder que estoy utilizando que es el Thrive Content Builder + Plantilla para landing page.

¿Cómo? Si he leído a bloggers super famosos como Omar de la Fuente y Javier Elices decir que es una pasada de plugin!!

Si, la verdad que no te han mentido, una pasada si que es, pero también es verdad que introduce mucho código que luego hace que la web tarde en cargar.

Si haces la prueba con sus blogs verás que los tienen bien optimizados!!

Entonces te puedes hacer una idea de que si ellos lo han conseguido, nosotros podemos hacerlo también no? solo necesitamos saber como hacerlo y esa parte técnica déjamelo a mi explicártelo paso a paso. 😉

acelerar-optimizar-josu-wordpress2

optimizar-wordpress-acelerar-josu

 

Plugin Wp Rocket, la mejor herramienta para acelerar tu web

Bien llegados a este punto os voy a presentar el mejor plugin de caché que existe hoy en día para WordPress.

Se llama Wp Rocket y sencillamente es lo mejor que te puedes instalar para acelerar tu web pero solo tiene una pega, es de pago. 😉

acelerar-tu-wordpress

Si te animas a probarlo y comprobar cómo vuela tu proyecto web a continuación te explico cómo hacerlo. (importante, no gano nada recomendándote este plugin 😉).

Para ello primero rellenamos con nuestros datos y escogemos la versión que queramos, en mi caso la “Personal”.

Rellenamos con todos nuestros datos y en mi caso escojo pago vía Paypal:

acelerar-wordpress-optimizar-wprocket

Descargamos el plugin y la instalamos (no hay que activarla, lo hace automáticamente).

acelerar-wordpress-josu

acelerar-optimizar-wordpress-josu-eizagirre

A continuación podéis observar qué solamente ya por instalarlo y activarlo nos hace una configuración optima y si hacemos el test de velocidad podemos observar el antes y el después:

acelera-wordpress-optimizar

           →SIN WP ROCKET INSTALADO:  Tiempo de carga 3,09 segundos.

WP ROCKET INSTALADO: Tiempo de carga 1,97 segundos.

Pero todavía vamos exprimir mucho más este plugin, para que nuestro WordPress vuele y esté mejor optimizado de cara a Google y los buscadores.

 

Analizando los datos que nos ha arrojado PageSpeed y buscando soluciones

Bien, si nos fijamos debajo de la puntuación, PageSpeed nos indica todos los apartados que podríamos mejorar para que la velocidad de nuestra web sea mucho más optima.

Vamos a ver cómo solucionar algunos de esos puntos para volver a enamorarle a Google. 😉

acelerando-optmizar-wordpress

 

#Habilitar compresión

Empezaremos arreglando el punto “Habilitar compresión”, para ello nos vamos a dirigir a nuestro panel de administración o “Cpanel” de nuestro hosting, en mi caso todos los proyectos los tengo con webempresa y dentro de ella a:

acelerar-wordpress-cpanel

 

Una vez dentro nos vamos a la opción “SOFTWARE” y escogemos “Optimizar el sitio web”:

optimizar-wordpress-webempresa-josu

Una vez hecho esto clickamos en “Comprimir todo el contenido” y después en “Actualizar configuración”:

optimizar-conprimir-contenido-wordpress

Con esto lo que conseguimos es que nos comprima todos los archivos con extensión .css, .js, .pdf,jpg etc...vamos una maravilla. 😉

Vamos a volver a realizar la prueba de PageSpeed y veremos si la puntuación ha mejorado y se ha solucionado ese punto de la compresión.

 

mejorar-velocidad-optimizar-wordpress

optimizar-wordpress-acelerar-josu

Hemos conseguido comprimir el contenido y mejorar nuestra puntuación pero todavía queda trabajo por delante!!

#Minimizar el código Html, JavaScript y Css

Para solucionar esta advertencia vamos a activar unas opciones especiales que tiene nuestro querido plugin, Wp Rocket.

Entramos a su configuración y en mi caso activo estas opciones:

acelerar-wordpress

Por un lado activo la “carga perezosa” para que los  vídeos y iframes se carguen una vez se visualicen, no antes, (os aconsejo activarlas uno por uno y ver si vuestra web funciona correctamente).

Si queréis también podéis activarlo para las imágenes, en mi caso no me gusta como me queda en mi blog. (haced pruebas vosotros mismos.)

Y si veis que no funciona bien o desaparecen cosas, desactivarlos o contactar con el soporte que es muy bueno. Doy fe de ello!!

Listo, solo haciendo unas pequeñas configuraciones ya tenemos solucionado esa parte de Page Speeds. 🙂

¿Sencillo verdad?

#Optimizar las imágenes

optimizar-imagenes-wordpress-josu

Para optimizar las imágenes tenemos varias opciones, pero en mi caso voy a utilizar la herramienta “Imagify”.

Es un plugin totalmente gratuito aunque con limitaciones, por ejemplo si tienes muchas fotos te tocará pasar por caja, pero el plan básico te sale por el módico precio que cuesta tomarte un par de birras en el bar!! 😉

Bien pues, ¿que os parece si la probamos? 😉

acelerar-wordpress-optimizarlo

La activamos y seguimos estos sencillos pasos que nos indica:

acelera-optimizar-wordpress

acelerar-wordpress-optimizar

Una vez registrado nos llegará un correo con nuestros datos de acceso + la API.

optimizar-imagenes-wordpress

Introducimos la API:

optimizar-acelerar-imagenes-wordpress

acelera-wordpress-imagenes

En la ventana de configuraciones escojo “Agresivo” (tu puedes optimizar más con la opción “Utra”) y dejo activadas estas opciones.

Para acabar hacemos click en “Imagíficalo todo”

acelerar-optimizar-wordpress-josu

acelera-optimizar-imagenes-wordpress

Debido a todas las fotos que tengo yo para optimizar y las limitaciones de la versión gratuita, en mi caso he optado por la versión de pago. (si no tenéis pocas fotos el gratuito os vale de sobra).

optimizar-wordpress

 

Una vez acabado con el trabajo de optimizar de todas las fotos (ten paciencia) me lo indica de esta forma:

acelerar-wordpress-josu-eizagirre

Con esto ya hemos solucionado esta otra advertencia de Pagespeed y ya llevamos unos cuantos!!

acelerar-wordpress-josu

¿Seguimos?

 

#Reducir el tiempo de respuesta del servidor

Básicamente para solucionar esto necesitamos subir la versión de php que estamos utilizando desde nuestro servidor.

Si utilizáis por ejemplo cómo hosting  “CDmon”, tendréis en el mismo CPANEL la opción para cambiarlo a la última versión.

En mi caso utilizo WEBEMPRESA  y para hacer este cambio necesito añadir un código al archivo “.htaccess”.

Antes que nada recordaros que la versión de “PHP” del servidor no tiene porque coincidir con la versión de tu cuenta de usuario.

Vamos a ver a continuación cómo podemos saber la versión de Php que tiene compilada el servidor.

Para ello nos dirigimos a nuestro CPANEL y a la derecha clickamos en “Información del servidor”:

acelerar-optimizar-webempresa-wordpress

Una vez dentro podemos ver la versión de Php disponible.

acelerar-optimizar-wordpress

Pero qué pasa si queremos saber cuál tenemos nosotros en particular en nuestra cuenta dentro del hosting?

Muy fácil activamos la herramienta Stephan, te suena? Si es aquella herramienta que Webempresa pone a tu disposición para hacer un análisis del estado de tu instalación etc..

Le decimos que analice nuestra url y buscamos donde pone la versión Php que tenemos compilado.

En este caso si miramos la información, tenemos la 5.4. (como veis son versiones diferentes)

Si lo queréis verlo mejor en vídeo aquí os dejo este videotutorial:

 

Bien ahora qué sabemos identificarlo, ¿cómo la cambiamos para mejorar la velocidad desde el servidor?

 Para ello localizamos en nuestra instalación el archivo .htaccess y añadimos esta linea de código al principio de todo:

editar-htaccess-wordpress-acelerar

VER CÓDIGO

AddHandler application/x-httpd-php7 .php

acelerar-optimizar-mejorar-wordpress

Y Guardamos los cambios.

Si volvemos a utilizar los servicios de nuestro amiguete Stephan vemos que ya tenemos la ultima version de Php actualizada.

optimizar-wordpress-josu-acelerar

Pero habrá habido cambios en el panel de Pagespeed?

Hemos conseguido mejorar mucho el tiempo y nuestra puntuación ha mejorado bastante pero no quitarla (que puñetero es google con este mensaje :))

wordpress-acelerar-optimizar

 

#Resultados finales

optimizar wordpress pc

optimizar wordpress

velocidad-acelerar-wordpress

Nada más espero que os haya gustado este tutorial.

¿Y vosotr@s qué métodos utilizáis para optimizar vuestras webs?

¿Le das dais la importancia que se merece de cara al posicionamiento?

Nos vemos en los comentarios. 😉

Cómo optimizar la velocidad de carga en WordPress (Pagespeed + Wp Rocket)
5 (100%) 19 votes
The following two tabs change content below.
Me llamo Josu y soy un Informático apasionado con todo lo relacionado con Internet y la tecnología. Actualmente ayudando a emprendedores e inconformistas a crear y monetizar su presencia en internet, a través de webs o tiendas online totalmente personalizadas y optimizadas. Enamorado de Wordpress y todo lo que tenga que ver con las formas de monetizar un proyecto web.

COMENTARIOS DE ESTE ARTÍCULO:

4 comentarios
Verónica Dice 2017-06-09

Que buena explicaciòn, muy detallada, gracias por compartir tus conocimientos no sabes como aporta tu generosidad.

Contestar
    Josu Eizagirre Dice 2017-06-11

    Buenas Verónica,
    gracias por pasarte y dedicar parte de tu tiempo en dejar un comentario tan amable en mi blog.

    Te puedo asegurar que crear este artículo me ayudó mucho a mi a la hora de optimizar mi web y conseguí mejorar mucho el tiempo de carga.

    Por ello, si me sirvió a mi estoy seguro de que todo lo expongo en el post le servirá igualmente a cualquier persona independientemente si tiene una Web o Blog creado con WordPress a la hora de mejorar estos factores que sabemos perfectamente que Google los toma muy en cuenta para posicionar tu web.

    Un abrazo

    Contestar
jose Dice 2017-02-23

Hola Josue cómo siempre fantásticos tus consejos e seguido todos los pasos y de verdad que he ganado en velocidad de carga eres un verdadero crak muchas gracias y un saludo.

Contestar
    Josu Eizagirre Dice 2017-02-25

    Buenas Jose
    Se agradece mucho tu feedback
    Como ves no cuesta tanto mejorar un poco la velocidad de nuestra web y de paso también, estar un poco más tranquilos sabiendo
    que tenemos mejor puntuación de cara a Google.

    Pero como explico en el artículo tampoco hay que obsesionarse con ello, con tener medianamente buena puntuación y especialmente si conseguimos que nuestra web cargue por debajo de los dos segundos ya tendremos un buen trabajo hecho.

    Un abrazo

    un abrazo

    Contestar
COMENTAR