otsop110/frontend-nanodegree-mobile-portfolio

Udacity P4: Website Performance Optimization Portfolio

Project overview

This project consists of two main parts. First challenge was to optimize the index.html so that both mobile and desktop pagespeed measurements were higher than 90%. The second task was to improve the web performance of Cam's pizzeria page.

Getting started

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

I followed these instructions to get started:

Run a local server.

$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080

Download and install ngrok to access your local server remotely.

$> cd /path/to/your-project-folder
$> ngrok http 8080

####Part 2: Optimize Frames per Second in pizza.html

The aim of optimizing views/pizza.html is to achieve frames per second rate 60 fps or higher by modifying views/js/main.js. Chrome developer tools came handy in measuring the fps rate.

Measured results

By PageSpeed Insights for Mobile portfolio page (index.html):

94% speed on mobile
95% speed on desktop
100% mobile user experience

By Chrome Developer Tools for Cam's Pizzeria (views/pizza.html & views/js/main.js)

scrolling at 60 fps
time to resize pizza less than 5ms

Executed optimizations

Mobile portfolio page

Inlined CSS
Used Web Front Loader asynchronously
Asynced JS
Compressed images with Grunt Imagemin
Resized images with Grunt responsive-images
Added srcset to images
Minified JS files with Grunt uglify

Cam's Pizzeria

Udacity Forum and Fend office hours webcasts provided a great starting point for removing jank caused by forced synchronous layout in 'changePizzaSizes' and 'updatePositions' functions. Thanks also to karoldavid for excellent explanations of how and why certain optimizations were done. I followed his excellent idea in introducing an array for pizzas and counting the number of pizzas needed to show on page by page width.
Moved variables and accessed the DOM outside of For loops to decrease scripting time.
Used 'document.getElementsByClassName()' instead of 'document.querySelectorAll()' in order to decrease layout time.
As suggested in the Udacity FEND discussion forum, I experimented with 'transform: translateX()' which did not improve the performance greatly. I also added 'backface-visibility: hidden;' to the mover class in 'views/css/style.css'.
Compressed pizza.png and pizzeria.jpg images with Grunt imagemin and resized them with Grunt responsive-images.
Added alt and srcset to the images.
Minified JS files with Grunt uglify.

otsop110 / frontend-nanodegree-mobile-portfolio