This is my solution to the Website Optimization Portfolio Project, which is part of Udacity's Front-End Nanodegree Program. This project focuses on website performance/optimization, honing in the critical rendering path to make sure the website renders as quickly as possible.
- Install all dependent npm packages:
$> cd project-directory
$> npm install- Install gulp if you don't have it yet:
$> npm install -g gulp- Run
gulpin your terminal to start the task runner and start up a local dev server:
$> gulp- Copy an ngrok executable to the main project directory and use it to tunnel a url to localhost (detailed instructions are in the readme section of original Udacity repo below):
$> ./ngrok http 3000There are three required outcomes for this project:
- Optimize the main website's index.html so it achieves a Google PageSpeedInsights score of 90 or more.
- Optimize views./js/main.js and views/pizza.html so that the site renders with a consistent 60fps when scrolling.
- Optimize views/js/main.js so that the time to resize pizzas using the change pizza size slider is less than 5ms.
- Deferred loading of Google Analytics script
- Moved fetching of web font to use @font-face in styles.css
- Added "media=print" attribute to fetch print.css only for printing
- Uglified and minified JS and CSS files
- Resized and optimized image files to use base64 encoding
- Used inline script tag to defer load main css file
- Used cached value for document.body.scrolltop in updatePositions() to avoid forced synchronous layout
- Simplified calculation of widths for pizza size slider by using CSS classes instead of JavaScript.
- Got rid of in-line styling of width and height in randomPizzaContainer divs
- Removed complicated JS function to calculate width, instead revised document.QuerySelectorAll to add the correct pizza size classes based on pizza size slider value
- Used cached query results for .randomPizzaContainers
- Used screen.height to determine number of background sliding pizzas to create
README from original Udacity repo below.
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.
####Part 1: Optimize PageSpeed Insights score for index.html
Some useful tips to help you get started:
- Check out the repository
- To inspect the site on your phone, you can run a local server
$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080- Open a browser and visit localhost:8080
- 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- 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.
- Optimizing Performance
- Analyzing the Critical Rendering Path
- Optimizing the Critical Rendering Path
- Avoiding Rendering Blocking CSS
- Optimizing JavaScript
- 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 portfolio was built on Twitter's Bootstrap framework. All custom styles are in dist/css/portfolio.css in the portfolio repo.