Question

我该怎么做才能减少加载时间？

<head>
    <title>NCI SwitchGears</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="menu/styles.css">
    <script src="bootstrap-3.3.4-dist/js/jquery-latest.min.js" type="text/javascript"></script>
    <script src="menu/script.js"></script>
</head>

Answer 1

Google提供了一个很好的工具来帮助您加快网页的加载时间 https://developers.google.com/speed/pagespeed/insights/

可以找到另一个不错的在线工具here

作为一般规则：
- 加载1个js文件和1个css文件 - 压缩
- 让你的js在页面底部，而不是在标题中 - 在页面加载后，通过ajax加载社交工具/脚本 - 优化您在模板上使用的图像/图形
- 设置适当的到期标头和缓存选项

您可以在上述工具中找到有关页面的更具体说明。

Answer 2

您正在加载jQuery两次。一次本地，一次远程。
考虑使用Require.JS按需加载JS
将样式表合并为一个请求。确保使用模块化样式，然后再按需加载。
JS在适当的地方移动到页脚

加载样式表和JavaScript花费的时间太长

2 个答案: