Tutorial: Melhorando a velocidade de carregamento de imagens com cache no navegador

  • Autor Autor Toranpu
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Toranpu

Toranpu

Alfa
Usuário com poucas negociações! Use sempre o saldo do 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
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Toranpu disse:
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 .
Clique 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 disse:
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 .
Clique 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:

Inserir CODE, HTML ou 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>
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

E
Melhorando a velocidade de carregamento em site feito com DIVI
Respostas
3
Visitas
181
unixlose
U
eruizr82
Melhorando a velocidade de carregamento sem tirar o código do adsense
Respostas
6
Visitas
185
Birdman
Birdman
N
Melhorando a velocidade de carregamento da sua página web
Respostas
2
Visitas
393
NitoCarval
N
D
Melhorando a velocidade de carregamento no WordPress: Recomendações
Respostas
10
Visitas
714
dasilvadanij
D
E
Melhorando a velocidade de carregamento de sites: Que plugin recomendam?
Respostas
6
Visitas
437
dimarso13
D
Voltar
Topo