Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

WordPress Front End Optimizations

6.307 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie

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

×