Tutorial: Optimización completa de tu web de Wordpress

Andres128 Seguir

Iota
Programador
Verificación en dos pasos activada
Desde
17 Feb 2012
Mensajes
2.390
wordpress-plugin-for-images.jpg

Hola Forobetanos, quería hacer un manual detallado para mantener tu web de Wordpress muchísimo mas ligero y rápido.

Quería iniciar con los PRO y CONTRA:

PROS
  • Los posibles visitantes que entran a tu web desde los buscadores se quedaran mas tiempo, así se disminuirá la Tasa de rebote o porcentaje de rebote.
  • Seamos sinceros gran mayoría de webs que cargan mas rápido siempre están de primeras en los resultados de Google, así que una web ligera sera mejor vista para los ojos de Google, así no se tengan tan buenos enlaces(Comprobado 100% por mi!).
  • Los costos monetarios de tu Hosting disminuirán o se mantendrán estables, pues hay bajo consumo de recursos.
  • A futuro una web rápida la considero como un excelente método de Seo onpage.

CONTRA
  • La optimización de la web es un poco tediosa, por ende hay que tener algo de paciencia :encouragement:
  • No le encuentro mas contras.



Sin mas empecemos con la guía:

PASO 1: "Usar un Wordpress Limpio"

Les recomiendo al contratar su host o instalarla en su Localhost creen una nueva instalación de wordpress limpia.

PASO 2: "Utilizar una plantilla adecuada y simple."

Con mi poca experiencia me he dado cuenta que a Google lo que menos le importa es el diseño o estilo de tu web, por ende siempre les recomiendo elegir una plantilla "simple":

Estilo de plantilla que NO recomiendo nunca comprar:

sshot_2_Copiar.jpg

¿Que sucede con este tipo de plantillas?
Por ejemplo en la anterior plantilla por cada entrada que publiques te va crear distintas miniaturas para los sectores de la web, es decir 4 imagenes.

Hagamos cuentas.

1 Entrada genera = 4 Imágenes
100 Entradas genera = 400 Imágenes :mad:

Cuando menos te des cuenta te vas a quedar sin espacio, ademas de las múltiples peticiones que causan 4 imágenes.

Recomendación:
Elijan una plantilla simple como por ejemplo:

slider_2_Copiar.jpg

PASO 3: "Utilizar los plugins que sean mas necesarios y NO estar instalándolos y probandolos."

Es de suma importancia que instales solamente los plugins que consideres que en verdad vas a utilizar, pues al tener una gran cantidad va a causar algunos daños en tu web que pueden verse a futuro o al instante:

  1. Muchas peticiones al servidor, por ende tu web se pondrá lenta y sobresaturada.
  2. Al instalar Plugins desconocidos es posible que se generen errores o conflictos con la plantilla o con otro plugin, de allí puede que tu web quede OFF o con serios problemas.
  3. Aunque no lo creas al instalar muchos plugin crean sus tablas en en tu base datos, luego al borrarlos, muchas de estas tablas no se eliminan por completo, dejando esa basura en tu base de datos.

Recomendación:
Si vas a usar un plugin pruebalo en una instalación extra de Wordpress en tu Localhost, luego si estas seguro colocalo en tu Web Online.

Aquí hay un manual para instalar Wordpress en tu Localhost con ayuda de Xampp:


Personalmente utilizo los siguientes plugins:

  1. Un plugin para Seo: Recomiendo (WordPress SEO by Yoast) - o All in One SEO Pack
  2. NO ES MUY NECESARIO, LA NUEVA VERSIÓN DE YOAST YA TRAE INCLUIDO ESTA FUNCIÓN.. Un plugin para Sitemap automatico de Google, esto para que indexe mas rapido las entradas: Google XML Sitemaps
  3. Plugin de Cache: Aquí pueden encontrar mas al respecto: WP Super Cache vs W3 Total Cache, yo uso W3 Total Cache

    Si no sabes por que es importante un plugin de Cache te invito a que leas la siguiente entrada:
    Por qué es imprescindible la cache en WordPress
  4. Plugin de defesa de ataques: https://wordpress.org/plugins/wordfence, este lo uso para evitar ataques de Fuerza bruta por terceras personas.

PASO 4: "Optimizar las imágenes a colocar en tu web."

Es bueno que las imágenes de toda la web, que pesen poco de "10kb - 30kb" por esto les recomiendo un software que nunca me ha fallado..

light_image_resizer.png

Hoy en día esta en la versión 4.6.3.0 y se llama Light Image Resizer antiguamente ‘VSO Image Resizer’ lastimosamente este programa es de pago, si alguna vez tienen la oportunidad de comprarlo no lo duden:

Web oficial:
Light Image Resizer

Sin embargo yo tengo la versión 3 viejita que es gratuita y cumple con su trabajo:

Aquí la pueden descargar: Subido por Andres128
https://www.dropbox.com/s/nl63u6zc5tnn0o9/vso_image_resizer_setup.exe?m=

Virustotal:
https://www.virustotal.com/en/file/...68faeb4bd53b1739dde2da95cac64cb3a0c/analysis/

Como se utiliza la versión 3:

Sencillo, luego de next..next instalar.

Abren el programa, seleccionan las imágenes le dan clic en abrir:

Luego: Elijen según sus preferencias y le dan clic en OK.
Cap1.jpg

Ejemplo de la reducción de peso del archivo:
Cambio.jpg

PASO 4: "Subir archivos a Host de Google."(Opcional)

El gran Google nos pone a su disposición sus servidores para almacenar nuestros archivos ".js", ".css", ".Html", etc.

Por ende podemos obtener el link directo y agregarlo a nuestra web. Esto nos permitirá evitar peticiones a nuestro servidor.

Actualmente hay algunas formas de subir archivos en Google:

  1. Google Sities, su tutorial lo encuentras aquí:
    Subir a Google Sities
  2. Google Code, su tutorial lo encuentras aquí:
    Cómo alojar gratis scripts y CSS

Simplemente remplazan el link q les da google por el de ustedes:

<script type='text/javascript' src='URL-GOOGLE' />
<link rel="stylesheet" type="text/css" href="URL-GOOGLE" />

COMO PROBAR SI HA FUNCIONADO TODO ESTO:

Yo estoy mas que seguro que Google comprueba miles de webs por su herramienta de test, de alli da su veredicto si esta apta para cursar los primeros resultados. Por ello pasen sus webs por la siguiente web: de 80/100 es bueno.

PageSpeed Insights

sshot_2.jpg

NOTA:
Sin mas esto fue todo, si tienen dudas comentenlas aquí, que con gusto les responderé.

Iré actualizando el post a medida de sus comentarios.


Hecho por Andres128 para Forobeta.
 
Última edición:

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
Les recomiendo al contratar su host o instalarla en su Localhost creen una nueva instalación de wordpress limpia.

El tutorial esta sencillo, precisamente esa sencillez es la que o hace sumamente valioso, puesto que va directo al grano sin dar tantas vueltas.

Me quedo esa duda, ¿a que te refieres con una instalación limpia?
 

ismadobe

Épsilon
Programador
Verificación en dos pasos activada
Desde
17 Oct 2013
Mensajes
911
Seria recomendable meter todos los css y js en un solo archivo?Obviamente los dos en archivos diferentes.
 

ismadobe

Épsilon
Programador
Verificación en dos pasos activada
Desde
17 Oct 2013
Mensajes
911
para nada, pesaria demaciado y duraria mas todavia la carga de la web.
Asi es, pero serian menos las peticiones que se harian al entrar a la web. No sé, tal vez seria cuestión de crear subdominios en cloudflare por ejemplo apuntando a la carpeta css y js para que al final el cdn se cargue todo ello y como este cacheada sea mas rapido al final la velocidad. Es cuestión de probar, fue algo que se me vino a la mente y he encontrado poca info sobre ello :( .
 

ZeroDesj

Eta
SEO
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Feb 2013
Mensajes
1.476
Asi es, pero serian menos las peticiones que se harian al entrar a la web. No sé, tal vez seria cuestión de crear subdominios en cloudflare por ejemplo apuntando a la carpeta css y js para que al final el cdn se cargue todo ello y como este cacheada sea mas rapido al final la velocidad. Es cuestión de probar, fue algo que se me vino a la mente y he encontrado poca info sobre ello :( .

ya tienes la respuesta, eso es lo que ago yo :p, y las peticiones no harian nada mas que gastar banda ancha. lo que mata a una web son las llamadas a la base de datos :p
 

Pompinchu

Pi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Desde
2 Jul 2013
Mensajes
5.475
ya tienes la respuesta, eso es lo que ago yo :p, y las peticiones no harian nada mas que gastar banda ancha. lo que mata a una web son las llamadas a la base de datos :p
Disculpen si interrumpo, pero soy algo novato y me causa curiosidad esto, ¿Podrían explicar algo mas largo esto? xD me parece genial no gastar mucha banda ancha, ya que empiezo el hosting con limitaciones por falta de dinero.
 

ZeroDesj

Eta
SEO
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Feb 2013
Mensajes
1.476
Disculpen si interrumpo, pero soy algo novato y me causa curiosidad esto, ¿Podrían explicar algo mas largo esto? xD me parece genial no gastar mucha banda ancha, ya que empiezo el hosting con limitaciones por falta de dinero.

si necesitas ahorrar banda ancha, sube los js y css a google code como dice en el tutorial, create un blogspot y todas las imagenes de tu template la subes a blogspot y editas el .css y cambias las url a los que te da blogspot y listo. cambia las dns de tu hosting por cloudflare.
 

micodi

Gamma
Programador
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
15 Jun 2014
Mensajes
237
Yo solo tengo :sorrow: 56 / 100
 

ZeroDesj

Eta
SEO
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Feb 2013
Mensajes
1.476
yo no ago tutoriales porque soy muy negado para escribir :c y me daria pena que se burlaran con tantas faltas ortograficas u.u, pero de conocimientos de pruebas y fallos si tengo :c
 

Andres128

Iota
Programador
Verificación en dos pasos activada
Desde
17 Feb 2012
Mensajes
2.390
El tutorial esta sencillo, precisamente esa sencillez es la que o hace sumamente valioso, puesto que va directo al grano sin dar tantas vueltas.

Me quedo esa duda, ¿a que te refieres con una instalación limpia?

Cuando digo de instalación limpia es descargar de WordPress › Español e instalarlo, he visto que algunas personas mueven archivos de instalaciones antiguas para webs nuevas y siempre queda uno que otro resuido que no ayuda.

Seria recomendable meter todos los css y js en un solo archivo?Obviamente los dos en archivos diferentes.
No uno por uno.

Disculpen si interrumpo, pero soy algo novato y me causa curiosidad esto, ¿Podrían explicar algo mas largo esto? xD me parece genial no gastar mucha banda ancha, ya que empiezo el hosting con limitaciones por falta de dinero.

Es algo fácil luego que tienes tus archivos finales de .css, .js los subes a google sities o google code y los linkeas a tu web, mira los links que deje

Yo uso el sitemap de Seo by yoast :)
El Google XML Sitemaps me parece mucho mas eficiente, yo desactivo el sitemap de Seo by yoast por q no me parece muy bueno.

Gracias por comentar.

Omg se me ha olvidado otra cosa, mas tarde la agrego.

Saludos a todos.
 

RaikND

Zeta
Social Media
Desde
10 Sep 2013
Mensajes
1.637
El tutorial esta sencillo, precisamente esa sencillez es la que o hace sumamente valioso, puesto que va directo al grano sin dar tantas vueltas.

Me quedo esa duda, ¿a que te refieres con una instalación limpia?

Yo creo que se refiere una instalación de nuevo, desde 0, sin tocar nada, ni a ver editado nada... lo que seria descargado de la pagina oficial y instalarlo tal y cual :encouragement:

Gracias por el tuto, lo pondre en pratica ya que estoy introduciendome en Wordpress
 

mryshariff

Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
25 Jul 2014
Mensajes
44
Muchas gracias! Muy buen tuto!

Pregunta son compatibles los plugins de cache con adsense? Como se maneja eso?
 
U

Usuario eliminado 34503

para nada, pesaria demaciado y duraria mas todavia la carga de la web.

En realidad es todo lo contrario, cada js y css que tenga la web bloquea el renderizado de la pagina (pantalla en blanco hasta que carga). El objetivo basico de cualquier combinación es reducir su numero y cargarlos en diferido o async (en el caso de los js ) y al final en caso de los css . El ideal como dije es que quede 1 de cada tipo css y js, pero esto es difícil debido que según la programación del theme algunos scripts deben cargarse si o si primero para que no quede roto , así que depende de interpretar la programación , adaptar lo necesario para dejar la menor cantidad de js y css posible. Luego claro esta se pueden subir a otro host o lo que prefiero yo si es que usas cloudflare , crear subdominios para estos que pasen a través de cloudflare de manera que se carguen como si estuvieran en cdn. En fin para dejar un Wordpress optimizado al maximo s e requiere de Mucho trabajo el cual hay que adaptarlo a cada theme en especial ( es imposible seguir los mismos pasos, solo mantenes los conceptos de lo que hay optimizar).

Por la sencilles es un buen Tuto :encouragement: , básico pero bueno. Yo les recomendaría para comprobar el antes y el después se basen en el análisis de varias herramientas no una sola. Les recomiendo: Page Speed, Pingdom Tools , GTmetrix , Metricspot .

Otro detalle mas es que con los pasos de este tutorial, parte de la optimizacion la van a perder en cualquier actualización del theme por lo que van a tener que repetir la seccion de los js y css. Y en cuanto a las imágenes yo prefiero programar (si es que no lo estan) los tamaños de los thumbnails para cada seccion de la pagina y reemplazar las llamadas a los mismos según corresponda (Tambien va haber que regenerar todas las imágenes ya existentes con algún plugin de único uso). Después instalar un plugin como Smush It para comprimir sin perdidas las imágenes . Esto requiere mas conocimientos de programacion pero automatiza todo el proceso de cara al futuro para no tener que andar redimencionando cada imagen antes de subirla .
 

kratosdes

Gamma
Redactor
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Oct 2013
Mensajes
197
ya tienes la respuesta, eso es lo que ago yo :p, y las peticiones no harian nada mas que gastar banda ancha. lo que mata a una web son las llamadas a la base de datos :p

hermano me podría explicar como se hace eso, soy muy novato en esto de rendimiento de la web
 

SheepHost

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Jun 2015
Mensajes
35
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Excelente aporte! :)
 
Arriba