kwendell / kwendell.github.io Goto Github PK

I used www schools for javascript issues. I used jquery.com site for problems related to that techology. I used all of the Google links that were related to font loading, critcal path rendering, some of them Ilya's blogs. I made extensive use of the Udacity forums when I got stuck. I used Paul's site that showed the performance consequences of using different ccss methods.

#Summary of Steps I worked through the PageSpeed insights scores. I impemented the guidelines from the course materials to minimize the critcial path. This included -but was not limtied to:

1. Inline CSS for rendering blocking css files.
2. Making use of the async keyword for rendering blocking javascript.
3. Loading the Google font asynchronously.
4. Employing media query to styles that weren't necessary like css files related to the print media type.
5. Per PageInsights suggestion I decreased the size of the pizzeria image to minimize the bytes in the critical path formula. --Browser Performance
6. In views/js/main.js I changed the loop limits to create only enough pizzas that could be seen within the viewport.
7. In the for loop in the update method I moved the computation of phase out of the pizza object loop to only include the 5 possible values and place those values in an array.
8. I optimized the pizza resizing by limiting unnecessary DOM queries by placing the query outside of the loop and using the array results to change the size within the loop for each array item returned from the query.

HOW TO RUN INSTRUCTIONS After placing the site contents in a suitable folder, you can view the site by using a web browser to view the index.htm from the root directory. Alternatively, I have replicated this project into my github page. You can use the URL http://kwendell.github.io to access the page(s).

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