The document appears to be a presentation about optimizing websites for speed. It discusses various tools that can be used to analyze page speed performance. It also provides tips for improving page load times through techniques like HTTP compression, minification of files, browser caching of static content, optimizing images, and other best practices. The presentation encourages attendees to learn and implement at least one new optimization technique.

1. John Levandowski
@JohnLevandowski
WordCamp Salt Lake City 2012 #wcslc
The University of Utah
@JohnLevandowski 1

2. @JohnLevandowski 2

3.  Introduction
 Tools
 Compression
 Browser Caching
 Image Optimization
 Let’s Get ‘r Done
 Questions
 Bonus Content
@JohnLevandowski 3

4.  Business Intelligence and
Data Warehousing at the
University of Utah
 2005 - WordPress 1.5
 Developed blog to
deliver internal campus
news
 Syndicated content via
RSS to campus portal
@JohnLevandowski 4

5.  WordPress 3.4.2
 Hosted by Someone
 Shared Hosting
 Do not have root access
to server
 Concepts still apply
 Use Apache Web Server
 Concepts still apply
@JohnLevandowski 5

6.  Have Fun!
 Learn at least one thing YOU CAN DO tomorrow
@JohnLevandowski 6

7.  A Fast WordPress Site is Cool
 It’s also profitable $$$
 Can save you $$$
 Google cares about page speed
 So do your customers
@JohnLevandowski 7

8.  Google Page Speed (Browser Extension)
 http://developers.google.com/speed/pagespeed/
 Yahoo Yslow Plugin (Browser Extension)
 http://developer.yahoo.com/yslow/
 GTmetrix
 http://gtmetrix.com/
@JohnLevandowski 8

9.  WebPageTest
 http://www.webpagetest.org/
 Pingdom Full Page Test
 http://tools.pingdom.com/fpt/
 Zoompf
 http://zoompf.com/
@JohnLevandowski 9

10.  Twenty Eleven Theme 1.4
 No WordPress plugins
 Page Speed Grade
 YSlow Grade
 Zoompf Score
 Page Size
@JohnLevandowski 10

11. @JohnLevandowski 11

12. @JohnLevandowski 12

13. @JohnLevandowski 13

14. @JohnLevandowski 14

15. @JohnLevandowski 15

16.  DNS Lookup
 Server Connection
 Waiting
 Content Transfer
@JohnLevandowski 16

17.  BACKUP your site before implementing any changes
@JohnLevandowski 17

18.  “A .htaccess (hypertext access) file is a directory-level
configuration file supported by several web servers,
that allows for decentralized management of web
server configuration.”
 WordPress configuration for “Pretty Permalinks”
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
@JohnLevandowski 18

19. HTTP Compression and Minification
@JohnLevandowski 19

20.  “HTTP compression is a capability that can be built
into web servers and web clients to make better use of
available bandwidth, and provide faster transmission
speeds between both.”
 Gzip
 style.css
 Not Compressed
 57,094 bytes
 Compressed
 11,347 bytes
@JohnLevandowski 20

21.  Add to .htaccess file:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css
text/plain text/xml application/javascript application/x-
javascript
</IfModule>
@JohnLevandowski 21

22.  “Minification is the
process of removing all
unnecessary characters
from source code, without
changing its functionality.”
 YUI Compressor
 http://refresh-sf.com/yui/
@JohnLevandowski 22

23.  style.css
 Not Minified
 57,094 bytes
 Minified
 40,494 bytes
 Minified and
Compressed
 8,208 bytes
@JohnLevandowski 23

24.  WordPress theme style.css required headers
 http://codex.wordpress.org/Theme_Development
 Change link to style.css in header.php to minified
version
 Original
 <link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
 Minified
 <link rel="stylesheet" type="text/css" media="all"
href="<?php echo get_stylesheet_directory_uri(); ?>/style-
min.css" />
 There are fancier ways to do this with filters, etc.
@JohnLevandowski 24

25. Static Content
@JohnLevandowski 25

26.  Last-Modified and ETag
 Weak caching headers – request to server needed
 “Have you changed from the last time”
 Expires and Cache-Control: max-age
 Strong caching headers – no request to server needed
 Cache static content
 CSS
 JavaScript
 Images
@JohnLevandowski 26

27.  Add to .htaccess file:
<IfModule mod_headers.c>
Header unset ETag
FileETag None
</IfModule>
@JohnLevandowski 27

28.  Add to .htaccess file:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
ExpiresByType application/x-javascript "access plus 6 months"
</IfModule>
@JohnLevandowski 28

29.  If you cache static content you should never change
this content
 Your frequent visitors will not see the change
 If you change the content you need to change the URL
to that content
 Images – upload new image with different file name
 CSS and JS – add version number to URLs
 http://example.com/style.css?ver=3.4.2
@JohnLevandowski 29

30.  Original
 <link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
 Minified
 <link rel="stylesheet" type="text/css" media="all"
href="<?php echo get_stylesheet_directory_uri();
?>/style-min.css" />
 Minified with Version
 <link rel="stylesheet" type="text/css" media="all"
href="<?php echo get_stylesheet_directory_uri();
?>/style-min.css?ver=<?php echo filemtime(
get_stylesheet_directory() . '/style-min.css' ); ?>" />
@JohnLevandowski 30

31.  favicon.ico
 Have one at the root of your website
 Or inside your <head> section using a <link> tag
@JohnLevandowski 31

32. Lossless and Lossy
@JohnLevandowski 32

33. August 1, 2011 August 1, 2012
http://httparchive.org/interesting.php http://httparchive.org/interesting.php
?a=All&l=Aug%201%202011 ?a=All&l=Aug%201%202012
@JohnLevandowski 33

34. @JohnLevandowski 34

35.  300 X 224 Pixels  600 X 448 Pixels
@JohnLevandowski 35

36. @JohnLevandowski 36

37.  300 X 224 Pixels  600 X 448 Pixels
 57,854 bytes  57,749 bytes
@JohnLevandowski 37

38.  Lossless
 allows the exact original data to be reconstructed from
the compressed data
 removing unnecessary comments, meta-data, and color
profiles
 Lossy
 compresses data by discarding (losing) some of it
 Images (JPEG)
 Audio (MP3, AAC, Dolby Digital AC-3)
 Blu-ray (MPEG-2, H.264/MPEG-4 AVC, VC-1)
@JohnLevandowski 38

39.  PNGOUT, AdvPNG, Pngcrush, OptiPNG, JpegOptim,
jpegrescan, jpegtran, Gifsicle, pngquant, pngnq …
 ImageOptim for Mac
 http://imageoptim.com/
 ImageAlpha for Mac
 http://pngmini.com/
 Convert from 24-bit to 8-bit PNG
 Similar tools are available for Windows
 http://smush.it/
 http://www.jpegmini.com/
@JohnLevandowski 39

40.  Do not scale images in browser
 Resize image before uploading to intended display size
 Exceptions for HiDPI Retina displays
 <img height=“100" width=“100" alt=“Alt Text"
src="http://example.com/wp-
content/uploads/2012/09/image.jpg" title=“Title Text"
class="alignnone size-full wp-image-1">
 Image returned should natively be 100 x 100 pixels
@JohnLevandowski 40

41.  chessboard.jpg  comment-bubble.png
 Original  Original
 53,906 bytes  925 bytes
 Optimized - 79% quality  Optimized
 40,150 bytes  767 bytes
@JohnLevandowski 41

42. @JohnLevandowski 42

43. Original Optimized % of Original
(bytes) (bytes)
html page 7,551 2,342 31%
style.css 57,094 8,208 14%
chessboard.jpg 53,906 40,150 74%
comment-bubble.png 925 767 83%
search.png 441 441 100%
TOTAL bytes 119,917 51,908 43%
Page Speed 58 98
YSlow 91 97
Zoompf 61 92
@JohnLevandowski 43

44. @JohnLevandowski 44

45. Time Permitting
@JohnLevandowski 45

46.  Default jpeg quality is 90 for resized images
 Change jpeg quality in functions.php
/** Lower jpeg quality for media */
add_filter( 'jpeg_quality', 'wpselect_jpeg_quality' );
function wpselect_jpeg_quality( $quality ) {
return (int)79;
}
 Insert code in a plugin or theme
@JohnLevandowski 46

47.  To reduce the number of requests the browser makes
to the server
 Combine numerous small images
 CSS is used to select the parts of the composite image
to display at different points in the page
 http://spriteme.org/
@JohnLevandowski 47

48.  WP Super Cache
 W3 Total Cache
@JohnLevandowski 48

49.  @JohnLevandowski
 http://wpselect.com/
 http://en.gravatar.com/jlevandowski
 Slides will soon be available at:
 http://wpselect.com/
@JohnLevandowski 49

50.  http://wpselect.com/blog/web-page-response-time/
 http://wpselect.com/blog/optimize-wordpress-for-page-
speed-yslow-and-zoompf/
 http://wpselect.com/blog/wordpress-performance-
opcode-cache/
 http://wpselect.com/blog/optimize-images-for-web-jpeg/
 http://wpselect.com/blog/optimize-images-for-web-png/
@JohnLevandowski 50

51.  http://www.flickr.com/photos/vernhart/1574355646/
 http://www.flickr.com/photos/joshfassbind/4683365102/
 http://www.flickr.com/photos/mytudut/5188623575/
 http://www.flickr.com/photos/left-hand/2863299383/
 http://www.flickr.com/photos/wbob/4171615158/
 http://www.flickr.com/photos/96dpi/466946465/
 http://www.flickr.com/photos/62172402@N07/6237005541/
 http://www.flickr.com/photos/russmorris/28389687/
 http://www.flickr.com/photos/30928442@N08/3508534114/
 http://www.flickr.com/photos/infelix/1449066379/
 http://www.flickr.com/photos/tomitapio/5126337639/
 http://www.flickr.com/photos/massenpunkt/91952193/
 http://www.flickr.com/photos/dvids/4644922363/
 http://www.flickr.com/photos/crystaljingsr/3914729343/
 http://www.flickr.com/photos/wwworks/4759535950/
@JohnLevandowski 51