The challenge for this project is to optimize an online portfolio for speed! Udacity's Critical Rendering Path course served as a guide to learn different techniques to optimize the critical rendering path and make the page render as quickly as possible.
Download the project repository, WebsiteOptimizationPortfolio. Or see below "How to Complete This Project" for more detailed instructions.
A demo page may be viewed here.
The goal is to achieve a score of 90% or higher for both Mobile and Desktop when evaluating index.html using Google Pagespeed Insights.
The key to getting a higher score is to reduce the number of Critical Rendering Paths as well as the Critical Size of our files.
Optimizations made:
- Resize pizza image
- Remove render-blocking JS: add async attribute to google analytics
- Optimize CSS delivery: use media query print type;
- Move
<script>tags to end of html (before closing<body>tag); - Inline CSS
The goal is to render the page with a consistent frame-rate of 60fps when scrolling. Additionally, when a user resizes the pizzas using the pizza slider, the time to resize must be under 5ms, to give it a smooth transition between the different sizes given.
Optimizations made (in views/js/main.js):
- replace all querySelector methods with getElementById
- replace all querySelectorAll methods with getElementsByClassName
- remove determineDX function due to its complex and unnecessary computations
- changePizzaSizes function: determined 3 possible pizza widths(%) and used these in the for loop when it iterates thru all the pizzas
- declare variables outside of loops to improve performance
- dynamically calculate the number of pizzas needed to fill the screen
- implemented a requestAnimationFrame method for smooth scrolling
To get started, check out the repository and 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 the top-level of your project directory to make your local server accessible remotely.
$> cd /path/to/your-project-folder
$> ./ngrok http 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!
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.