Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Page Speed and SPDY | Toronto Web Performance Group
July 8, 2014 | Blake Crosby
PageSpeed & SPDY | July 8, 2014
• Quick Introduction
• Using PageSpeed
• An introduction to SPDY
• The future of the web: ...
PageSpeed & SPDY | July 8, 2014
• Twitter: @blakecrosby
• E-Mail: me@blakecrosby.com
• Personal Website: http://www.blakec...
PageSpeed & SPDY | July 8, 2014
FASTLY
Google’s PageSpeed
PageSpeed & SPDY | July 8, 2014
• It’s split into two components:
• A browser plugin and web service for analyzing your si...
PageSpeed & SPDY | July 8, 2014
• Gives you a web performance score (out of 100 points).
• Also has an API (used by HTTP A...
PageSpeed & SPDY | July 8, 2014
PageSpeed Suggestions
HTTP Archive, May 15, 2014 Run
PageSpeed & SPDY | July 8, 2014
Installation
• Available as a package for Debian, Ubuntu, Centos, and Fedora.
• Installs t...
PageSpeed & SPDY | July 8, 2014
Turning On Features
• By default mod_pagespeed doesn’t enable certain features (for safety...
PageSpeed & SPDY | July 8, 2014
Results
73 → 86
• Could save 63% (14KB) of bytes downloaded by compressing Twitter images
...
PageSpeed & SPDY | July 8, 2014
FASTLY
SPDY & HTTP 2
PageSpeed & SPDY | July 8, 2014
The Problem with HTTP
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
The Problem with HTTP
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
The Problem with HTTP
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
• If the bottleneck is TCP and network latency, why don’t we just use UDP?
So, Wait!! What...
PageSpeed & SPDY | July 8, 2014
• Developed SPDY in early 2009, with the following goals in mind:
• Target a 50% reduction...
PageSpeed & SPDY | July 8, 2014
Example of SPDY Connection
• chrome://net-internals/#spdy
PageSpeed & SPDY | July 8, 2014
HTTP 2.0
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Compressed Headers
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Multiplexing
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Server Push
Source: High Performance Browser Networking By: Ilya Grigorik
PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Backward Compatibility
Source: High Performance Browser Networking By: Ilya Grigo...
PageSpeed & SPDY | July 8, 2014
Should You Use SPDY?
• Ask yourself:
• Is the majority of your traffic over HTTPS?
• Am I ...
PageSpeed & SPDY | July 8, 2014
• HTTP 2 will replace SPDY by 2015. (Final draft of specification being
submitted this Nov...
PageSpeed & SPDY | July 8, 2014
FASTLY
Questions/Comments
Thank You
Upcoming SlideShare
Loading in …5
×

PageSpeed and SPDY

6,185 views

Published on

A 30 minute presentation given to the Toronto Web Performance Meetup about Google's PageSpeed and the SPDY Protocol.

This presentation covers the following topics.
- What is PageSpeed, how to use and install.
- Should you use SPDY? Or wait for HTTP 2?
- Shortcomings of HTTP 1.1

Published in: Internet, Technology
  • Login to see the comments

PageSpeed and SPDY

  1. 1. Page Speed and SPDY | Toronto Web Performance Group July 8, 2014 | Blake Crosby
  2. 2. PageSpeed & SPDY | July 8, 2014 • Quick Introduction • Using PageSpeed • An introduction to SPDY • The future of the web: HTTP 2.0. • Questions Agenda
  3. 3. PageSpeed & SPDY | July 8, 2014 • Twitter: @blakecrosby • E-Mail: me@blakecrosby.com • Personal Website: http://www.blakecrosby.com/ • GitHub: https://github.com/blakecrosby/ I’m an Operations Engineer at Fastly, in San Francisco, California. Blake Crosby
  4. 4. PageSpeed & SPDY | July 8, 2014 FASTLY Google’s PageSpeed
  5. 5. PageSpeed & SPDY | July 8, 2014 • It’s split into two components: • A browser plugin and web service for analyzing your site • A module for Apache and Nginx to perform FEO on the fly. What’s PageSpeed? http://developers.google.com/speed/pagespeed/insights/
  6. 6. PageSpeed & SPDY | July 8, 2014 • Gives you a web performance score (out of 100 points). • Also has an API (used by HTTP Archive) PageSpeed Insight Website PageSpeed Score Google 98 Facebook 99 YouTube 93 Yahoo 97 HTTP Archive, May 15, 2014 Run
  7. 7. PageSpeed & SPDY | July 8, 2014 PageSpeed Suggestions HTTP Archive, May 15, 2014 Run
  8. 8. PageSpeed & SPDY | July 8, 2014 Installation • Available as a package for Debian, Ubuntu, Centos, and Fedora. • Installs two configuration files: pagespeed.conf and pagespeed_libraries.conf
  9. 9. PageSpeed & SPDY | July 8, 2014 Turning On Features • By default mod_pagespeed doesn’t enable certain features (for safety reasons) • In order to Minify Javascript & CSS, and recompress images: • ModPagespeedEnableFilters recompress_images • ModPagespeedEnableFilters collapse_whitespace • ModPagespeedEnableFilters rewrite_javascript • Keep in mind that your output is now different than what is stored on disk!
  10. 10. PageSpeed & SPDY | July 8, 2014 Results 73 → 86 • Could save 63% (14KB) of bytes downloaded by compressing Twitter images • Could decrease page render time by not using blocking JS
  11. 11. PageSpeed & SPDY | July 8, 2014 FASTLY SPDY & HTTP 2
  12. 12. PageSpeed & SPDY | July 8, 2014 The Problem with HTTP Source: High Performance Browser Networking By: Ilya Grigorik
  13. 13. PageSpeed & SPDY | July 8, 2014 The Problem with HTTP Source: High Performance Browser Networking By: Ilya Grigorik
  14. 14. PageSpeed & SPDY | July 8, 2014 The Problem with HTTP Source: High Performance Browser Networking By: Ilya Grigorik
  15. 15. PageSpeed & SPDY | July 8, 2014 • If the bottleneck is TCP and network latency, why don’t we just use UDP? So, Wait!! What about UDP? QUIC Blakes-mbp:~ bcrosby$ curl -I http://www.google.com/ HTTP/1.1 302 Found Cache-Control: private Content-Type: text/html; charset=UTF-8 Location: http://www.google.ca/?gfe_rd=cr&ei=Y_27U-7WG4mN8QfVioGoCQ Content-Length: 258 Date: Tue, 08 Jul 2014 14:17:07 GMT Server: GFE/2.0 Alternate-Protocol: 80:quic
  16. 16. PageSpeed & SPDY | July 8, 2014 • Developed SPDY in early 2009, with the following goals in mind: • Target a 50% reduction in page load time (PLT). • Avoid the need for any changes to content by website authors. • Minimize deployment complexity, avoid changes in network infrastructure. • Develop this new protocol in partnership with the open-source community. • Gather real performance data to (in)validate the experimental protocol. Google: We can fix this! Source: High Performance Browser Networking By: Ilya Grigorik
  17. 17. PageSpeed & SPDY | July 8, 2014 Example of SPDY Connection • chrome://net-internals/#spdy
  18. 18. PageSpeed & SPDY | July 8, 2014 HTTP 2.0 Source: High Performance Browser Networking By: Ilya Grigorik
  19. 19. PageSpeed & SPDY | July 8, 2014 HTTP 2.0 Compressed Headers Source: High Performance Browser Networking By: Ilya Grigorik
  20. 20. PageSpeed & SPDY | July 8, 2014 HTTP 2.0 Multiplexing Source: High Performance Browser Networking By: Ilya Grigorik
  21. 21. PageSpeed & SPDY | July 8, 2014 HTTP 2.0 Server Push Source: High Performance Browser Networking By: Ilya Grigorik
  22. 22. PageSpeed & SPDY | July 8, 2014 HTTP 2.0 Backward Compatibility Source: High Performance Browser Networking By: Ilya Grigorik
  23. 23. PageSpeed & SPDY | July 8, 2014 Should You Use SPDY? • Ask yourself: • Is the majority of your traffic over HTTPS? • Am I using load balancing software/hardware? • Are your clients typically over high latency connections (satellite)? • Are you comfortable using an experimental protocol? • Don’t mind delivering assets over SPDY for only ~60% of your visitors* * From http://caniuse.com/#feat=spdy
  24. 24. PageSpeed & SPDY | July 8, 2014 • HTTP 2 will replace SPDY by 2015. (Final draft of specification being submitted this November) • HTTP 2 support already in CURL and libcurl. • F5 Load balancers support HTTP 2. Current Status Recommendation: Wait for HTTP 2 instead of implementing SPDY
  25. 25. PageSpeed & SPDY | July 8, 2014 FASTLY Questions/Comments
  26. 26. Thank You

×