Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordPress Front-End Optimizations Tips to Speed Up Your Blog Saturday, October 16, 2010
What is the “Front-End”? HTML CSS Images JavaScript ...
HTML Markup / Node structure Placement of stylesheets / scripts Images ...
CSS Typography Colors reset.css CSS selectors B...
JavaScript Event Binding 3rd Party APIs AJAX Form validation ...
Front-End Programming + WordPress = HTML + CSS + Javascript + Media + PHP + WordPress API ...
PHP / WordPress API Built-in WordPress Functions WordPress Template Hierarchy ...
HTML Semantic DOCTYPE - specific Classes vs IDs Accessible ...
Node Depth <div> <div> <div> <div> ...
Better Node Depth <div class=”wrapper”> <div class=”module”>...</div> <div class=”module”...
Semantic <h1>The Title</h1> <p>The content, The content, The content, The content, The content, Th...
CSS OO approach = classes vs IDs 2 selectors === yay! shorthand properties =...
CSS selectors This works .module p {...} .override p {...} vs This do...
CSS selectors Overrides follow this rule: IDs, Classes, Elements #module .module p = 111...
JavaScript Know what/who your scripts are! Inspect what your plugins are doing ...
Media Video = OGV + MP4, VideoJS Audio = MP3, JPlayer Images: PNG > GIF ...
YSlow! - Highlights Make Fewer HTTP Requests Use a CDN Add an Expires H...
YSlow! - low-hanging fruit Set Expires headers Add Deflate rules Gzip (caching...
Expires <FilesMatch “.gif|jpg|css|js”> ExpiresDefault “access plus 10 years” </FilesMatch> ...
Deflate === Gzip AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css ...
Google Page Speed Remove Unused CSS Avoid document.write Combine CSS/JS ...
Sources for info Rasmus Lerdorf session at Digg Douglas Crockford at Yahoo An...
Upcoming SlideShare
Loading in …5
×

WordPress Front End Optimizations

6,559 views

Published on

My slides from my presentation at WordCamp NYC 2010, Baruch College Vertical Campus

Published in: Technology
no profile picture user

WordPress Front End Optimizations

  1. 1. WordPress Front-End Optimizations Tips to Speed Up Your Blog Saturday, October 16, 2010
  2. 2. What is the “Front-End”? HTML CSS Images JavaScript Media (Audio/Video) 3rd Party APIs Saturday, October 16, 2010
  3. 3. HTML Markup / Node structure Placement of stylesheets / scripts Images <meta> tags DOCTYPE Micro-formats Saturday, October 16, 2010
  4. 4. CSS Typography Colors reset.css CSS selectors Background Images / CSS Sprites CSS3+ support IE6 / Browser support Saturday, October 16, 2010
  5. 5. JavaScript Event Binding 3rd Party APIs AJAX Form validation DOM traversing jQuery Cookies Page State / Comet / Long-polling Saturday, October 16, 2010
  6. 6. Front-End Programming + WordPress = HTML + CSS + Javascript + Media + PHP + WordPress API Saturday, October 16, 2010
  7. 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. 8. HTML Semantic DOCTYPE - specific Classes vs IDs Accessible Shallow node depth Saturday, October 16, 2010
  9. 9. Node Depth <div> <div> <div> <div> <div> <div>... Saturday, October 16, 2010
  10. 10. Better Node Depth <div class=”wrapper”> <div class=”module”>...</div> <div class=”module”>...</div> <div class=”module”>...</div> </div> Saturday, October 16, 2010
  11. 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. 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. 13. CSS selectors This works .module p {...} .override p {...} vs This doesn’t #module p {...} .override p {...} Saturday, October 16, 2010
  14. 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. 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. 16. Media Video = OGV + MP4, VideoJS Audio = MP3, JPlayer Images: PNG > GIF JPEG (Pictures) Web Fonts Saturday, October 16, 2010
  17. 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. 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. 19. Expires <FilesMatch “.gif|jpg|css|js”> ExpiresDefault “access plus 10 years” </FilesMatch> Saturday, October 16, 2010
  20. 20. Deflate === Gzip AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/x-javascript Saturday, October 16, 2010
  21. 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. 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

×