Your SlideShare is downloading. ×
  • Like
WordPress Front End Optimizations
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WordPress Front End Optimizations


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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Hi,

    I am looking the way to remove query strings from static resources to speed up my website. Can you teach me how:

    Thank you
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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
  • 9. Node Depth <div> <div> <div> <div> <div> <div>... Saturday, October 16, 2010
  • 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. 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
  • 20. Deflate === Gzip AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/x-javascript 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