Tutorial: Optimizar al máximo Wordpress

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
Hola chic@s mi nombre es Robert y soy de Italia, en este tutorial vengo a hacer un tutorial para optimizar al máximo wordpress ya que en estos últimos días publique un post en "critica mi web" en el cual mostraba el rendimiento actual de mi pagina web tanto en el PageSpeed de google como en Pingdom. Los resultados que muestro ese día eran en móviles de 93/100 y en desktop 95/100, recibí unos 25 mensajes por privado de gente pidiendo ayuda y poniendo una frase que en realidad a mi en muchas ocasiones me da risa : " Es que mi themplate es la edición lite, free, gratis, etc".

Sr. les quiero aclarar que en mi web Vida De Perros - Tu web especializada uso la edicion free de colormag, que en mi opinion es un theme que se adapta a muchas necesidades.

Con este tutorial mi intencion no es insultar a nadie ni creerme mejor que nadie, hago este tutorial para demostrarle a todas las personas que para obtener buenos tiempos de carga no hace falta comprarle un theme a un "GURO DEL SEO" y pagar 200 dolares por un themplate.

vidadeperros iniciando.PNG

En esta imagen se ve el theme recién instalado sin ningún plugin , solo el demo importer.

vidadeperros 97 100.PNG

En esta imagen se ve mi theme ya optimizado. (13 plugins)

Para este tutorial necesitaremos 3 Pluggins:

1- Autoptimize
2-Imagify
3LiteSpeed Cache

Antes de iniciar el tutorial quiero que tengan muy en cuenta esto ( - = + ) esto me lo dijo la persona que me ayudo cuando comencé en esto del bloggin lo cual significa " MENOS ES MAS"

Recuerden que cada vez que editen un wordpress es recomendable hacer una copia de seguridad para tener una base de restauro por si jodemos el theme xDD!

Autoptimize

Instalamos el plugin lo abrimos, damos click en "mostrar opciones avanzadas, botón a la derecha superior" y seleccionamos las casillas:


¿Optimizar el código HTML? Si
¿Mantener comentarios HTML? No

¿Optimizar el código JavaScript? Si
¿Forzar JavaScript en <head>? No
¿Incluir JS incrustados? Si
Scripts a excluir de Autoptimize: Eliminamos todos y dejamos en blanco
¿Añadir bloques try-catch? No


¿Optimizar el código CSS? Si
¿Crear data:URIs de imágenes? Si
¿Quitar las Google Fonts? Si
¿Incluir CSS incrustados? Si
¿Incrustar y retrasar CSS? Mas adelante veremos que hacer con esto!!!!!!!
¿Combinar todos los CSS? No
CSS a excluir de Autoptimize: Eliminamos todos y dejamos en blanco

URL base de la CDN: Dejamos en blanco

Información de la caché No se puede tocar nada

Otras opciones

¿Guardar los scripts y el CSS unificados como ficheros estáticos? Si
¿También optimizar para usuarios conectados? Si

Guardamos cambios y vaciamos en cache, luego nos dirigimos a nuestra pagina web, damos click derecho y visualizamos código html de la pagina .

Abrimos el PageSpeed de google y examinamos,
render blocking.PNG

Ahora buscamos en el PageSpeed el error de el render blocking, si nosotros ponemos en mause sobre la url que se ve en el error se abrirá un cuadrado amarillo con la url entera, tenemos que copiar esa url y abrirla en el navegador. Cuando tengamos la url ya abierta, esto es el código css optimizado que genera autoptimize, tenemos que crear una carga critica del css de nuestra web.
Para hacer esto tenemos que copiar todo el código de la url anterior y dirigirnos a esta web :Critical Path CSS Generator - by Jonas Ohlsson

En esta web tenemos que poner los siguientes datos:

1- URL ( Respeta muy bien la url de tu web, si es HTTPS, HTTP, WWW O SIN WWW)
2-FULL CSS ( Eliminaremos las lineas que vienen por defecto en cuadro y pegaremos el codigo que sacamos de la url anterior)
3-Create Critical Path CSS ( le damos click al boton y generara un codigo css, el famoso codigo que nos quitara dolores de cabeza)

Cuando tengamos el nuevo codigo css optimizado tendremos que ir otra vez al autoptimize y en las opciones del css:

¿Incrustar y retrasar CSS? selecionamos la casilla para activarlo y en el cuadro de abajo pegaremos nuestro codigo css ya parcheado y optimizado.

Luego damos click en guardar y vaciar cache.


LiteSpeed Cache

Con este plugin hay que tener cuidado ya que en lo personal lo único que funciona bien es la parte del cache y lo configuraremos de esta forma:

Lo instalamos, en la barra lateral de tu wordpress saldrá su icono y le damos click.

Nos llevara en la pagina de gestión del plugin donde te permite purgar y optimizar la base de datos. Por ahora ignoraremos esta ventana.

Tendremos que irnos a ajustes y configuraremos por secciones:
Opciones generales:

Habilitar Caché de LiteSpeed ( Activamos)
TTL por defecto de la caché pública - (604800 segundos)
TTL por defecto de la caché privada - (1800 segundos)
TTL por defecto de la Página Principal - (604800 segundos)
TTL por defecto del Feed - (0 segundos)
TTL por defecto para páginas 404 - (3600 segundos)
TTL por defecto para página 403 - (3600 segundos)
TTL por defecto para página 500 - (3600 segundos)
Guardamos cambios

Cache:

Cachear usuarios con sesión iniciada (ON)
Cachear comentaristas (ON)
Cachear API REST (ON)
Cachear página de acceso (ON)
Cachear favicon.ico (ON)
Cachear recursos de PHP (ON)
Cache móvil (OFF)
Lista de User Agents móviles (NO COLOCAR NADA)
URIs cacheadas privadamente (NO COLOCAR NADA)
Caché del navegador (OFF)
Guardamos cambios


Purgar:

Purgar todo al actualizar (SI)

purga.PNG

Seleccionamos esas casillas.

URLs de purga programada ( DEJAMOS EN BLANCO)
Hora de purga programada ( EN BLANCO)
Guardamos cambios

Excluir:

No tocamos nada

Optimizar:

Todo off menos (Excluir JQuery que lo pondremos en on)

Ajustar:

Todo off

Medios:

Todo off

CDN:

Todo off

ESI:

Activar ESI (OFF)
Cachear barra de administrador (ON)
Cachear formulario de comentario (ON)
Guardar cambios

Avanzado:

No tocar nada

Depurar:

Dejar como viene

Clawler:

Dejar como viene

Recuerden que como ultima cosa, cada vez que hacen alguna modificacion vaciar la cache de autoptimize y de el litespeed.

Recomendaciones finales:

Yo uso para las imágenes el pluggin : Imagify , pero recuerden que la mejor manera para optimizar las imágenes es simplemente saber los px reales. Es decir si el contenedor del post mide 800px no subas esa imagen de 1200px para que wordpress la ajuste ya que pesa mucho más y no veras nada, la mejor manera es subir la imagen justa de px de esta manera ahorras espacio y optimizas mejor.

PD: En los últimos días me notificaron de que litespeed funcione bien tiene que estar instalado en el host, es decir que si tienes problemas con el pluggin tienes que desinstalarlo y buscar otro pluggin de cache a tu preferencia.

Muchos amigos usan el cachify o el wp super cache de automattic, también existen muchos otros como w3 super cache. Gracias por el apoyo recibido por la comunidad y si tienen algún problema no duden en dejar un comentario para ver si entre todos podemos ayudarlos o siempre pueden enviarme un mensaje por privado con la url de su blog/web y esta manera puedo ver especificamente cual es el error que les da
 
Última edición:

cerorank

Baneado
Zeta
Marketing
Verificación en dos pasos desactivada
Desde
7 Ene 2017
Mensajes
1.816
Edad
24
Crédito(s)
0
Puntos
-254
Gracias por el aporte :encouragement:
 

Diana Prieto

Gamma
Marketing
Verificación en dos pasos desactivada
Desde
13 Dic 2015
Mensajes
475
Crédito(s)
4
Puntos
6
Es bestial saber que el foro llega a países que no son hispano hablantes. Con respecto al aporte, bastante útil para muchos, solo un comentario: Cuidado con litespeed, este solo será útil en webs que estén en servidores basados con litespeed, de no estarlo resulta más eficiente utilizar un plugin como W3 Total Cache. ¡Muchas gracias y bienvenido! :)
 

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
Gracias por tu aporte al tutorial :encouragement::encouragement:

- - - Actualizado - - -

Es bestial saber que el foro llega a países que no son hispano hablantes. Con respecto al aporte, bastante útil para muchos, solo un comentario: Cuidado con litespeed, este solo será útil en webs que estén en servidores basados con litespeed, de no estarlo resulta más eficiente utilizar un plugin como W3 Total Cache. ¡Muchas gracias y bienvenido! :)
Gracias por tu aporte al tutorial :encouragement::encouragement:
 

Carambel

Ómicron
Social Media
Verificación en dos pasos desactivada
Desde
25 Ago 2013
Mensajes
4.583
Edad
26
Crédito(s)
1
Puntos
83
Lo implementare en mi blog haber que sucede.
 

topper99

Gamma
Verificación en dos pasos desactivada
Desde
18 Ago 2016
Mensajes
240
Crédito(s)
0
Puntos
268
Hola! Muy buena guía, la he guardado en favoritos para el futuro, y la estoy siguiedo paso a paso con un par de páginas que ya tengo creadas, pero tengo alguna duda:

En el primero de los puntos, cuando dices "el error de el render blocking", a mi no me sale un solo error con una URL, me salen 6 errores con 6 URLs distintas. Tengo que hacer el proceso que dices a continuación con las 6 URLs, una por una? o solo tengo que hacer el proceso con una URL? con cual?

Sería de mucha ayuda si explicases este punto un poco más detalladamente, ya que hasta ahí he seguido la guía sin problema, pero justo en ese punto me he atascado.

Sigo adelante con los siguientes puntos ;D

Un saludo y muchas gracias por la guia otra vez!! :encouragement::encouragement::encouragement:
 

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
Hola! Muy buena guía, la he guardado en favoritos para el futuro, y la estoy siguiedo paso a paso con un par de páginas que ya tengo creadas, pero tengo alguna duda:

En el primero de los puntos, cuando dices "el error de el render blocking", a mi no me sale un solo error con una URL, me salen 6 errores con 6 URLs distintas. Tengo que hacer el proceso que dices a continuación con las 6 URLs, una por una? o solo tengo que hacer el proceso con una URL? con cual?

Sería de mucha ayuda si explicases este punto un poco más detalladamente, ya que hasta ahí he seguido la guía sin problema, pero justo en ese punto me he atascado.

Sigo adelante con los siguientes puntos ;D

Un saludo y muchas gracias por la guia otra vez!! :encouragement::encouragement::encouragement:
Hola [MENTION=167897]topper99[/MENTION] es normal que salgan 6 , cuando activas autoptimize y haces la primera configuracion que pongo arriba el propio plugin elimina y te crear solo 1 problema de render block, le creas la carga critica como explico y listo. Si los cambios no se ven vacia el cache de autoptimize y espera 30seg en el PageSpeed.

Si tienes algun problema extra avisame por privado y deja un comentario aca en el post.
 

topper99

Gamma
Verificación en dos pasos desactivada
Desde
18 Ago 2016
Mensajes
240
Crédito(s)
0
Puntos
268
Hola [MENTION=167897]topper99[/MENTION] es normal que salgan 6 , cuando activas autoptimize y haces la primera configuracion que pongo arriba el propio plugin elimina y te crear solo 1 problema de render block, le creas la carga critica como explico y listo. Si los cambios no se ven vacia el cache de autoptimize y espera 30seg en el PageSpeed.

Si tienes algun problema extra avisame por privado y deja un comentario aca en el post.
en una de las páginas que lo he probado, desde el principio me ha salido uno solo, pero en otra me están saliendo 6 haga lo que haga... he probado incluso la pestaña de "Combinar todos los CSS", que dice que los combina todos en un solo archivo y que en tu guía dices que no hay que marcar... pero aún así me siguen saliendo 6 :witless:

Voy a seguir intentándolo, si encuentro solución ya entro al post y lo comento :encouragement:

Un saludo!
 

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
en una de las páginas que lo he probado, desde el principio me ha salido uno solo, pero en otra me están saliendo 6 haga lo que haga... he probado incluso la pestaña de "Combinar todos los CSS", que dice que los combina todos en un solo archivo y que en tu guía dices que no hay que marcar... pero aún así me siguen saliendo 6 :witless:

Voy a seguir intentándolo, si encuentro solución ya entro al post y lo comento :encouragement:

Un saludo!
Pues se ve que el themplate que usas carga archivos .js o .css de una forma distinta, de todas maneras para hacer la carga critica de autoptimize la cual te mejorara el rendimiento de la pagina tienes que buscar la url que tenga la estructura de https://miweb/wp-content/cache/autoptimize/css/autoptimize_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.css"

En las paginas que ya mejoraste como fue el cambio en el pagespeed? Comenta los resultados :)
 

visitardubai

Pi
Marketing
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
27 Feb 2013
Mensajes
8.061
Crédito(s)
14
Puntos
2.598
Muy buen tutorial, esto me hará ser más veloz en mis sitios webs y blogs.

Lo que no se es por que nunca consigo 100/100
 

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
Muy buen tutorial, esto me hará ser más veloz en mis sitios webs y blogs.

Lo que no se es por que nunca consigo 100/100
[MENTION=41253]visitardubai[/MENTION] Lo mio fue casi 1 mes leyendo y buscando mejores maneras y lo mejor que saque fue 97/100 pero vamos que tener mas de 90 ya es un lujo xDD
 

Grimmjow

Pi
Diseñador
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 Ene 2016
Mensajes
9.644
Crédito(s)
4
Puntos
1.661
Excelente, gracias por el tuto! :encouragement:
 

AndreayYap

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
20 Ene 2013
Mensajes
3.299
Crédito(s)
0
Puntos
1.207
[MENTION=188193]z0n4z[/MENTION] Muy buen tutorial. Pero lo estoy haciendo y me da estos errores: WARNING: LiteSpeed cache is disabled. The functionalities here can not work.

ERROR 6000: Notice: This plugin requires a LiteSpeed Server with the LSCache Module enabled. If you are unable to change your server stack, please contact your hosting provider to request the required changes. This plugin will NOT work properly.
 

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
[MENTION=188193]z0n4z[/MENTION] Muy buen tutorial. Pero lo estoy haciendo y me da estos errores: WARNING: LiteSpeed cache is disabled. The functionalities here can not work.

ERROR 6000: Notice: This plugin requires a LiteSpeed Server with the LSCache Module enabled. If you are unable to change your server stack, please contact your hosting provider to request the required changes. This plugin will NOT work properly.
Tu hosting no trabaja bien con litespeed, desactiva y elimina el plugin para ver si te da los mismos errores
 

z0n4z

Beta
Redactor
Verificación en dos pasos desactivada
Desde
26 Oct 2017
Mensajes
49
Edad
25
Crédito(s)
0
Puntos
10
Vale, ya lo hice. Qué haría en este caso? Utilizo WP Rocket?
[MENTION=38042]AndreayYap[/MENTION] Pues olle apartir de este punto se complica en el sentdo de conseguir un sistema de cache que se adapte a tu host. El wp rocket tiene buena fama pero te servira a ti? intenta con wp super cache de automattic, es un buen plugin y muy ligero.
 

Arriba