phapdinh / frontend-nanodegree-mobile-portfolio Goto Github PK

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.

To get started, check out the repository, inspect the code,

####Part 1: Optimize PageSpeed Insights score for index.html

Some useful tips to help you get started:

1. Check out the repository
2. To inspect the site on your phone, you can run a local server

$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080

1. Open a browser and visit localhost:8080
2. Download and install ngrok to make your local server accessible remotely.

$> cd /path/to/your-project-folder
$> ngrok http 8080

1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: More on integrating ngrok, Grunt and PageSpeed.

Profile, optimize, measure... and then lather, rinse, and repeat. Good luck!

####Part 2: Optimize Frames per Second in pizza.html

To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js.

You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: Chrome Dev Tools tips-and-tricks.

• 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.

• Bootstrap's CSS Classes
• Bootstrap's Components

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

Performance Fixes

1. Set media to print for print style sheet for index.html, project-webperf.html, project-2048.html, and project-mobile.html.

2. Added https: to the google fonts link for all html pages.

3. Moved layout call of scrollTop out of for loop for updatePositions function.

4. Deleted determineDx function which causes force synchronous layout by setting newwidth using percent not pixels.

5. Added async tags to analytics script tags.

6. Stored randomPizCont.length outside of for loop in into randomPizContLength for function changePizzaSizes.

7. Stored times.length outside of for loop in variable itemsLength for function updatePositions.

8. Moved randomPizzas selector call to variable pizzasDiv out of for loop.

9. Declared phase variable outside of for loop for updatePositions function.

10. Declared elem outside of for loop.

11. Moved document.querySelector("#movingPizzas1") outside of for loop and stored it in variable movingPizzas.

12. Reduced number of moving pizzas to 24 pizzas.

13. Replaced querySelectorAll with getElementById and getElementsByClassName when appropriate.

14. moved javascript script tags to bottom of html in index.html.

15. Converted jpg images to gif images in index image folder.

16. Inlined CSS and removed CSS link.

17. Moved google font into javascript file at bottom.

18. Added will-change:transform and transform:translateZ(0) to .mover class.

19. Resized pizzeria image to 100 x 75 and compressed the image to 105 kb using compressor.io.

How to Use Application

1. Run index.html in a browser

2. Click on the links to look at the different projects in portfolio

3. The pizza project changes background when you slide up and down and changes pizzas when you slide bar