缓存页面:HTML中的base64图像与作为附件的图像(单独的URL)

时间:2015-01-14 16:31:13

标签: html image caching base64 cloud

背景

我们希望构建一个使用动态服务的页面(桌面,平板电脑和移动设备的不同版本)。

目前,我们认为这两种解决方案中的哪一种能够更快地提供内容并且总体上更好。 我正在考虑使用相同的URL将其提供给不同的设备(台式机,平板电脑,移动设备)。

  

动态服务站点:一个URL,根据用户代理提供不同的HTML和CSS。

来源:http://www.vervesearch.com/blog/the-ultimate-guide-to-developing-mobile-websites/

我们的主要目标是速度。其他事情。


解决方案:

1)将图像存储为HTML格式的base64

用户进入网站。例如,它包含1-2张非常大的图像。图像作为base64直接嵌入到HTML中。 我们有一个缩小的JS文件和一个缩小的CSS文件。 所以我们有理想的例子 - 包含1-2个大图像的HTML(最多可包含5MB)。 - 一个缩小的CSS文件 - 一个缩小的JS文件

所以... 3个请求

2)将图像存储在不同的URL中

用户进入网站。它包含1-2个图像,存储在尽可能快的外部存储器中(旁注:我可以快速存储图像作为附件吗?)。 我们有一个缩小的JS文件和一个缩小的CSS文件。

所以我们有 - HTML - 一个缩小的CSS文件 - 一个缩小的JS文件 - 1-2张图片

所以... 3个请求(HTML,JS,CSS)+ 2个请求

5个请求


问题:

使用较少的HTTP呼叫(连接建立延迟等)时,我们是否获得了很大的速度? 这值得么? Base64编码使图像大小增加了33%。来源:Should I embed images as data/base64 in CSS or HTML

哪种解决方案/方式将起作用?#34;更好" (速度更快)? 是否可以做每个"方式是什么?

我可以缓存整个'东西' (html,js,css,images)? 如果我有很多要缓存的站点,缓存是否有效(对每个客户/访问者都有好处)?


PS。如果有任何问题看起来很愚蠢 - 抱歉,我们公司的讨论非常激烈,我想提供所有信息。

1 个答案:

答案 0 :(得分:0)

您可以自己尝试两种解决方案并比较结果:

http://www.webpagetest.org/compare

如果您想测试桌面和移动设备,请尝试使用pageSpeed测试:

https://developers.google.com/speed/pagespeed/insights/

您将获得桌面和移动设备的结果,然后您可以决定要走哪条路线。