Skip to content

workshop session

Jump to bottom Edit New page
jatina edited this page Oct 14, 2014 · 5 revisions

Web Performance Fundamentals

Objective

  • Understanding working of a webpage
  • Critical Rendering Path
  • Analysis and Optimization
  • Hands-on with chrome dev tools
  • Hands-on with pagespeed, yslow and webpagetest

Working of Webpage

From Hypertext document to complex Web Application

  • Plain hypertext document with text and hyperlink to other hypertext documents
  • Web page <==> hypertext Document + images + audio + styling
  • Web application <==> Webpage + JavaScript

Dependency Graph

Critical Rendering Path

Hands on Critical Rendering Path

  • Prerequisite for this hands on session is understanding of chrome dev tools. Please do a basic Course on chrome dev tools
  • Please download workshop-session folder from following location [[https://github.com/vlead/yslow-framework/tree/master/workshop-session][]] and open web page document.html in google chrome where you will find all the below mention links. Press Ctrl+Shif+I to open developer tools and click on network tag. After

that refresh the webpage and try to understand critical rendering path looking at the timeline of a web page.

Add a custom footer
Add a custom sidebar
Clone this wiki locally