通过将宽度和高度属性添加到html中的图像标记来提升性能

时间:2016-06-14 21:24:54

标签: html django image performance render

我维护着一个Django论坛,用户可以在这个论坛上为彼此(或整个公众)留下信息和照片。可以把它想象成9gag的对应物。

我通过GTmetrix对我网站的效果进行了基准测试。值得我评价的一件事是图像尺寸的特殊性。具体来说,它建议我在所有<img>标记中添加图像宽度和高度,以便浏览器可以更轻松地渲染页面,从而最大限度地减少重新绘制。

所有上传的图像都会动态调整大小并保存在数据库中,并保持其纵横比。我在模板上的<img>标签中包含高度和宽度的唯一方法是,如果我也在DB中保存它们的宽度或高度。或者,如果我在为他们观看时阅读他们的宽度和高度。

无论哪种方式,我都需要一些计算能力。这似乎是服务器计算时间与用户浏览器之间的权衡。即服务器端或客户端。我确实希望为用户优化体验,并且我的服务器资源也不错。

每隔几秒钟就会在我网站的公共区域上传一张新图片。你可以说它几乎是网站的主要内容。是否有人通过在模板中包含图像宽度和高度来体验大幅提升的体验?我很想听听它的一些建议,所以我可以继续它(或抛弃这个想法)。

提前致谢。

1 个答案:

答案 0 :(得分:0)

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

如果您的网站具有响应能力且图片根据设备尺寸进行扩展,那么我对此优化建议不会太担心。 TwitterGTmetrix上为此得分为F(0),并且分别具有D和B等级,但仍然比大多数网站的加载时间更快。

Hassan建议的事后补充:

我的建议是你专注于Django的内部(例如缓存模板,使用内存缓存等),然后优化静态内容的传递(例如,在Nginx中压缩,比如说)并配置你的web服务器&#39;缓存策略。这是您注意到性能大幅提升的地方。最后,如果您有大量的网页浏览量,您可能需要考虑在网络服务器前部署VarnishSquid