SlideShare a Scribd company logo
1 of 43
Web UI Performance Tuning
Cross platform tools and techniques
Andy Pemberton,
Tuesday, November 2, 2010
Minification
/**
* This, friends, is a very important function.
*/
function exampleFunction(){
var be = true;
if(be){
confirm(“You sure about that?”);
}else if(!be){
confirm(“Apparently not.”);
}
}
function exampleFunction(){var be=true;if(be)
{confirm("You sure about that?")}else{if(!be)
{confirm("Apparently not.")}}};
Tuesday, November 2, 2010
Minification
/**
* This, friends, is a very important function.
*/
function exampleFunction(){
var be = true;
if(be){
confirm(“You sure about that?”);
}else if(!be){
confirm(“Apparently not.”);
}
}
function exampleFunction(){var be=true;if(be)
{confirm("You sure about that?")}else{if(!be)
{confirm("Apparently not.")}}};
Original: 205Minified: 121
41%
Tuesday, November 2, 2010
Obfuscation
function exampleFunction(){
var aLongerThanNecessaryVariableName = true;
if(aLongerThanNecessaryVariableName){
confirm(“You sure about that?”);
}else if(!aLongerThanNecessaryVariableName){
confirm(“Apparently not.”);
}
}
function exampleFunction(){
var a = true;
if(a){
confirm("You sure about that?");
}else if(!a){
confirm("Apparently not.")
}
}
Tuesday, November 2, 2010
Obfuscation
function exampleFunction(){
var aLongerThanNecessaryVariableName = true;
if(aLongerThanNecessaryVariableName){
confirm(“You sure about that?”);
}else if(!aLongerThanNecessaryVariableName){
confirm(“Apparently not.”);
}
}
function exampleFunction(){
var a = true;
if(a){
confirm("You sure about that?");
}else if(!a){
confirm("Apparently not.")
}
}
Original: 238Obfuscated: 145
39%
Tuesday, November 2, 2010
Compression
Content-Encoding: text/javascript
...
<script type="text/javascript" src="http://
code.jquery.com/jquery-1.4.3.js" />
Content-Encoding: gzip
...
<script type="text/javascript" src="http://
code.jquery.com/jquery-1.4.3.js" />
Tuesday, November 2, 2010
Compression
Content-Encoding: text/javascript
...
<script type="text/javascript" src="http://
code.jquery.com/jquery-1.4.3.js" />
Content-Encoding: gzip
...
<script type="text/javascript" src="http://
code.jquery.com/jquery-1.4.3.js" />
Original: 180,459Obfuscated: 51,155
72%
Tuesday, November 2, 2010
Combination
<script type=”text/javascript” src=”jquery.js”>
<script type=”text/javascript” src=”client.js”>
<script type=”text/javascript” src=”events.js”>
<script type=”text/javascript” src=”combined.js”>
Tuesday, November 2, 2010
Combination
<script type=”text/javascript” src=”jquery.js”>
<script type=”text/javascript” src=”client.js”>
<script type=”text/javascript” src=”events.js”>
<script type=”text/javascript” src=”combined.js”>
Reduction
Tuesday, November 2, 2010
How the web works
Tuesday, November 2, 2010
How the web works
Tuesday, November 2, 2010
How the web works
Tuesday, November 2, 2010
How the web works
Tuesday, November 2, 2010
How the web works
Tuesday, November 2, 2010
Steve Souders
http://developer.yahoo.com/performance/rules.html
Tuesday, November 2, 2010
So what can we do?
• Cross-platform
• Java
• .NET
• PHP
Tuesday, November 2, 2010
Cross-platform
Tuesday, November 2, 2010
Source Order
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="client.js">
<link type="text/css" rel="stylesheet"
media="all" href="styles.css" />
<link type="text/css" rel="stylesheet"
media="all" href="forms.css" />
<link type="text/css" rel="stylesheet"
media="all" href="styles.css" />
<link type="text/css" rel="stylesheet"
media="all" href="forms.css" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="client.js">
Tuesday, November 2, 2010
Source Order
<head>
<script type="text/javascript"
src="jquery.js">
<script type="text/javascript"
src="client.js">
<link type="text/css" rel="stylesheet"
media="all" href="styles.css" />
<link type="text/css" rel="stylesheet"
media="all" href="forms.css" />
</head>
<body>
...
</body>
<head>
<link type="text/css" rel="stylesheet"
media="all" href="styles.css" />
<link type="text/css" rel="stylesheet"
media="all" href="forms.css" />
</head>
<body>
...
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="client.js">
</body>
Tuesday, November 2, 2010
Expires Header
GET /sites/all/themes/captech/
styles/images/logo-captech-r.png
HTTP/1.1
Host: www.captechconsulting.com
HTTP/1.1 200 OK
Date: Tue, 02 Nov 2010 14:42:58
GMT
Last-Modified: Mon, 30 Aug 2010
12:21:25 GMT
Expires: Tue, 16 Nov 2010
14:42:58 GMT
Content-Type: image/png
GET /sites/all/themes/captech/
styles/images/logo-captech-r.png
HTTP/1.1
Host: www.captechconsulting.com
User-Agent: Mozilla/5.0
(Macintosh; U; Intel Mac OS X
10.6; en-US; rv:1.9.2.12) Gecko/
20101026 Firefox/3.6.12
If-Modified-Since: Mon, 30 Aug
2010 12:21:25 GMT
HTTP/1.1 304 Not Modified
Date: Tue, 02 Nov 2010 14:43:00
GMT
Expires: Tue, 16 Nov 2010
14:43:00 GMT
Tuesday, November 2, 2010
CSS Image Sprites
Tuesday, November 2, 2010
Parallelize Downloads
Tuesday, November 2, 2010
CDN
• Multiple domain names
• Global load balancing or “edge” servers
• Other advanced features
Tuesday, November 2, 2010
Browser-based Tools
Tuesday, November 2, 2010
YSlow
http://developer.yahoo.com/yslow/
Tuesday, November 2, 2010
Page Speed
http://code.google.com/speed/page-speed/
Tuesday, November 2, 2010
Others
• FireBug (Net tab)
• Firecookie
• Live HTTP Headers
• Chrome, Safari, IE developer tools
Tuesday, November 2, 2010
Web-based Tools
Tuesday, November 2, 2010
Cuzillion
http://stevesouders.com/cuzillion/
Tuesday, November 2, 2010
smush.it
http://smush.it/
Tuesday, November 2, 2010
SpriteMe
http://spriteme.org/
Tuesday, November 2, 2010
Java
Tuesday, November 2, 2010
pack:tag
<%@ page %>
...
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="client.js">
<link type="text/css" rel="stylesheet" media="all"
href="styles.css" />
<link type="text/css" rel="stylesheet" media="all"
href="forms.css" />
<%@ page %>
<%@ taglib uri="http://packtag.sf.net" prefix="pack" %>
...
<pack:style>
<src>styles.css</src>
<src>forms.css</src>
</pack:style>
<pack:script>
<src>jquery.js</src>
<src>client.js</src>
</pack:script>
http://sourceforge.net/projects/packtag/
Tuesday, November 2, 2010
Tomcat
Pre-Tomcat 6: tomcat/conf/web.xml:
<servlet>
<servlet-name>jsp</servlet-name>
<servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
...
<init-param>
<param-name>trimSpaces</param-name>
<param-value>true</param-value>
</init-param>
...
</servlet>
Post-Tomcat 6
<%@ page trimDirectiveWhitespaces=”true"%>
...
Tuesday, November 2, 2010
Tomcat
Tomcat 7: ExpiresFilter
<filter-name>ExpiresFilter</filter-name>
<filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
<init-param>
<param-name>ExpiresByType image/jpeg</param-name>
<param-value>access plus 52 weeks</param-value>
</init-param>
Tuesday, November 2, 2010
.NET
Tuesday, November 2, 2010
ASP.NET
<asp:scriptmanager runat="server">
<compositescript>
<scripts>
<asp:scriptreference name="WebForms.js" assembly="System.Web, Version=2.0.0.0, Culture=neutral”">
<asp:scriptreference name="MicrosoftAjaxWebForms.js" assembly="System.Web.Extensions, Version=3.5.0.0,
Culture=neutral">
<asp:scriptreference name="MicrosoftAjax.js" assembly="System.Web.Extensions, Version=3.5.0.0,
Culture=neutral">
</asp:scriptreference></asp:scriptreference></asp:scriptreference></scripts>
</compositescript>
</asp:scriptmanager>
Tuesday, November 2, 2010
jscssconsolidate
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="client.js">
<link type="text/css" rel="stylesheet" media="all"
href="styles.css" />
<link type="text/css" rel="stylesheet" media="all"
href="forms.css" />
http://jscssconsolidate.codeplex.com/
<almWitt.web.resourceManagement consolidate="true">
<clientScripts compress="true">
<group consolidatedUrl="~/scripts.js">
<include>
<add pattern=".js"/>
</include>
</group>
</clientScripts>
<cssFiles>
<group consolidatedUrl="~/styles.css">
<include>
<add pattern=".css"/>
</include>
</group>
</cssFiles>
</almWitt.web.resourceManagement>
Tuesday, November 2, 2010
PHP
Tuesday, November 2, 2010
phpminify
http://code.google.com/p/minify/
Tuesday, November 2, 2010
Drupal
Tuesday, November 2, 2010
Wait... why?
http://tinyurl.com/google-sitespeed
http://tinyurl.com/firefox-sitespeed
Tuesday, November 2, 2010
In the wild...
• large non functional scripts
(omniture, foresee, etc.)
• large, unoptimized images
• vast number of javascript includes
Tuesday, November 2, 2010

More Related Content

What's hot

Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsRachael L Moore
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsRachael L Moore
 
Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgetsvelveeta_512
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
JS Lab`16. Владимир Воевидка: "Как работает браузер"
JS Lab`16. Владимир Воевидка: "Как работает браузер"JS Lab`16. Владимир Воевидка: "Как работает браузер"
JS Lab`16. Владимир Воевидка: "Как работает браузер"GeeksLab Odessa
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Phil Leggetter
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWalter Ebert
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
 
The DOM is a Mess @ Yahoo
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoojeresig
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UIPaul Bakaus
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIDirk Ginader
 

What's hot (20)

Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web Components
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
JS Lab`16. Владимир Воевидка: "Как работает браузер"
JS Lab`16. Владимир Воевидка: "Как работает браузер"JS Lab`16. Владимир Воевидка: "Как работает браузер"
JS Lab`16. Владимир Воевидка: "Как работает браузер"
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
 
WordPress APIs
WordPress APIsWordPress APIs
WordPress APIs
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
The DOM is a Mess @ Yahoo
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoo
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
 

Viewers also liked

Functions - complex first class citizen
Functions - complex first class citizenFunctions - complex first class citizen
Functions - complex first class citizenVytautas Butkus
 
PHP Static Code Review
PHP Static Code ReviewPHP Static Code Review
PHP Static Code ReviewDamien Seguy
 
Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)Damien Seguy
 
Coding Best practices (PHP)
Coding Best practices (PHP)Coding Best practices (PHP)
Coding Best practices (PHP)Christian Baune
 
Modular & Event driven UI Architecture
Modular & Event driven UI ArchitectureModular & Event driven UI Architecture
Modular & Event driven UI ArchitectureVytautas Butkus
 
Coding Standard And Code Review
Coding Standard And Code ReviewCoding Standard And Code Review
Coding Standard And Code ReviewMilan Vukoje
 
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...Rouven Weßling
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesSiarhei Barysiuk
 
Modern Static Code Analysis in PHP
Modern Static Code Analysis in PHPModern Static Code Analysis in PHP
Modern Static Code Analysis in PHPVladimir Reznichenko
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy CodeAdam Culp
 
Component Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanComponent Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanITCamp
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentSuresh Patidar
 
Code review guidelines
Code review guidelinesCode review guidelines
Code review guidelinesLalit Kale
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web PerformanceKyle Simpson
 
Selenium Architecture
Selenium ArchitectureSelenium Architecture
Selenium Architecturerohitnayak
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingWolfram Nagel
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding styleBo-Yi Wu
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architectureGabriele Falace
 

Viewers also liked (20)

Functions - complex first class citizen
Functions - complex first class citizenFunctions - complex first class citizen
Functions - complex first class citizen
 
Coding standards php
Coding standards phpCoding standards php
Coding standards php
 
PHP Static Code Review
PHP Static Code ReviewPHP Static Code Review
PHP Static Code Review
 
Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)
 
Coding Best practices (PHP)
Coding Best practices (PHP)Coding Best practices (PHP)
Coding Best practices (PHP)
 
Modular & Event driven UI Architecture
Modular & Event driven UI ArchitectureModular & Event driven UI Architecture
Modular & Event driven UI Architecture
 
PHP CODING STANDARDS
PHP CODING STANDARDSPHP CODING STANDARDS
PHP CODING STANDARDS
 
Coding Standard And Code Review
Coding Standard And Code ReviewCoding Standard And Code Review
Coding Standard And Code Review
 
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
Modern Static Code Analysis in PHP
Modern Static Code Analysis in PHPModern Static Code Analysis in PHP
Modern Static Code Analysis in PHP
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy Code
 
Component Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanComponent Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex Moldovan
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
 
Code review guidelines
Code review guidelinesCode review guidelines
Code review guidelines
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
 
Selenium Architecture
Selenium ArchitectureSelenium Architecture
Selenium Architecture
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-Mapping
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding style
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architecture
 

Similar to Web UI performance tuning

Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Adrian Olaru
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)Eran Zinman
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performancedapulse
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup PerformanceJustin Cataldo
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) Gabriele Gigliotti
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UIRebecca Murphey
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Sergey Ilinsky
 
Phing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowychPhing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowychleafnode
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010Johan Ronsse
 
2013-06-25 - HTML5 & JavaScript Security
2013-06-25 - HTML5 & JavaScript Security2013-06-25 - HTML5 & JavaScript Security
2013-06-25 - HTML5 & JavaScript SecurityJohannes Hoppe
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyChristian Thilmany
 

Similar to Web UI performance tuning (20)

Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performance
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Killer page load performance
Killer page load performanceKiller page load performance
Killer page load performance
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
 
Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UI
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
 
Phing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowychPhing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowych
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010
 
2013-06-25 - HTML5 & JavaScript Security
2013-06-25 - HTML5 & JavaScript Security2013-06-25 - HTML5 & JavaScript Security
2013-06-25 - HTML5 & JavaScript Security
 
Clipboard support on Y! mail
Clipboard support on Y! mailClipboard support on Y! mail
Clipboard support on Y! mail
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian Thilmany
 

More from Andy Pemberton

OutSystems NextStep: RPA with RPA
OutSystems NextStep: RPA with RPAOutSystems NextStep: RPA with RPA
OutSystems NextStep: RPA with RPAAndy Pemberton
 
DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...
DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...
DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...Andy Pemberton
 
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los AngelesJenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los AngelesAndy Pemberton
 
413450-rc218-cdw-jenkins-workflow
413450-rc218-cdw-jenkins-workflow413450-rc218-cdw-jenkins-workflow
413450-rc218-cdw-jenkins-workflowAndy Pemberton
 
Ultimate DevOps - Jenkins Enterprise & Red Hat OpenShift
Ultimate DevOps - Jenkins Enterprise & Red Hat OpenShiftUltimate DevOps - Jenkins Enterprise & Red Hat OpenShift
Ultimate DevOps - Jenkins Enterprise & Red Hat OpenShiftAndy Pemberton
 
Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014
Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014
Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014Andy Pemberton
 
Javaone 2014 - Git & Docker with Jenkins
Javaone 2014 - Git & Docker with JenkinsJavaone 2014 - Git & Docker with Jenkins
Javaone 2014 - Git & Docker with JenkinsAndy Pemberton
 
RJUG - REST API / JAX-RS Overview
RJUG - REST API / JAX-RS OverviewRJUG - REST API / JAX-RS Overview
RJUG - REST API / JAX-RS OverviewAndy Pemberton
 
SCEA - a pragmatic pursuit
SCEA - a pragmatic pursuitSCEA - a pragmatic pursuit
SCEA - a pragmatic pursuitAndy Pemberton
 
Drupal Project Lifecycle
Drupal Project LifecycleDrupal Project Lifecycle
Drupal Project LifecycleAndy Pemberton
 

More from Andy Pemberton (12)

OutSystems NextStep: RPA with RPA
OutSystems NextStep: RPA with RPAOutSystems NextStep: RPA with RPA
OutSystems NextStep: RPA with RPA
 
DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...
DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...
DevOps World / Jenkins World - Lisbon - Jenkins for Low-Code Apps - Andy Pemb...
 
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los AngelesJenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
 
413450-rc218-cdw-jenkins-workflow
413450-rc218-cdw-jenkins-workflow413450-rc218-cdw-jenkins-workflow
413450-rc218-cdw-jenkins-workflow
 
Ultimate DevOps - Jenkins Enterprise & Red Hat OpenShift
Ultimate DevOps - Jenkins Enterprise & Red Hat OpenShiftUltimate DevOps - Jenkins Enterprise & Red Hat OpenShift
Ultimate DevOps - Jenkins Enterprise & Red Hat OpenShift
 
DevOps @ VCU
DevOps @ VCUDevOps @ VCU
DevOps @ VCU
 
Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014
Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014
Jenkins Enterprise Killer Features - Jenkins User Conference, SF 2014
 
Javaone 2014 - Git & Docker with Jenkins
Javaone 2014 - Git & Docker with JenkinsJavaone 2014 - Git & Docker with Jenkins
Javaone 2014 - Git & Docker with Jenkins
 
RJUG - REST API / JAX-RS Overview
RJUG - REST API / JAX-RS OverviewRJUG - REST API / JAX-RS Overview
RJUG - REST API / JAX-RS Overview
 
W3C Geolocation
W3C GeolocationW3C Geolocation
W3C Geolocation
 
SCEA - a pragmatic pursuit
SCEA - a pragmatic pursuitSCEA - a pragmatic pursuit
SCEA - a pragmatic pursuit
 
Drupal Project Lifecycle
Drupal Project LifecycleDrupal Project Lifecycle
Drupal Project Lifecycle
 

Recently uploaded

Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 

Recently uploaded (20)

Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 

Web UI performance tuning