我目前正在处理的一个网站有许多幻灯片。问题是页面加载，然后幻灯片在一秒钟后加载。如何提高图像的加载速度？该网站托管在亚马逊上。网址是http://gatehouse75.com看看我的意思。
问问题
155 次
4 回答
1
有几种方法可以做到这一点：
优化图像尺寸。例如，正面横幅上使用的图像为 1920x1610。但是，大多数屏幕并没有那么大。根据视口（屏幕尺寸）使用不同的尺寸。
通过更改压缩和/或使用不同的格式来减小图像大小。
当用户访问网站的某些部分时预加载图像。这样，当用户访问带有画廊的页面时，图像就会从浏览器缓存中获取。
最后，如果上述建议都没有帮助，您可以在图像加载时放置“加载”通知。这对可用性有好处。
于 2013-07-12T13:43:55.813 回答
0
现在主页幻灯片图像对我来说已缩放到 1349 X 429。我正在使用笔记本电脑。服务器上图像的实际大小是 1920 X 610（至少是我检查过的那个）。这意味着两件事：（1）提供的图像比需要的更大文件大小，这需要带宽，以及（2）提供的图像需要按比例缩小，这需要客户端时间。
此幻灯片的最大宽度是多少？这是全屏幻灯片，所以我理解为什么选择使用更大的图像。虽然也许您可以以可接受的方式进行原始压缩和调整大小？
您还可以考虑在内容加载时放置一个加载 .gif。
此外，通过并缩小链接文件... css，js。
于 2013-07-12T13:50:07.813 回答
0
将您的 jpg 转换为较低质量，并将您的徽标（以 png 格式）转换为灰度 gif。这应该可以节省很多空间。
于 2013-07-12T13:44:04.783 回答
0
1.遵循图像文件优化最佳实践。
2.使用结合智能缓存策略的快速CDN。
3 . 将您的首屏图像参考（尤其是大的“英雄”图像）放在一个内联样式表中，紧挨<head>标签内，在 html 元素选择器中，如下所示：
<head>
<style> html { background: url(/hero.jpg) no-repeat -9999px -9999px; }
</style>
这将为您提供对感知页面速度影响最大的图像的最快可见时间。
于 2015-05-15T01:32:25.887 回答