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
- 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