SlideShare a Scribd company logo
WordPress
          Front-End Optimizations
          Tips to Speed Up Your Blog




Saturday, October 16, 2010
What is the “Front-End”?
               HTML
               CSS
               Images
               JavaScript
               Media (Audio/Video)
               3rd Party APIs



Saturday, October 16, 2010
HTML
               Markup / Node structure
               Placement of stylesheets / scripts
               Images
               <meta> tags
               DOCTYPE
               Micro-formats



Saturday, October 16, 2010
CSS
               Typography
               Colors
               reset.css
               CSS selectors
               Background Images / CSS Sprites
               CSS3+ support
               IE6 / Browser support


Saturday, October 16, 2010
JavaScript
               Event Binding
               3rd Party APIs
               AJAX
               Form validation
               DOM traversing
               jQuery
               Cookies
               Page State / Comet / Long-polling

Saturday, October 16, 2010
Front-End Programming +
          WordPress =
          HTML + CSS + Javascript + Media +
          PHP + WordPress API




Saturday, October 16, 2010
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
HTML

               Semantic
               DOCTYPE - specific
               Classes vs IDs
               Accessible
               Shallow node depth




Saturday, October 16, 2010
Node Depth
            <div>
               <div>
                  <div>
                     <div>
                        <div>
                           <div>...




Saturday, October 16, 2010
Better Node Depth
         <div class=”wrapper”>
            <div class=”module”>...</div>
            <div class=”module”>...</div>
            <div class=”module”>...</div>
         </div>




Saturday, October 16, 2010
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
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
CSS selectors
          This works

          .module p {...}
          .override p {...}

          vs

          This doesn’t

          #module p {...}
          .override p {...}
Saturday, October 16, 2010
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
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
Media

               Video = OGV + MP4, VideoJS
               Audio = MP3, JPlayer
               Images: PNG > GIF
               JPEG (Pictures)
               Web Fonts




Saturday, October 16, 2010
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
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
Expires
          <FilesMatch “.gif|jpg|css|js”>
          ExpiresDefault “access plus 10 years”
          </FilesMatch>




Saturday, October 16, 2010
Deflate === Gzip
           AddOutputFilterByType DEFLATE text/html
           AddOutputFilterByType DEFLATE text/css
           AddOutputFilterByType DEFLATE application/x-javascript




Saturday, October 16, 2010
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
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
Ad

More Related Content

Similar to WordPress Front End Optimizations (20)

Please Don't Touch the Slow Parts
Please Don't Touch the Slow PartsPlease Don't Touch the Slow Parts
Please Don't Touch the Slow Parts
Federico Galassi
 
Document-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb PrimerDocument-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb Primer
jsiarto
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
RobotDeathSquad
 
QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!
Matt Butcher
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
Nicole Sullivan
 
Getting Started with Dojo Toolkit
Getting Started with Dojo ToolkitGetting Started with Dojo Toolkit
Getting Started with Dojo Toolkit
Thomas Koch
 
Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon
David Paniz
 
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQueryBuilding Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
benvinegar
 
Ruby on-rails-workshop
Ruby on-rails-workshopRuby on-rails-workshop
Ruby on-rails-workshop
Ryan Abbott
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
Todd Anglin
 
Open End To End Js Stack
Open End To End Js StackOpen End To End Js Stack
Open End To End Js Stack
Skills Matter
 
Human APIs
Human APIsHuman APIs
Human APIs
Nikolai Onken
 
D3.js capita selecta
D3.js capita selectaD3.js capita selecta
D3.js capita selecta
Joris Klerkx
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
tutorialsruby
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
tutorialsruby
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer Architecture
Garann Means
 
Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support
상길 안
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Introduction to Node.js: perspectives from a Drupal dev
Introduction to Node.js: perspectives from a Drupal devIntroduction to Node.js: perspectives from a Drupal dev
Introduction to Node.js: perspectives from a Drupal dev
mcantelon
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
Bastian Hofmann
 
Please Don't Touch the Slow Parts
Please Don't Touch the Slow PartsPlease Don't Touch the Slow Parts
Please Don't Touch the Slow Parts
Federico Galassi
 
Document-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb PrimerDocument-Oriented Databases: Couchdb Primer
Document-Oriented Databases: Couchdb Primer
jsiarto
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
RobotDeathSquad
 
QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!
Matt Butcher
 
Getting Started with Dojo Toolkit
Getting Started with Dojo ToolkitGetting Started with Dojo Toolkit
Getting Started with Dojo Toolkit
Thomas Koch
 
Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon Flex além do browser - Lightning talk qcon
Flex além do browser - Lightning talk qcon
David Paniz
 
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQueryBuilding Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
benvinegar
 
Ruby on-rails-workshop
Ruby on-rails-workshopRuby on-rails-workshop
Ruby on-rails-workshop
Ryan Abbott
 
Open End To End Js Stack
Open End To End Js StackOpen End To End Js Stack
Open End To End Js Stack
Skills Matter
 
D3.js capita selecta
D3.js capita selectaD3.js capita selecta
D3.js capita selecta
Joris Klerkx
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer Architecture
Garann Means
 
Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support
상길 안
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Introduction to Node.js: perspectives from a Drupal dev
Introduction to Node.js: perspectives from a Drupal devIntroduction to Node.js: perspectives from a Drupal dev
Introduction to Node.js: perspectives from a Drupal dev
mcantelon
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
Bastian Hofmann
 

More from Scott Taylor (11)

The New York Times: Moving to GraphQL
The New York Times: Moving to GraphQLThe New York Times: Moving to GraphQL
The New York Times: Moving to GraphQL
Scott Taylor
 
Internationalizing The New York Times
Internationalizing The New York TimesInternationalizing The New York Times
Internationalizing The New York Times
Scott Taylor
 
A Day of REST
A Day of RESTA Day of REST
A Day of REST
Scott Taylor
 
REST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York TimesREST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York Times
Scott Taylor
 
WordPress 4.4 and Beyond
WordPress 4.4 and BeyondWordPress 4.4 and Beyond
WordPress 4.4 and Beyond
Scott Taylor
 
2015 WordCamp Maine Keynote
2015 WordCamp Maine Keynote2015 WordCamp Maine Keynote
2015 WordCamp Maine Keynote
Scott Taylor
 
Live Coverage at The New York Times
Live Coverage at The New York TimesLive Coverage at The New York Times
Live Coverage at The New York Times
Scott Taylor
 
WordPress: Getting Under the Hood
WordPress: Getting Under the HoodWordPress: Getting Under the Hood
WordPress: Getting Under the Hood
Scott Taylor
 
WordPress Media in a post-Koop Universe
WordPress Media in a post-Koop UniverseWordPress Media in a post-Koop Universe
WordPress Media in a post-Koop Universe
Scott Taylor
 
Cloud, Cache, and Configs
Cloud, Cache, and ConfigsCloud, Cache, and Configs
Cloud, Cache, and Configs
Scott Taylor
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the Enterprise
Scott Taylor
 
The New York Times: Moving to GraphQL
The New York Times: Moving to GraphQLThe New York Times: Moving to GraphQL
The New York Times: Moving to GraphQL
Scott Taylor
 
Internationalizing The New York Times
Internationalizing The New York TimesInternationalizing The New York Times
Internationalizing The New York Times
Scott Taylor
 
REST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York TimesREST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York Times
Scott Taylor
 
WordPress 4.4 and Beyond
WordPress 4.4 and BeyondWordPress 4.4 and Beyond
WordPress 4.4 and Beyond
Scott Taylor
 
2015 WordCamp Maine Keynote
2015 WordCamp Maine Keynote2015 WordCamp Maine Keynote
2015 WordCamp Maine Keynote
Scott Taylor
 
Live Coverage at The New York Times
Live Coverage at The New York TimesLive Coverage at The New York Times
Live Coverage at The New York Times
Scott Taylor
 
WordPress: Getting Under the Hood
WordPress: Getting Under the HoodWordPress: Getting Under the Hood
WordPress: Getting Under the Hood
Scott Taylor
 
WordPress Media in a post-Koop Universe
WordPress Media in a post-Koop UniverseWordPress Media in a post-Koop Universe
WordPress Media in a post-Koop Universe
Scott Taylor
 
Cloud, Cache, and Configs
Cloud, Cache, and ConfigsCloud, Cache, and Configs
Cloud, Cache, and Configs
Scott Taylor
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the Enterprise
Scott Taylor
 
Ad

Recently uploaded (20)

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Ad

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