Website Performance Optimization portfolio project

The challenge was to optimize this online portfolio for speed! In particular, to optimize the critical rendering path and make this page render as quickly as possible by applying the techniques I picked up in the Critical Rendering Path course.

Getting started

Part 1: Optimize PageSpeed Insights score for index.html

1. Added async attribute to all the JS files
2. Added media="print" for the CSS.
3. Inlined the style.css file
4. Inlined the both the other JS scripts
5. Moved the font link below the footer
6. Compressed the profile pic and the pizzeria pic

Pagespeed Insights Scores

1. index.html - Mobile(90),Desktop(90)
2. project-2048.html - Mobile(95),Desktop(97)
3. project-mobile.html - Mobile(95),Desktop(97)
4. project-webperf.html - Mobile(96),Desktop(97)

Part 2: Optimize Frames per Second in pizza.html

Main.js changes

1. In the function changePizzaSizes, a) Brought the declaration of dx,newwidth and randomPizzaContainer outside the loop b) Instead of using querySelectorAll, I am using getElementById now.
2. In the function updatePositions, a) Brought the declaration of items,scrollTop and scrollTopNew outside the loop b) Instead of using querySelectorAll, I am using getElementsByClassName now.
3. Decreased the number of iterations for the loop generating sliding pizza from 200 to 100.

HTML changes

1. Inlined the style.css for pizza.html

Time to resize pizza

Time to generate last 10 frames