Downloaded 31 times
Uploaded byBlake Crosby
PageSpeed and SPDY
The document discusses Pagespeed and SPDY, focusing on their functionalities for improving web performance. It outlines installation, feature activation, and provides results demonstrating potential performance enhancements. It also addresses HTTP/2 as the future protocol, recommending a wait for its implementation instead of adopting SPDY.
PageSpeed and SPDY
- 1. Page Speed andSPDY | Toronto Web Performance Group July 8, 2014 | Blake Crosby
- 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. 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. PageSpeed & SPDY| July 8, 2014 FASTLY Google’s PageSpeed
- 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. 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. PageSpeed & SPDY| July 8, 2014 PageSpeed Suggestions HTTP Archive, May 15, 2014 Run
- 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. 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. 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. PageSpeed & SPDY| July 8, 2014 FASTLY SPDY & HTTP 2
- 12. PageSpeed & SPDY| July 8, 2014 The Problem with HTTP Source: High Performance Browser Networking By: Ilya Grigorik
- 13. PageSpeed & SPDY| July 8, 2014 The Problem with HTTP Source: High Performance Browser Networking By: Ilya Grigorik
- 14. PageSpeed & SPDY| July 8, 2014 The Problem with HTTP Source: High Performance Browser Networking By: Ilya Grigorik
- 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. 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. PageSpeed & SPDY| July 8, 2014 Example of SPDY Connection • chrome://net-internals/#spdy
- 18. PageSpeed & SPDY| July 8, 2014 HTTP 2.0 Source: High Performance Browser Networking By: Ilya Grigorik
- 19. PageSpeed & SPDY| July 8, 2014 HTTP 2.0 Compressed Headers Source: High Performance Browser Networking By: Ilya Grigorik
- 20. PageSpeed & SPDY| July 8, 2014 HTTP 2.0 Multiplexing Source: High Performance Browser Networking By: Ilya Grigorik
- 21. PageSpeed & SPDY| July 8, 2014 HTTP 2.0 Server Push Source: High Performance Browser Networking By: Ilya Grigorik
- 22. PageSpeed & SPDY| July 8, 2014 HTTP 2.0 Backward Compatibility Source: High Performance Browser Networking By: Ilya Grigorik
- 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. 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. PageSpeed & SPDY| July 8, 2014 FASTLY Questions/Comments
- 26.
Editor's Notes
- #6 Plugin is handy to test sites that are not available publicly (such as development or QA versions of your site) Analyses your site for common optimizations (cache times, css/js/html minification, image sizes and types)
- #7 Top 4 sites by Alexa Ranking
- #8 Sample output for my personal site. Demo output of tool
- #9 Show configuration file
- #10 There are a lot of optimizations. Be sure to check out the entire list at: https://developers.google.com/speed/pagespeed/module/filters
- #11 Was able to improve my page score from 73 to 86. 3rd party scripts were keeping my score low. 3rd party Word Press template has custom JS. Didn’t have to release code, or a new version of the site.
- #13 The TCP three way handshake. Typical connection flow without using keepalives. (284ms) Multiply this by 40 or 50 requests (for JS, CSS, Images, etc..) and the load time increases.
- #14 Using Keepalives helps (Loading HTML and CSS) reduced the page load time to 228ms. With the TCP session open, no need for another handshake. However improvements can still be made.
- #15 A study done by Google tested the impact of page load times as bandwidth increases vs. decreasing latency. Notice that performance stops increasing past ambit However, page load time decreases linearly as latency decreases.
- #16 QUIC: Quick UDP Internet Connections An experimental protocol to send HTTPS traffic over UDP packets. You can enable it in Chrome chrome://flags
- #17 SPDY is being used by Twitter, Google, and Facebook. It only works under HTTPS / encrypted connections. The IETF is using the lessons learned from SPDY to help develop HTTP 2.0
- #18 SPDY uses key value pairs for header information. And in chrome developer tools, the headers show up like this (with using colons).
- #19 HTTP is now a binary protocol.
- #20 Duplication of headers have been eliminated. Header state is saved between requests. Remaining header data is then compressed using
- #21 Object requests can be sent to the origin while responses are being sent. No need to wait for the entire response to be returned before you can issue a new GET.
- #22 No need to explicitly ask for specific resources any more. Reduces latency. Server can push associated page assets without having to wait for the browser to ask for them.
- #23 1. Special Upgrade header to tell the server that the client supports HTTP 2 2. HTTP 2.0 settings payload encoded in base64 3. If the server declines the upgrade, than the object is returned via 1.1 4. If the server accepts the upgrade, then an HTTP 101 status code is sent along with the HTTP 2.0 payload.
- #24 The majority of the SPDY benefits are found in HTTP 2 If you are using a CDN, SPDY support is probably already available.