在 html 中向图像标签添加宽度和高度属性可提高性能
Performance boost from adding width and height attributes to image tags in html
我维护着一个 Django 论坛,用户可以在这里为彼此(或整个 public)留下消息和照片。把它想象成 9gag 的对应物。
我通过 GTmetrix 对我网站的性能进行了基准测试。它对我评价很低的一件事是图像尺寸的特殊性。具体来说,它建议我在所有 <img>
标记中添加图像宽度和高度,这样浏览器就可以更轻松地呈现页面,最大限度地减少重新绘制。
所有上传的图片都会动态调整大小并保存在数据库中,并保持其纵横比。我将它们的高度和宽度包含在模板上的 <img>
标签中的唯一方法是,如果我将它们的宽度或高度也保存在数据库中。或者,如果我在提供它们以供查看时读取它们的宽度和高度。
无论哪种方式,我都需要一些计算能力。似乎这里的权衡是在服务器的计算时间与用户的浏览器之间进行的。 IE。服务器端或客户端。我确实想为我的用户优化体验,而且我的服务器资源还不错。
每隔几秒就会有一张新图片上传到我网站的 public 区域。你可以说它几乎是网站的主要内容。有没有人有通过在模板中包含图像宽度和高度来大幅提升性能的经验?我很想听到一些关于它的建议,所以我可以继续它(或放弃这个想法)。
提前致谢。
如果您知道网站的精确布局,则可以在用户上传时调整图像大小并使用 css 指定尺寸。
如果您的网站是响应式的并且图像根据设备尺寸缩放,那么我不会太担心这个优化建议。 Twitter scores an F (0) for this on GTmetrix,分别具有 D 级和 B 级,但加载时间仍然比大多数网站快。
Hassan 建议的事后思考:
我的建议是关注 Django 的内部结构(例如缓存模板、使用内存缓存等),然后优化静态内容的传送(例如 Nginx 中的压缩)并配置您的 Web 服务器的缓存政策。这是您会注意到性能大幅提升的地方。最后,如果您有大量的页面浏览量,您可能需要考虑在您的网络服务器前面部署 Varnish or Squid。
我维护着一个 Django 论坛,用户可以在这里为彼此(或整个 public)留下消息和照片。把它想象成 9gag 的对应物。
我通过 GTmetrix 对我网站的性能进行了基准测试。它对我评价很低的一件事是图像尺寸的特殊性。具体来说,它建议我在所有 <img>
标记中添加图像宽度和高度,这样浏览器就可以更轻松地呈现页面,最大限度地减少重新绘制。
所有上传的图片都会动态调整大小并保存在数据库中,并保持其纵横比。我将它们的高度和宽度包含在模板上的 <img>
标签中的唯一方法是,如果我将它们的宽度或高度也保存在数据库中。或者,如果我在提供它们以供查看时读取它们的宽度和高度。
无论哪种方式,我都需要一些计算能力。似乎这里的权衡是在服务器的计算时间与用户的浏览器之间进行的。 IE。服务器端或客户端。我确实想为我的用户优化体验,而且我的服务器资源还不错。
每隔几秒就会有一张新图片上传到我网站的 public 区域。你可以说它几乎是网站的主要内容。有没有人有通过在模板中包含图像宽度和高度来大幅提升性能的经验?我很想听到一些关于它的建议,所以我可以继续它(或放弃这个想法)。
提前致谢。
如果您知道网站的精确布局,则可以在用户上传时调整图像大小并使用 css 指定尺寸。
如果您的网站是响应式的并且图像根据设备尺寸缩放,那么我不会太担心这个优化建议。 Twitter scores an F (0) for this on GTmetrix,分别具有 D 级和 B 级,但加载时间仍然比大多数网站快。
Hassan 建议的事后思考:
我的建议是关注 Django 的内部结构(例如缓存模板、使用内存缓存等),然后优化静态内容的传送(例如 Nginx 中的压缩)并配置您的 Web 服务器的缓存政策。这是您会注意到性能大幅提升的地方。最后,如果您有大量的页面浏览量,您可能需要考虑在您的网络服务器前面部署 Varnish or Squid。