Website Performance Optimization portfolio project

---

To run the project:

Navigate to: FEND P4: Website Performance Optimization

Alternatively to look at the src and dist folders within the project, navigate to: My github repository

Once there, you can:

1. Check out the repository
2. To inspect the site , you can run a local server

$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080

1. Open a browser and visit localhost:8080
2. Download and install ngrok to make your local server accessible remotely. Note that I needed to add http infront of ngrok 8080 on my system unlike the original directions given for this assignment

$> cd /path/to/your-project-folder
$> http ngrok 8080

1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights!

How to build the project

1. The project has already been configured with a package.json and a Gruntfile.
2. Change to the project's root directory.
3. Install project dependencies with npm install.
4. Convert images to .webp format using www.online-convert.com and store the converted image files in the orginal folders along with the originals. The code has been updated to use the .webp files.
5. Run Grunt with grunt.

Optimizations Used:

1. Converted images to .webp format (www.online-convert.com)
2. Minimized critical css. (grunt-contrib-cssmin)
3. Inlined minimized css except for the print.min.css
4. JS that does not affect the DOM was changed to Async
5. HTML was minimized (grunt-contrib-cssmin)
6. JS files were minimized. (grunt-contrib-uglify)
7. Moved unnecssary work from 'for' looks in main.js
8. Reduced the number of pizzas

Optimization Tips and Tricks and Resources

• John Mav Hang-out on using Grunt - Thank you John!!!
• FPS Counter/HUD Display useful in Chrome developer tools described here: Chrome Dev Tools tips-and-tricks
• Critical Rendering Path course.
• 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

Customization with Bootstrap

The portfolio was built on Twitter's Bootstrap framework. All custom styles are in dist/css/portfolio.css in the portfolio repo.

• Bootstrap's CSS Classes
• Bootstrap's Components