/shouldz.github.io

Testing Github Pages

Primary LanguageJavaScript

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

####Part 3: Start it up!

You have to do npm-install first:

	npm install

Then you start the Gulp:

	gulp start

You can find all the optimized files in the "dist" folder.

####What happened to the files?

index.html
	- inlined css for faster loading speeds
	- async to all javascripts and minified the <script>
	- changed image-src to the local images from img/

Main.js
	- replaced querySelectorAll to getElementsByClassName or getElementById
	- refactored changePizzaSizes() and updatePositions(), moved variables out of the for-loop to get better performance
	- At the end i did a calculation for sliding pizza background, it calculates how many pizzas can fit the screen and not 200.

pizza.html
	- inlined css for faster loading

I also added some comments into the code.

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.

Sample Portfolios

Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.