SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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