Website Performance Optimization portfolio project
This repository contains Roger Woodroofe's completed Project 4 for the Udacity Front End Nanodegree.
The project challenge was to optimize the provided online portfolio for speed. In particular, to optimize the critical rendering path and make the index.html page render as quickly as possible by applying the techniques picked up in the Udacity Critical Rendering Path course.
In addition, Roger took the oportunity to learn and practice web tooling and automation through the use of gulp.js automation configuration.
####Part 1: Optimize PageSpeed Insights score for index.html
To view the live version of this project:
Open a browser and visit http://rogyw.navevent.co.nz/ufend-P4-optimisation/
To view the results in Google PageSpeed insights, open a browser and visit https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Frogyw.navevent.co.nz%2Fufend-P4-optimisation%2F
Please refer to Forum Post for steps taken to optimize index.html.
For additional information, you can also view the changes made by Rogyw in the Github Repository log.
On completion, and prior to submission, gulp.js automation configuration file gulpfile.js was added to assist with optimisations and gh-pages deployment.
Using Gulp build tool with this project
- Fork the repository on GitHub.
- Use git to copy/clone your new repository to your local system.
- Install npm if not already in use.
- Install gulp.js if not already in use.
- Install all gulp packages used by project.
npm install --save-dev gulp-cssnano gulp-autoprefixer gulp-gh-pages gulp-uglify gulp-imagemin gulp-htmlmin run-sequence del
- Open your local console and change the current directory to the project root folder (and location of gulpfile.js). The subfolder
distcontains the automatically generated optimised files.
- To refresh the contents of
gulp rebuild. the rebuild will delete the old dist folder and rebuild based on current source files.
- To deploy the contents of
distfolder to your live
gh-pagesfor the repostitory on Github use
- Test it worked!
Optimisations completed by Gulp
####Part 2: Optimize Frames per Second in pizza.html
views/pizza.html was optimized by modifying views/js/main.js until the frames per second rate is 60 fps or higher. Instructive comments were provided in main.js.
Roger made the following changes:
- Changed code loops to remove instances of "Forced Synchronous Layout" by batching DOM read operations and then batching style changes - Avoids thrashing.
- Simplified code to reduce complexity of calculations.
- Changed the method of selecting elements in DOM from querySelectorAll() to getElementsByClassName() and querySelector to getElementById.
- Moved selectors outside of loops when possible
- Reduced number of sliding pizza's from 200 down to a calculated value based on anticipated maximum page resolution and screen size. Also checks if window initially covers multiple screens.
- Moved sliding pizzas to own layer in CSS
- added comments to code using JSDoc format and updated README
- Implemented further changes suggested by Udacity Reviewer 1 - Thanks go to Carlos
Provided Reference Links: Optimization Tips and Tricks
- Optimizing Performance
- Analyzing the Critical Rendering Path
- Optimizing the Critical Rendering Path
- Avoiding Rendering Blocking CSS
- Measuring with Navigation Timing. We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
- The fewer the downloads, the better
- Reduce the size of text
- Optimize images
- HTTP caching
- the FPS Counter/HUD Display may be useful in Chrome developer tools as described here: Chrome Dev Tools tips-and-tricks.
Customization with Bootstrap
The portfolio was built on Twitter's Bootstrap framework. All custom styles are in
dist/css/portfolio.css in the portfolio repo.
###Udacity Udacity website