如何缓存第三方图像 [英] How do I put in cache a third party image

问题描述

我正在运行一个网站，我正在尝试使用 LightHouse 在性能方面获得最高分

I'm running a website and I'm trying to get the best score in Performance using LightHouse

我确实将我创建的所有 png/svg/... 放入缓存中 (Cache-Control : public, max-age=31536000)

I did put in cache all the png/svg/... that I had created (Cache-Control : public, max-age=31536000)

但是所有来自第三方网站的图片都没有这些

But all Image comming from a third party website do not have any of that

这是我的问题:如何将这些图像放入缓存中?

我是这样称呼他们的(没什么特别的):

here is how I call them (nothing particuliar):

<img
    class="myclass"
    src="https://............."
    alt="my image"
    loading="lazy"
/>

我正在使用 vuejs，所以它在一个组件中

I'm using vuejs so it is in a component

我正在使用 nuxt 和 gcloud

I'm using nuxt and gcloud

如果您需要更多信息，请告知.

Do tell if you need more information.

推荐答案

当您的网站被托管时，您的浏览器应该自己缓存图像，而无需您真正做任何事情.在本地，它不会工作，但如果您托管它，您的浏览器会看到同一个图像被调用了两次，它只会从缓存中获取它(HTTP 协议正在处理这个 AFAIK).

When your website is hosted, your browser should cache the image by itself without you to really do anything. Locally, it won't work but if you host it, your browser will see that the same image is called twice and it will just grab it from the cache (HTTP protocol is handling this AFAIK).

在我的示例中，当我第一次到达页面时，我调用了 sav2.png，它下载了 4.6kB.然后，我软重新加载页面并使用缓存(没有额外调用后端).

In my example, I called sav2.png when I first arrived on the page, it downloaded 4.6kB. Then, I soft reloaded the page and it used the cache (no additional call to the backend).

那些图片没什么特别的，简单的 资源取自 ~/assets/images/sav2.png.

Those images are nothing special, bare simple <img> with the asset taken from ~/assets/images/sav2.png.

这是一个朋友的 WIP 网站:https://cyrielle-design.netlify.app/
这个使用 Cloudinary，但它确实具有相同的模式，即只获取一次图像，然后使用缓存进行后续刷新.

Here is a WIP website for a friend: https://cyrielle-design.netlify.app/
This one uses Cloudinary but it does have the same pattern of fetching the image only once and then using cache for subsequent refreshs.

这篇关于如何缓存第三方图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！