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