ahmedwassef/Website-Optimization-nanodegree

PROJECT Website Optimization

Part 1: Optimize PageSpeed Insights score for index.html

1. Minified and inlined style.css file .
2. Minified JS .
3. Added async to javscript.
4. Added media print to print css file .
5. Optimized images (profilepic.jpg , pizzeria) .
6. Moved the google webfont link at the end of the page.

To run the project Open the Index.html File

Part 2: Optimize Frames per Second in pizza.html

1. deleted sizeSwitcher function and optmize changePizzaSizes (line 430 ).
2. replaced querySelector with getElementById (lines 409,413,419,532 ).
3. replaced querySelector with getElementsByClassName (lines 496 ,444 ).
4. save the array length in a local variable (line 446)
5. moved scrollTop out from for loop (line 499 ).
6. change loop counter from 200 to 24 and Declaring the elem variable (var elem;) in the initialisation of the for-loop (line 523 ).
7. declared the pizzasDiv variable outside the loop (line 464)
8. Added "will-change: transform" on style.css file .
9. Added " transform: translateZ(0); and backface-visibility: hidden;" on style.css file .

#####To run the project Open the pizza File in view/pizza.html #####To show javascript code open file main.js in views/js/main.js

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