1. WordPress
Front-End Optimizations
Tips to Speed Up Your Blog
Saturday, October 16, 2010
2. What is the “Front-End”?
HTML
CSS
Images
JavaScript
Media (Audio/Video)
3rd Party APIs
Saturday, October 16, 2010
3. HTML
Markup / Node structure
Placement of stylesheets / scripts
Images
<meta> tags
DOCTYPE
Micro-formats
Saturday, October 16, 2010
4. CSS
Typography
Colors
reset.css
CSS selectors
Background Images / CSS Sprites
CSS3+ support
IE6 / Browser support
Saturday, October 16, 2010
5. JavaScript
Event Binding
3rd Party APIs
AJAX
Form validation
DOM traversing
jQuery
Cookies
Page State / Comet / Long-polling
Saturday, October 16, 2010
6. Front-End Programming +
WordPress =
HTML + CSS + Javascript + Media +
PHP + WordPress API
Saturday, October 16, 2010
7. PHP / WordPress API
Built-in WordPress Functions
WordPress Template Hierarchy
WordPress Media Library
Database Abstraction Layer
WordPress Admin
Site-specific PHP code written by you
Saturday, October 16, 2010
8. HTML
Semantic
DOCTYPE - specific
Classes vs IDs
Accessible
Shallow node depth
Saturday, October 16, 2010
11. Semantic
<h1>The Title</h1>
<p>The content, The content, The
content, The content, The content, The
content, The content, The content, The
content.</p>
<address>
160 West End Ave
New York, NY 10023
</address>
Saturday, October 16, 2010
12. CSS
OO approach = classes vs IDs
2 selectors === yay!
shorthand properties === fewer bytes
No proprietary CSS
Use browser hacks sparingly / <body> classes
Saturday, October 16, 2010
13. CSS selectors
This works
.module p {...}
.override p {...}
vs
This doesn’t
#module p {...}
.override p {...}
Saturday, October 16, 2010
14. CSS selectors
Overrides follow this rule:
IDs, Classes, Elements
#module .module p = 111
.module .blue p = 21
#wrapper #content span a = 202
Classes make overrides/extending CSS
classes a lot easier
Saturday, October 16, 2010
15. JavaScript
Know what/who your scripts are!
Inspect what your plugins are doing
Combine them!
use JSLint all the time!
Remove unused functions/code
Saturday, October 16, 2010
16. Media
Video = OGV + MP4, VideoJS
Audio = MP3, JPlayer
Images: PNG > GIF
JPEG (Pictures)
Web Fonts
Saturday, October 16, 2010
17. YSlow! - Highlights
Make Fewer HTTP Requests
Use a CDN
Add an Expires Header
Gzip Components
Put Stylesheets at the top
Put Scripts at the bottom
Avoid CSS Expressions
Make JS/CSS external
Reduce DNS lookups
Minify Javascript
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make AJAX Cache-able
Saturday, October 16, 2010
18. YSlow! - low-hanging fruit
Set Expires headers
Add Deflate rules
Gzip (caching plugin)
Reduce number of DOM elements
use Favicon
Do not scale images/give images dimensions
Cache AJAX requests
Saturday, October 16, 2010
19. Expires
<FilesMatch “.gif|jpg|css|js”>
ExpiresDefault “access plus 10 years”
</FilesMatch>
Saturday, October 16, 2010
21. Google Page Speed
Remove Unused CSS
Avoid document.write
Combine CSS/JS
Use image sprites
Minify JS/CSS/HTML
Remove query strings from static resources
Specify UTF-8 early
use efficient CSS selectors
Saturday, October 16, 2010
22. Sources for info
Rasmus Lerdorf session at Digg
Douglas Crockford at Yahoo
Anything by Steve Souders
Google Speed / YSlow
Smush.It
JSLint for JS / Jigsaw Validator for CSS
Thomas Fuchs / DOM Monster bookmarklet
Saturday, October 16, 2010