Tutorial: Mejorar el Pagespeed

Hoy aprenderás a mejorar el Pagespeed de tu sitio con WordPress, trataré de no enfocarme en tecnicismos y de ser lo más breve posible para que logres optimizar la velocidad en el menor tiempo posible.



Bien, vamos a ello:

Nota: Antes de comenzar con el tutorial, recuerda que debes evaluar primero la velocidad de tu sitio en https://developers.google.com/speed/pagespeed/insights/

Pasos para Mejorar el Pagespeed de mi sitio:

1.- Configurar CloudFlare versión gratuita en mi sitio.

Para ello deberás seguir los siguientes pasos:

A.- Ir a www.cloudflare.com y crear una cuenta con nuestro correo electrónico.

B.- Ya con nuestra cuenta creada, agregamos el dominio de nuestro sitio web de la siguiente forma, hacemos clic en Add website y esperamos:



C.- Hacemos clic en Continue setup para continuar con la configuración de CloudFlare

D.- En la siguiente pantalla no vamos a tocar nada, lo dejamos así y hacemos clic en I´ve added all missing records, continue.

E.- En esta pantalla colocaremos la configuración como en la imagen y clic en Continue:



F.- Ahora CloudFlare nos mostrará una pantalla inidcando que debemos cambiar las DNS de nuestro sitio por las que ellos otorgan, simplemente vamos a nuestro registrador de dominios y hacemos el cambio. Cuando hayamos realizado el cambio, hacemos clic en I´ve updated my nameservers, continue.



G.- Hacemos clic en el botón en forma de tuerca que aparece al final del dominio y elegimos CloudFlare settings.

H.- Nos vamos a la tercera pestaña llamada Perfomance settings y debe quedar así:



Ya con estos sencillos pasos tenemos CloudFlare totalmente configurado.

2.- Instalar y activar el Plugin W3 Total Cache

A.- Configurar el Plugin W3 Total Cache:

No voy a indicarles paso a paso cómo configurar W3 Total Cache porque quiero que el tutorial sea lo más corto y dinámico posible, así que van a descargar la configuración ya lista (¿Qué fácil no? 😉).

Descargar Configuración lista de W3 Total Cache en MEGA

B.- Subir la configuración lista de W3 Total Cache en tu sitio:

Para ellos nos vamos a misitio.com/wp-admin/admin.php?page=w3tc_general y abajo al final en Import / Export Settings - Import Configuration seleccionamos el archivo descargado anteriormente en MEGA y lo subimos haciendo clic en upload.



C.- Nos vamos a misitio.com/wp-admin/admin.php?page=w3tc_extensions y configuramos la extensión de CloudFlare que trae W3 Total Cache, acá básicamente lo que debemos es colocar los mismos datos tal cual como los tenemos en CloudFlare:

Para obtener tu API Key de CloudFlare ve a https://www.cloudflare.com/my-account



D.- Si usamos el Plugin SEO by Yoast simplemente lo activamos, también en misitio.com/wp-admin/admin.php?page=w3tc_extensions.

E.- Verifica que en misitio.com/wp-admin/admin.php?page=w3tc_general#minify siempre quede de la siguiente forma:



Nota: Si salvas y sigue sin aparecer activado (Enable) el Minify ve a CloudFlare, en la pestaña Perfomance settings desactiva HTML, vuelve a WordPress para activar el Enable en Minify y posteriormente vuelve a activar HTML en donde lo habías desactivado en CloudFlare.

Otras recomendaciones​

- Instala el Plugin Regenerate Thumbnails (Ruta después de instalado: Herramientas - Regn. Thumbnails - Regenerate All Thumbnails), luego de regenerar las imágenes elimina el plugin.

- Si usas Windows Instala RIOT para comprimir las imágenes que subas desde hoy a tu blog/web.

- Elimina todos los plugins que puedas y de los cuales puedas reemplazar funciones sin usarlos o usando código, por ejemplo, elimina los plugins para enviar post a Twitter y utiliza Twitterfeed, Feedburner o Hootsuite, para enviar post a Facebook RSS Graffiti, elimina el plugin Google XML Sitemaps, si ya enviaste el Sitemap no hace falta tenerlo instalado.

- Ya lo único que tienes que hacer es evaluar la nueva velocidad de tu sitio, en el sitio con WordPress ve arriba a Perfomance y borra el cache (Empty All Caches), posteriormente evalúa que tu sitio haya mejorado su puntuación en: https://developers.google.com/speed/pagespeed/insights/

- El aumento en la velocidad de un siitio variará siempre según el código del theme que estés utilizando.

Para descargar imágenes del tutorial: MEGA

Gracias por el aporte 🙂

recomiendas algun theme que ya de altos niveles de pagespeed por defecto? Gracias.

Muy buen tuto amigo lo estaba buscando desde hace rato eso de bajar el tiempo de carga pero tengo una duda ya que lo leí rápido y de una cuando decís de que hay que cambiar los DNS por los que nos da CloudFlare... La duda es si yo ya tengo cambio de DNS porque tengo dominio en 1and1 hacia otro hosting donde tengo instalado el sitio con worpress , si los cambio no se perdería el sitio o no pasa nada...esa es mi gran duda por lo demás excelente saludos.

Tomare al antes y después usando cloudflare con una de mis webs, en unos minutos edito 😛7:

Wow buen tutorial aunque aún así lo veo algo complejo :encouragement:

Aparte d hacerla mas rapida te brinda proteccion contra hackers y demas n por nada lo utilizan las grandes paginas buen tutorial

Enviado desde mi MB855 usando Tapatalk 2

alguien lo ha probado con resultados? Porque estuve siguiendo otro tuto basado en .htaccess y de mover los codigo del HEAD el Footer y fue peor la cosa. Ahora, este tuto lo he leido antes y segun lei no es recomendado para sitios con bajas visitas.

Idea?

epsilo99 dijo:

recomiendas algun theme que ya de altos niveles de pagespeed por defecto? Gracias.

Hacer clic para expandir...

Por defecto Newspaper que es de pago e Iconic One Theme que es gratis, yo personalmente uso Newspaper.

- - - Actualizado - - -

gustavoc dijo:

Muy buen tuto amigo lo estaba buscando desde hace rato eso de bajar el tiempo de carga pero tengo una duda ya que lo leí rápido y de una cuando decís de que hay que cambiar los DNS por los que nos da CloudFlare... La duda es si yo ya tengo cambio de DNS porque tengo dominio en 1and1 hacia otro hosting donde tengo instalado el sitio con worpress , si los cambio no se perdería el sitio o no pasa nada...esa es mi gran duda por lo demás excelente saludos.

Hacer clic para expandir...

No pasa nada, sólo apuntarás las DNS al por demás potente y seguro servidor de CloudFlare :encouragement:

- - - Actualizado - - -

webbber dijo:

alguien lo ha probado con resultados? Porque estuve siguiendo otro tuto basado en .htaccess y de mover los codigo del HEAD el Footer y fue peor la cosa. Ahora, este tuto lo he leido antes y segun lei no es recomendado para sitios con bajas visitas.

Idea?

Hacer clic para expandir...

Hola Webber, ¿dónde leíste el tutorial?, casi todo lo que escribí se basó en causa y efecto, ensayo y error, semanas de trabajo, pruebas personales, etc, no tienes que cambiar nada en el HEAD ni footer a menos que el theme lo requiera y eso ya es otra cosa, el .htaccess se modifica sí, pero automáticamente al activar y configurar W3 Total Cache, para eso existe la opción de respaldarlo si crees que algo saldrá mal.

También te invito a investigar la importancia para el SEO Onpage el tener un sitio con carga óptima, tenga 1 o 1.000.000 de impresiones diarias.

Todos los cambios que realices con este tutorial se pueden revertir, saludos 😉.

Excelente tutorial, me sirvió :encouragement:. Gracias [MENTION=28291]thezar[/MENTION]

no digo que dude de lo que escribes, pero aqui he leido guias similares, quiza no igual en configuracion, pero no me han funcionado a pesar de esta bien instalado o configurado el Cloudfare Funciona para cualquier sitio?

Y si, sé lo que seo onpage, obviamente no es facil de lograr.

thezar dijo:

Hola Webber, ¿dónde leíste el tutorial?, casi todo lo que escribí se basó en causa y efecto, ensayo y error, semanas de trabajo, pruebas personales, etc, no tienes que cambiar nada en el HEAD ni footer a menos que el theme lo requiera y eso ya es otra cosa, el .htaccess se modifica sí, pero automáticamente al activar y configurar W3 Total Cache, para eso existe la opción de respaldarlo si crees que algo saldrá mal.

También te invito a investigar la importancia para el SEO Onpage el tener un sitio con carga óptima, tenga 1 o 1.000.000 de impresiones diarias.

Todos los cambios que realices con este tutorial se pueden revertir, saludos 😉.

Hacer clic para expandir...

Muy buen aporte.. Muy útil. :encouragement:

Ya lo hice como dice el tuto pero no me sube el valor de Pagespeed. Cuando analizo me dice que debo corregir algunos valores y me muestra los que genera Minify al comprimir los HTML, no debo seleccionar HTML CSSS y JS en la opcion de Cloudflare?

Sabes de algún tutorial o post que hable de mejorar el pagespeed?

webbber dijo:

Ya lo hice como dice el tuto pero no me sube el valor de Pagespeed. Cuando analizo me dice que debo corregir algunos valores y me muestra los que genera Minify al comprimir los HTML, no debo seleccionar HTML CSSS y JS en la opcion de Cloudflare?

Hacer clic para expandir...

Edgar Colin dijo:

Sabes de algún tutorial o post que hable de mejorar el pagespeed?

Hacer clic para expandir...

he leido varios, los resultados dependo de muchos factores incluyendo los plugins, generalemente los errores a corregir es sobre optimizacion de imagenes, CSS y JS sobre todo si tienen parametros, pero me ha sido dificil encontrar estas lineas de codigo en los plugins,ademas que estuve usando W3TC y me dio problemas con varios plugins que dejaron de funcionar.

Lo que he hecho es instalar un plugin para cache, usar compresion Gzip con .htaccess y usar el jetpack de Wordpress.com q me permite alojar las imagenes en WP.com como un CDN, los resultados estan mejores pero no llego a un 90/100. No tengo experiencia en optimizar WP, pero como te dije antes los rsultados varian segun el tipo de sitio que tengas.

de 1,72 a 1,40 seg. muy buen tutorial :encouragement:

Excelente tutorial, me ha serivido de mucho 😀

Es excelente el tutorial, muchas gracias por la aportación. Solo me gustaría hacer una indicación, en específico sobre lo que dices sobre el plugin Google XML sitemaps. No recomiendo su desinstalación. Si ya enviaste el sitemap, y desinstalas el plugin, Google no podrá encontrarlo y si tu sitio web tiene nuevos contenidos, agregas secciones, o cualquier cosa, estos puede que no se envíen al indice de Google, porque no están incluídos en el sitemap.
Es bueno tenerlo activo para que cada material que vayas agregando se agregue al sitemap automáticamente, y sea más fácil su indexación.
Un saludo.

Hola amigos, he seguido el tutorial hasta "otras recomendaciones" y me ha ido genial. Deciros antes de nada que mi web era deplorable antes de aplicarlo. Os cuento la evolución:

• Antes de hacer nada tenía los siguientes parámetros: Movil 38/100 Ordenador 53/100 (ya, vergonzoso)
• Una vez configurado CloudFlare a pasado a: Movil 45/100 Ordenador 53/100 (tampoco gran cosa)
• Cuando he desactivado el WP Super Cache y he instalado y configurado el W3 Total Cache la cosa ha quedado en: Movil 64/100 Ordenador 74/100 (esto si me ha parecido un gran cambio)

Lo que no he podido realizar es el paso E del punto 2 ya que me aparece distinto el panel de Minify. ¿es muy importante esta parte?.

Bueno, muy agradecido por el tutorial. Voy a ver si sigo las últimas recomendaciones.

Saludos

EDITO: Me aperece lo siguiente: Minify via disk is currently disabled.

thezar dijo:

Por defecto Newspaper que es de pago e Iconic One Theme que es gratis, yo personalmente uso Newspaper.

Hacer clic para expandir...

Creo que es una pregunta un tanto tonta... pero bueno :| ¿Si cambio los dns en mi registrador de dominios... apuntarian a cloudflare... si mi sitio esta en banahosting :|

¿No dejaria de verse el sitio en el dominio? :| Eso no me cuadra a mi....