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.
Upcoming SlideShare
Front end optimization
Front end optimization
Loading in …3
×
1 of 22

WordPress Front End Optimizations

Oct. 16, 2010
• 2 likes • 6,945 views

2

Share

Download to read offline

Technology

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

Recommended

More Related Content

You Might Also Like

The current status of html5 technology and standard
The current status of html5 technology and standard
Wonsuk Lee
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Patrick Lauke
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
Html5 coredevsummit
Html5 coredevsummit
Jen Simmons
Html5, a gentle introduction
Html5, a gentle introduction
Diego Scataglini
HTML5: Markup Evolved
HTML5: Markup Evolved
Billy Hylton
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
Demystifying HTML5
Demystifying HTML5
Sergejus Barinovas
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Francesco Fullone
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Development Conference]
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
IndicThreads
Front end for back end developers
Front end for back end developers
Wojciech Bednarski
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
Doris Chen
Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3
Federico Galassi
Html
Html
Peter Kaleta
Html5 accessibility
Html5 accessibility
Virginia DeBolt
HTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
Peter Lubbers
Microsoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 Presentation
Rachel Andrew
HTML5
HTML5
Craig Hobson
Intro to CSS3
Intro to CSS3
Denise Jacobs
Html 5.0
Html 5.0
Kristof Degrave
Html5 final
Html5 final
saransh_kataria
HTML5 Pearson preso
HTML5 Pearson preso
Chris Mills
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies Today
Wesley Hales
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
Practical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
Html5 intro
Html5 intro
Kevin DeRudder
Html5 performance
Html5 performance
fanqstefan
What you need to know bout html5
What you need to know bout html5
Kevin DeRudder
HTML5, makkelijker kunnen we het niet maken!
HTML5, makkelijker kunnen we het niet maken!
Henk Jurriens
Modern Web Technologies
Modern Web Technologies
Perttu Myry
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm Software
Romin Irani
Mobile web design Eyal Sela
Mobile web design Eyal Sela
Israeli Internet Association technology committee
HTML5 Refresher
HTML5 Refresher
Ivano Malavolta
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
Aaron Gustafson
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
Practical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
Html 5
Html 5
Nguyen Quang
Html5 and css3
Html5 and css3
Deniss Platonov

Related Books

Free with a 30 day trial from Scribd

See all
Bezonomics: How Amazon Is Changing Our Lives and What the World's Best Companies Are Learning from It Brian Dumaine
(4.5/5)
Free
So You Want to Start a Podcast: Finding Your Voice, Telling Your Story, and Building a Community That Will Listen Kristen Meinzer
(3/5)
Free
Autonomy: The Quest to Build the Driverless Car—And How It Will Reshape Our World Lawrence D. Burns
(5/5)
Free
No Filter: The Inside Story of Instagram Sarah Frier
(4.5/5)
Free
Live Work Work Work Die: A Journey into the Savage Heart of Silicon Valley Corey Pein
(4.5/5)
Free
SAM: One Robot, a Dozen Engineers, and the Race to Revolutionize the Way We Build Jonathan Waldman
(5/5)
Free
From Gutenberg to Google: The History of Our Future Tom Wheeler
(3.5/5)
Free
Talk to Me: How Voice Computing Will Transform the Way We Live, Work, and Think James Vlahos
(3.5/5)
Free
The Future Is Faster Than You Think: How Converging Technologies Are Transforming Business, Industries, and Our Lives Peter H. Diamandis
(4.5/5)
Free
Life After Google: The Fall of Big Data and the Rise of the Blockchain Economy George Gilder
(4/5)
Free
Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Seth Stephens-Davidowitz
(4/5)
Free
Future Presence: How Virtual Reality Is Changing Human Connection, Intimacy, and the Limits of Ordinary Life Peter Rubin
(4.5/5)
Free
Wizard:: The Life and Times of Nikolas Tesla Marc Seifer
(2.5/5)
Free
The Basics of Bitcoins and Blockchains: An Introduction to Cryptocurrencies and the Technology that Powers Them (Cryptography, Crypto Trading, Digital Assets, NFT) Antony Lewis
(4/5)
Free
On War: With linked Table of Contents Carl von Clausewitz
(4.5/5)
Free
Island of the Lost: An Extraordinary Story of Survival at the Edge of the World Joan Druett
(4/5)
Free

Related Audiobooks

Free with a 30 day trial from Scribd

See all
Spooked: The Trump Dossier, Black Cube, and the Rise of Private Spies Barry Meier
(4/5)
Free
An Ugly Truth: Inside Facebook’s Battle for Domination Sheera Frenkel
(4.5/5)
Free
A Brief History of Motion: From the Wheel, to the Car, to What Comes Next Tom Standage
(4.5/5)
Free
If Then: How the Simulmatics Corporation Invented the Future Jill Lepore
(4.5/5)
Free
The Science of Time Travel: The Secrets Behind Time Machines, Time Loops, Alternate Realities, and More! Elizabeth Howell
(3/5)
Free
Liftoff: Elon Musk and the Desperate Early Days That Launched SpaceX Eric Berger
(5/5)
Free
The Quiet Zone: Unraveling the Mystery of a Town Suspended in Silence Stephen Kurczy
(5/5)
Free
System Error: Where Big Tech Went Wrong and How We Can Reboot Rob Reich
(4/5)
Free
The Wires of War: Technology and the Global Struggle for Power Jacob Helberg
(5/5)
Free
The Players Ball: A Genius, a Con Man, and the Secret History of the Internet's Rise David Kushner
(4.5/5)
Free
Bitcoin Billionaires: A True Story of Genius, Betrayal, and Redemption Ben Mezrich
(4.5/5)
Free
A World Without Work: Technology, Automation, and How We Should Respond Daniel Susskind
(4.5/5)
Free
Lean Out: The Truth About Women, Power, and the Workplace Marissa Orr
(4.5/5)
Free
Uncanny Valley: A Memoir Anna Wiener
(4/5)
Free
Blockchain: The Next Everything Stephen P. Williams
(4/5)
Free
Digital Renaissance: What Data and Economics Tell Us about the Future of Popular Culture Joel Waldfogel
(3.5/5)
Free

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

×