Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the Critical Rendering Path course.
####Part 1: Optimize PageSpeed Insights score for index.html
####GENERAL STRATEGIES
#####1) Minimize the size of HTML, CSS and JavaScript files
a) node.js gulp is used for this purpose. You can read the gulpfile.js under the project root directory <project-directory>
#####2) Minimize use of render blocking resources (CSS)
a) Use media queries on <link> to unblock rendering where it is possible
b) inline CSS
c) async load of CSS google fonts
#####3) Minimize use of parser blocking resources (JS)
a) Defer JavaScript execution
b) Use async attribute on <script> when it is possible
###TOOLS:
The source codes are in the /src The deployment ( minimiziing, inlining, optimizing of the source codes) from the /src directory to is done via node.js gulp.
####1) convert Linux command line to resize images size ####2) node.js gulp. The gulpfile.js contains all the tasks needed to implement the above general strategies
###GOOGLE PAGESPEED tests:
####index.html http://paulmatencio.github.io/frontend-nanodegree-mobile-portfolio/index.html 92 / 100 Mobile Speed 94 / 100 Deskzop Speed ####project-2048.html http://paulmatencio.github.io/frontend-nanodegree-mobile-portfolio/project-2048.html 94 / 100 Mobile Speed 96 / 100 Deskzop Speed ####project-2048.html http://paulmatencio.github.io/frontend-nanodegree-mobile-portfolio/project-mobile.html 94 / 100 Mobile Speed 96 / 100 Deskzop Speed ####project-2048.html http://paulmatencio.github.io/frontend-nanodegree-mobile-portfolio/project-webperf.html 94 / 100 Mobile Speed 96 / 100 Deskzop Speed
###Part 2: Optimize Frames per Second in pizza.html
Add viewport to improve user experience experience Apply same stratgies for part 1
#####LOOP OPTIMZATION
#####Reduce the number of loop counts
Reduce the number of loops when over looping is uncessary for better user eperience. As for instance, reduce the number of moving pizza from 200 to 50 or even less. The current main.js has 40 moving pizzas.
#####Reduce the cost of loop
Move invariant off the loop. As for instance, the computation for old size and new size of the pizza. This can be done ouside the resizePizza() loop once.
####Objectives 60 fps or higher. Tome to resize pizzas < 5ms
You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: [Chrome Dev Tools tips-and-tricks](https://developer.chrome.com/devtools/docs/tips-and-tricks).
FPS and pizza resizing ( http://paulmatencio.github.io/frontend-nanodegree-mobile-portfolio/views/pizza.html)
Time to generate pizzas on load: 16.015ms <<<
main.js:1 10 Average time to generate last 10 frames: 6.298500000000135ms main.js:1 20 Average time to generate last 10 frames: 4.834500000000207ms main.js:1 30 Average time to generate last 10 frames: 4.370500000000175ms main.js:1 40 Average time to generate last 10 frames: 4.839499999999862ms main.js:1 50 Average time to generate last 10 frames: 4.640999999999986ms main.js:1 60 Average time to generate last 10 frames: 4.798500000000058ms main.js:1 70 Average time to generate last 10 frames: 4.597500000000037ms main.js:1 80 Average time to generate last 10 frames: 4.682999999999902ms main.js:1 90 Average time to generate last 10 frames: 5.227499999999873ms main.js:1 100 Average time to generate last 10 frames: 5.172999999999865ms
Time to resize pizzas: 3.695000000006985ms
###SUPPORT DOCUMENTATION ####Udacity P4 supporting courses
- https://www.udacity.com/course/viewer#!/c-ud884-nd/l-3342528615
- https://www.udacity.com/course/viewer#!/c-ud860-nd/l-4127088573
####Udacity discussion forum
####Udacity team room
- Optimizing Performance
- Analyzing the Critical Rendering Path
- Optimizing the Critical Rendering Path
- Avoiding Rendering Blocking CSS
- Optimizing JavaScript
- Measuring with Navigation Timing. We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
- The fewer the downloads, the better
- Reduce the size of text
- Optimize images
- HTTP caching
The portfolio was built on Twitter's Bootstrap framework. All custom styles are in dist/css/portfolio.css in the portfolio repo.
Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.
- A great discussion about portfolios on reddit
- http://ianlunn.co.uk/
- http://www.adhamdannaway.com/portfolio
- http://www.timboelaars.nl/
- http://futoryan.prosite.com/
- http://playonpixels.prosite.com/21591/projects
- http://colintrenter.prosite.com/
- http://calebmorris.prosite.com/
- http://www.cullywright.com/
- http://yourjustlucky.com/
- http://nicoledominguez.com/portfolio/
- http://www.roxannecook.com/
- http://www.84colors.com/portfolio.html