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
VIP Kolkata Call Girl Kestopur 👉 8250192130 Available With Room
PageSpeed and SPDY
1. Page Speed and SPDY | 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
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
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
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)
Top 4 sites by Alexa Ranking
Sample output for my personal site.
Demo output of tool
Show configuration file
There are a lot of optimizations. Be sure to check out the entire list at: https://developers.google.com/speed/pagespeed/module/filters
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.
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.
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.
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.
QUIC: Quick UDP Internet Connections
An experimental protocol to send HTTPS traffic over UDP packets.
You can enable it in Chrome chrome://flags
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
SPDY uses key value pairs for header information. And in chrome developer tools, the headers show up like this (with using colons).
HTTP is now a binary protocol.
Duplication of headers have been eliminated. Header state is saved between requests.
Remaining header data is then compressed using
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.
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.
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.
The majority of the SPDY benefits are found in HTTP 2
If you are using a CDN, SPDY support is probably already available.