This is my solution to the challenge given below.

The pages I am referring to are hosted here: http://marboro92.github.io/Optimization/

Testing page: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmarboro92.github.io%2FOptimization%2F&tab=desktop

FPS analysis done with Chrome Dev Tools

The Following changes were made to the home page (index.html) in order to acheive a page speed score of over 90 (according to google's page speed insights) on mobile and desktop devices:

1. JavaScript files have been given the async attribute to minimize CRP (Critical Rendering Path)
2. Google fonts were loaded with async js instead of css
3. Images were compressed and/or resized manually and using Gulp (found in img folder)
4. All necessary css was identified and inlined into html
5. Gulp was used to compress html and js files

The next task can be seen by clicking on the "Cam's Pizzeria" link in http://marboro92.github.io/Optimization/ or here http://marboro92.github.io/Optimization/views/pizza.html

The following changes were made to views/js/main.js in order to achieve 60fps and fix jank on the views/pizza.html page.

• more detailed comments can be seen in main.js

1. For loops were optimized by minimizing number of necessary iterations
2. Variables that need not be defined on each iteration were removed from inside for loops
3. Variables that were global but referenced in only one function were moved into the local scope of that function
4. Unnecessary references to constant values as variables were removed and replaced by the corresponding constant value
5. Pizza slider was improved by optimizing the for loop within resizePizzas function and removing unnecessary iterations
6. TranslateX used instead of left in JS to animate pizza's, promoting pizzas to a new layer to minimize painting
7. Unchanging style elements were moved from js to css

REFERENCES:

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

• https://www.youtube.com/watch?v=n8ep4leoN9A

• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

• http://www.webreference.com/programming/javascript/jkm3/2.html

ORGINAL CHALLENGE

---

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.

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

Getting started

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!

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