SlideShare uma empresa Scribd logo
1 de 33
Enhance Web Performance Adam Lu [email_address] Y!ID: adamlu86 http://adamlu.com/
The Performance Golden Rules 80-90% of the end-user response time is spent on the front-end.
High Performance Web Sites   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Make fewer Http Requests  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Style sheets at the top  ,[object Object],[object Object],[object Object],[object Object]
Placing scripts  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avoid CSS Expressions  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Make JS &CSS external  ,[object Object],[object Object],[object Object],[object Object]
Minification  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Make Ajax cacheable ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Miscellaneous Tips  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Miscellaneous Tips ,[object Object],[object Object],[object Object],[object Object],[object Object]
Speed Up Javascript
There are four main reasons why a script can take too long to execute ,[object Object],[object Object],[object Object],[object Object]
Too much happening in a loop  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Too much happening in a function ,[object Object],[object Object]
Too much happening in a function ,[object Object],[object Object],[object Object],[object Object]
Too much recursion ,[object Object],[object Object],[object Object],[object Object],[object Object]
Too much DOM interaction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
perform as many changes as possible outside of the live DOM structure  ,[object Object],[object Object]
remove a node from the live DOM before operating on it  ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Proccess the HTMLCollection type  ,[object Object],[object Object],[object Object],[object Object]
Fastest way to build an HTML string ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript good practice ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript good practice ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],More On http://www.javascripttoolbox.com/bestpractices/
Minify HTML
Minify HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Css Guidelines
Css Guidelines ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Guidelines for Efficient CSS ,[object Object],[object Object],[object Object],[object Object],https://developer.mozilla.org/en/Writing_Efficient_CSS
Tools of Analyzing Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thanks!

Mais conteúdo relacionado

Mais procurados

Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
Gill Cleeren
 
Web Performance Tips
Web Performance TipsWeb Performance Tips
Web Performance Tips
Ravi Raj
 
En story of cakephp2.0
En story of cakephp2.0En story of cakephp2.0
En story of cakephp2.0
Hiroki Shimizu
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
Doris Chen
 

Mais procurados (20)

JavaScript OOP
JavaScript OOPJavaScript OOP
JavaScript OOP
 
Backbone
BackboneBackbone
Backbone
 
The Future of the Web
The Future of the WebThe Future of the Web
The Future of the Web
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Even faster django
Even faster djangoEven faster django
Even faster django
 
Developing iOS REST Applications
Developing iOS REST ApplicationsDeveloping iOS REST Applications
Developing iOS REST Applications
 
From YUI3 to K2
From YUI3 to K2From YUI3 to K2
From YUI3 to K2
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
 
08 ajax
08 ajax08 ajax
08 ajax
 
Web Performance Tips
Web Performance TipsWeb Performance Tips
Web Performance Tips
 
En story of cakephp2.0
En story of cakephp2.0En story of cakephp2.0
En story of cakephp2.0
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
Javascript and Jquery Best practices
Javascript and Jquery Best practicesJavascript and Jquery Best practices
Javascript and Jquery Best practices
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
 
Ten useful JavaScript tips & best practices
Ten useful JavaScript tips & best practicesTen useful JavaScript tips & best practices
Ten useful JavaScript tips & best practices
 

Destaque

Ejercicios apartheid
Ejercicios apartheidEjercicios apartheid
Ejercicios apartheid
Lizbeth
 
La diferencia de estos dos modelos empirismo y constructivismo
La diferencia de estos dos modelos empirismo y constructivismoLa diferencia de estos dos modelos empirismo y constructivismo
La diferencia de estos dos modelos empirismo y constructivismo
lindamate
 
Sistema Reproductor
Sistema ReproductorSistema Reproductor
Sistema Reproductor
Liliana MD
 
Presentacion km 12 de abril
Presentacion km 12 de abrilPresentacion km 12 de abril
Presentacion km 12 de abril
global bis
 
36435062 analisis-de-riesgos
36435062 analisis-de-riesgos36435062 analisis-de-riesgos
36435062 analisis-de-riesgos
Esterph
 

Destaque (20)

Ofício nº13300 MPF PR RJ
Ofício nº13300 MPF PR RJOfício nº13300 MPF PR RJ
Ofício nº13300 MPF PR RJ
 
Ejercicios apartheid
Ejercicios apartheidEjercicios apartheid
Ejercicios apartheid
 
La diferencia de estos dos modelos empirismo y constructivismo
La diferencia de estos dos modelos empirismo y constructivismoLa diferencia de estos dos modelos empirismo y constructivismo
La diferencia de estos dos modelos empirismo y constructivismo
 
Omwille van de klant - Nicollette Wuring
Omwille van de klant - Nicollette WuringOmwille van de klant - Nicollette Wuring
Omwille van de klant - Nicollette Wuring
 
Sistema Reproductor
Sistema ReproductorSistema Reproductor
Sistema Reproductor
 
Learning To Love Forms (The Ajax Experience West 2007)
Learning To Love Forms (The Ajax Experience West 2007)Learning To Love Forms (The Ajax Experience West 2007)
Learning To Love Forms (The Ajax Experience West 2007)
 
Curso desarrollo en android
Curso desarrollo en androidCurso desarrollo en android
Curso desarrollo en android
 
NATIONAL PREVENTION STRATEGY 2011
NATIONAL PREVENTION STRATEGY 2011NATIONAL PREVENTION STRATEGY 2011
NATIONAL PREVENTION STRATEGY 2011
 
Learning To Love Forms (Web Directions South '07)
Learning To Love Forms (Web Directions South '07)Learning To Love Forms (Web Directions South '07)
Learning To Love Forms (Web Directions South '07)
 
Politica e informatica 1
Politica e informatica 1Politica e informatica 1
Politica e informatica 1
 
Función de las Tecnologías de Información y Comunicaciones
Función de las Tecnologías de Información y ComunicacionesFunción de las Tecnologías de Información y Comunicaciones
Función de las Tecnologías de Información y Comunicaciones
 
Otimização no Armazenamento de Imagens por meio da Decomposição em Valores Si...
Otimização no Armazenamento de Imagens por meio da Decomposição em Valores Si...Otimização no Armazenamento de Imagens por meio da Decomposição em Valores Si...
Otimização no Armazenamento de Imagens por meio da Decomposição em Valores Si...
 
Presentacion km 12 de abril
Presentacion km 12 de abrilPresentacion km 12 de abril
Presentacion km 12 de abril
 
Hamlet.ruano.trad
Hamlet.ruano.tradHamlet.ruano.trad
Hamlet.ruano.trad
 
Cubismo arquitectura
Cubismo arquitecturaCubismo arquitectura
Cubismo arquitectura
 
36435062 analisis-de-riesgos
36435062 analisis-de-riesgos36435062 analisis-de-riesgos
36435062 analisis-de-riesgos
 
UML Java
UML JavaUML Java
UML Java
 
formato de celda
  formato de celda  formato de celda
formato de celda
 
Mitos
MitosMitos
Mitos
 
Temperamentos de la Mujer
Temperamentos de la MujerTemperamentos de la Mujer
Temperamentos de la Mujer
 

Semelhante a Enhance Web Performance

#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
Stoyan Stefanov
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
the next web now
the next web nowthe next web now
the next web now
zulin Gu
 

Semelhante a Enhance Web Performance (20)

Javazone 2010-lift-framework-public
Javazone 2010-lift-framework-publicJavazone 2010-lift-framework-public
Javazone 2010-lift-framework-public
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
Site optimization
Site optimizationSite optimization
Site optimization
 
Practical catalyst
Practical catalystPractical catalyst
Practical catalyst
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
"Scala in Goozy", Alexey Zlobin
"Scala in Goozy", Alexey Zlobin "Scala in Goozy", Alexey Zlobin
"Scala in Goozy", Alexey Zlobin
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
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
 
Tornado
TornadoTornado
Tornado
 
前端概述
前端概述前端概述
前端概述
 
Introducing Struts 2
Introducing Struts 2Introducing Struts 2
Introducing Struts 2
 
Javascript
JavascriptJavascript
Javascript
 
the next web now
the next web nowthe next web now
the next web now
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
HTML5
HTML5HTML5
HTML5
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 

Mais de Adam Lu (14)

Yui rocks
Yui rocksYui rocks
Yui rocks
 
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
Get started with YUI
Get started with YUIGet started with YUI
Get started with YUI
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
浏览器兼容性问题小结
浏览器兼容性问题小结浏览器兼容性问题小结
浏览器兼容性问题小结
 
小谈Javascript设计模式
小谈Javascript设计模式小谈Javascript设计模式
小谈Javascript设计模式
 
从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 

Enhance Web Performance