[Resuelto] Optimizacion y carga imagenes Webp  

Página 1 / 2
 
Fernando
 Fernando
Usuario activo

Hola,

Soy nuevo en el foro y aún no sé muy bien como utilizarlo, me han remitido aqui desde un ticket, a ver si me podeis ayudar.

Sigo haciendo pruebas para optimizar al maximo mi sitio web "https://fermartinezphoto.com", entre otros que tengo contratados con webempres. Sé que es algo complejo y requiere bastantes conocimientos, pero me gustaria que me ayudarais a acelerar el Page Speed de mi pagina, en este caso tengo un problema con la carga de imagenes Webp, estoy usando el plugin Imagify, ya que comprimido todas las imagenes y verificado que están correctamente cargadas en la carpeta "uploads";, el problema es que parece no cargarlas en el navegador, ni Firefox ni Chrome, ya que en ambos el Page Speed me da la misma advertencia de que "no está usando la version webp" de esas imagenes. En el plugin Imagify he probado tanto las opciones "Mostrar imágenes en formato webp en el sitio" - "Usar reglar rewrite" y "Usar etiquetas "Picture", en este ultimo poniendo la direccion url "https://fermartinezphoto.com" de CloudFlare ya que es mi CDN, en ambas opciones da el mismo resultado, es decir, ninguno, la imagen Webp generada parece que no es cargada.

Me podeis aconsejar o guiar en qué puedo hacer o qué puede estar pasando? Para poder solucionar este problema que se traduce en un mal resultado en PageSpeed con un tiempo de carga superior a 1seg en ese punto

Gracias de antemano

Fer

Respondido : 27/10/2020 9:24 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Fernando,

Intenta con la siguiente configuración tal cual te lo comparto:

image

Esto es directamente dentro de imagify, en las opciones que nos comentas, y un paso muy importante que veo en tu web no esta mostrando las imágenes de ninguna galería en los enlaces de mi trabajo, esto debe estar ocurriendo por que al cambiar la configuración a webp autoptimize no permite la carga de estas imágenes para corregirlo ingresa a las configuraciones del mismo y en la pestaña de imágenes desactiva la carga diferida.

image

Te adjunto una captura del enlace al que me refiero: https://fermartinezphoto.com/bodas/

image

Nos comentas como te va, un saludo 🖐️ 🖐️ 

Respondido : 28/10/2020 1:13 am

Cursos Gratuitos WordPress

Fernando
 Fernando
Usuario activo

@argenis

Hola, mil gracias por la pronta respuesta y la ayuda. He probado eso que comentas, de hecho ya lo habia probado porque he probado todo lo que se me ocurre, y no funciona, los resultados en PagaSpeed siguen siendo iguales, muy bajos, puedes comprobarlo por ti mismo haciendo la prueba en el sitio "http://fermartinezphoto.com/", desactive ayer la opcion de trabajo con CDN que usaba CloudFlare y cambiado los DNS en webempressa para que todo apunte a los servidores, he verificado que la DNS ya se ha propagado bien, pero aun así tengo un tiempo pésimo, no entiendo por qué, ademas, los dos mensajes mas "graves" y que mas penalizan, del orden de mas de 1seg cada uno es la carga de imágenes, que no consigo que se haga con webp, y el tiempo de respuesta del servidor, cosa que entiendo que no depende tan directamente de mí, la web es muy sencilla y nada recargada para tener tiempos tan malos, incluso las fotos están bastante optimizadas sin la version webp ya (soy fotografo y algo de todo eso sé), pero con la versión webp deberia incluso mejorar.

Respondido : 28/10/2020 6:19 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

@fernandomarmiyahoo-es

Hola Fernando, 

En tu web veo que las imagenes cargan en formato webp, adjunto captura.

Captura de Pantalla 2020 10 28 a la(s) 0.24.52

La captura anterior corresponde al código fuente de la página familia.

Respecto a las pruebas de optimización y rendimiento, he testeado tu sitio en pingdom tools y en GT Metrix obteniendo muy buenos puntajes:

https://tools.pingdom.com/#5d5b798244800000

https://gtmetrix.com/reports/fermartinezphoto.com/lpozIJmQ

Lo único que haría falta seria agregar los llamados Header Expires, para ello accede a tu cuenta de cPanel -> Incio -> Administrador de archivos -> /public_html/raiz_de_tu_web/, da click derecho sobre el archivo .htaccess, revisa si hay algún bloque de código que inicie y termine de la siguiente manera:

<IfModule mod_expires.c>
 </IfModule>

De ser así, selecciona todo ese bloque y reemplázalo por:

<IfModule mod_expires.c>
  ExpiresActive On
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Si tu archivo htaccess no contiene dicho bloque entonces pega el código que te proporcioné al final de dicho archivo (htaccess)

Saludos.

Respondido : 28/10/2020 6:44 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Fernando
 Fernando
Usuario activo

@bulmaro-webempresa

Gracias a todos por las respuestas y las ayudas

He probado eso que decis de modificar el "Header Expires" y no hay ningun cambio en los tiempos, podeis comprobarlo tanto en Pindom como en GTMetrix, de hecho es uno de los puntos a mejorar que en ambos me vuelven a indicar. Coloqué el codigo segun me indicasteis en el .htaccess. Pero no parece cambiar nada.

Tengo varias preguntas al respecto de todo esto, relacionadas con los resultados que me dan los analizadores de velocidad:

1- Deciais que mi web carga las imagenes webp, pero los analizadores siguen diciendo que no, todos muestran resultados con las imagenes en JPG, y de hecho se quejan de eso en el analisis, sigo sin conseguir que eso funcion.

2- En los resultados siempre se menciona algo relacionado con GoogleFonts, que tampoco sé resolver. Algo como "

 
 

3- Tambien me salta un indicador relacionado con Autoptimize. Algo como:

 

https://fermartinezphoto.com/wp-content/cache/autoptimize/css/autoptimize_single_b3361b900a650b82a66312deaecc43fc.css

https://fermartinezphoto.com/wp-content/cache/autoptimize/js/autoptimize_14635ce834a0131736aaae92b6699b1a.js

4- En GTMatrix me aconseja un CDN, estaba usando el de CloudFlare gratuito, y ayer justo lo quité para hacer pruebas de velocidad, no sé si es bueno o no la verdad, ni entiendo mucho de como configurarlo con mi web si fuera necesario. Mi sitio es bastante sencillo, no he tocado nada de codigo, es mas casi un portfolio, está hecho con GeneratePress y Elementor, que entiendo que son ligeros. pero me está dando un poco guerra optimizarlos para una carga mas rapida y tener mejores resultados en PageSpeed

Gracias de antemano por todo

Fer

Esta publicación ha sido modificada el hace 4 semanas por Gerard Martínez
Respondido : 28/10/2020 11:33 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fernando .

Para el tema de la imagenes utiliza el siguiente plugin, eliminas el que tienes ahora y utiliza este:

-> https://es.wordpress.org/plugins/webp-express/

Ten en cuenta que todos los navegadores no son compatibles con ese formato y los navegadores que no lo soporten seguirán mostrando las imagenes en formato jpg o png

Aparte de el plugin de webp utiliza también el plugin optimizador.io paar comprimir la s imagenes

-> https://optimizador.io/

En los resultados siempre se menciona algo relacionado con GoogleFonts, que tampoco sé resolver.

Se refieren a las fuentes ( tipo de letra ), esto no se puede solucionar ya que carga externamente, es decir carga desde los servidores de Google Fonts y al ser externo no se puede realizar ninguna mejora.

 

.- Accede a tu cuenta de cPanel -> configurar PHP 

.- En el bloque " Parámetros PHP configurables " selecciona los valores máximos de todas las celdas 

Captura de pantalla 2020 10 28 a las 13.04.35

 

También me salta un indicador relacionado con Autoptimize. 

Son los archivos de Cache de Autoptimize, estos tienen que estar ya que son los que sirven los archivos unificados de CSS y JS

 

me aconseja un CDN,

Un CDN es bueno por ejemplo si tu web tiene información que quieras que sea visible para todo el mundo, es decir está enfocado a todo el público y no solo a España.

El CDN lo que haces es repartir las imagenes o archivos estáticos desde diferentes servidores repartidos por todo el mundo y sirven esos datos desde el servidor más cercano a la IP desde la que se conecta el usuario.

 

No tienes que preocuparte mucho por los resultados de Page Speed estos no afectan a el posicionamiento de tu Web, no son tomados en cuenta para eso, si que te dan una vision de puntos que puedes mejorar pero muchos de ellos no se pueden ay que son externos como Google Fonts o implican cambios en la web que o bien terminaría cayendo o ralentizando la carga como puede ser lo de la caché autoptimize  

 

Por ejemplo revisa los resultados de esta empresas que gastan un dineral para tener bien optimizadas sus web incluso tiene departamentos de optimización:

https://developers.google.com/speed/pagespeed/insights/?hl=es&url=https%3A%2F%2Felcorteingles.com&tab=desktop

https://developers.google.com/speed/pagespeed/insights/?hl=es&url=https%3A%2F%2Felmundo.es&tab=desktop

 

Un saludo

Respondido : 28/10/2020 12:18 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Fernando
 Fernando
Usuario activo

@pepesoler

Mil gracias, voy a ponerme con ello y os voy contando!!!

Saludos

Fer

Respondido : 28/10/2020 12:55 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fernando,

De acuerdo, nos comentas como ha ido todo

Un Saludo

Respondido : 28/10/2020 1:09 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Fernando
 Fernando
Usuario activo

Hola, he seguido todos vuestros consejos y recomendaciones y tanto la puntuacion en PageSpeed, GTMetrix etc, no ha variado en nada, sigue dandome los mismos avisos, y sigue sin cargar las imagenes webp ni utililizando en plugin recomendado por vostros y configurandolo como indica en las advertencias del propio plugin que dice que el servidor no admite reglas en .htaccess

Me desespera ya un poco porque no sé que mas pueda hacer que esté en mi mano

Gracias

Fer

Respondido : 29/10/2020 1:11 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fernando,

Realizando una análisis con Lighthouse (este es el complemento del cual se basa google para mostrar los resultados) veo que tus imágenes si se están convirtiendo a webp

image

 

image

 

image

Sin embargo veo que las imágenes de tu home no se estas convirtiendo, como prueba verifica si solo estas imágenes que tienes en el slider al convertirlas de forma manual y subirlas se toma el cambio

Puedes probar convertir las imágenes en el siguiente enlace -> Contenido solo visible a usuarios registrados

Puedes descargarte la herramienta de análisis tanto para chrome o mozilla

Nos comentas como ha ido todo

Un Saludo

 

Respondido : 29/10/2020 2:15 pm

Cursos Gratuitos WordPress

Fernando
 Fernando
Usuario activo

Hola,

He estado realizando pruebas estos días, siguiendo vuestros consejos, leyendo también en foros, webs, etc. y he llegado a estas conclusiones y resultados, que ya que pregunté pues os comparto a ver qué pensáis.

* He conseguido mejorar muchisimo la puntuación en GTMetrix, Pingdom, Page Speed, etc, gracias a la siguiente configuracion:

- He usado el plugin Smush para optimizar imagenes, me gusta bastante mas que Optimizer.io de webempresa, por todo su interface facil de entender y configurar, ofrece resultados y estadisticas, etc, en general me parece mejor. Una vez comprimidas las imágenes lo he desinstalado para no tener la instalacion recargada, ya que no voy a subir mas imagenes de momento

- Plugin de Imagenes. Imagify, he verificado que si funciona y sirve las imágenes en formato webp para navegadores compatibles, me gusta mas el interface, la forma de tratar la biblioteca de medios, etc, tambien me parece mas facil de configurar.

- El problema que tenía y sigo teniendo, es que la Home está maquetada con Elementor y parece que el Slider no admite la carga webp, al menos ya sé cual es el problema y no me preocupa excesivamente ya que el resto del sitio sí que realiza la carga webp sin problema con Imagify, marcando la opcion "usar etiquetas picture"

- Plugins adicionales para caché, minify y combine, optimización: Asset CleanUp: Page Speed Booster, Async JavaScript (en opcion Async, mejora a Defer), WP Fastest Cache

Tras un montón de pruebas es la configuración que mejor me ha funcionado y mejores resultados obtengo en las métricas

Si tenéis algun comentario, consejo adicional, lo que sea, es más que bienvenido!

Gracias de antemano

Fer

Respondido : 04/11/2020 8:38 am
Pepe me gusta
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fernando.

Genial !!! me parece una buena configuración, cada plantilla es distinta y en estos casos lo mejor es ir probando varias configuraciones hasta encontrar lo que mejor se adapte.

 

Gracias por compartir seguro que a otros usuarios les puede venir bien.

 

Un saludo

Respondido : 04/11/2020 9:05 am
Fernando me gusta

wpdoctor-revisa-la-salud-de-tu-wordpress

Fernando
 Fernando
Usuario activo

Una "última" cuestión, jejeje. Me aparece en el Page Speed y LightHouse, lo siguiente, que no sé la manera de resolverlo. Disculpad pero en este ámbito mis conocimientos son algo limitados

Preload key requests: Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load. Learn more.

URL
Potential Savings
…fonts/generatepress.woff2

(fermartinezphoto.com)

 

Y por cierto, me sigue marcando todo el rato, Reducir el tiempo de respuesta inicial del servidor, pero entiendo que todo está bien configurado ahora y el servidor de webempresa está funcionando bien, pero me marca siempre esa opcion

 

Respondido : 04/11/2020 1:14 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

@fernandomarmiyahoo-es

Hola Fernando, 

Veo que GTMetrix te da una puntuación de 100% y Yslow un puntaje de 90%, lo que considero excelente. Para corregir lo que nos comentas tendrías que identificar la linea donde se hace la llamada a ese fichero y agregar manualmente el rel="preload", aunque no lo considero que te sea perjudicial, vaya es un solo archivo. 

Respecto al "Reducir el tiempo de respuesta inicial del servidor" no veo que aparezca este aviso, ¿Podrías compartirnos la url del sitio donde si te aparece o una captura de pantalla del mismo? 

Saludos 🙂

Respondido : 04/11/2020 1:31 pm
Fernando me gusta

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Fernando
 Fernando
Usuario activo

@bulmaro-webempresa

 

Mil Gracias!!!

 

1- Con respecto a la primera cuestion, rel="preload", como digo, mis conocimientos en eso son reducidos, donde debo poner ese codigo que indicas, porque realmente es donde más penaliza el Page Speed, me pone mas de 2 seg, y si puedo optimizar eso seria genial

 

2- Mensaje que me da siempre con respecto al servidor:
 
Reducir el tiempo de respuesta inicial del servidor
 
Mantén breve el tiempo de respuesta del servidor para el documento principal, puesto que todas las demás solicitudes dependen de él. Más información
<img class="lh-audit__stackpack__img" src="data:;base64," alt="WordPress" />Los temas, los complementos y las especificaciones del servidor afectan al tiempo de respuesta. Puedes buscar un tema más optimizado, seleccionar un complemento de optimización o actualizar tu servidor.
URL
Duración
820 ms
Respondido : 04/11/2020 1:45 pm
Página 1 / 2