For all of the javascript and css files in this project, I minified them. The minified files are the ones that are used to load the pages. However, to make it easier for the graders, I also kept a large file. These files have the name "_readable". One other thing that I did was to reduce the size of the pizzeria image. I noticed that this was over 2MB. Therefore, I reduced it to 155KB and it still maintains a similar clarity.
To do the testing, you can use the site on ngrok. The URL is http://4fbe661c.ngrok.com/index.html
-
PageSpeed insights. The web version of the site already passed the 90. However, the mobile version is where most of the work was needed. Here are the changes that were made to pass this test. a. I noticed that the google analytics js did not have the async tag. I added that so that it would not impact the loading of the page. b. I moved all of the css from style.css into the index.html file. This reduced a required trip to the server by moving the css out of an external file and inline in the html file. c. I noticed that the loading of the Google Font effected the PageSpeed insights score pretty drastically. Therefore, I went out to the Google Fonts site and copied the necessary css components into the index.html file.
d. I also created a portrait.css file that would be used for the mobile version in portrait landscape. UPDATE: This is the second time I am submitting the project for review. I don't understand why it passed when I first tried it. I optimized the profilepic.jpg and pizzeria.jpg images which caused the PageSpeed Insites to be 91 for Mobile and 94 for Desktop. -
Pizza.html optimization. Here are the changes that I made to get the FPS over 60. a. In the ChangePizzaSizes function, I noticed that the determineDX function was being called every time the loop ran. Since all the pizza sizes were the same, this only needed to be run once and then all the pizzas could be adjusted using the same calculation. b. In the updatePositions function, I noticed that the phase variable would only be 1 of 5 values based on the element. Since that would be the case, I created an array that contained those 5 values and then just used them over and over again based on the same condition that was in the original code. c. Moved the items array to a global variable that is initialized once after the pizzas are created. d. Reduced the number of pizzas created from 200 to 50 since there is no need to create that many. 50 is still a little overkill.
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! 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