/web-opt

Udacity web site optimization project

Primary LanguageJavaScriptMIT LicenseMIT

Website Performance Optimization portfolio project

The challenge 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 picked up in the Critical Rendering Path course.

Getting started

The project is accessible in GitHub Pages. You can check the PageSpeed Insights score using this link.

Installation

If you want to run everything locally, you need:

apt-get install imagemagick
git clone https://github.com/dsteb/web-opt
cd web-opt
npm install
gulp

The Gulp task do:

  • Image optimization (resize and compress).
  • Reduces the render critical path by inlining CSS.
  • Minimizes CSS and HTML.
  • Run the local server on port 8000.
  • Run the ngrok to make the web project be accessible from the Internet (the URL is printed in the console).
  • Run the PageSpeed Insights with mobile and desktop strategy.
  • Provides the link to open PageSpeed Insights in a browser.

Work done

  • PageSpeed Insights score for index.html is optimized to over 90 points.
  • Frames per Second in pizza.html are optimized to 60fps.
  • Junk and "force layouts/reflows" are removed from pizza.html.
  • Everything is automized using Gulp.

Optimization Tips and Tricks