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,
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
Navigate to http://realevanponter.github.io/ Choose a link of interest Scroll as desired
If you choose Cam's Pizzeria, you can choose which size of pizza you would like to see on the screen using the slider.
Loading an external font was render-blocking the text on the page. Removing this resource improved the speed of the inital load.
Inlining the CSS proved to speed up the page load, since there was one less roundtrip for a resource
The changePizzaSizes function was refactored to improve performance. Instead of using pixels to specify a new size, it uses a percentage value that is calculated before iterating through each pizza element and changing the size. A variable is used to store the length of randomPizzas instead of having to calculate it on each iteration.
The function that runs when DOMContentLoaded is called was not effectively calculating how many pizza elements would need to be created. It now uses the height of the window to determine how many rows of pizzas to make. This reduces the number of elements that are created, and speeds up the performance of the page.
I followed along with the two web performance courses for this project very closely and started working on this project as they were going over topics that related directly to speeding up the performance of this website. The only function I had to look up was the window.innerHeight() function, which I found on developer.mozilla.org