Optimizations I Made
General
- Resized the pizza image (made it smaller)
- Lowered quality on pizza.jpg, image1.jpg, image3.jpg to 30% to optimize images without loss of quality
In index.html
In main.js
- Changed queryselector to getElementsByClassName to reduce load time when resizing pizza
- Moved some of the calculations in the for loops to outside the loops
- In the ChangePizzaSlices function, changed queryselectorAll to getElementsByClassName
- In the updatePositions function, made a variable for list length for use in the for loop statement
- Changed pizzeria.jpg to a .png file to make it smaller
- Moved pizzasDiv outside of for loop since it doesn't change
- Moved scrollTop to a local variable to improve performance
In pizza.html
- added viewport meta tag in head
- Created pizzeria1.jpg since pizzeria.jpg was used on index.html and pizza.html, but with different sizes.
To run the project, use Page Insights to test that speed is 90% or highter. Use Chrome development tools to ensure pizza resizing takes less than 5ms and page itself is less than 60fps.
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,
####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 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! 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.
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