文档加载完成后，图片加载速度过慢，无法在页面上显示。

Question

目标: 所有图片在第一次加载时都应该出现。

现状: 如果幸运的话，第一次加载时可能会出现两到三张图片；需要刷新页面才能看到所有图片。

这是我手写的第一个网站。客户是一名设计师，因此高质量的图片非常重要。对我来说，性能和速度也很重要，因为这已经成为我的作品集，我不能接受一个部分功能的网站作为我的作品。

这是一个示例页面：

http://elisamantovani.com/pages/book_design.html

也请查看其他页面。同样的问题。

更新:

许多人建议缩小图像文件大小。只有少数图像实际上很大，但现在它们都很好。没有任何图像大于200kb，大多数图像的大小都在100kb以下。问题仍然存在。

Google建议还有其他阻止页面呈现的原因，例如阻止渲染的JS/CSS。CSS应该阻止渲染直到加载完成，但加载时间不应太长。如果jQuery可以等到HTML/CSS渲染完成后再加载，那就更好了。

刚刚接触到缓存控制。将此添加到.htaccess中以稍微提高性能，但这只会在第一次加载后有所帮助，而需求是在第一次加载时。

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

- Naltroc

---

大多数文件已经适合网络使用，但有一个达到了11mb的庞大文件。 - Jesse Kernaghan

明白了，没想到要检查背景图片。有趣的是，它总是能够加载。问题在于头部照片下面的画廊图片没有显示出来。 - Naltroc

检查您的代码中的错误并修复它们 https://validator.w3.org/nu/?doc=http%3A%2F%2Felisamantovani.com%2Fpages%2Fbook_design.html 和 https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Felisamantovani.com%2Fpages%2Fbook_design.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en 您的CSS链接可能不正确或未上传到服务器。 - mlegg

有趣...我不知道那是可能的！我得学更多关于那个的。谢谢。 - colonelclick

好的，字母间距已经可以使用了。但是字体拉伸只有在字体作者将其包含在字体文件中才能生效。 - Naltroc

Answer 1

如果您想测量脚本/图像加载速度有多快，可以简单地执行以下操作。

进入Web检查器（或右键单击元素并点击“检查元素”），然后单击名为“时间轴”的选项卡。现在重新加载页面。它将给您加载每个项目所需的时间。

在我的电脑上，您的网站需要3.40秒才能加载。还不错，您似乎可以继续使用。

顺便说一下，如果图像加载缓慢，很可能是图像的问题而不是脚本的问题。请确保返回并在Photoshop中重新压缩它们，以使其质量最高/文件大小最低

这是截图

这是今天所测得的加载时间截图。看起来这是一个主机问题。

- Krunkmaster

---

当您第一次访问该网站时，所有的图片都显示出来了吗？例如，在此页面上，应该有大约12张图片出现，无需刷新。 - Naltroc

我没有看到任何问题。我也尝试了画廊页面。我的检查器显示你的网页速度是3.4，所以还不错！ - Krunkmaster

让我看看，看看我能否帮助你。 - Krunkmaster

我假设你使用的是共享主机计划，对吧？我试图加载你链接的页面，但需要大约40-60秒才能完成。这就是我问及计划的原因。我们在我的工作中也遇到了同样的问题。只需要一个快速的电话，他们就将我们转移到了一个人口较少的共享服务器上（大多数共享主机容纳数百万用户），然后一切都开始表现得更好了。老实说，我认为你的代码/图片不是问题的根源（尽管5MB对于一张图片来说是非常巨大的文件大小）。 - Krunkmaster

请在 Gmail 上添加我的账号（[e-mail]），并通过 Gchat 联系我，这样我就可以向您发送加载时间的截图，并帮助您诊断此问题。 - Krunkmaster

Answer 2

在Google Insights中运行网址会显示您需要压缩和优化图像，压缩比应为>= 60%。 Google开发者网站上有相关文章，你可能会在下一个项目中找到它有用！

您的图像加载较慢可能有多种原因！

建议如下：

1. 缩小和压缩SVG资源
2. 优先选择矢量格式
3. 选择最佳光栅图像格式
4. 删除不必要的图像元数据
5. 在服务器上调整图像大小，并确保“显示”大小尽可能接近图像的“自然”大小
6. 投资于自动化工具和基础设施，以确保所有图像资产始终得到优化。

- Md Sifatul Islam

Answer 3

主要问题是图像的大小，您应该注意上传一个比实际需要更大的图像。第一次加载时速度较慢，因为图像不在浏览器缓存中...

如果您查看图像，您会发现： 对于此页面，您需要300x279的图像，但您正在加载一个1281x1192像素的gif图像。然后，如果您查看时间，您的图像在大约6秒钟内加载完成。这就是真正的问题。因此，请调整图像大小并重试。如果您想清除浏览器缓存，请使用Ctrl+F5。 有一些网页工具，如http://quickthumbnail.com/，您可以使用它来裁剪和调整图像大小，或者您可以使用一些图像编辑器如Photoshop等进行调整。

- Albert Font

Answer 4

我访问了您的网站，一开始它运行得很好。但是当我切换到另一个标签页并返回您的网站时，它会在几秒钟内变成空白页面。原因是您的背景图片 Tomorrow_final.jpeg 的大小过大。

11mb
size of 8454x8568

这样很大。而你剩下的 12 张图片 都正常工作，因为它们都是 kbs。所以，请使用 photoshop 减小你的 背景图片大小，并保存为 web and device 格式，然后就可以正常工作。目前，即使在快速滚动页面时，你的网页也会卡顿。

- frnt

Answer 5

最好使用谷歌的webP编解码器，它是一种有损和无损压缩方法，可用于网络上找到的各种照片、半透明和图形图像，并有助于快速加载图像。请参考webP Codec了解更多信息。

- Bharat Patel

Answer 6

我建议配置.htaccess文件进行缓存，这可以提高网页加载速度。 可以使用以下代码：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

- Tarlan Mammadzada

Answer 7

对于图片数量，您的网站应该更快。我建议您使用Sprites技术，这基本上是将所有图像收集到单个图像中。这样，网站只需加载一次。

有在线Sprites生成器可以使该过程非常简单。例如，我使用这个http://css.spritegen.com/，获得了更好的性能。

- Rafael Munoz

---

感谢提供这个资源。为了这个网站的目的，所有图片必须分开，以便用户可以单击各个部分进行放大。 - Naltroc