kkas / frontend-nanodegree-mobile-portfolio

Website Performance Optimization Project - FEND P4 Assignment

Website Performance Optimization Portfolio Project

The description of the assignment (Provided By Udacity)

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.

Notes from Kenta Kikui

• I have made the two different directories that represent the environments, "dev", and "prod", for development and production respectively. The directory structures inside of those directories are almost the same as the original one that we are provided.

• The production code are hosted on GitHub Page for this repository. However, they contain only the production code (the files stored in the "prod" directory).

  • In order to achieve this, I have added and used the grunt task, "deploy". See Gruntfile.js for more details.

Directory Structure:

• (project root directory)
  • dev
    • (contains files that are not minimized (I make changes the files in this directory most of the time))
  • prod
    • (contains only generated files for production from the 'dev' directory)
    • (e.g. minified version files of css and js. These are generated by the grunt tasks)

The CRP(Critical Rendering Path) Optimization

Objectives:

• to aquire the score above 90 at PageSpeed Insights for Both Mobile and Desktop

Changes I have made:

• resized and optimized all the image files by using 'grunt-imageoptim' and 'grunt-responsive-images'.

• in index.html:

  • removed render-blocking scripts by:
    • changed to load the webfonts asynchronously
    • added the async property for google analytics script
  • inlined the critical css and made non-critical css gets loaded asynchronously by 'grunt-critical'
  • added the print media query
  • minified the css and javascripts by 'grunt-critical', 'grunt-contrib-cssmin', and 'grunt-contrib-uglify'
  • changed to use the particular, optimized image of 'pizzeria.jpg'

The Browser Rendering Optimization

Objectives:

• to aquire 60 fps on scrolling
• to aquire under 5ms on resizing the pizza images

Changes I have made in main.js:

• for improvements for scrolling

  • in updatePositions()

    • changed to read the 'body.scrollTop' outside and before the iteration to avoid the big layout thrashing
    • precalculated all the 5 possible variations of the delta values
    • used translateX() to move the pizzas, instead of setting left property to avoid the layout executions
    • replaced querySelectorAll() with getElementsByClassName() for faster serach

  • in the anonymous function for DOMContentLoaded event

    • removed the unnecessary drawing for the pizzaz by reducing the number of the mover pizzas to the appropriate one
    • added the 'will-change' properties to the mover pizzas

• for improvements for resizing pizzas

  • in changePizzaSizes()
    • simplified the calculation of the new sizes of the pizzas, instead of calculating the width by hands in the complex way, and removed the FSLs(Forced synchronous layouts)
      • deleted the unnecessary function, determineDx()
    • replaced querySelectorAll() with getElementsByClassName() for faster search

How to See the Site

Easiest Way

1. Access the following URL (GitHub Page)

• http://kkas.github.io/frontend-nanodegree-mobile-portfolio

Moderate Way (self serve)

1. Check out the repository

$> git clone https://github.com/kkas/frontend-nanodegree-mobile-portfolio.git

2. To host the site on your local machine

$> cd /path/to/your-project-folder
$> cd prod/    # This directory contains the production code
$> python -m SimpleHTTPServer 8080

3. Open a browser and visit localhost:8080
4. To inspect the site on your phone, you can use ngrok.
5. Download and install ngrok to make your local server accessible remotely.

$> cd /path/to/your-project-folder
$> ngrok http 8080

TIPS on Running PageSpeed Insights Test

• Copy the public URL ngrok gives you and try running it through PageSpeed Insights!

• Alternatively, you can run grunt speedtest in the project root folder. This will check the GitHub Page.

Optimization Tips and Tricks (Provided by Udacity)

• Optimizing Performance
• Analyzing the Critical Rendering Path
• Optimizing the Critical Rendering Path
• Avoiding Rendering Blocking CSS
• Optimizing JavaScript
• Measuring with Navigation Timing. We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
• The fewer the downloads, the better
• Reduce the size of text
• Optimize images
• HTTP caching

Customization with Bootstrap (Provided by Udacity)

The portfolio was built on Twitter's Bootstrap framework. All custom styles are in dist/css/portfolio.css in the portfolio repo.

• Bootstrap's CSS Classes
• Bootstrap's Components

---

If you have any questions, please send me an inquiry by email: [e-mail]