我错过了哪种技术来改善本网站的加载时间？出于智慧

Question

我建立了这个网站Dandy Diary，我正在努力改善加载时间。 Pingdom的评级已经非常好，但加载时间仍然很长。你对此有何看法？我能做得更好。此时可以忽略移动版本，它尚未部署。该网站基于Wordpress。

到目前为止我做了什么

• 使用Cloudflare
• 为静态资产使用多个子域（static1-static3）
• 延迟加载图片
• 压缩和组合JS＆amp; CSS
• 缓存每个站点以最小化数据库上的命中
• 该网站有左/右导航（侧面的箭头）。我预加载文章以提高导航速度。这很有效，但网站的第一次加载仍然很慢
• 通过API加载Youtube视频
• 尽可能使用SVG
• 将JSON API用于搜索结果

一个问题是该网站拥有如此多的资源（最多1000个）。由于其中许多是图像，我无法结合。

感谢您的帮助！

Answer 1

• 我会更多地使用延迟加载。目前您的网站正在加载77 .jpg图像，甚至没有滚动。 （初始负载10.1 Mb的9.5Mb）

• 您的图片仍可通过PageSpeed优化，节省您211.​​8Kb。 （减少2％）。

• 我会使用精灵图片而不是.svg文件。一个精灵请求将比您对单个.svg文件的当前44 GET请求快得多。

• 您可以使用媒体查询根据屏幕分辨率加载更大或更小的图像（对于全屏图像）

Answer 2

@MLeFevre提供了与我相同的建议。

我在Google Chrome中加载了该页面，并在开发者控制台中打开了“网络”面板。它显示在页面准备好之前加载了大量单个资产/文件。很多等待都是为了加载所有~240Kb的jpg文件。

将JS，CSS和图像移动到CDN是一个很好的选择，可以提高25％的页面负载，但减少加载的文件数量将产生最大的差异。如建议的那样，如果您将所有图像移动到延迟加载功能 - 仅在视图中加载所需图像，那么您的访问者将看到快速页面加载。然后在滚动到视图中时加载它们。

查看图像是否也可以被压缩。这是一个折衷，但大多数人不会注意到更多的压缩，但他们会注意到页面加载缓慢。