Website Performance Optimization portfolio project (ver.JD)

(guideline) A README file is included detailing all steps required to successfully run the application and outlines the optimizations that the student made in index.html and views/js/main.js for pizza.html.

How to run the application

Please go to this link below https://storymessinger.github.io/frontend-nanodegree-mobile-portfolio/

To see the optimization result,

1. Use google pagespeed tool to inspect the speed of the page
2. use the chrome dev tools to inspect the rendering speed :)

Enjoy!

Optimizations currently done

index.html (CRP optimization)

1. async-ed the google analyics
2. used image srcset for pizzeria.jpg for optimization
3. optimized the size of pizza.jpg
4. Inline-ed "style.css" of index.html
5. Compressed the css and js file using gzip by grunt-compress
6. Found out its not gzip but 'minifing' that should be done. Minified.

main.js (Getting rid of janks in rendering)

1. FSL problem solved with Pizza-Sliders
2. FSL problem solved related with moving pizza background
3. querySelector to getElementsByClassname

Considering

• Use javascript and var with css3 transform:translateX
• Use backface-visibility: hidden;

Optimization Tips and Tricks

• Optimizing Performance
• Analyzing the Critical Rendering Path
• Optimizing the Critical Rendering Path
• Avoiding Rendering Blocking CSS
• Optimizing JavaScript
• Measuring with Navigation Timing. We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
• The fewer the downloads, the better
• Reduce the size of text
• Optimize images
• HTTP caching

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.

• Bootstrap's CSS Classes
• Bootstrap's Components