/website-optimization

Udacity Project: Website Optimization

Primary LanguageJavaScript

Website Performance Optimization portfolio project

How to run: Download the zip file and open index.html or run it from my server at http://www.museumsyndicate.com/P4/index.html

Optimizations Change Log: index.html -Reordered the loading in -Modified the font loading method -Optimized the images by compressing them further -Provided height and width for the images -Added a thumbnail for the pizzeria image so it wouldn't load the full size image -Minified the style.css -Added media attribute for the print css -Inline the style.min.css project-mobile.html -Reordered the loading in -Modified the font loading method -Minified the style.css -Added media attribute for the print css -Optimized image compression -Reduced image size to match display size project-webperf.html -Reordered the loading in -Modified the font loading method -Minified the style.css -Added media attribute for the print css -Optimized image compression project-2048.html -Reordered the loading in -Modified the font loading method -Minified the style.css -Added media attribute for the print css -Optimized image compression views/js/main.js -Moved a variable that doesn't change outside of a loop -addEventListener() - Reduced the loop from 200 to 40 since 200 seems unnecessarily high -changePizzaSizes() - Stored the query result in a single variable so it is only done once -updatePositions() - Moved the document.body.scrollTop / 1250 operation out of the loop (seemed to have big impact) -Moved sizeSwitcher() function outside of the loop -determineDx() - Pass in width instead of the element; Move windowwidth measurement outside of the loop -changePizzaSizes() - Only get the offsetwidth once -changePizzaSizes() - Use .getElementsByClassName() to get random pizza container -changePizzaSizes() - Refactored function to move the width calculation outside of the for loop since it is the same for each pizza views/pizza.html -Optimized the pizzeria image to be smaller size (2 megabytes is a lot to load)

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

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

Optimization Tips and Tricks

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.

Sample Portfolios

Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.