caranuial 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,

To run:

1. Start web virtual machine.
2. Download repository virtual machine folder.
3. Open index.html in browser.

For Background floating Pizzas : Recalculate amount of displayed pizzas that are moving. Added will-change for moving pizza class. Doc selector outside of loop. ScrollTop calculation outside loop of loop. For Pizza Resizing: Using array instead of using switch for possible sizes of pizza. Doc selector outside of loop. Removing unused functions. Some other tweaks to variables that had been created within loops.

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 8080

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

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

• 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