Website Performance Optimization portfolio project

  • Cameron's template portfolio. I worked on the website perfomance optimization.
  • Check the link here to view the portfolio.
  • Open dev tool in a brower to evaluate web perfomance.

####Changes based on original portfolio

  • Inline css style for index.html
  • Asnc js files for index to unblock rendering
  • Adjust pixel width for centain size media of google font
  • Compress image, css, js files
  • Explore the utility of grunt pagespeed with ngrok for local test(Gruntfile.js need to be re-config)

####Modification in main.js

  • Reduce handful pizza size to for position update
  • Take out some variable definition out of loop
  • Add back-face visiblity for class mover

####What I have learned

  • Critical rendering path
  • Google Pagespeed insight
  • User timing API
  • Effective optimization for 60 FPS
  • Web optimization building tools