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.
- Minify images both JPEG and PNG using
gulp-image-optimization, gulpimagemin, imagemin-jpegoptim and gulp-image-resize.
- Minify CSS files both style.css and print.css using gulp-cssmin.
- Inline Google fonts
- Remove scripts fomr CRP by inserting async inside.
- Inline CSS files into index.html using critical.
- Replace querySelectorAll into more specific selectors such as getElementById, getElementByClassName.
- Eliminate redundant action to change pizza size with slider.
- Improve scroll action speed in updatePositions function.
- Reduce the number of rendering pizza 200.
- Image Optimization: gulp-image-optimization, gulpimagemin,imagemin-jpegoptim and gulp-image-resize.
- Minify CSS: gulp-cssmin.
- Inline CSS into HTML: Critical plugin.
- Rename files after taking actions: gulp-rename.
Here is the Udacity style guide that I followed.