CS193H: High Performance Web Sites Lecture 4: Class Projects Steve Souders Google

Slides:



Advertisements
Similar presentations
Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder Wishlisting.com.
Advertisements

Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June Lessons.
Link Building Rudy Dallal Based on a Bruce Clay Incs post:
CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top Steve Souders Google
Display Ads and Page Performance: A Brief Tour of the Ad Ecosystem Tony Ralph.
CS193H: High Performance Web Sites Lecture 7: Add an Expires Header Steve Souders Google
Steve Souders Even Faster Themes Disclaimer: This content does not necessarily reflect.
High Performance Web Sites Essential Knowledge for Frontend Engineers
Episodes a shared approach for timing web pages Steve Souders Google Disclaimer: This content does not necessarily reflect.
CS193H: High Performance Web Sites Lecture 16: Rule 13 – Configure ETags Steve Souders Google
CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google
CS193H: High Performance Web Sites Lecture 22: Vol 2 – Optimize Images, Use Iframes Sparingly, Flush the Document Early Steve Souders Google
CS193H: High Performance Web Sites Lecture 1: Introduction Steve Souders Google
Performance Challenges for the Open Web Stanford CS193H 29 September 2008.
CS193H: High Performance Web Sites Lecture 17: Rule 14 – Make Ajax Cacheable Steve Souders Google
CS193H: High Performance Web Sites Lecture 8: Rule 4 – Gzip Components
CS193H: High Performance Web Sites Lecture 21: Vol 2 – Split Dominant Domains Steve Souders Google
High Performance Web Sites Essential Knowledge for Frontend Engineers
CS193H: High Performance Web Sites Lecture 15: Rule 12 – Remove Duplicate Scripts Steve Souders Google
CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google
CS193H: High Performance Web Sites Lecture 6: Use a CDN Steve Souders Google
CS193H: High Performance Web Sites Lecture 20: Vol 2 – Don't Scatter Inline Scripts Steve Souders Google
Steve Souders Even Faster Web Sites best practices for faster pages Disclaimer: This content does not necessarily.
CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google
CS193H: High Performance Web Sites Lecture 12: Rule 8 – Make JavaScript and CSS External Steve Souders Google
CS193H: High Performance Web Sites Lecture 19: Vol 2 – Load Scripts Without Blocking Steve Souders Google
CS193H: High Performance Web Sites Lecture 10: Rule 6 – Put Scripts at the Bottom Steve Souders Google
CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance Steve Souders Google
CS193H: High Performance Web Sites Lecture 11: Rule 7 – Avoid CSS Expressions Rule 9 – Reduce DNS Lookups Steve Souders Google
CS193H: High Performance Web Sites Lecture 18: Vol 2 – Split the Initial Payload Steve Souders Google
Widget Summit: Advanced JavaScript Joseph Smarr Plaxo, Inc. October 16, 2007.
High-Performance JavaScript: Why Everything Youve Been Taught is Wrong Joseph Smarr Plaxo, Inc.
Web Performance Meetup 1 Web Performance 101 Jeremy
Web Performance Meetup 1 Web Performance Toolbelt Jeremy
Stevesouders.com/docs/velocity-wpo pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Web Site Performance What makes web sites slow? Back end Front end Tools for measuring performance Firebug / YSlow Visual Studio Test Edition W3.org html.
Layouts Using Tables Web Design – Section 4-5 Part or all of this lesson was adapted from the University of Washingtons Web Design & Development I Course.
CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google
Page 1 / 18 Internet Traffic Monitor IM Page 2 / 18 Outline Product Overview Product Features Product Application Web UI.
©2013 AKAMAI | FASTER FORWARD TM It's all about Performance Measured and Perceived Performance on Desktop and Mobile Devices San Mateo Meetup, July 2013.
Week 10 Creating Positioned Layouts
CHAPTER 15 WEBPAGE OPTIMIZATION. LEARNING OBJECTIVES How to test your web-page performance How browser and server interactions impact performance What.
Improving Web Site Performance and Scalability While Saving Money Robert Boedigheimer ∙ Web Application
PHP Meetup - SEO 2/12/2009. Where to Focus? Ensuring the findability of content Ensuring content is well understood by search engines Maximizing the importance.
Quiz #3 - CSS Lecture Code: Get Neighbors’ URLs for MP1
1 Reproduction interdite. © ip-label 2012 Arnaud Becart ip-label.
Analysis and Performance Information Systems 337 Prof. Harry Plantinga.
High Performance Websites (Based on Steve Souder’s lecture) By Bhoomi Patel.
&.zip Disclaimer: This content does not necessarily reflect the opinions of my employer.
Mark Phillip markphillip.com 200s, 304s, Expires Headers, HTTP Compression, And You.
Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation
Making your website go faster! Front-end Developer, Deeson Online Alli Price.
Keeping Front End Dependencies Under Control Rachel Lehman Technical Team at Interfolio, -
CSS Sprites. What are sprites? In the early days of video games, memory for graphics was very low. So to make things load quickly and make graphics look.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 7.
Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
PERFORMANCE ENHANCEMENT IN ASP.NET By Hassan Tariq Session #1.
Case Study: Live Search – Moving to and then away from AJAX Eric Schurman Performance Development Lead Live Search Microsoft.
Search: Prof. Jeff Sonstein Home Contact Website Design & Tech ( ) Fall 2011  Professor Jeff Sonstein Office: GOL-2555 Hours: T/R 10am-noon
CSS IS A LANGUAGE DESIGNED TO TARGET HTML ELEMENTS AND NODES BY TYPE, CLASS, ID AND VALUE, AND CHANGE THEIR VALUES CSS – change how your HTML looks and.
CIS 228 The Internet Day 4, 9/8/11 Getting on the Internet.
What is Seo? SEO stands for “search engine optimization.” It is the process of getting traffic from the “free,” “organic,” “editorial” or “natural” search.
Intro to Web Performance Ten Ways to a Faster Website Presented by: Sheila Eaton and Mohammad Durrani TechKnowFile, University of Toronto, May 5, 2016.
Customer Webinar December 3, 2008
Intro to JavaScript CS 1150 Spring 2017.
Hints and tips for faster web apps
Web & Mobile optimization
The Social Web: An Implementer's Guide
High Performance Mobile
Presentation transcript:

CS193H: High Performance Web Sites Lecture 4: Class Projects Steve Souders Google

Announcements Office hours start today: Mondays 4:15-6pm Contact me by end of tomorrow (Tues 10/7) if you still want HTTPWatch and missed the first invite Computer Forum Career Fair - 10/8 11am-4pm between Gates and Packard

Guest Lecturer Review

Joseph Smarr, Plaxo "Performance Challenges for the Open Web" Minimizing roundtrips – discovery, association, OpenID, OAuth; separate vs. bundled Caching – freshness vs. speed Pull vs. push – scalability issues 3 rd party content – proxied vs. clientside; iframe vs. inline; XFBML, Caja

Lindsey Simon, Google "Front End Kung Fu" When you have a CSS problem: 1.is it in or out of the flow? 2.is box block or inline display context? Style specificity (higher wins): tag: 1 point className: 10 points id: 100 points inline style: 1000 points

Bill Scott, Netflix "High Performance Web Pages – Real World Examples: Netflix Case Study" Established metrics first – "Round Trip Tracers" Captured – bandwidth, browser, OS Gzip, far future Expires, removing Etags – cut outbound traffic in half Issue: Apache compresses "204 – No Content" responses; Safari 3 chokes

Bill Scott, Netflix (cont'd) Surprises! Spriting star bars slower – inline events Preloading CSS bg images – don't! IE7 twice as slow as FF3 – remember when coding "the little stuff multiplied matters" takeaway: track your changes, estimate their impact, go back and confirm and investigate

The Ajax Experience smushit.com image optimization there's no such thing as a "smu" Yahoo! Exceptional Performance talk The 7 Habits for Exceptional Performance I released Episodes and Hammerhead

Class Projects Web 100 Performance Profile Improving a Top 100 Web Site

Homework Download your class project web site and uploading to your Stanford directory Read HPWS, Chapter 1: Make Fewer HTTP Requests (if you haven't already)

Questions