Tutorial: Mejorando la velocidad de carga de imágenes con caché en el navegador

  • Autor Autor Toranpu
  • Fecha de inicio Fecha de inicio
Toranpu

Toranpu

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
El almacenamiento en caché en el navegador del visitante es una característica importante para proporcionar una experiencia de navegación rápida a los lectores. Para hacer eso, se tiene que especificar el tiempo de vencimiento del archivo.

Utilizamos el parámetro e. Por ejemplo, s1600-e120 almacenará en caché una imagen durante 120 días.

Nota: si colocan menos de 120 días seguirá apareciendo el mensaje de caché eficaz en PageSpeed Insights .

Ejemplo:

Imagen sin caché:
https://toranputest.blogspot.com/2020/07/imagen-sin-cache.html
https://4.bp.blogspot.com/-KafFLEUd...HQ/s1600/d7c1a9ecb740a66820505e9dc8314f6d.jpg
sin_cache.webp


Imagen con caché:
https://toranputest.blogspot.com/2020/07/imagen-con-cache.html
https://4.bp.blogspot.com/-KafFLEUd...600-e120/d7c1a9ecb740a66820505e9dc8314f6d.jpg

con_cache.webp
 
Toranpu dijo:
El almacenamiento en caché en el navegador del visitante es una característica importante para proporcionar una experiencia de navegación rápida a los lectores. Para hacer eso, se tiene que especificar el tiempo de vencimiento del archivo.

Utilizamos el parámetro e. Por ejemplo, s1600-e120 almacenará en caché una imagen durante 120 días.

Nota: si colocan menos de 120 días seguirá apareciendo el mensaje de caché eficaz en PageSpeed Insights .
Hacer clic para expandir...

👍 Excelente crack, solo para entendidos!
 
Wao, eso no me sabia, realmente agradecido. 🙂
 
Vaya esto no lo sabia. Lo pondré a prueba ahora mismo para la versión nueva de unas de mis plantillas. 😎

Muchas gracias por el tutorial. 😍
 
1603810338512.webp


Buen aporte, no tenia idea de que era posible. 😎 Aplicara para Wordpress?
 
Muy buena crack. Lo probare .gracias por el aporte sigue adelante
 
Excelente dato, y donde mas se puede saber de esos valores, ya que el que nos cabas de enseñar es el de cache, si colocamos /w380-h213-p-k-no-nu/ w=width / h=height pero y los otros valores que también aparecen, que significan o donde se puede encontrar más información ya que estube googlendo después de ver tu aporte y aun no encuentro.
 
Toranpu dijo:
El almacenamiento en caché en el navegador del visitante es una característica importante para proporcionar una experiencia de navegación rápida a los lectores. Para hacer eso, se tiene que especificar el tiempo de vencimiento del archivo.

Utilizamos el parámetro e. Por ejemplo, s1600-e120 almacenará en caché una imagen durante 120 días.

Nota: si colocan menos de 120 días seguirá apareciendo el mensaje de caché eficaz en PageSpeed Insights .
Hacer clic para expandir...
Todo esto en el caso de las plantillas de ZK como seria la implementacion, alguna idea ya que la linea del código es:

Insertar CODE, HTML o PHP: 
<b:with value='data:post.featuredImage ? data:post.featuredImage : data:imgDefault' var='img'>
          <b:with value='{big: (data:skin.vars.config_ratio_post ? resizeImage(data:img,900,&quot;16:9&quot;) : resizeImage(data:img,900)), medium: (data:skin.vars.config_ratio_post ? resizeImage(data:img,500,&quot;1:1&quot;) : resizeImage(data:img,500)), small: (data:skin.vars.config_ratio_post ? resizeImage(data:img,380,&quot;16:9&quot;) : resizeImage(data:img,300))}' var='imgSize'>
            <b:with value='data:this.isGrid ? data:imgSize.small : (data:this.isClassic ? data:imgSize.big : (data:this.isPortfolio ? data:imgSize.medium : resizeImage(data:img,225,&quot;1:1&quot;)))' var='imgPost'>
              <img SRC='data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=&apos;http://www.w3.org/2000/svg&apos;%20viewBox=&apos;0%200%20300%20168&apos;%3E%3C/svg%3E' class='lazy img-change' expr:alt='data:post.title' expr:data-src='data:imgPost'/>
              <noscript>
                <img expr:alt='data:post.title' expr:src='data:imgPost'/>
              </noscript>
            </b:with>
          </b:with>
        </b:with>
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

E
Mejorando la velocidad de carga en web hecha con DIVI
Respuestas
3
Visitas
181
unixlose
U
eruizr82
Mejorando la velocidad de carga sin quitar el código de adsense
Respuestas
6
Visitas
185
Birdman
Birdman
N
Mejorando la velocidad de carga de tu página web
Respuestas
2
Visitas
393
NitoCarval
N
D
Mejorando la velocidad de carga en WordPress: Recomendaciones
Respuestas
10
Visitas
714
dasilvadanij
D
E
Mejorando la velocidad de carga de sitios web: ¿Qué plugin recomiendan?
Respuestas
6
Visitas
437
dimarso13
D
Atrás
Arriba