Front End Optimization

This repository is for udacity's front end optimization project.
Alternatives To Front End Optimization
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
7 years ago9apache-2.0C#
XAF Bootstrap addon for eXpressApp Framework
Dleyna Core10
2 years ago9lgpl-2.1C
dleyna-core is a library of utility functions that are used by the higher level dLeyna libraries that communicate with DLNA devices, e.g., dleyna-server. In brief, it provides APIs for logging, error, settings and task management and an IPC abstraction API.
Webpack Starter Kit9
3 years ago7JavaScript
Webpack 4 starter kit project. Features: Bootstrap 4, ES6, SASS, Image optimization, HMR
Quickness Bootstrap9
5 years agootherJavaScript
Bootstrap for static site with gulp + pug + minify + uglify + image optimization
Bootstrap 4 Starter Project7
7 months ago2mitPHP
bootstrap4 starter project including gulp essentials tasks, best practices and optimization
Template B46
4 years ago1mitPHP
A modern and clean template for Joomla! 3.9.x and up. Built with Bootstrap 4, Font Awesome 5 and AOS using Node.js, npm, Sass, Babel, Webpack and BrowserSync. Also includes build scripts for asset optimization and easy development.
Dleyna Connector Dbus5
2 years ago3lgpl-2.1C
Front End Optimization3
7 years agoJavaScript
This repository is for udacity's front end optimization project.
7 years agoHTML
Apogeu website
Alternatives To Front End 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 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 Optimization Projects
Popular Bootstrap Projects
Popular Software Performance Categories

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