Optimized this poorly performing page to score above 90 in Google Page Speed using async script loads, css inlining, conditional media css loading, concatenation/minification, google font loader, image optimization, and more. Optimized the secondary pizzeria page to eliminate jankiness and run at a smooth 60fps.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 14 commits ahead, 1 commit behind udacity:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
views
.gitignore
Gruntfile.js
README.md
index.html
package.json
project-2048.html
project-mobile.html
project-webperf.html

README.md

Web Performance Optimized Website

This website was provided unoptimized with many performance problems leading to slow initial loading, excessive cpu usage, and performance very far from a 60fps target.

I implemented many web performance optimizations to make the index.html and views/pizza.html load and run faster. Google Page Speed currently gives a score of ~ 97 on both mobile/desktop for the index.html page. The pizza.html page was optimized so that functions making visual changes don't cause jank i.e. maintains a FPS of 60fps or in other words runs animation functions in under 16ms.

Initial Load Optimizations

The relevant page for these optimizations is index.html in the root directory.

  • Images losslessly optimized and resized to be appropriate for usage in the actual design
  • Gzipping compression and some caching already implemented by github pages hosting, but if I could access .htaccess I'd add rules to also cache some resources that have short expirations set in the headers
  • Main stylesheet CSS inlined since it was a very small file that wasn't worth making an extra request, otherwise I'd just concat/minify all the stylesheets
  • Print CSS stylesheet made to load conditionally using the media attribute
  • HTML and Javascript for index.html minified to reduce file size
  • All javascript files now being loaded asynchronously with async attribute
  • Google Webfonts made non-render blocking by using the Google Webfont Loader to load external fonts asynchronously

Webapp Performance Optimizations

The relevant page for these optimizations is pizza.html, in the views directory.

  • Images used on the page losslessly optimized
  • Unused CSS declarations removed via UnCSS
  • Fixed layout thrashing by switching Javascript triggered CSS changes from left: __px and other position settings to using CSS transforms so the browser only has to composite the layers instead of forcing reflows
  • Reduced number of animated background elements to minimum needed to fill the screen by calculating height of window
  • Replaced reading of actual scroll position with an arbitrary value pseudo scroll tracker to prevent unnecessary DOM reads triggering layout for a simple animation effect
  • Debounced scroll event functions using requestAnimationFrame to prevent excessive calls to update functions
  • Refactored pizza element resizer to remove unnecessary DOM reads of element sizes, instead directly setting the sizes of elements
  • Used getElementsByClassName instead of querySelectorAll for slight gain in grabbing large numbers of DOM elements, used classList.add instead of className for better performance
  • Cached various DOM element references to prevent unnecessary retrievals of previously retrieved DOM collections
  • Minimized number of DOM append operations by using Document Fragments to collect all created elements and appending them in one append operation
  • Made animated element generator asynchronous loading compatible and added async attribute to script tags

How to Run

View the live web version at https://sunnymui.github.io/frontend-nanodegree-mobile-portfolio/

The homepage is index.html; pizza.html can be reached by clicking on the link for Cam's Pizzeria.

OR

Clone the repo and click on either index.html or views/pizza.html to see each optimized page.

View web performance information using Chrome DevTools' Performance tab by recording a performance snapshot on load and while using the pages. Check page loading speed scores using Google Page Speed.

Comparing to Unoptimized Performance

project-2048.html and project-webperf.html are left unoptimized. You can click to those from index.html to compare loading speed.

To get the unoptimized version of all pages, clone the untouched repository at https://github.com/udacity/frontend-nanodegree-mobile-portfolio

Original Specifications for Website Performance Optimization Portfolio Project

Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the Critical Rendering Path course.

To get started, check out the repository and inspect the code.

Getting started

Part 1: Optimize PageSpeed Insights score for index.html

Some useful tips to help you get started:

  1. Check out the repository
  2. To inspect the site on your phone, you can run a local server
$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080
  1. Open a browser and visit localhost:8080
  2. Download and install ngrok to the top-level of your project directory to make your local server accessible remotely.
$> cd /path/to/your-project-folder
$> ./ngrok http 8080
  1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: More on integrating ngrok, Grunt and PageSpeed.

Profile, optimize, measure... and then lather, rinse, and repeat. Good luck!

Part 2: Optimize Frames per Second in pizza.html

To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js.

You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: Chrome Dev Tools tips-and-tricks.

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.