Skip to content

Latest commit

 

History

History
140 lines (116 loc) · 6.09 KB

README.md

File metadata and controls

140 lines (116 loc) · 6.09 KB
Raw

Website Performance Optimization portfolio project

This project aims to optimize and improve the webpage load speed based on critical rendering path, render blocking and other concepts to improve the webpage speed and make the animation effect within the 60 fps require according to the optimization on HTML,CSS and JavaScript. Original code is from the Udacity front-end developer nano degree program's repository frontend-nanodegree-mobile-portfolio.

Getting started

Live demo on Github Page: Website Performance Optimization.
Locally

1. Clone this repo:

$ git clone https://github.com/joeyzhang1989/Web-optimizations.git

2. Serve the application:

Python 2
$ python -m SimpleHTTPServer
Python 3
$ python3 -m http.server.

You can use the Python SimpleHTTPServer to serve this webpage game on your local machine.

3. Open the application:

$ open "http://localhost:8000"

Optimized parts

####Part 1: Optimize PageSpeed Insights score for html files PageSpeed Tools

  • Inline and identify the Critical CSS in the head tag by using the penthouse.
  • Move the scripts and links to the end of body tag.
  • Added media, defer and async attribute to the CSS and JavaScript links.
  • Compress images and minify the js files.

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

  • Inline and identify the Critical CSS in the head tag by using the penthouse.
  • Add the CSS attribute for the mover class in style.css to improve the render speed (composite independent layers)
.mover {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
  • Replace the querySelector and querySelectorAll with getElementsByClassName and getElementById for faster speed.
  • Minify the main.js files, use the minified files for production.
  • Delete the determineDx function and move sizeSwitcher(size) to changePizzaSizes(size),move the DOM selector out of loop
function changePizzaSizes(size) {
    switch(size) {
      case "1":
        newWidth = 25;
        break;
      case "2":
        newWidth = 33.3;
        break;
      case "3":
        newWidth = 50;
        break;
      default:
        console.log("bug in sizeSwitcher");
    }

    var randomPizzas = document.getElementsByClassName("randomPizzaContainer");

    for (var i = 0, l = randomPizzas.length; i < l ; i++) {
      randomPizzas[i].style.width = newWidth + "%";
    }
  }
  • Move the 'mover' selector out of loop and declaring the phase variable in the initialisation of the for loop prevent it from being created every time the loop is executed
function updatePositions() {
  frame++;
  window.performance.mark("mark_start_frame");

  var items = document.getElementsByClassName('mover');
  var top = document.body.scrollTop / 1250;
  
  for (var i = 0, l = items.length, phase i < l ; i++) {
    phase = Math.sin(top + i % 5);
    items[i].style.left = items[i].basicLeft + 100 * phase + 'px';
  }
  • Move the 'movingPizzas1' selector out of loop and generate the number of pizzas to draw based on the resolution of screen
document.addEventListener('DOMContentLoaded', function() {
  var lWidth = window.screen.width;
  var iHeight  = window.screen.height;
  var s = 256;
  var cols = lWidth / s;
  var rows = iHeight / s;                  // Generate pizza number based on screen resolution
  var pizzas = Math.floor(cols * rows);     // calculate the integer for pizzas using Math.floor function     
  var movingPizzas = document.getElementById('movingPizzas1');
  for (var i = 0, elem; i < pizzas; i++) {
    elem = document.createElement('img');
    elem.className = 'mover';
    elem.src = "images/pizza.png";
    elem.style.height = "100px";
    elem.style.width = "73.333px";
    elem.basicLeft = (i % cols) * s;
    elem.style.top = (Math.floor(i / cols) * s) + 'px';
    movingPizzas.appendChild(elem);
  }
  updatePositions();
});

Optimization Tips and Tricks

##License This project is a public domain work, dedicated using MIT. Feel free to do whatever you want with it.