/Front-End-NanoDegree-Project4

Website Performance Optimization

Primary LanguageJavaScript

To view the portfolio project click here.

http://tulysg.github.io/Front-End-NanoDegree-Project4/

####Part 1: Optimize PageSpeed Insights score for index.html

  1. Optimized image pizzeria.jpg from W: 2048px, H:1536 px to a new size of W: 100px, H: 75px for index.html page.
  2. Customized image, title, header and email address on index.html.
  3. async was added to google analytics script.
  4. On css/print.css link, media="print" was added so that it loads only when print command is given.
  5. On index.html, moved the google webfont link at the end of the page.
  6. minified and inlined style.css file. 7.Created pizzeria-big.jpg for pizza.html page so that index.html has only small size jpg .

To view pizza.html click here.

http://tulysg.github.io/Front-End-NanoDegree-Project4/views/pizza.html

####Part 2: Optimize Frames per Second in pizza.html.

The following changes were made to views/js/main.js

  1. On document. addEventListener, looped through 32 instead of 200 pizza.
  2. On function changePizzaSizes, changed querySelectorAll with getElementsByclassName and moved the variables from for loop to outside of loop.
  3. Changed all querySelector to getElementById for performance improvement.
  4. Created a new function NewPizza() to generate random pizzas and appends all the pizzas only once ;
  5. Moved document.body.scrollTop outside of the for loop in updatePositions function;
  6. Added will-change: transform on style.css.

Useful links: