wordpress front end optimizations
DESCRIPTION
My slides from my presentation at WordCamp NYC 2010, Baruch College Vertical CampusTRANSCRIPT
WordPress Front-End Optimizations
Tips to Speed Up Your Blog
Saturday, October 16, 2010
What is the “Front-End”?
HTML
CSS
Images
JavaScript
Media (Audio/Video)
3rd Party APIs
Saturday, October 16, 2010
HTML
Markup / Node structure
Placement of stylesheets / scripts
Images
<meta> tags
DOCTYPE
Micro-formats
Saturday, October 16, 2010
CSSTypography
Colors
reset.css
CSS selectors
Background Images / CSS Sprites
CSS3+ support
IE6 / Browser support
Saturday, October 16, 2010
JavaScriptEvent Binding
3rd Party APIs
AJAX
Form validation
DOM traversing
jQuery
Cookies
Page State / Comet / Long-polling
Saturday, October 16, 2010
Front-End Programming + WordPress =HTML + CSS + Javascript + Media +
PHP + WordPress API
Saturday, October 16, 2010
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
HTML
Semantic
DOCTYPE - specific
Classes vs IDs
Accessible
Shallow node depth
Saturday, October 16, 2010
Node Depth
<div> <div> <div> <div> <div> <div>...
Saturday, October 16, 2010
Better Node Depth
<div class=”wrapper”> <div class=”module”>...</div> <div class=”module”>...</div> <div class=”module”>...</div>
</div>
Saturday, October 16, 2010
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 AveNew York, NY 10023</address>
Saturday, October 16, 2010
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
CSS selectorsThis works
.module p {...}
.override p {...}
vs
This doesn’t
#module p {...}.override p {...}
Saturday, October 16, 2010
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
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
Media
Video = OGV + MP4, VideoJS
Audio = MP3, JPlayer
Images: PNG > GIF
JPEG (Pictures)
Web Fonts
Saturday, October 16, 2010
YSlow! - HighlightsMake 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
YSlow! - low-hanging fruitSet 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
Expires
<FilesMatch “\.gif|jpg|css|js”>ExpiresDefault “access plus 10 years”</FilesMatch>
Saturday, October 16, 2010
Deflate === Gzip
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/x-javascript
Saturday, October 16, 2010
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
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