Your SlideShare is downloading. ×
0
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

5,133

Published on

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

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
5,133
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×