frontend nanodegree portfolio ngrok pagespeed pagespeed-insights crp

Website Performance Optimization portfolio project

Udacity's Front-End Web Developer Nanodegree. The task was to optimize a provided website with a number of optimization and performance-related issues so that it achieves a target PageSpeed score and runs at 60 frames per second.

Category 目录

Getting Started 安装指南
Critical Rendering Path Optimization 关键渲染路径优化
Hitting 60 FPS 向 60 FPS 进发
Resized Pizza 调整 Pizza 大小
Developer Experience 开发者体验
Tasking 任务分解
Optimization Tips and Tricks 优化建议与参考资料

Getting Started 安装指南

Visit the homepage and the pizza page here!

This project is built with NPM and Grunt. Follow the steps below to start the project locally and play around:

download the project to your machine by git clone
open your terminal and run npm install on project root, by doing this make sure you have a global npm installed
run npm run build:watch to build latest assets and watch for upcoming changes
open another terminal and run npm run serve to start a local dev server on port 8080
open your favorite browser and visit localhost:8080/dist/index.html

这里是主页，点击这里访问 pizza 页面！

项目是基于 NPM 和 Grunt 构建的。你可以按下列步骤在本地启动项目并访问：

通过 git clone 下载项目到本地
打开控制台，在项目根目录下运行 npm install。请确保你事先安装了一个全局的 NPM
在项目根目录下运行 npm run build:watch，该命令会构建出最新的文件，并且在你修改了文件时进行监听并实时执行构建
打开另一个控制台，在项目根目录下运行 npm run serve，该命令会在本地 8080 端口起一个服务器
在浏览器中打开 localhost:8080/dist/index.html 进行访问

Critical Rendering Path Optimization 关键渲染路径优化

There're a lot of optimizations performed to achieve a better PageSpeed score. I've summarized the best practice here and listed all the performed optimizations below. And all of them are being automated using Grunt.

Cache optimization seems pretty much out of my scope as the content is hosted in Github Pages and there's nothing I can do about it. But the score still hits 90+ with all those optimization that have been done and listed above.

Categories	Optimizations	HTML	CSS	JS	image
eliminate requests	cache
	inline critical resource		✅	✅
minimize critical resource path	concat critical resources		✅	✅
	load non-critical resources asychronously		✅	✅
minimize critical resource size	minify	✅	✅	✅	✅
	uglify			✅
	compress	✅	✅	✅	✅

为了在 PageSpeed 上跑分超过90，项目采用了多种优化手段。我在这里总结了一些优化的最佳实践，并把项目用到的优化实践列于下表。有技术含量（其实也没太多）的是，所有这些优化都是使用 Grunt 进行了自动化的。

由于页面是托管在 Github Pages 上，我无法告诉服务器为页面的特定资源进行「缓存」，也不能指定缓存策略。不过跑分还是能达到90分以上了。

**	优化手段	HTML	CSS	JS	图片
消灭请求	缓存
	内联 critical 资源		✅	✅
减少 critical 资源数量	合并 critical 资源		✅	✅
	异步下载并加载非 critical 资源		✅	✅
减少 critical 资源体积	minify	✅	✅	✅	✅
	uglify			✅
	压缩	✅	✅	✅	✅