https://github.com/nazanin1369/up5-websiteoptimization
Website Performance Optimization portfolio project
https://github.com/nazanin1369/up5-websiteoptimization
Last synced: 14 days ago
JSON representation
Website Performance Optimization portfolio project
- Host: GitHub
- URL: https://github.com/nazanin1369/up5-websiteoptimization
- Owner: Nazanin1369
- Created: 2015-08-06T17:01:01.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-08-16T10:53:19.000Z (about 10 years ago)
- Last Synced: 2025-02-25T06:32:41.828Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 4.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Website Performance Optimization portfolio project
In order to run optimization tasks, use **gulp optimize** command in the project directory.
Then pen http://localhost:8080/ in your browser.
## Part 1: index.html
#### Psi Results
- Mobile : 94/100
- Desktop: 95/100
#### Changes applied
* used @fontface to optimize webfonts
* used **async** property for non-critical script to prevert blocking the page rendering.
* **Deferred loading the style.css** file tp pace the page rendering
* removed remote sources for images and made them **local** in index.html
* used **gulp-uglify** and **gulp-minify-css** to minify css and javascript files
* removed redundant css rules
* used **jshint-gulp** as JS linting
* used **gulp-image-optimization** and **gulp-imagemin** for images optimization (reason to use two plugins was a bug in imagemin jpg images optimization)
* used **psi** and **ngrok** for measuring speed and acccessing localhost remotly.
* used **gulp-connect** for running the server.
## Part 2: pizza.html
The pizza.html webpage was rendering at < 30fps for scrolling. Also, resizing the pizza on the slider took an average of > 200 ms.
#### Results
- Time to resize pizzas under 5ms from 200ms
#### Changes applied
* Leveraged browser caching by including _ _ and .htaccess file
* Added a complete view port meta tag on _pizza.html_ page.
* Optimized main.js by removing the calculation from inside the loop in updatePositions() and changePizzaSizes() functions.