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
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
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
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
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
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
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
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
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