WordPress Front End Optimizations
2 likes3,393 views
This document discusses various tips for optimizing the front-end of a WordPress blog to improve speed. It covers optimizing HTML, CSS, JavaScript, images, and media. Specific recommendations include using semantic HTML, shorter CSS selectors, image sprites, minifying files, caching resources, reducing HTTP requests, and leveraging browser caching through Expires headers and gzip compression. It also recommends tools like YSlow and Google PageSpeed for auditing performance.
WordPress Front End Optimizations
- 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