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.
go to https://developers.google.com/speed/pagespeed/insights/
and analyze my page
http://craraulsalazar.github.io/udportfolio/index.html
-
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
-
Reduce number of sliding pizzas in line 577. There's no need to create 200 animated pizzas. a minimum of 40 is acceptable
-
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.
-
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
-
Refactor document.addEventListener in line 583 Replace document.queryselector by document.getelementId
-
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,
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 make your local server accessible remotely.
$> cd /path/to/your-project-folder
$> ngrok 8080- 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!
- 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.
Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.
- A great discussion about portfolios on reddit
- http://ianlunn.co.uk/
- http://www.adhamdannaway.com/portfolio
- http://www.timboelaars.nl/
- http://futoryan.prosite.com/
- http://playonpixels.prosite.com/21591/projects
- http://colintrenter.prosite.com/
- http://calebmorris.prosite.com/
- http://www.cullywright.com/
- http://yourjustlucky.com/
- http://nicoledominguez.com/portfolio/
- http://www.roxannecook.com/
- http://www.84colors.com/portfolio.html