你要做的是尽可能优化这个在线项目的速度。注意，请应用你之前在网站性能优化课程中学习的技术来优化关键渲染路径并使这个页面尽可能快的渲染。

开始前，请导出这个代码库并检查代码。

####Part 1: 优化 index.html 的 PageSpeed Insights 得分

以下是几个帮助你顺利开始本项目的提示：

1. 将这个代码库导出
2. 你可以运行一个本地服务器，以便在你的手机上检查这个站点

  $> cd /你的工程目录
  $> python -m SimpleHTTPServer 8080

1. 打开浏览器，访问 localhost:8080
2. 下载 ngrok 并将其安装在你的工程根目录下，让你的本地服务器能够被远程访问。

  $> cd /你的工程目录
  $> ./ngrok http 8080

1. 复制ngrok提供给你的公共URL，然后尝试通过PageSpeed Insights访问它吧！可选阅读：更多关于整合ngrok、Grunt和PageSpeed的信息。

接下来，你可以一遍又一遍的进行配置、优化、检测了！祝你好运！

####Part 2: 优化 pizza.html 的FPS (每秒帧数)

你需要编辑views/js/main.js来优化views/pizza.html，直到这个网页的FPS达到或超过60fps。你会在main.js中找到一些对此有帮助的注释。

你可以在Chrome开发者工具帮助中找到关于FPS计数器和HUD显示的有用信息。Chrome 开发者工具帮助.

• web性能优化
• 分析关键渲染路径
• 优化关键渲染路径
• 避免CSS渲染阻塞
• 优化JavaScript
• 通过 Navigation Timing 进行检测。在前两个课程中我们没有学习Navigation Timing API，但它对于自动分析页面性能是一个非常有用的工具。我强烈推荐你阅读它。
• 下载量越少，性能越好
• 减少文本的大小
• 优化图片
• HTTP缓存

这个项目基于Twitter旗下的 Bootstrap框架 制作。所有的定制样式都在项目代码库的 dist/css/portfolio.css 中。

• Bootstrap CSS
• Bootstrap组件

1. 安装gulp依赖

npm install --save-dev gulp gulp-uglify jshint gulp-jshint gulp-rename npm install --save-dev gulp-plumber gulp-connect jshint-stylish gulp-csslint

2. 安装clean-css依赖

npm install gulp-clean-css --save-dev

3. 运行gulp命令

gulp