Optimizar al máximo Wordpress Optimizar al máximo Wordpress


Página 1 de 6 123 ... ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 52
  1. #1
    Registro
    26-octubre-2017
    Ubicación
    Italia
    Edad
    23
    Mensajes
    49
    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.

    Optimizar al máximo Wordpress-vidadeperros-iniciando.png

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

    Optimizar al máximo Wordpress-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,
    Optimizar al máximo Wordpress-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)

    Optimizar al máximo Wordpress-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 por z0n4z; 13-nov-2017 a las 09:32

  2. #2
    Buenísimo aporte

  3. #3
    Registro
    07-enero-2017
    Ubicación
    Ciudad Juárez
    Edad
    23
    Mensajes
    1.772
    Gracias por el aporte

  4. #4
    Registro
    13-diciembre-2015
    Ubicación
    Valencia, España
    Mensajes
    471
    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!

  5. #5
    Registro
    26-octubre-2017
    Ubicación
    Italia
    Edad
    23
    Mensajes
    49
    Gracias por tu aporte al tutorial

    - - - Actualizado - - -

    Cita Iniciado por diasprico Ver Mensaje
    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

  6. #6
    Registro
    25-agosto-2013
    Ubicación
    Perú
    Edad
    25
    Mensajes
    4.544
    Lo implementare en mi blog haber que sucede.

  7. #7
    Registro
    26-octubre-2017
    Ubicación
    Italia
    Edad
    23
    Mensajes
    49
    Cita Iniciado por Carambel Ver Mensaje
    Lo implementare en mi blog haber que sucede.
    Recuerda hacer un respaldo, cuando se edita el css y el js siempre pueden pasar cosas malas

  8. #8
    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!!

  9. #9
    Registro
    26-octubre-2017
    Ubicación
    Italia
    Edad
    23
    Mensajes
    49
    Cita Iniciado por topper99 Ver Mensaje
    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!!
    Hola topper99 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.

  10. #10
    Cita Iniciado por z0n4z Ver Mensaje
    Hola topper99 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

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

    Un saludo!

Página 1 de 6 123 ... ÚltimoÚltimo


Temas similares

  1. Tutorial: Cómo optimizar tu web de Wordpress al máximo
    http://media02.hongkiat.com/wp-image-performance-plugins/wordpress-plugin-for-images.jpg Hola Forobetanos, quería hacer un manual detallado para...
    Respuestas: 54
    Último mensaje: 10-jul-2017
  2. Tutorial: Optimizar tu plantilla de WordPress al maximo
    Todos sabemos que Wordpress es la plataforma blogging por excelencia, la cual utilizan usuarios con conocimientos básicos, experimentados y...
    Respuestas: 45
    Último mensaje: 20-abr-2016
  3. Tutorial: Optimizar imágenes PNG al máximo con PNG Crush
    Muchas veces pensamos que cuando optimizamos las imágenes con PageSpeed o Smush.it ya no es posible optimizarlas más, ahora les mostraré un pequeño...
    Respuestas: 14
    Último mensaje: 04-jun-2014
  4. Optimizar skin al maximo para mejorar la carga
    Bueno estuve trabajando un poco en bajar el tamaño de carga de mi index, ya optmice todas las imagenes pero me doy cuenta que lo que mas pesa son...
    Respuestas: 12
    Último mensaje: 24-abr-2009

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •