加载选项卡式内容的最佳方式

Question

我正在努力更改一个网站上的会员个人资料 UI。项目页面：http://design.vitalbmx.com/user_menu/member_profile2.html

目标：

可用性：必须优化页面加载时间，尤其是活动选项卡中的图像 SEO： 选项卡内的分页链接必须可抓取

假设：

• 默认情况下，大多数用户会转到“全部”选项卡
• 大多数用户很少会点击除“全部”之外的其他选项卡
• 大多数用户会不发送到分页选项卡的链接，仅发送到任何给定选项卡的第一页

实现场景：

1. 所有选项卡的内容一次加载到同一页面上。通过 Ajax 分页（带有爬虫现有页面的 URL）。可能的问题 - 如果在页面 URL 中设置了第一个选项卡以外的选项卡的图像（例如 #videos），则加载图像会出现延迟

2. 首先加载第一个选项卡（“全部”）的内容。仅当单击其他选项卡时才加载其他选项卡的内容。问题 - 额外的 HTTP 调用以及加载除第一个选项卡以外的选项卡图像的延迟

3. 所有选项卡的内容都加载在同一页面上，但在图像开始加载之前，图像源会被替换为除当前选项卡之外的选项卡的通用图像。单击另一个选项卡时（或加载当前选项卡图像后）图像源将恢复为原始图像并开始加载（有点像 Mashable.com，但没有烦人的淡入效果）

4. 无 Ajax - 每个选项卡的专用页面。对于 SEO 来说比对于可用性更有意义。易于复制、粘贴、发送带分页的 URL。

哪一个最好？或者我错过了什么？

Answer 1

我认为你应该选择“不”。 4，因为它使用的服务器和客户端负载较少。