SlideShare a Scribd company logo
Web Performance:
3 Stages to Success
About Me
Austin Gil (@Stegosource)
Lead developer at Visceral
(thisisvisceral.com)
3 years WordPress experience
Presentation Overview
1. Importance of performance
2. Introduce 3-stage approach
3. In-depth look at individual stages
4. Testing & recap
5. Questions & recommended tools
Performance: Why Do We Care?
(Super quick overview)
User Experience
Faster loading websites
have been proven to
keep visitor on the site
and interacting longer.
Visitors also are more
likely to return to fast
sites, or avoid slow sites.
SEO
In 2010, Google decided
that page speed would
be incorporated in their
page ranking algorithm.
It is not the most
important ranking signal,
but worth noting.
Money
Performance factors
directly affect conversion.
Speed affects time spent
on site management.
Lightweight sites are
easier data.
Over-cited Example
“Amazon found every 100ms of latency cost
them 1% in sales.”
Amazon earns over $100 BILLION per year
...so 100ms = $1 billion
Great! Let’s Go!
1. Choose a good host
2. Enable Gzip compression
3. Minimize redirects
4. Combine JS files
5. Defer JS parsing
6. Off-load the assets
7. Remove unused plugins
8. Use image srcset
9. Optimize database
19. Minify HTML
20. Minify CSS
21. Minify Javascript
22. Avoid CSS @import
23. Remove query strings
24. Specify image dimensions
25. Use data URIs
26. Serve scaled images
27. Specify character set
28. Reduce database calls
And so on, and so forth...
10. Use image sprites
11. Styles in header
12. Scripts in footer
13. Lazy load images
14. Enable caching
15. Optimize Images
16. Optimize WP_Query
17. Reduce DNS Lookups
18. Combine CSS files
COMMANDMENTS OF WEB PERFORMANCE!!!
“Thou shalt not take the name of thy lord
Performance in vain”
It’s Not That Complicated
- Send fewer things
- Send smaller things
- Send using with better tools
Apply to 3 Stages
Item 2
1. Foundation
3. Code
2. Design
Foundation
Big Players
- Client “requirements” (see: sliders)
- CDN (Cloudflare)
- Client uploads
- Hosting
Be the Expert
Item 2 Designers
- Educate & position yourself
- Educate your clients (use metrics)
- Share examples
- Learn to compromise (a.k.a. say “no”)
Show Up Prepared
Item 2 Designers
- Know your hosts (PHP 7, SSD)
- Know your CDN’s (cost & effort)
- Know your client (budget & needs)
Make Things Easy
Item 2 Designers- Manage uploads
- Share useful tools
- Provide detailed documentation
- Do it for them...with a maintenance plan :)
- Image dimensions (Imsanity)
- Image quality (EWWW)
- Image editors (Pixlr)
Design
Big Players
- Amount of content
- Multimedia (images, videos, audio)
- Complexity
Content & Layouts
Item 2 Designers- Grids
- Break up content (multi-page, AJAX)
- Replace images
Less is More
Item 2 Designers
- Font families (Google fonts)
- Icon libraries (Fontello, Icomoon)
- 3rd party elements (ads, maps, social)
0.3s load time - Motherfuckingwebsite.com
Icon Libraries Compared
Item 2 Designers
Font Awesome:
Font + CSS
270kb
Fontello (10):
Font + CSS
-93%
Glyphicons:
Font + CSS
-60%
Sliders/Carousels
Item 2 Designers- Just don’t
- There are alternatives
- They bloat your page
- They don’t convert (about 1% after first slide)
- They’re bad for SEO
- They’re bad for accessibility
- Yoast said so
Images
Item 2 Designers- Save for web
- Automate
- Simpler images (flat design)
- Know your file types (jpg, png, svg)
Item 2 Designers
Image Optimization Example
Original
621 kb
Save for web (60%)
275 kb
-56%
Original Image = 1250 x 877px, complex, many colors
Compressed (TinyPNG)
192 kb
-69%
The Affect of Image Effects
(we can go even smaller)
B & W
131kb
-32%
Monochrome
99kb
-49%
Gaussian Blur (5px)
77kb
-60%
Partial Effects
B & W Mask
167kb
-13%
Blur Mask
162kb
-16%
Transparent Overlay
135kb
-30%
Color Mask
130kb
-32%
Be creative!
Code
Big players
Item 2 Designers
- Caching
- How you <img>
- Unnecessary resources
- Database
Caching
Item 2 Designers
- Manually…
- WP Rocket (Paid)
- WP Fastest Cache
- W3 Total Cache
- The WordPress way
Image Markup
Item 2 Designers
- Image sizes (Settings > Media)
- Use srcset: <img src=“...” srcset=“...” />
- get_post_thumbnail( $post_id )
- wp_get_attachment_image( $img_id )
- Match to major breakpoints
- HTML background images (Gist) (Pen)
Lazy Load Images
Item 2 Designers- Lazy Load (Lazy Load)
- Progressive Lazy Load (Gist)
- Load thumbnail overlay (blur with CSS)
- Javascript load full size
- Fade out thumbnail
- Load tiny transparent img
- User interaction (scroll, click)
- Use JS to replace with actual image
- Accessibility...?
Scripts & Styles
Item 2 Designers
- Minify & concatenate
- Conditional load
- Plugins (Autoptimize)
- Taks runners (Gulp, Grunt, Webpack)
- Manually (Shrinker)
- What about http/2?
- If ( is_font_page() ) { wp_enqueue_script(“...”) }
- Plugins (Plugin Organizer, WP Asset Clean Up)
- It’s ok to dequeue
CSS Frameworks Compared
Item 2 Designers
Bootstrap:
CSS & JS:
152kb
BS Grid Only:
CSS: 12kb
-92%
PureCSS:
CSS: 27kb
-82%
More cool CSS info and tools at CSSPurge.com
Queries
Item 2 Designers- Learn WP_Query (Codex)
- Reuse same query
- wp_reset_query()
- Filter in query (post_type, posts_per_page, meta_query, tax_query)
- WP_Query optimization tricks
- Optimize database (Optimize Database after Deleting Revisions)
Offload Resources
Item 2 Designers
- Understand what you’re doing
- Images (Flickr, ImageEngine)
- Videos (YouTube, Vimeo)
- Audio (SoundCloud)
- Scripts & styles (JSDelivr) (Gist)
- Take advantage of services
What About Servers?
Item 2 Designers
- A look at the modern WordPress server stack
- Carl Alexander is AWESOME
Test, Analyze,
Repeat
Item 2 Designers
- Query Monitor - Too much goodness to write
Testing Tools
- GT Metrix - Webpage grades and advice
- P3 - Compare plugin load times
- Bitcatcha - Server speed testing
Item 2 Designers
Address Biggest Impactors First
- Upgrade your host
- Turn on caching
- Check your file sizes
Item 2 Designers
- Swap out plugins
Low Hanging Fruit
- Optimization plugins
- Remove unnecessary things
[clap_hands]
Designers
Image Optimization Tools - TinyPNG or Kraken: Support batch uploads/downloads. Results vary.
Image Optimization Plugins (choose one):
EWWW: Plug n’ play. Free. Good for agencies with lots of projects.
Compress JPEG & PNG images: Better performance. Freemium. Requires account.
Imsanity (plugin): Automatically resize super large uploads. Plug n’ play.
WP ImageEngine Responsive Image Resizer (plugin): Image hosting service
File Minification & Concatenation Tools:
Autoptimize (plugin): Easy to use, but be careful, it can break things sometimes. Test it.
Gulp, Grunt, or Webpack: Task runners. Add to workflow to automate file optimization (advanced)
Shrinker: Online tool. Supports inserted code, upload files, or upload from URL
Conditional Load Assets Plugins (choose one):
Plugin Organizer: Lot’s of setup work. Good for individuals fine tuning.
WP Asset Clean Up: Not as powerful, but much more simple to set up.
JSDelivr: Scripts & styles CDN. Also can minify and concatenate.
Optimize Database after Deleting Revisions: Database optimization plugin. Supports schedules.
Cloudflare: Free CDN

More Related Content

What's hot

Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
Wordpress ppt
Wordpress pptWordpress ppt
Wordpress ppt
Crest TechnoSoft
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
Parvez Mahbub
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
Mukesh Tekwani
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
Harish Karthick
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Core Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCore Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web Experience
Cakra Danu Sedayu
 
Bootstrap
BootstrapBootstrap
Bootstrap
Jadson Santos
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Web Page Speed - A Most Important Feature
Web Page Speed - A Most Important FeatureWeb Page Speed - A Most Important Feature
Web Page Speed - A Most Important Feature
Scott Germaise
 
Front end web development
Front end web developmentFront end web development
Front end web development
viveksewa
 
Introduction core web vitals
Introduction core web vitalsIntroduction core web vitals
Introduction core web vitals
SortdMediology
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
khushi74
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
WebStackAcademy
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
47ishu
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
Ruwandi Madhunamali
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
SaleemMalik52
 
Javascript
JavascriptJavascript

What's hot (20)

Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Wordpress ppt
Wordpress pptWordpress ppt
Wordpress ppt
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Core Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCore Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web Experience
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Web Page Speed - A Most Important Feature
Web Page Speed - A Most Important FeatureWeb Page Speed - A Most Important Feature
Web Page Speed - A Most Important Feature
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
Introduction core web vitals
Introduction core web vitalsIntroduction core web vitals
Introduction core web vitals
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Javascript
JavascriptJavascript
Javascript
 

Viewers also liked

A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance Monitoring
Cliff Crocker
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
Austin Gil
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.org
Marko Heijnen
 
Develolpment first design
Develolpment first designDevelolpment first design
Develolpment first design
ozzyr
 
Improve WordPress load times with a CDN
Improve WordPress load times with a CDNImprove WordPress load times with a CDN
Improve WordPress load times with a CDN
Austin Gil
 
Isotope, WP REST API, and AJAX...Oh my!
Isotope,  WP REST API, and AJAX...Oh my!Isotope,  WP REST API, and AJAX...Oh my!
Isotope, WP REST API, and AJAX...Oh my!
Austin Gil
 
Building virtualised CloudStack test environments
Building virtualised CloudStack test environmentsBuilding virtualised CloudStack test environments
Building virtualised CloudStack test environments
ShapeBlue
 
Come creare un blog con wordpress.org e bluehost in 5 minuti
Come creare un blog con wordpress.org e bluehost in 5 minuti Come creare un blog con wordpress.org e bluehost in 5 minuti
Come creare un blog con wordpress.org e bluehost in 5 minuti
Dario Vignali
 
How to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effort
How to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effortHow to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effort
How to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effort
ShapeBlue
 
Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017
Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017
Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017
Evan Scheingross
 
Using a Content-First Design Process
Using a Content-First Design ProcessUsing a Content-First Design Process
Using a Content-First Design Process
dawnsbrain
 
Sql injection with sqlmap
Sql injection with sqlmapSql injection with sqlmap
Sql injection with sqlmap
Herman Duarte
 
Do you really- need a 2kg pocket knife-
Do you  really- need  a 2kg pocket knife-Do you  really- need  a 2kg pocket knife-
Do you really- need a 2kg pocket knife-
Kate Newbill
 
Content Creation Regimen - WordCamp Hamilton 2016
Content Creation Regimen - WordCamp Hamilton 2016Content Creation Regimen - WordCamp Hamilton 2016
Content Creation Regimen - WordCamp Hamilton 2016
Andy McIlwain
 
CSS na steroidima (SASS)
CSS na steroidima (SASS)CSS na steroidima (SASS)
CSS na steroidima (SASS)
WordPress zajednica - Niš
 
Word press gets responsive 4x3
Word press gets responsive 4x3Word press gets responsive 4x3
Word press gets responsive 4x3
Edmund Turbin
 
Flexing Your WordPress Themes
Flexing Your WordPress ThemesFlexing Your WordPress Themes
Flexing Your WordPress Themes
Tim Blodgett
 
Project Management or how to herd cats
Project Management or how to herd catsProject Management or how to herd cats
Project Management or how to herd cats
Becky Davis
 
VersionPress - WordPress + Git
VersionPress - WordPress + GitVersionPress - WordPress + Git
VersionPress - WordPress + Git
frankstaude
 
Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going Crazy
John Eckman
 

Viewers also liked (20)

A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance Monitoring
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.org
 
Develolpment first design
Develolpment first designDevelolpment first design
Develolpment first design
 
Improve WordPress load times with a CDN
Improve WordPress load times with a CDNImprove WordPress load times with a CDN
Improve WordPress load times with a CDN
 
Isotope, WP REST API, and AJAX...Oh my!
Isotope,  WP REST API, and AJAX...Oh my!Isotope,  WP REST API, and AJAX...Oh my!
Isotope, WP REST API, and AJAX...Oh my!
 
Building virtualised CloudStack test environments
Building virtualised CloudStack test environmentsBuilding virtualised CloudStack test environments
Building virtualised CloudStack test environments
 
Come creare un blog con wordpress.org e bluehost in 5 minuti
Come creare un blog con wordpress.org e bluehost in 5 minuti Come creare un blog con wordpress.org e bluehost in 5 minuti
Come creare un blog con wordpress.org e bluehost in 5 minuti
 
How to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effort
How to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effortHow to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effort
How to add a new hypervisor to CloudStack - Lessons learned from Hyper-V effort
 
Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017
Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017
Spare Me From Your Stupid Slideshow - WordCamp San Diego, 2017
 
Using a Content-First Design Process
Using a Content-First Design ProcessUsing a Content-First Design Process
Using a Content-First Design Process
 
Sql injection with sqlmap
Sql injection with sqlmapSql injection with sqlmap
Sql injection with sqlmap
 
Do you really- need a 2kg pocket knife-
Do you  really- need  a 2kg pocket knife-Do you  really- need  a 2kg pocket knife-
Do you really- need a 2kg pocket knife-
 
Content Creation Regimen - WordCamp Hamilton 2016
Content Creation Regimen - WordCamp Hamilton 2016Content Creation Regimen - WordCamp Hamilton 2016
Content Creation Regimen - WordCamp Hamilton 2016
 
CSS na steroidima (SASS)
CSS na steroidima (SASS)CSS na steroidima (SASS)
CSS na steroidima (SASS)
 
Word press gets responsive 4x3
Word press gets responsive 4x3Word press gets responsive 4x3
Word press gets responsive 4x3
 
Flexing Your WordPress Themes
Flexing Your WordPress ThemesFlexing Your WordPress Themes
Flexing Your WordPress Themes
 
Project Management or how to herd cats
Project Management or how to herd catsProject Management or how to herd cats
Project Management or how to herd cats
 
VersionPress - WordPress + Git
VersionPress - WordPress + GitVersionPress - WordPress + Git
VersionPress - WordPress + Git
 
Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going Crazy
 

Similar to Web Performance: 3 Stages to Success

implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
Bastian Grimm
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
KharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address themKharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address them
Vlad Fedosov
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
Branded3
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
Bastian Grimm
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
Abhishek Anand
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
Bastian Grimm
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
Maximiliano Firtman
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
Ashok Modi
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 
23 Ways To Speed Up WordPress
23 Ways To Speed Up WordPress23 Ways To Speed Up WordPress
23 Ways To Speed Up WordPress
Zero Point Development
 
Building and scaling a B2D service, the bootstrap way
Building and scaling a B2D service, the bootstrap wayBuilding and scaling a B2D service, the bootstrap way
Building and scaling a B2D service, the bootstrap way
Nadav Soferman
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
Bastian Grimm
 
Droidcon Paris 2015
Droidcon Paris 2015Droidcon Paris 2015
Droidcon Paris 2015
Renaud Boulard
 
An Introduction to Pagespeed Optimisation
An Introduction to Pagespeed OptimisationAn Introduction to Pagespeed Optimisation
An Introduction to Pagespeed Optimisation
Pratyush Majumdar
 

Similar to Web Performance: 3 Stages to Success (20)

implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
KharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address themKharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address them
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
23 Ways To Speed Up WordPress
23 Ways To Speed Up WordPress23 Ways To Speed Up WordPress
23 Ways To Speed Up WordPress
 
Building and scaling a B2D service, the bootstrap way
Building and scaling a B2D service, the bootstrap wayBuilding and scaling a B2D service, the bootstrap way
Building and scaling a B2D service, the bootstrap way
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
Droidcon Paris 2015
Droidcon Paris 2015Droidcon Paris 2015
Droidcon Paris 2015
 
An Introduction to Pagespeed Optimisation
An Introduction to Pagespeed OptimisationAn Introduction to Pagespeed Optimisation
An Introduction to Pagespeed Optimisation
 

Recently uploaded

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 

Recently uploaded (20)

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 

Web Performance: 3 Stages to Success

  • 2. About Me Austin Gil (@Stegosource) Lead developer at Visceral (thisisvisceral.com) 3 years WordPress experience
  • 3. Presentation Overview 1. Importance of performance 2. Introduce 3-stage approach 3. In-depth look at individual stages 4. Testing & recap 5. Questions & recommended tools
  • 4. Performance: Why Do We Care? (Super quick overview)
  • 5. User Experience Faster loading websites have been proven to keep visitor on the site and interacting longer. Visitors also are more likely to return to fast sites, or avoid slow sites. SEO In 2010, Google decided that page speed would be incorporated in their page ranking algorithm. It is not the most important ranking signal, but worth noting. Money Performance factors directly affect conversion. Speed affects time spent on site management. Lightweight sites are easier data.
  • 6. Over-cited Example “Amazon found every 100ms of latency cost them 1% in sales.” Amazon earns over $100 BILLION per year ...so 100ms = $1 billion
  • 8.
  • 9. 1. Choose a good host 2. Enable Gzip compression 3. Minimize redirects 4. Combine JS files 5. Defer JS parsing 6. Off-load the assets 7. Remove unused plugins 8. Use image srcset 9. Optimize database 19. Minify HTML 20. Minify CSS 21. Minify Javascript 22. Avoid CSS @import 23. Remove query strings 24. Specify image dimensions 25. Use data URIs 26. Serve scaled images 27. Specify character set 28. Reduce database calls And so on, and so forth... 10. Use image sprites 11. Styles in header 12. Scripts in footer 13. Lazy load images 14. Enable caching 15. Optimize Images 16. Optimize WP_Query 17. Reduce DNS Lookups 18. Combine CSS files COMMANDMENTS OF WEB PERFORMANCE!!! “Thou shalt not take the name of thy lord Performance in vain”
  • 10. It’s Not That Complicated - Send fewer things - Send smaller things - Send using with better tools
  • 11. Apply to 3 Stages Item 2 1. Foundation 3. Code 2. Design
  • 13. Big Players - Client “requirements” (see: sliders) - CDN (Cloudflare) - Client uploads - Hosting
  • 14. Be the Expert Item 2 Designers - Educate & position yourself - Educate your clients (use metrics) - Share examples - Learn to compromise (a.k.a. say “no”)
  • 15. Show Up Prepared Item 2 Designers - Know your hosts (PHP 7, SSD) - Know your CDN’s (cost & effort) - Know your client (budget & needs)
  • 16. Make Things Easy Item 2 Designers- Manage uploads - Share useful tools - Provide detailed documentation - Do it for them...with a maintenance plan :) - Image dimensions (Imsanity) - Image quality (EWWW) - Image editors (Pixlr)
  • 18. Big Players - Amount of content - Multimedia (images, videos, audio) - Complexity
  • 19. Content & Layouts Item 2 Designers- Grids - Break up content (multi-page, AJAX) - Replace images
  • 20. Less is More Item 2 Designers - Font families (Google fonts) - Icon libraries (Fontello, Icomoon) - 3rd party elements (ads, maps, social)
  • 21. 0.3s load time - Motherfuckingwebsite.com
  • 22. Icon Libraries Compared Item 2 Designers Font Awesome: Font + CSS 270kb Fontello (10): Font + CSS -93% Glyphicons: Font + CSS -60%
  • 23. Sliders/Carousels Item 2 Designers- Just don’t - There are alternatives - They bloat your page - They don’t convert (about 1% after first slide) - They’re bad for SEO - They’re bad for accessibility - Yoast said so
  • 24. Images Item 2 Designers- Save for web - Automate - Simpler images (flat design) - Know your file types (jpg, png, svg)
  • 25. Item 2 Designers Image Optimization Example Original 621 kb Save for web (60%) 275 kb -56% Original Image = 1250 x 877px, complex, many colors Compressed (TinyPNG) 192 kb -69%
  • 26. The Affect of Image Effects (we can go even smaller)
  • 31. B & W Mask 167kb -13%
  • 36. Code
  • 37. Big players Item 2 Designers - Caching - How you <img> - Unnecessary resources - Database
  • 38. Caching Item 2 Designers - Manually… - WP Rocket (Paid) - WP Fastest Cache - W3 Total Cache - The WordPress way
  • 39. Image Markup Item 2 Designers - Image sizes (Settings > Media) - Use srcset: <img src=“...” srcset=“...” /> - get_post_thumbnail( $post_id ) - wp_get_attachment_image( $img_id ) - Match to major breakpoints - HTML background images (Gist) (Pen)
  • 40. Lazy Load Images Item 2 Designers- Lazy Load (Lazy Load) - Progressive Lazy Load (Gist) - Load thumbnail overlay (blur with CSS) - Javascript load full size - Fade out thumbnail - Load tiny transparent img - User interaction (scroll, click) - Use JS to replace with actual image - Accessibility...?
  • 41. Scripts & Styles Item 2 Designers - Minify & concatenate - Conditional load - Plugins (Autoptimize) - Taks runners (Gulp, Grunt, Webpack) - Manually (Shrinker) - What about http/2? - If ( is_font_page() ) { wp_enqueue_script(“...”) } - Plugins (Plugin Organizer, WP Asset Clean Up) - It’s ok to dequeue
  • 42. CSS Frameworks Compared Item 2 Designers Bootstrap: CSS & JS: 152kb BS Grid Only: CSS: 12kb -92% PureCSS: CSS: 27kb -82% More cool CSS info and tools at CSSPurge.com
  • 43. Queries Item 2 Designers- Learn WP_Query (Codex) - Reuse same query - wp_reset_query() - Filter in query (post_type, posts_per_page, meta_query, tax_query) - WP_Query optimization tricks - Optimize database (Optimize Database after Deleting Revisions)
  • 44. Offload Resources Item 2 Designers - Understand what you’re doing - Images (Flickr, ImageEngine) - Videos (YouTube, Vimeo) - Audio (SoundCloud) - Scripts & styles (JSDelivr) (Gist) - Take advantage of services
  • 45. What About Servers? Item 2 Designers - A look at the modern WordPress server stack - Carl Alexander is AWESOME
  • 47. Item 2 Designers - Query Monitor - Too much goodness to write Testing Tools - GT Metrix - Webpage grades and advice - P3 - Compare plugin load times - Bitcatcha - Server speed testing
  • 48. Item 2 Designers Address Biggest Impactors First - Upgrade your host - Turn on caching - Check your file sizes
  • 49. Item 2 Designers - Swap out plugins Low Hanging Fruit - Optimization plugins - Remove unnecessary things
  • 51. Designers Image Optimization Tools - TinyPNG or Kraken: Support batch uploads/downloads. Results vary. Image Optimization Plugins (choose one): EWWW: Plug n’ play. Free. Good for agencies with lots of projects. Compress JPEG & PNG images: Better performance. Freemium. Requires account. Imsanity (plugin): Automatically resize super large uploads. Plug n’ play. WP ImageEngine Responsive Image Resizer (plugin): Image hosting service File Minification & Concatenation Tools: Autoptimize (plugin): Easy to use, but be careful, it can break things sometimes. Test it. Gulp, Grunt, or Webpack: Task runners. Add to workflow to automate file optimization (advanced) Shrinker: Online tool. Supports inserted code, upload files, or upload from URL Conditional Load Assets Plugins (choose one): Plugin Organizer: Lot’s of setup work. Good for individuals fine tuning. WP Asset Clean Up: Not as powerful, but much more simple to set up. JSDelivr: Scripts & styles CDN. Also can minify and concatenate. Optimize Database after Deleting Revisions: Database optimization plugin. Supports schedules. Cloudflare: Free CDN