Skip to content

Latest commit

 

History

History
110 lines (79 loc) · 6.44 KB

README.md

File metadata and controls

110 lines (79 loc) · 6.44 KB
Raw

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.

Steps to run optimized index.html

go to https://developers.google.com/speed/pagespeed/insights/

and analyze my page

http://craraulsalazar.github.io/udportfolio/index.html

Steps to optimazed main.js for pizza.html

  1. Reduce number pizza objects. in line 502. There's no need to create 200 pizza objects all at once, a minimum of 12 is acceptable the less pizza objects created, the least time it takes to paint

  2. Reduce number of sliding pizzas in line 577. There's no need to create 200 animated pizzas. a minimum of 40 is acceptable

  3. Refactor function changePizzaSizes in line 453. (Reducing Scripting Time)

I have remove 'document.querySelectorAll(".randomPizzaContainer")' from the function and inside the for loop instead, I used the 'document.getElementsByClassName' function. I also set the percentage width in a case statement inside the same function. no need to use an expensive function such as 'determineDx'. Add all the pizza objects to an element array, and use a for loop to iterate thru those element and set the style width. therefore, all calculations are done before hitting the loop.

  1. Refactor updatePositions function in line 536

    I have remove 'document.querySelectorAll(".randomPizzaContainer")' from the function, instead, I used the 'document.getElementsByClassName' function. Added the pizza objects to an array object Calculate only five phases before the animation begins Iterate thru all the element array and apply the calculations to each object. and no math calculations are performed inside the for loop

  2. Refactor document.addEventListener in line 583 Replace document.queryselector by document.getelementId

  3. Reduce Paint Time in the style.css, I updated the 'mover' class to include will-change: transform and transform: translateZ(0); this only painting the pizza objects instead of the whole screen

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

Getting started

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 8080
  1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! More on integrating ngrok, Grunt and PageSpeed.

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

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.