<commit_before>Website Optimization Project
===
<br>

Synopsis
---
The goal of this **[Udacity](https://www.udacity.com/)** project is to optimize a website using techniques and tools that improve page loading speed and animation frame rates (details to follow). Following the Udacity's project rubric, optimizations were made to the index.html file and main.js file in the GitHub repo located **[here](https://github.com/udacity/frontend-nanodegree-mobile-portfolio)**.


Link
---
Access the optimized website **[here](http://genkibit.github.io/udacity-fend-website-optimization/)**.


Testing
---
The original and optimized portfolios were compared using Google PageSpeed and Chrome Developer Tools. Results can be accessed **[here](http://genkibit.github.io/udacity-fend-website-optimization/test-results/)**.


PageSpeed score of 90 or better (index.html)
---
+ Scaled and compressed image files
+ Removed inline style attribute for pizzeria thumbnail image
+ Made profile and pizzeria image files served from a CDN
+ Minified and inlined all js code, including perfmatters.js
+ Switched to asynchronous script for Google Analytics
+ Implemented Google Fonts using `@font-face`
+ Adjusted unicode range in Google Font metadata to be specific for index.html
+ Inlined CSS code and customized it for index.html
+ Moved the print stylesheet code into the inlined CSS (`@media print{}`)
+ Minified the HTML and inlined CSS


Consistent 60 fps when scrolling (pizza.html)
---
+ Separated scroll events from direct draw calls in `updatePositions`
+ Wrapped `updatePositions` in a `requestAnimationFrame`
+ Used canvas element for animating background (main_canvas.js)
+ Refactored DOM-abusing code in `updatePositions` with canvas code
+ Placed layout updates and draw calls in separate loops to reduce reflow-repaint cycles
+ Restricted rendering of content to the dimensions of the screen
+ Reduced the number of background pizzas to 50 from 200
+ Compressed pizza.png
+ Used css `transform` rule (main_transform.js)
+ Applied the translateZ(0) hack to force GPU usage


Bringing pizza resize time to under 5 ms (pizza.html)
---
+ Wrapped reflow-repaint `changePizzaSizes` in a `requestAnimationFrame`
+ Separated size update and draw calls in separate loops to reduced reflow-repaint cycles
+ Controlled rendering of pizza nodes using  JS controlled `hidden` style marker
+ Used event listeners to reduce the number of pizzas rendered when changing pizza sizes
+ Scaled down and compressed pizzeria.jpg


Used services and build tools
---
+ [Chrome Developer Tools](https://developer.chrome.com/home/devtools-pillar)
+ [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+ [WebPageTest](http://www.webpagetest.org/)
+ [HTTP Compression Test](http://www.whatsmyip.org/http-compression-test/)
+ [Kraken](https://kraken.io/)
+ [Grunt](http://gruntjs.com/)


License
---
Code provided under an **[MIT license](https://github.com/genkibit/udacity-fend-website-optimization/blob/gh-pages/LICENSE.md)**<commit_msg>Fix link<commit_after>Website Optimization Project
===
<br>

Synopsis
---
The goal of this **[Udacity](https://www.udacity.com/)** project is to optimize a website using techniques and tools that improve page loading speed and animation frame rates (details to follow). Following the Udacity's project rubric, optimizations were made to the index.html file and main.js file in the GitHub repo located **[here](https://github.com/udacity/frontend-nanodegree-mobile-portfolio)**.


Link
---
Access the optimized website **[here](http://noelnoche.github.io/udacity-fend-website-optimization/)**.


Testing
---
The original and optimized portfolios were compared using Google PageSpeed and Chrome Developer Tools. Results can be accessed **[here](http://noelnoche.github.io/udacity-fend-website-optimization/test-results/)**.


PageSpeed score of 90 or better (index.html)
---
+ Scaled and compressed image files
+ Removed inline style attribute for pizzeria thumbnail image
+ Made profile and pizzeria image files served from a CDN
+ Minified and inlined all js code, including perfmatters.js
+ Switched to asynchronous script for Google Analytics
+ Implemented Google Fonts using `@font-face`
+ Adjusted unicode range in Google Font metadata to be specific for index.html
+ Inlined CSS code and customized it for index.html
+ Moved the print stylesheet code into the inlined CSS (`@media print{}`)
+ Minified the HTML and inlined CSS


Consistent 60 fps when scrolling (pizza.html)
---
+ Separated scroll events from direct draw calls in `updatePositions`
+ Wrapped `updatePositions` in a `requestAnimationFrame`
+ Used canvas element for animating background (main_canvas.js)
+ Refactored DOM-abusing code in `updatePositions` with canvas code
+ Placed layout updates and draw calls in separate loops to reduce reflow-repaint cycles
+ Restricted rendering of content to the dimensions of the screen
+ Reduced the number of background pizzas to 50 from 200
+ Compressed pizza.png
+ Used css `transform` rule (main_transform.js)
+ Applied the translateZ(0) hack to force GPU usage


Bringing pizza resize time to under 5 ms (pizza.html)
---
+ Wrapped reflow-repaint `changePizzaSizes` in a `requestAnimationFrame`
+ Separated size update and draw calls in separate loops to reduced reflow-repaint cycles
+ Controlled rendering of pizza nodes using  JS controlled `hidden` style marker
+ Used event listeners to reduce the number of pizzas rendered when changing pizza sizes
+ Scaled down and compressed pizzeria.jpg


Used services and build tools
---
+ [Chrome Developer Tools](https://developer.chrome.com/home/devtools-pillar)
+ [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+ [WebPageTest](http://www.webpagetest.org/)
+ [HTTP Compression Test](http://www.whatsmyip.org/http-compression-test/)
+ [Kraken](https://kraken.io/)
+ [Grunt](http://gruntjs.com/)


License
---
Code provided under an **[MIT license](https://github.com/noelnoche/udacity-fend-website-optimization/blob/gh-pages/LICENSE.md)**
{'fraction_non_alphanumeric': 0.09375, 'fraction_numerical': 0.003618421052631579, 'mean_word_length': 4.903883495145631, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 12, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '845500', 'n_tokens_mistral': 1763, 'n_tokens_neox': 1660, 'n_words': 662}