https://github.com/andi-nugroho/web-optimization-checking
Optimizing index.html to a pageInsight speed score above 90 and Frames per Second(FPS) in pizza.html to 60
https://github.com/andi-nugroho/web-optimization-checking
css fps html javascript pagespeed-insights website-optimization
Last synced: about 1 year ago
JSON representation
Optimizing index.html to a pageInsight speed score above 90 and Frames per Second(FPS) in pizza.html to 60
- Host: GitHub
- URL: https://github.com/andi-nugroho/web-optimization-checking
- Owner: andi-nugroho
- Created: 2025-03-07T04:43:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T04:50:30.000Z (about 1 year ago)
- Last Synced: 2025-03-07T05:27:18.926Z (about 1 year ago)
- Topics: css, fps, html, javascript, pagespeed-insights, website-optimization
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Website Performance Optimization
This project aims to optimize a provided website with a number of optimization- and performance-related issues so that it achieves a target PageSpeed score and runs at 60 frames per second. As web applications become increasingly interactive and accessed on a variety of devices there are a variety of opportunities in which performance issues can hinder the user experience. This project presents a number of those performance issues.
Open and view the Project using the .zip file provided or at my [Github Repository](https://github.com/andi-nugroho/web-optimization-checking).
The project is also hosted on [GitHub](https://github.com/andi-nugroho/web-optimization-checking)
## Table of Contents
- [Getting Started](#getting-started)
- [Tools Required](#tools-required)
- [Installation](#installation)
- [Development](#development)
- [Part 1: Optimize PageSpeed Insights score for index.html](#part-1-optimize-pagespeed-insights-score-for-indexhtml)
- [Part 2: Optimize Frames per Second (FPS) in pizza.html](#part-2-optimize-frames-per-second-fps-in-pizzahtml)
- [Running the App](#running-the-app)
- [References](#references)
## Getting started
The project will be evaluated by a Udacity code reviewer according to the Web Optimization project [rubrics](https://review.udacity.com/#!/projects/2735848561/rubric)
### Tools required:
* [CSS Minifier](https://cssminifier.com/)
* [JS Minifier](https://javascript-minifier.com/)
* [Kraken.io](https://kraken.io/) and [Optimizilla](http://optimizilla.com/)
* [PageSpeed Tools](https://developers.google.com/speed/pagespeed/insights/)
### Installation
No additional installation is required for this project
## Development
### Part 1: Optimize PageSpeed Insights score for index.html
* The aim of this project was to optimize `index.html` to a pageinsight speed score above 90.
* My score was: 95 for Mobile and 96 for Desktop version.
#### Step 1: Optimizing `index.html`
> Unlinking style.css and making it internal after minifying it.
> Using media query "print" on print.css.
> Shifting script tags from head to end of body and using async attribute on them.
### Part 2: Optimize Frames per Second (FPS) in pizza.html
* The aim of this project was to optimize `pizza.html` to 60 fps scrolling speed.
* And to reduce the `pizzaResizeTime` less than 5ms.
#### Step 1: Optimizing `pizza.html`
> Shifting script tags from head to end of body.
#### Step 2: Optimizing `main.js`
> Minified js for arrays.
> Changes in changePizzaSizes()
* Declaring rPC and dx outside the loop as it was being declared again and again.
> Changes in `UpdatePosition()` function.
* Declaring phase outside the loop as it was being declared again and again.
> Changes in `document.addEventListener()`.
* Reducing the number of times the loop runs as image will be generated lesser number of times.
## Running the App:
* Open the project through the `hosting link` provided above or the `.zip` file provided and extract the files.
* Open `index.html` in the browser of your choice.
* Open `views/pizza.html`.
> `pizza.html` can also be opened through `Cam's Pizzeria` link in `index.html`.
## References
* [Web Optimization Course](https://classroom.udacity.com/courses/ud884)