Website Optimization

Optimized a provided website to achieve 60FPS and achieve grades of 90 and above on Google PageSpeed Insights
Alternatives To Website Optimization
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Frontend Nanodegree Mobile Portfolio328
a year ago41JavaScript
Dev Portfolio Blog75
4 months ago10November 19, 20218mitHTML
Minimal theme for blog and portfolio
7 years ago7JavaScript
8 months ago1cc0-1.0HTML
3 days agomitTypeScript
Source files for my personal website 💻
Front End Optimization3
7 years agoJavaScript
This repository is for udacity's front end optimization project.
Frontend Nanodegree Mobile Portfolio2
6 years agon,ullJavaScript PageSpeed 测速:
Website Optimization2
9 years agoJavaScript
Optimized a provided website to achieve 60FPS and achieve grades of 90 and above on Google PageSpeed Insights
a month ago15HTML
Dan Buda's Web Development Portfolio
Alternatives To Website Optimization
Select To Compare

Alternative Project Comparisons

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, inspect the code,

Getting started

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 make your local server accessible remotely.
$> cd /path/to/your-project-folder
$> ngrok 8080
  1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! More on integrating ngrok, Grunt and PageSpeed.

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

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.

Sample Portfolios

Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.


  1. For the minfying and render blocking, I used gulpJs. I successfully minified and removed render blocking. I achieved a user experience of 95 or greater for both mobile and desktop.

i. You will see that there is the build, dist, node_modules. ii. These all were created from the gulpifying process.

Main.Js 2. I removed the 200 small pizzas being looped through to a far smaller number - 30. There is no reason to loop through 200 times when the user never views anything more than 17-25 pizzas at any given time.

  1. I changed every querySelector() to getElementById(), getElementsByTagName() or some variation of getElement..(). This is because it is a far faster method, and it surpasses querySelector() on almost every browser.

  2. I cached: a. var randomPizzaC = document.getElementsByClassName("randomPizzaContainer"),length; in the changePizzaSizes function. b. var pizzasDiv = document.getElementById("randomPizzas"); in the changePizzaSizes function. c. movingPizzas1 = document.getElementById("movingPizzas1"); in the updatePositions()

  3. The optimized folder is GulpFiles. Run that project and you will see all the optimizations...I hope! Hopefully it is all good.

Looked through the Piazza forums and saw this by Dallas Frank:

  1. The largest impact you can have will be by looking at the javascript to see what unnecessarily work is being done. This is especially true for anything that is done every time in a loop even though it doesn't need to be redone every time. Cache objects as variable names before the loop and use them repeatedly instead of finding them every loop or recalculating numbers that won't be changing every loop. For example. you don't need to check the length of an array a thousand times if it is never changed after the page loads.

  2. I believe you can get it within goal by doing nothing but working on the loops but you can get it quite a bit faster than the goal that if you feel inclined to. Just keep in mind the fps is not as measured by chrome's fps thing. It is measured by the console output they spit out based on the measurements in the project files.

  3. If you want to go the extra mile, you will need to also reduce image sizes and try to check which methods are faster but do the exact same thing. For example, using getElementById() is faster than querySelector(). jsPerf is a good place to look for various speed methods for comparison (here is a relevant example).

Popular Pagespeed Projects
Popular Portfolio Projects
Popular Software Performance Categories

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