/performance-optimization

Practicing website optimization by analyzing the critical render path, identifying code bottlenecks with Chrome Dev Tools, and minifying website assets.

Primary LanguageJavaScriptMIT LicenseMIT

Website Optimization Challenge

Optimize a website to gain at least a 90/100 for desktop and mobile on Google's PageSpeed Tool and run at 60 FPS while scrolling. Techniques utilized to optimize website include:

  • Javascript and CSS minification
  • Image compression
  • Improving page's critical rendering path (CRP)
  • Responsive images
  • Google Chrome development tools

Table of Contents

Installation and Run

Grab code source:

  • Clone repository: git clone https://github.com/brianquach/udacity-nano-front-optimization.git or download the zip here.
  • Navigate to the directory where you cloned the repo or unzipped the file to and open folder dist.
  • Use your favorite browser to open index.html.

Developers (optional): To run project's build process follow the following instructions:

  • Install Gulp.
  • Navigate to project's root folder.
  • Run npm install to let npm install required Gulp plugins.
  • Run gulp optimize.

Friendly reminder: Changes to JS and CSS or image files should be done in the src folder because that's where Gulp expects project assets to be.

Optimization Steps

  • Asynchronously download non-critical javascript by adding async script attribute.
  • Move importing CSS and Google Fonts to bottom of HTML body.
  • Gulp task to compresses all images.
  • Gulp task to create thumbnail version of pizzeria.jpg for index.html.
  • Cache javascript document query variables to reduce javascript DOM lookup time.
  • Refactor javascript in resizePizzas function to avoid layout reflow as much as possible.
  • Refactor javascript in updatePositions function and DOMContentLoaded event trigger to avoid layout reflow.
  • Move inline styles into CSS classes.
  • Gulp task to create more efficient sizes of pizzeria.jpg for views/pizza.html.
  • Gulp task to minify JS and CSS.

Creator

Brian Quach

Copyright and License

Code copyright 2016 Brian Quach. Code released under the MIT license.