This is part of the Front-end Web Developer nanodegree from udacity. The project utilizes Website Performance optimization and Browser Rendering Optimization

Access index.html file

Optimize a provided website with a number of optimizaation- and performance- related issues so that it achieves a target PageSpeed score and runs at 60 frames per seconsd.

Before optimizing the performance, the score of pagespeed Insight is below.


After optimiznig, the scores are 90+ at pagespeed Insight is below.

1. Minify images both JPEG and PNG using

gulp-image-optimization, gulpimagemin, imagemin-jpegoptim and gulp-image-resize.

1. Minify CSS files both style.css and print.css using gulp-cssmin.
2. Inline Google fonts
3. Remove scripts fomr CRP by inserting async inside.
4. Inline CSS files into index.html using critical.

1. Replace querySelectorAll into more specific selectors such as getElementById, getElementByClassName.
2. Eliminate redundant action to change pizza size with slider.
3. Improve scroll action speed in updatePositions function.
4. Reduce the number of rendering pizza 200.

1. Image Optimization: gulp-image-optimization, gulpimagemin,imagemin-jpegoptim and gulp-image-resize.
2. Minify CSS: gulp-cssmin.
3. Inline CSS into HTML: Critical plugin.
4. Rename files after taking actions: gulp-rename.

Here is the Udacity style guide that I followed.