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

Toranpu · 17 Jul 2020

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

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

Hugo7 · 17 Jul 2020

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 .

Ejemplo:

Imagen sin caché:
https://toranputest.blogspot.com/2020/07/imagen-sin-cache.html
https://4.bp.blogspot.com/-KafFLEUd...HQ/s1600/d7c1a9ecb740a66820505e9dc8314f6d.jpg
Ver el archivo adjunto 311065

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

Ver el archivo adjunto 311067

👍 Excelente crack, solo para entendidos!

Souhiro · 2020-08-14T21:32:12-0500

Wao, eso no me sabia, realmente agradecido.

Karasu · 18 Oct 2020

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. 😍

Toranpu · 27 Oct 2020

Hugo7 dijo:
👍 Excelente crack, solo para entendidos!

Souhiro dijo:
Wao, eso no me sabia, realmente agradecido.

Karasu dijo:
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. 😍

De nada. Que les sea útil.

Contreras Business · 27 Oct 2020

Buen aporte, no tenia idea de que era posible. 😎 Aplicara para Wordpress?

edy019 · 27 Oct 2020

Muy buena crack. Lo probare .gracias por el aporte sigue adelante

leit0s · 27 Abr 2021

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.

leit0s · 29 Abr 2021

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 .

Ejemplo:

Imagen sin caché:
https://toranputest.blogspot.com/2020/07/imagen-sin-cache.html
https://4.bp.blogspot.com/-KafFLEUd...HQ/s1600/d7c1a9ecb740a66820505e9dc8314f6d.jpg
Ver el archivo adjunto 311065

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

Ver el archivo adjunto 311067

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>