SlideShare a Scribd company logo
Website Performance Optimization Mariusz Kaczmarek
“If it is fast and ugly,					 they will use it and curse you;			 if it is slow, they will not use it.” David Cheriton Source: http://blogs.msdn.com/b/edglas/archive/2009/01/02/make-your-performance-work-count-the-20-rule.aspx https://secure.wikimedia.org/wikipedia/en/wiki/David_Cheriton 2
Categorization 3
Optimize performance? 				 	     More sales  				 	     Less bandwidth & server peaks  				 	     Customer satisfaction  				 	     Might influence rankings  Competitive advantage Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html 4
“…optimize front-end performance first,	 that's where 80% or more of the		 end-user response time is spent”	 Prof. Steve Souders Source: http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/ http://www.flickr.com/photos/seanosh/2782339349/ 5
Effective measures? 		Website performance optimization should be aligned with the  		service / website / target audience you work with. 		Focus areas could be:  Image optimization & compression  JS performance (asynchronous, cached)  Reduction of DOM elements		  Teaching customers and employees! 6
Combined Scripts   Server-sided combination 						  Avoid @import for combining 						  JS tool: HEADjshttp://headjs.com/ 7
CSS Performance 						 Reuse of round corners and  						      shadow classes							 font-faces instead of pictures 						 CSS-Sprites 						Universal > tags > classes > IDs Source: http://www.alsacreations.com/xmedia/doc/full/sprites-big-sites.png https://developer.mozilla.org/en/Writing_Efficient_CSS 8
Postponed Loading 					Use of GET with AJAX 					Google Instant takessnapshots 5-10s      				     after onLoadevent? http://b0i.de/seomofo Tools:  ContolJShttp://stevesouders.com/controljs/ ImageLoaderhttp://developer.yahoo.com/yui/imageloader/ LazyLoadhttp://plugins.jquery.com/project/lazyload/ Source: http://developer.yahoo.com/performance/rules.html 9
Event handlers, components,XHRs User interaction, XHRs backend components request Site loaded HTML sent request onload 5-10s Google Instant Snapshot Modifiedimage from High Performance Web Pages | Stoyan Stefanov | Yahoo! Exceptional Performance | PHP Quebec, March 13, 2008 Source: http://b0i.de/seomofo 10
DNS Lookups & Redirections 				          Avoid 301 redirections (e.g. in HTML) 					http://www.bonoseo.com/  !=  http://www.bonoseo.com 				          usage of not morethan2-5 different domains on average 				          better: domain-aliases for parallel 					downloadshttp://images.bonoseo.com || http://www.bonoseo.com 				          cookielessdomainsforstaticcontent Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ 11
Content Delivery Network Geographical distribution 						Minimizes DNS-Lookups	 						Optimized caching und uptime 					     (by dynamic DNS resolving) Source: http://www.flickr.com/photos/andybeatty/5247263940/ 12
Image Compression 						UseSmush.it 						Progressive JPEG baseline 						progressive Source: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/ 13
Vector Graphics  Canvas Elemente with HTML5 Ai->Canvashttp://visitmix.com/labs/ai2canvas/ Progressive JPEG 13,3 kB -> HTML5 2,38 kB Saved:  82% 14
Shape the DOM Tree 		<h1><em>Heading</em></h1> - useCSS‘sitalicsinstead 		 Tool: DOM-Monsterhttp://mir.aculo.us/dom-monster/ 		 Avoid iFrames 15
Chunking  flushfunction Source: http://www.phpied.com/progressive-rendering-via-multiple-flushes/ http://stevesouders.com/docs/velocity-20090622.ppt 16
Performance Test Tools Loads.inwww.loads.in Slow Copwww.slowcop.com Show Slowwww.showslow.com Webpagetest www.webpagetest.org 						Browser based Speedtracerhttp://b0i.de/speedtracer YslowFireBughttp://b0i.de/yslow More tools: http://code.google.com/speed/tools.html 17
Competition Analysis 		Possible performance profiles (by Souders & students) http://b0i.de/profile 		Simple linear regression analysis Wolfram Alpha: linear fit {1, 87},{2, 77},{3, 95},{4, 68} http://b0i.de/wolfreg 18
Pareto Rule 80/20 Optimizationneeds time! Lessons learned: Concentrate on biggestchunks Source: JavaScript: The Good Parts - Part Six: Ajax Performance | Douglas Crockford 19
Questions? Discuss! Let’s be friends  Twitter: BONOSEO Facebook: kaczmarek.mariusz Ssssshh… SouderSlides from Stanford: http://b0i.de/souderslides 20
Statistics 2010 Additional 			Average website size: 320 kB 			Compression is possible for 2/3 of overall data 			80% of content is loaded from one host Source: Statisticnumbers from 4.2 billionsiteshttp://code.google.com/speed/articles/web-metrics.html 21
Inline Images 						Base 64 encoding 						Great forsmallstaticimages Additional Works until IE7  Browser switch! 22 Source: http://9gag.com/gag/76585
JavaScript Performance Additional 						Tools:  http://dean.edwards.name/packer/ http://developer.yahoo.com/yui/compressor/ 						DRY and OO approach Seconds per 10 million operations Source: Besser PHP Programmieren – Professionelle PHP-Techniken | Carsten Möhrke 23

More Related Content

What's hot

Information on Various HTTP Error Codes
Information on Various HTTP Error CodesInformation on Various HTTP Error Codes
Information on Various HTTP Error Codes
HTS Hosting
 
How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013
Search Commander, Inc.
 
How Can You Make Your Website Faster?
How Can You Make Your Website Faster?How Can You Make Your Website Faster?
How Can You Make Your Website Faster?
HTS Hosting
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Speed!
Speed!Speed!
Web Application Development Fundamentals
Web Application Development FundamentalsWeb Application Development Fundamentals
Web Application Development Fundamentals
Mohammed Makhlouf
 
Poslovni Imenik BiH - Lokal d.o.o.
Poslovni Imenik BiH - Lokal d.o.o.Poslovni Imenik BiH - Lokal d.o.o.
Poslovni Imenik BiH - Lokal d.o.o.
Luxury Villas Zilic
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Devin Walker
 
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmasters
Aditya Singh
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
Timothy Wood
 
High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nl
Joomla!Days Netherlands
 
Is your website's speed letting you down?
Is your website's speed letting you down?Is your website's speed letting you down?
Is your website's speed letting you down?
Ray Krzeminski
 
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
Jessica Ervin
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
sacred 8
 
Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites Win
Jonathan Hochman
 
High Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - AutomationHigh Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - Automationsoheil416
 
Website speed optimization techniques
Website speed optimization techniquesWebsite speed optimization techniques
Website speed optimization techniques
ValueCoders
 
Optimizing the performance of WordPress
Optimizing the performance of WordPressOptimizing the performance of WordPress
Optimizing the performance of WordPress
Josh Highland Giese
 

What's hot (20)

Information on Various HTTP Error Codes
Information on Various HTTP Error CodesInformation on Various HTTP Error Codes
Information on Various HTTP Error Codes
 
How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013
 
How Can You Make Your Website Faster?
How Can You Make Your Website Faster?How Can You Make Your Website Faster?
How Can You Make Your Website Faster?
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Speed!
Speed!Speed!
Speed!
 
Web Application Development Fundamentals
Web Application Development FundamentalsWeb Application Development Fundamentals
Web Application Development Fundamentals
 
Poslovni Imenik BiH - Lokal d.o.o.
Poslovni Imenik BiH - Lokal d.o.o.Poslovni Imenik BiH - Lokal d.o.o.
Poslovni Imenik BiH - Lokal d.o.o.
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
 
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmasters
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nl
 
Is your website's speed letting you down?
Is your website's speed letting you down?Is your website's speed letting you down?
Is your website's speed letting you down?
 
Presentation1
Presentation1Presentation1
Presentation1
 
Html Optimization for SEO
Html Optimization for SEOHtml Optimization for SEO
Html Optimization for SEO
 
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites Win
 
High Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - AutomationHigh Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - Automation
 
Website speed optimization techniques
Website speed optimization techniquesWebsite speed optimization techniques
Website speed optimization techniques
 
Optimizing the performance of WordPress
Optimizing the performance of WordPressOptimizing the performance of WordPress
Optimizing the performance of WordPress
 

Viewers also liked

Web performance at WDCNZ
Web performance at WDCNZWeb performance at WDCNZ
Web performance at WDCNZ
John Clegg
 
Performance Evaluation of XMPP on the Web
Performance Evaluation of XMPP on the WebPerformance Evaluation of XMPP on the Web
Performance Evaluation of XMPP on the Web
Markku Laine
 
Applebees server performance appraisal
Applebees server performance appraisalApplebees server performance appraisal
Applebees server performance appraisal
liamedison67
 
Understanding and measuring web performance
Understanding and measuring web performanceUnderstanding and measuring web performance
Understanding and measuring web performance
Bogdan Gaza
 
Website Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Website Pre SEO Analysis Report- Online Marketing: Search Engine OptimizationWebsite Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Website Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Vikesh Sanwalodia
 
Recruitment Analytics workshop - Endouble Antwerp 6-3-2017
Recruitment Analytics workshop  - Endouble Antwerp 6-3-2017Recruitment Analytics workshop  - Endouble Antwerp 6-3-2017
Recruitment Analytics workshop - Endouble Antwerp 6-3-2017
Endouble
 
SEO sample report
SEO sample report SEO sample report
SEO sample report
SEO Service Corporation
 
Website Structure Analysis Report Sample - SEO Traffic
Website Structure Analysis Report Sample - SEO TrafficWebsite Structure Analysis Report Sample - SEO Traffic
Website Structure Analysis Report Sample - SEO Traffic
SEO Traffic
 
HTTP Application Performance Analysis
HTTP Application Performance AnalysisHTTP Application Performance Analysis
HTTP Application Performance Analysis
PerformanceVision (previously SecurActive)
 
Endouble Advertising Workshop
Endouble Advertising WorkshopEndouble Advertising Workshop
Endouble Advertising Workshop
Endouble
 
Threats To The System
Threats To The SystemThreats To The System
Threats To The SystemSteven Cahill
 
APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...
APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...
APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...
Michael Kehoe
 
Approaches to Software Testing
Approaches to Software TestingApproaches to Software Testing
Approaches to Software Testing
Scott Barber
 
Performance Analysis: new tools and concepts from the cloud
Performance Analysis: new tools and concepts from the cloudPerformance Analysis: new tools and concepts from the cloud
Performance Analysis: new tools and concepts from the cloud
Brendan Gregg
 
Measuring the Performance of Single Page Applications
Measuring the Performance of Single Page ApplicationsMeasuring the Performance of Single Page Applications
Measuring the Performance of Single Page Applications
Nicholas Jansma
 
Application Performance Management - Solving the Performance Puzzle
Application Performance Management - Solving the Performance PuzzleApplication Performance Management - Solving the Performance Puzzle
Application Performance Management - Solving the Performance Puzzle
LDragich
 
Web Server Hardware and Software
Web Server Hardware and SoftwareWeb Server Hardware and Software
Web Server Hardware and Softwarewebhostingguy
 
An Introduction to Software Performance Engineering
An Introduction to Software Performance EngineeringAn Introduction to Software Performance Engineering
An Introduction to Software Performance Engineering
Correlsense
 
PPC AdWords Report
PPC AdWords ReportPPC AdWords Report
PPC AdWords Report
ReportGarden
 
Best Practices And Next Gen Formats: Supercharging Web Content Performance
Best Practices And Next Gen Formats: Supercharging Web Content PerformanceBest Practices And Next Gen Formats: Supercharging Web Content Performance
Best Practices And Next Gen Formats: Supercharging Web Content Performance
G3 Communications
 

Viewers also liked (20)

Web performance at WDCNZ
Web performance at WDCNZWeb performance at WDCNZ
Web performance at WDCNZ
 
Performance Evaluation of XMPP on the Web
Performance Evaluation of XMPP on the WebPerformance Evaluation of XMPP on the Web
Performance Evaluation of XMPP on the Web
 
Applebees server performance appraisal
Applebees server performance appraisalApplebees server performance appraisal
Applebees server performance appraisal
 
Understanding and measuring web performance
Understanding and measuring web performanceUnderstanding and measuring web performance
Understanding and measuring web performance
 
Website Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Website Pre SEO Analysis Report- Online Marketing: Search Engine OptimizationWebsite Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Website Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
 
Recruitment Analytics workshop - Endouble Antwerp 6-3-2017
Recruitment Analytics workshop  - Endouble Antwerp 6-3-2017Recruitment Analytics workshop  - Endouble Antwerp 6-3-2017
Recruitment Analytics workshop - Endouble Antwerp 6-3-2017
 
SEO sample report
SEO sample report SEO sample report
SEO sample report
 
Website Structure Analysis Report Sample - SEO Traffic
Website Structure Analysis Report Sample - SEO TrafficWebsite Structure Analysis Report Sample - SEO Traffic
Website Structure Analysis Report Sample - SEO Traffic
 
HTTP Application Performance Analysis
HTTP Application Performance AnalysisHTTP Application Performance Analysis
HTTP Application Performance Analysis
 
Endouble Advertising Workshop
Endouble Advertising WorkshopEndouble Advertising Workshop
Endouble Advertising Workshop
 
Threats To The System
Threats To The SystemThreats To The System
Threats To The System
 
APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...
APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...
APRICOT 2017: Trafficshifting: Avoiding Disasters & Improving Performance at ...
 
Approaches to Software Testing
Approaches to Software TestingApproaches to Software Testing
Approaches to Software Testing
 
Performance Analysis: new tools and concepts from the cloud
Performance Analysis: new tools and concepts from the cloudPerformance Analysis: new tools and concepts from the cloud
Performance Analysis: new tools and concepts from the cloud
 
Measuring the Performance of Single Page Applications
Measuring the Performance of Single Page ApplicationsMeasuring the Performance of Single Page Applications
Measuring the Performance of Single Page Applications
 
Application Performance Management - Solving the Performance Puzzle
Application Performance Management - Solving the Performance PuzzleApplication Performance Management - Solving the Performance Puzzle
Application Performance Management - Solving the Performance Puzzle
 
Web Server Hardware and Software
Web Server Hardware and SoftwareWeb Server Hardware and Software
Web Server Hardware and Software
 
An Introduction to Software Performance Engineering
An Introduction to Software Performance EngineeringAn Introduction to Software Performance Engineering
An Introduction to Software Performance Engineering
 
PPC AdWords Report
PPC AdWords ReportPPC AdWords Report
PPC AdWords Report
 
Best Practices And Next Gen Formats: Supercharging Web Content Performance
Best Practices And Next Gen Formats: Supercharging Web Content PerformanceBest Practices And Next Gen Formats: Supercharging Web Content Performance
Best Practices And Next Gen Formats: Supercharging Web Content Performance
 

Similar to Web performance optimization (WPO)

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
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahooguestb1b95b
 
Hardcode SEO
Hardcode SEOHardcode SEO
Hardcode SEO
Michel Ozzello
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
Steve Souders
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Võ Duy Tuấn
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站areyouok
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
topgeek
 
5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot
Michael Ewins
 
5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games
Michael Ewins
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
Steve Weber
 
Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]
Peter Mead
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
Parham
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
Haribabu Nandyal Padmanaban
 
High Performance Web Sites
High Performance Web SitesHigh Performance Web Sites
High Performance Web Sites
Páris Neto
 
High Performance Websites By Souders Steve
High Performance Websites By Souders SteveHigh Performance Websites By Souders Steve
High Performance Websites By Souders Steve
w3guru
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站George Ang
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Artur Cistov
 
Make Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speedMake Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speed
Andy Kucharski
 

Similar to Web performance optimization (WPO) (20)

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
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Hardcode SEO
Hardcode SEOHardcode SEO
Hardcode SEO
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot
 
5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
 
Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
High Performance Web Sites
High Performance Web SitesHigh Performance Web Sites
High Performance Web Sites
 
High Performance Websites By Souders Steve
High Performance Websites By Souders SteveHigh Performance Websites By Souders Steve
High Performance Websites By Souders Steve
 
Plop
PlopPlop
Plop
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
Make Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speedMake Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speed
 

Recently uploaded

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 

Web performance optimization (WPO)

  • 2. “If it is fast and ugly, they will use it and curse you; if it is slow, they will not use it.” David Cheriton Source: http://blogs.msdn.com/b/edglas/archive/2009/01/02/make-your-performance-work-count-the-20-rule.aspx https://secure.wikimedia.org/wikipedia/en/wiki/David_Cheriton 2
  • 4. Optimize performance? More sales  Less bandwidth & server peaks  Customer satisfaction  Might influence rankings  Competitive advantage Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html 4
  • 5. “…optimize front-end performance first, that's where 80% or more of the end-user response time is spent” Prof. Steve Souders Source: http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/ http://www.flickr.com/photos/seanosh/2782339349/ 5
  • 6. Effective measures? Website performance optimization should be aligned with the service / website / target audience you work with. Focus areas could be:  Image optimization & compression  JS performance (asynchronous, cached)  Reduction of DOM elements  Teaching customers and employees! 6
  • 7. Combined Scripts  Server-sided combination  Avoid @import for combining  JS tool: HEADjshttp://headjs.com/ 7
  • 8. CSS Performance  Reuse of round corners and shadow classes  font-faces instead of pictures  CSS-Sprites Universal > tags > classes > IDs Source: http://www.alsacreations.com/xmedia/doc/full/sprites-big-sites.png https://developer.mozilla.org/en/Writing_Efficient_CSS 8
  • 9. Postponed Loading Use of GET with AJAX Google Instant takessnapshots 5-10s after onLoadevent? http://b0i.de/seomofo Tools: ContolJShttp://stevesouders.com/controljs/ ImageLoaderhttp://developer.yahoo.com/yui/imageloader/ LazyLoadhttp://plugins.jquery.com/project/lazyload/ Source: http://developer.yahoo.com/performance/rules.html 9
  • 10. Event handlers, components,XHRs User interaction, XHRs backend components request Site loaded HTML sent request onload 5-10s Google Instant Snapshot Modifiedimage from High Performance Web Pages | Stoyan Stefanov | Yahoo! Exceptional Performance | PHP Quebec, March 13, 2008 Source: http://b0i.de/seomofo 10
  • 11. DNS Lookups & Redirections Avoid 301 redirections (e.g. in HTML) http://www.bonoseo.com/ != http://www.bonoseo.com usage of not morethan2-5 different domains on average better: domain-aliases for parallel downloadshttp://images.bonoseo.com || http://www.bonoseo.com cookielessdomainsforstaticcontent Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ 11
  • 12. Content Delivery Network Geographical distribution Minimizes DNS-Lookups Optimized caching und uptime (by dynamic DNS resolving) Source: http://www.flickr.com/photos/andybeatty/5247263940/ 12
  • 13. Image Compression UseSmush.it Progressive JPEG baseline progressive Source: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/ 13
  • 14. Vector Graphics  Canvas Elemente with HTML5 Ai->Canvashttp://visitmix.com/labs/ai2canvas/ Progressive JPEG 13,3 kB -> HTML5 2,38 kB Saved: 82% 14
  • 15. Shape the DOM Tree <h1><em>Heading</em></h1> - useCSS‘sitalicsinstead  Tool: DOM-Monsterhttp://mir.aculo.us/dom-monster/  Avoid iFrames 15
  • 16. Chunking  flushfunction Source: http://www.phpied.com/progressive-rendering-via-multiple-flushes/ http://stevesouders.com/docs/velocity-20090622.ppt 16
  • 17. Performance Test Tools Loads.inwww.loads.in Slow Copwww.slowcop.com Show Slowwww.showslow.com Webpagetest www.webpagetest.org Browser based Speedtracerhttp://b0i.de/speedtracer YslowFireBughttp://b0i.de/yslow More tools: http://code.google.com/speed/tools.html 17
  • 18. Competition Analysis Possible performance profiles (by Souders & students) http://b0i.de/profile Simple linear regression analysis Wolfram Alpha: linear fit {1, 87},{2, 77},{3, 95},{4, 68} http://b0i.de/wolfreg 18
  • 19. Pareto Rule 80/20 Optimizationneeds time! Lessons learned: Concentrate on biggestchunks Source: JavaScript: The Good Parts - Part Six: Ajax Performance | Douglas Crockford 19
  • 20. Questions? Discuss! Let’s be friends  Twitter: BONOSEO Facebook: kaczmarek.mariusz Ssssshh… SouderSlides from Stanford: http://b0i.de/souderslides 20
  • 21. Statistics 2010 Additional Average website size: 320 kB Compression is possible for 2/3 of overall data 80% of content is loaded from one host Source: Statisticnumbers from 4.2 billionsiteshttp://code.google.com/speed/articles/web-metrics.html 21
  • 22. Inline Images Base 64 encoding Great forsmallstaticimages Additional Works until IE7  Browser switch! 22 Source: http://9gag.com/gag/76585
  • 23. JavaScript Performance Additional Tools: http://dean.edwards.name/packer/ http://developer.yahoo.com/yui/compressor/ DRY and OO approach Seconds per 10 million operations Source: Besser PHP Programmieren – Professionelle PHP-Techniken | Carsten Möhrke 23