/frontend-nanodegree-mobile-portfolio

Primary LanguageJavaScript

Website Optimization Project

This is a project from Udacity's Front-End Web Developer Nanodegree.

How to view the project

Click here. This site is optimized to achieve a score over 90/100 for the analysis from PageSpeed Insights.

In the portfolio page, you can find the link to the pizza page, which is optimized to achieve 60 FPS when scrolling the page and less than 5 ms when resizing pizzas on the page.

Optimizations

in index.html

  1. inline style.css and print.css
  2. add "async" to script tags
  3. comment out google font
  4. resize images to reduce bytes

in views/js/main.js

  1. move code involving layout out of for loops to avoid forced synchronous layouts (FSL)
  2. add randomPizzaContainers to avoid repeating work
  3. redesign the algorithm for changing pizza sizes to avoid FSL and save unnessesary work
  4. add "use strict"
  5. replace querySelectorAll by getElementsByClassName
  6. replace querySelector by getElementById
  7. save *.length in for loop conditions in var len
  8. move declaration of pizzasDiv, elem, and movingPizzas1 outside the loop