Project 4 of Udacity Front End Nanodegree (modified)
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 54 commits ahead, 29 commits behind udacity:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
dist
img
js
views
CNAME
README.md
favicon.ico
gulpfile.js
index.html
project-2048.html
project-mobile.html
project-webperf.html

README.md

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.

Getting started

####Part 1: Optimize PageSpeed Insights score for index.html

To view the live version of this project:

  1. Open a browser and visit http://rogyw.navevent.co.nz/ufend-P4-optimisation/

  2. 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
  1. Fork the repository on GitHub.
  2. Use git to copy/clone your new repository to your local system.
  3. Install npm if not already in use.
  4. Install gulp.js if not already in use.
  5. 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
  6. Open your local console and change the current directory to the project root folder (and location of gulpfile.js). The subfolder dist contains the automatically generated optimised files.
  7. To refresh the contents of dist folder use gulp rebuild. the rebuild will delete the old dist folder and rebuild based on current source files.
  8. To deploy the contents of dist folder to your live gh-pages for the repostitory on Github use gulp deploy
  9. Test it worked!
Optimisations completed by Gulp

gulp-cssnano - minify CSS files gulp-autoprefixer - auto-prefix CSS gulp-gh-pages - upload to gh-pages gulp-uglify - minfy javascript files gulp-imagemin - reduce image sizes gulp-htmlmin - minify html files run-sequence, del - used for project building

####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.

Javascript modifications made to views/js/main.js

Roger made the following changes:

  1. Changed code loops to remove instances of "Forced Synchronous Layout" by batching DOM read operations and then batching style changes - Avoids thrashing.
  2. Simplified code to reduce complexity of calculations.
  3. Changed the method of selecting elements in DOM from querySelectorAll() to getElementsByClassName() and querySelector to getElementById.
  4. Moved selectors outside of loops when possible
  5. 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.
  6. Moved sliding pizzas to own layer in CSS
  7. added comments to code using JSDoc format and updated README
  8. Implemented further changes suggested by Udacity Reviewer 1 - Thanks go to Carlos

Provided Reference Links: Optimization 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.

Contacts

###Udacity Udacity website

###Roger Woodroofe Contact Roger Woodroofe through GitHub or email rogyw@yahoo.co.nz