如果网页内容冗长且图片较大，如何更快地加载网页答案

【问题标题】：How to load webpage faster if it has lengthy content and big images如果网页内容冗长且图片较大，如何更快地加载网页
【发布时间】：2016-10-24 06:00:05
【问题描述】：

我正在尝试加快我的网站的速度，因为我的网站内容过多，并且有多个带有高分辨率图像的滑块。我研究了很多文章/博客并申请了：

1) Host on a good server.
2) compressed images  
3) sprite images for icon 
4) compress js and css also attach css in header section and js at bottom etc.

和博客一样。但我的问题是图像。是否有任何插件可以像静态站点或任何其他解决方案一样更快地加载页面/图像。

【问题讨论】：

将所有图片保存在缓存中。这样，如果网页再次加载它会很快。
我也需要第一次
缓存和添加过期标头会有所帮助。
先生，这两种解决方案都用过，有什么方法或插件可以用于图像
您也可以使用base64编码，这意味着没有更多的图像HTTP请求。延迟加载也可能很有用，有时如果有太多高分辨率图像，最好先加载低分辨率，这样就没有空白图像空间，然后再加载高分辨率（就像谷歌图片一样）

标签： javascript jquery performance pagespeed image-scaling

【解决方案1】：

仅当用户通过滚动到达内容时才使用jQuery.Lazy 延迟加载内容。尤其是图片，甚至是iFrames、Videos、YouTube，也许还有其他一些内容，例如在标签或通过AJAX 的东西。很简单HTML 和JS。没什么大不了。 ;)

图片很简单，用data-src代替src：

<img class="lazy" data-src="image.jpg" />

然后只需调用插件：

$(function() {
    $("img.lazy").Lazy();
});

您甚至可以考虑使用低分辨率占位符并在用户查看时加载高分辨率版本。因此用户不必等待所有内容都加载完毕。你甚至可以添加一些效果，让它感觉更有活力。 ;) 这甚至可以由 Lazy 完成。

<img class="lazy" src="lowres.jpg" data-src="highres.jpg" />

祝你好运！

【讨论】：

【解决方案2】：

您应该尝试延迟加载图像的库之一。这些库仅在页面滚动并且图像进入视口时才加载图像。

示例搜索：https://www.google.com/search?q=lazy+load+images

【讨论】：