通过向 html 中的图像标签添加宽度和高度属性来提高性能答案

【问题标题】：Performance boost from adding width and height attributes to image tags in html通过向 html 中的图像标签添加宽度和高度属性来提高性能
【发布时间】：2016-10-15 19:10:02
【问题描述】：

我维护了一个 Django 论坛，用户可以在其中为彼此（或整个公众）留言和照片。把它想象成 9gag 的对应物。

我通过GTmetrix 对我网站的性能进行了基准测试。它对我的评价很低的一件事是图像尺寸的特异性。具体来说，它建议我在所有 <img> 标记中添加图像宽度和高度，以便浏览器更轻松地呈现页面，最大限度地减少重绘。

所有上传的图片都会动态调整大小并保存在数据库中，同时保持它们的纵横比。我将它们的高度和宽度包含在模板上的<img> 标记中的唯一方法是，如果我也将它们的宽度或高度保存在数据库中。或者，如果我在查看它们时读取它们的宽度和高度。

无论哪种方式，我都需要一些计算能力。似乎这里的权衡是在服务器的计算时间与用户的浏览器之间。 IE。服务器端或客户端。我确实想为我的用户优化体验，而且我的服务器资源还不错。

每隔几秒钟就会在我网站的公共区域上传一张新图片。你可以说它几乎是网站的主要内容。有没有人通过在模板中包含图像宽度和高度来大幅提升性能？我很想听听一些关于它的建议，所以我可以继续它（或放弃这个想法）。

提前致谢。

【问题讨论】：

标签： html django image performance render

【解决方案1】：

如果您知道网站的精确布局，那么您可以在用户上传时调整图片大小并使用 css 指定您的尺寸。

如果您的网站是响应式的并且图像根据设备尺寸进行缩放，那么我不会对这个优化建议过于担心。 Twitter 在 GTmetrix 上的得分为 F (0)，分别获得 D 和 B 级，但仍比大多数网站的加载时间更快。

Hassan 建议的事后思考：

我的建议是你专注于 Django 的内部（例如缓存模板、使用 memcache 等），然后优化静态内容的交付（例如 Nginx 中的压缩）并配置 Web 服务器的缓存策略。这是您会注意到性能大幅提升的地方。最后，如果您有大量的页面浏览量，您可能需要考虑在您的 Web 服务器前部署 Varnish 或 Squid。

【讨论】：

是的，是后一种情况。感谢 Keenan 的见解。
@HassanBaig，很高兴。我最近经历了相同的性能分级与加载时间的过程。我的建议是你专注于 Django 的内部（例如缓存模板，使用内存缓存），然后优化静态内容的交付（例如 Nginx 中的压缩）并配置您的 Web 服务器的缓存策略。这是您会注意到性能大幅提升的地方。最后，如果您有大量的页面浏览量，您可能需要考虑在您的 Web 服务器前部署 Varnish 或 Squid。
这是一个非常有用的评论 Keenan。您甚至可以将其添加到答案中作为事后的想法（但这是一个非常有用的事后想法）。我相信这对以后来这里的人会有帮助。