This repository includes websites which I optimized for speed, as a project for Udacity's Front End nanodegree. A list of optimizations follows underneath.
To run the websites, you can simply visit this Github Page.
- Inlining all the CSS, JS and images. Note: While the CSS is render blocking and effectively was a hinder to the page's performance, the JS and the images didn't need to be inlined, and inlining them could be a problem if they weren't such small files. In this case inlining them too was of no relevance to performance and it allowed me to automate the task with a plugin.
- Refactoring some functions to avoid forced synchronous layouts. Namely, I changed them so that they did all DOM queries first, and then applied all style changes in a single batch.
- Using requestAnimationFrame in the functions that did style changes, to make the animation run smoothly, executing the functions before painting the next frame.
- Minifying CSS and JS.
- Compressing all the images, and resizing those that were not adjusted to their display size.
- Minifying all the HTML files. Note: This also minifies the CSS and JS that is inlined in index.html
The code was separated into production (build) and source (src) code. Tasks were automated using GruntJS.
- grunt
- grunt-contrib-cssmin
- grunt-contrib-htmlmin
- grunt-contrib-imagemin
- grunt-contrib-uglify
- grunt-inline-css