Website Optimization

Udacity Front-End Nanodegree
Alternatives To Website Optimization
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Portfolio Web26
7 years agomitCSS
Static portfolio website template
Portfolio Tracker7
3 years agoJavaScript
Stock Management App implemented as MicroServices
3 days ago3otherTypeScript
Personal blog and portfolio of Jesse Luoto 20166
7 years agoJavaScript
My website portfolio - Built on Jekyll
Angular Portfolio6
8 years agomitJavaScript
Portfolio site built with AngularJS
22 days agoTypeScript
My portfolio and blog built with Next.js, Tailwind CSS and Notion. Deployed on Vercel.
3 years ago2SCSS
Another iteration of my portfolio site, this time with jekyll.
Portfolio Kanban Alternate Field5
6 years ago4mitJavaScript
Custom Grid With Deep Export5
2 years ago14mitJavaScript
Custom Grid App with a deep export option
Query Counter4
5 years ago2mitJavaScript
Simple app that lets you set up one or more query with some explanatory text so that it can display a simple count of the items that match the query(s).
Alternatives To Website Optimization
Select To Compare

Alternative Project Comparisons

Part 1 Website

Using Grunt to automate

  • Create a basic package.json file with the following:
  "name": "website-optimization",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-htmlmin": "^1.4.0",
    "grunt-contrib-imagemin": "^1.0.1",
    "grunt-purifycss": "^0.1.1",
    "grunt-responsive-images": "^0.1.9"
  • Run npm install inside the directory.
  • Install cssmin with npm install grunt-contrib-cssmin --save-dev
  • Install purifycss with npm install grunt-purifycss --save-dev
  • Install htmlmin with npm install grunt-contrib-htmlmin --save-dev
  • Install responsive-images with npm install grunt-responsive-images --save-dev
  • Install imagemin with npm install grunt-contrib-imagemin --save-dev
  • See Gruntfile.js for setup for each task.
  • Run grunt to run the Grunt script.

Steps taken to optimize index.html

  • Add media="print" to the css/print.css link
  • Remove the link to the Open Sans font (not needed)
  • Resize pizzeria.jpg to a width of 100 and compress all images using grunt-contrib-imagemin
  • Purify css to ensure that there is no unneeded css
  • Minify css files using grunt-contrib-cssmin
  • Clean up style.css (several body selectors combined)
  • Add inline css and defer loading the rest of the css
  • Use htmlmin to minify HTML

Part 2 Website

Frame Rate

The updatePositions function was updated to read the document's scrollTop property fewer times. This was causing the animation to update in very quick succession for no reason. Guidance on avoiding layout thrashing was found on the Google Developers site.

Computational Efficiency in resizing pizzas

The changePizzaSizes function contained a lot of unncessary computations for every single random pizza on the page. Since the pizzas are all the same size, the dx and newwidth variables only need to be calculated once for the first pizza in the array. The array was also generated once using a document selector instead of selecting all the elements every time for every for loop. The time to resize pizzas is now well under 5ms and is actually under 1ms based on these changes. I also calculated the length of the array prior to the for loop instead of the loop having to calculate it each iteration. The innerHeight of the window was used to determine how many animated pizzas needed to be drawn.

Other changes

  • Removed the capitalize function and added a text-transform: capitalize into the css for all h4 elements.
  • document.querySelector was replaced by document.getElementbyID or document.getElementsbyClassName where applicable based on information contained here.
  • Minified the html, css, and js for the pizza site
  • Used document.createDocumentFragment to add the pizzas/toppings and animated pizzas to the page.

Project Instructions

Website Performance Optimization portfolio project

Your challenge, if you wish to accept it (and we sure hope you will), 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 you've picked up in the Critical Rendering Path course.

To get started, check out the repository and inspect the code.

Getting started

####Part 1: Optimize PageSpeed Insights score for index.html

Some useful tips to help you get started:

  1. Check out the repository
  2. To inspect the site on your phone, 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 the top-level of your project directory to make your local server accessible remotely.
$> cd /path/to/your-project-folder
$> ./ngrok http 8080
  1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: More on integrating ngrok, Grunt and PageSpeed.

Profile, optimize, measure... and then lather, rinse, and repeat. Good luck!

####Part 2: Optimize Frames per Second in pizza.html

To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js.

You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: Chrome Dev Tools tips-and-tricks.

Optimization Tips and Tricks

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.

Popular Portfolio Projects
Popular Grunt Projects
Popular Content Management Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.