I optimized this mobile portfolio as part of my Front-End Nanodegree. This project is part of Udacity's Critical Rendering Path course.
- Optimized the pictures that loaded as thumbnails next to the individual pages
- Inlined CSS for performance gain
- Got rid of rendering blocking css (print) as a separate css
- Rendering blocking JavaScript got moved to the end of the document and the tag "async"
- For an additional performance gain the Google Analytics JS is stored locally and cached for 8 days (Google Recommendation)
- Activating caching via CloudFlare for performance gain
- Personalized the page(s)
- Minified CSS, HTML and JavaScript files (via CloudFlare)
I installed Gulp as a Build System but decided not to use it
- Included the will-change and transform property for the pizzas in the background to limit compositing & painting
- In the respective loops I got rid of Forces Synchronous Layout (FSL)
- Optimized main.js by using getElementById() and getElementsByClassName (Web API)
- Moved variables out of the loop so they are not created with each iteration
- If possible variables are declared outside of the for loops
- Number of pizzas are now calculated on screen size (window.screen.height * space [265] = pizzas)
- Used http://autoprefixer.github.io/ for the CSS in pizza.html
The page can be accessed at www.matthiasludwig.co