Giters

m-coding / fe-04-optimization

Website Optimization

Home Page:http://m-coding.github.io/fe-04-optimization

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

##How to view this project

###Local

After building, find the dist folder in the project and open index.html

###Online

View on github at http://m-coding.github.io/fe-04-optimization

##Build Tool Requirements

  1. Node.js
  • Check it is properly installed:
  • node -v
  • npm -v
  1. GraphicsMagick
  • Required for gulp-imagemin
  • Check it is properly installed:
    • gm -version
  1. Gulp
  • Navigate to the project directory (where the gulpfile.js is located).
  • In your terminal enter the command:
    • npm install
    • This will install all modules listed as dependencies in package.json
  • Windows Tip:
  • You see the error Please try running this command again as root/Adminstrator
  • Start Git Bash as administrator (right-click and select Run as adminstrator)

##Build the Project

Make sure you satisfy the Build Tool Requirements first.

  1. Navigate to the root of the project directory in your terminal.
  2. Check that node_modules folder exists. If not, see step 3 under Build Tool Requirements.
  3. Enter the command gulp clean to delete everything in the dist folder.
  • If you want to preview what files will be deleted, enter the command gulp cleanDryRun instead.
  1. Next enter the command gulp and the project will be built in the dist folder.
  • You can review differences by comparing the src and dist folder.

##Optimizations

####index.html

  1. Resized thumbnail images to be 100px by 62px
  2. Resized large images to be a max width of 480px
  3. Compressed the images
  4. Removed optional analytics script
  5. Inlined styles from style.css into the <head>
  6. Minified inline styles
  7. Add media="print" attribute for print.css
  8. Minified print styles
  9. Use Web Font Loader to load Google fonts

PageSpeed Insights: Scored Above 90

####pizza.html

  1. Resized large images to be a max width of 360px
  2. Add properties to the .mover class in style.css
  • Set width and height properties
  • Add backface-visibility: hidden; property
  • Add transform: translateZ(0); and will-change: transform; properties
  1. Replace querySelector with getElementById in resizePizzas
  2. Refactor changePizzaSizes() in main.js to prevent Force Synchronous Layout
  • Move sizeSwitcher() logic here and remove determineDx()
  • Use getElementsByClassName instead of querySelectorAll
  • Move constant variables outside for loops
  • Simplified loop logic
  1. Refactor updatePositions() in main.js to reduce Scripting Time
  • Use getElementsByClassName instead of querySelectorAll
  • Save scrollTop variable outside loop
  • Save phase sequence values in an array
  • Use transform instead of left to set x-axis position of pizza.png
  1. Refactor DOMContentLoaded event listener function
  • Declare variables outside of loop
  • Removed height and width properties, already defined in .mover class
  • Removed basicLeft and set left property
  • Use getElementById instead of querySelector
  1. Minified main.js

About

Website Optimization

http://m-coding.github.io/fe-04-optimization

Languages

Language:JavaScript 46.6%Language:HTML 46.6%Language:CSS 6.8%