如何使响应性设计站点上的移动内容加载更快？

Question

所以，我有一个响应性的设计网站。研究表明，对于移动设备，我们需要显示更少的内容(图形等)，并且我们需要使移动站点的加载速度更快。

如果我将css中的一些页面元素设置为显示:none用于移动，它将不会显示这些块，但这并不意味着这些块中的内容不需要花时间下载。所以我们最后躲了起来，但还在服侍。

在响应性站点上，如何隐藏页面元素块，而不向移动用户提供其内容以加快页面加载时间？

Answer 1

如果CSS隐藏了一个内容块，浏览器仍然需要在该元素中下载HTML。除了Opera之外，所有浏览器都下载图片。(实际上，自从Opera切换到Webkit之后，它现在可能会下载隐藏的图像。)

在移动浏览器中减少负载的最好方法之一是在可能的情况下使用CSS中的背景图像(例如精灵)，然后使用移动优先响应设计。这意味着让标准的CSS为手机工作，然后使用媒体查询来锁定更大的屏幕，反之亦然。将较小的图像放入标准的CSS中，然后切换到大屏幕媒体查询中较大的图像。

媒体查询可以在包括IE9+在内的所有现代浏览器中工作。IE8及以下用户在全球的份额不到6%，因此在我看来，向这些用户展示移动网站并不是什么大问题。

如果旧的IE支持在您的情况下很重要，您仍然可以只对图像使用媒体查询。例如，将桌面站点设计为正常的，但具有较低分辨率的图像，这将在移动上加载得更快。然后将一个媒体查询用于响应性的移动布局，另一个使用针对较大屏幕的媒体查询来交换图像以获得更好的版本。

Answer 2

对移动设备的优化几乎与桌面一样，因为您的目标是尽可能地以最小的大小提供尽可能少的服务。由于手机屏幕分辨率较低，不需要桌面分辨率图像，您可以查看自适应图像，这意味着它将提供不同的分辨率图像，这取决于您所使用的设备。这可以通过使用支持此功能的支持自适应图像的cdn、JS自适应图像或Zurb基金会等框架来实现。

关于其他一切，我建议您查看加快页面加载的想法以及专业网站管理员上的许多其他速度相关问题。

Answer 3

我检测移动浏览使用服务器端PHP和服务CSS，图像和ui模式的设备在景观和肖像.