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

Question

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

目标：

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

假设：

• 默认情况下，大多数用户都会转到“全部”标签
• 大多数用户很少会点击“全部”
以外的其他标签
• 大多数用户不会发送指向分页标签的链接，只会发送到任何指定标签的第一页

实施方案：

1. 所有标签的内容会在同一页面上同时加载。通过Ajax进行分页（使用URL到爬虫的现有页面）。可能出现的问题 - 如果在页面网址中设置了标签（例如#videos）

，则为第一个标签以外的标签加载图片会延迟

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

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

4. 无Ajax - 每个标签的专用页面。对SEO而言比对可用性更有意义。通过分页轻松复制粘贴发送URL。

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

Answer 1

我认为你应该没有。 4，因为那个使用来自服务器和客户端的负载较少。