Website Performance Optimization portfolio project

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.

PageSpeed Performance Optimizations

The following optimizations were added to improve the website performance:

1. Reduced the size of pizzeria.jpg image
2. Compressed the pizzeria.jpg image
3. Compressed the profilepic.jpg image
4. Calls to JavaScript files set to async in index.html
5. Set media to print for print.css
6. Created phone-portrait.css for specific phone based CSS and set media query
7. Installed gulp and set up tasks to minify html, minify css, minify javascript, inline css, and minify images
8. Set up src and dist directory structure to manage gulp tasks (see section below for setting up gulp)

Gulp Setup and Execution

The following are details on how to setup gulp in this environment to perform the desired tasks:

1. Set up npm and gulp

$> sudo npm init
$> sudo npm install gulp --save-dev

1. Install gulp-htmlmin

$> sudo npm install --save-dev gulp-htmlmin

1. Install gulp-cssmin

$> sudo npm install --save-dev gulp-cssmin

1. Install gulp-inline-css

$> sudo npm install --save-dev gulp-inline-css

1. Install gulp-rename

$> sudo npm install gulp-rename

1. Install gulp-imagemin

$> sudo npm install --save-dev gulp-imagemin
$> sudo npm i -D imagemin-pngquart

1. Configure gulpfile.js to run all the tasks installed above

2. Run gulp

$> gulp

Frames Per Second Optimizations

1. Modified pizza size slider to use a percent rather than calculate a pixel size
2. Reduced number of pizza images being generated to 50 from 200. Most of the 200 pizzas were off-screen
3. Created global variable movers to store all the mover class elements (removed from loop)
4. Replaced document.querySelectorAll with document.getElementsByClassName
5. Calculated the 5 scrolling phases of each pizza movement once and sotred in array to reference during scrolling activities

Getting started

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

Optimization 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

Customization with Bootstrap

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

Sample Portfolios

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