jfmaggie / frontend-nanodegree-mobile-portfolio

Home Page:http://jfmaggie.github.io/frontend-nanodegree-mobile-portfolio/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

http://jfmaggie.github.io/frontend-nanodegree-mobile-portfolio/


Languages

Language:JavaScript 56.6%Language:HTML 37.8%Language:CSS 5.6%