Website Performance Optimization portfolio project
###Setting up Project:
I installed node.js and gulp than re-organised the project folder so all the original HTML/CSS/JavaScript/images is in the 'Dev' folder. The system set up in a way that if I start gulp it will start a listener and will compress any element changed in the 'Dev' folder and move it in the right place in the project folder.
Check 'Dev' folder for commented readable codes.
###Part 1: Optimize index.html
- removed render-blocking stylesheets by inlining it in HTML.
- async-ed JavaScripts.
- compressed images.
- Hosted portfolio page on GitHub to analyse
###Part 2: Optimize pizza.html
- gulpfile.js contains gulp script to compress HTML/CSS/JS/images. (excluded node-modules folder from push due size and long filename issues, but I listed the plugins I used below.)
- moved variables out of for loops and saved array lengths, in a local variable, which are part of the condition statement.
- reduced the number of generated "flying pizzas" from 200 to 40
- moved style for '.mover class' to style.css and replaced
- Web API call tweak "document.getElementsByClassName()"
- link for Pizza.html
- minified main.js ans style.css for pizza html(only in gh-pages branch)
see comments and code style in ➤ master/views - Link for Pizza.html
###Resources and tools I used:
####Helpful links provided:
- Chrome Dev Tools 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.
- The fewer the downloads, the better
- Reduce the size of text
- Optimize images
- HTTP caching