This document discusses several techniques for improving website performance by optimizing JavaScript loading and execution. It recommends splitting large JavaScript files into smaller grouped files, stubbing functions that are not called initially, embedding JSON data to avoid additional AJAX calls, rendering initial HTML server-side, and using placeholders to indicate progressive loading. The document emphasizes that homepage load speed is critical and cautions against overloading users by caching unnecessary scripts.
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
jQuery has grown over 7 years to become the most widely used JavaScript library ever. This talk will cover how the jQuery project continues to support the browsers of the past, present, and future while also delivering modularity, innovation, and mobile support.
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, "this script is taking too long"? Inside of the browser, JavaScript and the page's UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn't about geek cred, it's about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you'll learn what's going on inside the browser that can slow JavaScript down and how that can end up creating a "slow page". You'll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
jQuery has grown over 7 years to become the most widely used JavaScript library ever. This talk will cover how the jQuery project continues to support the browsers of the past, present, and future while also delivering modularity, innovation, and mobile support.
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, "this script is taking too long"? Inside of the browser, JavaScript and the page's UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn't about geek cred, it's about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you'll learn what's going on inside the browser that can slow JavaScript down and how that can end up creating a "slow page". You'll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk
Node JS Express: Steps to Create Restful Web AppEdureka!
Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code.
Presentation on how Meetup tackles web performance. Given on:
- Nov 17th, 2009 for the NY Web Performance Group (http://www.meetup.com/Web-Performance-NY/)
- Jan 26th, 2010 for NYC Tech Talks Meetup Group (http://www.meetup.com/NYC-Tech-Talks/)
Overhauling one of the most visited web sites in the world is a major task, and add on top of it the pressure of keeping performance the same while adding a ton of new features, and you have quite a task. Learn how the Yahoo! homepage team achieved performance parity with the previous version even while adding a ton of new features.
In this presentation, you’ll explore the new Series 40 web app APIs and features of Nokia Web Tools 2.0. Expert Michael Samarin from Futurice will show you how to develop for new Nokia Asha phones with a full-touch UI and will give you an overview of new templates and code samples.
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Large websites with large customer bases should have fast page loads no matter where your customers are coming from. In this day and age speed is expected. Getting there requires engineers to both have data and the ability to analyze and find problems.
This talk will address page load speed in two parts. A "cold" load where a user first comes to your site and a "warm" load which deals with intra-site page load speed. We will dive into the details of each page load and what is really going on. From network optimization to browser render performance, all things matter when it comes to optimizing the load of your web page. Furthermore, we will look into some tools that can be used to analyze and help developers discover and address problems.
HTTP, JSON, JavaScript, Map&Reduce built-in to MySQLUlf Wendel
HTTP, JSON, JavaScript, Map&Reduce built in to MySQL - make it happen, today. See how a MySQL Server plugin be developed to built all this into MySQL. A new direct wire between MySQL and client-side JavaScript is created. MySQL speaks HTTP, replies JSON and offers server-side JavaScript. Server-side JavaScript gets access to MySQL data and does Map&Reduce of JSON documents stored in MySQL. Fast? 2-4x faster than proxing client-side JavaScript request through PHP/Apache. Reasonable results...
High Performance JavaScript - Fronteers 2010Nicholas Zakas
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there's still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk
Node JS Express: Steps to Create Restful Web AppEdureka!
Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code.
Presentation on how Meetup tackles web performance. Given on:
- Nov 17th, 2009 for the NY Web Performance Group (http://www.meetup.com/Web-Performance-NY/)
- Jan 26th, 2010 for NYC Tech Talks Meetup Group (http://www.meetup.com/NYC-Tech-Talks/)
Overhauling one of the most visited web sites in the world is a major task, and add on top of it the pressure of keeping performance the same while adding a ton of new features, and you have quite a task. Learn how the Yahoo! homepage team achieved performance parity with the previous version even while adding a ton of new features.
In this presentation, you’ll explore the new Series 40 web app APIs and features of Nokia Web Tools 2.0. Expert Michael Samarin from Futurice will show you how to develop for new Nokia Asha phones with a full-touch UI and will give you an overview of new templates and code samples.
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Large websites with large customer bases should have fast page loads no matter where your customers are coming from. In this day and age speed is expected. Getting there requires engineers to both have data and the ability to analyze and find problems.
This talk will address page load speed in two parts. A "cold" load where a user first comes to your site and a "warm" load which deals with intra-site page load speed. We will dive into the details of each page load and what is really going on. From network optimization to browser render performance, all things matter when it comes to optimizing the load of your web page. Furthermore, we will look into some tools that can be used to analyze and help developers discover and address problems.
HTTP, JSON, JavaScript, Map&Reduce built-in to MySQLUlf Wendel
HTTP, JSON, JavaScript, Map&Reduce built in to MySQL - make it happen, today. See how a MySQL Server plugin be developed to built all this into MySQL. A new direct wire between MySQL and client-side JavaScript is created. MySQL speaks HTTP, replies JSON and offers server-side JavaScript. Server-side JavaScript gets access to MySQL data and does Map&Reduce of JSON documents stored in MySQL. Fast? 2-4x faster than proxing client-side JavaScript request through PHP/Apache. Reasonable results...
High Performance JavaScript - Fronteers 2010Nicholas Zakas
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there's still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Web Performance Part 4 "Client-side performance"Binary Studio
The presentation is devoted to client side performance of a web app. All 4 presentations will help you reduce latency, enrich optimization of javascript code, discover tricky parts when working with API browser, see best practices of networking and learn lots of other important and interesting things. Enjoy! =)
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
Js Saturday 2013 your jQuery could perform betterIvo Andreev
Doing it, then doing right and finally improving. Have you ever had the feeling that your jQuery could run faster? And isn’t that the natural evolution of a developer? From new browser features and well known techniques to script breakup, sizzling, chaining and selector comparison... Tuning of any technology requires deep understanding of its core principles. In order not to just guess we need to learn how browsers execute JavaScript and how jQuery is built. If these issues have been bothering you recently – join us to see how or share your experience.
Organizations focus process optimization of
Data Tier
Application Tier
Presentation Tier is usually ignored.
Presentation Tier is responsible for more than 30% of Client/Server application performance.
Presented at Bucharest Java User Group, http://www.bjug.ro/editii/5.html . Project source code available at: https://github.com/bucharest-jug/dropwizard-todo
My presentation at MWLUG 2015. I show how to build and connect a modern looking website, built with HTML, CSS, and Javascript/jQuery, to your existing IBM Domino backend data using Ajax and JSON and some simple Lotusscript code.
5. Why Page load time matters?
Facebook:
Facebook pages that are 500ms slower result
in a 3% drop-off in traffic, 1000ms is 6%
drop-off
Amazon:
If Amazon increased page load time by
+100ms they lose 1% of sales
Google:
If Google increased page load by +500 ms
they get 25% fewer searches.
http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
6. What is general User expectation
General:
• 47% of web users expect a page load of 2 seconds or
less
• 14% of users will start shopping at a different site if a
page loads too slow
• 40% of users will abandon a website that takes more
than 3 seconds to load
• 64% of shoppers who are dissatisfied with their site visit
will go somewhere else to shop next time
• 52% of online shoppers claim that quick page loads are
important for their loyalty to a site
http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
7. Performance Poverty Line
http://www.webperformancetoday.com/2012/06/05/web-performance-poverty-line/
8. First things first…
Do you browse your websites on a low-
end consumer grade laptop with only 1
GB RAM, one or two cores, heavily
fragmented hard disk, browser cache full
of gigabytes of trash?
Do you browse your website on a browser
infested with toolbars, adbots, malwars?
Do you browse your website with super
slow antivirus and internet security
products? Like Norton, McAfee?
Do you browse your website from the
lowest broadband packages available in
the market?
http://www.codinghorror.com/blog/2007/02/choosing-anti-anti-virus-software.html
9. #1 Split a class into multiple
javascript files
This is not what people tell you to do, I know.
Problem:
Like stylesheets, scripts must be downloaded, parsed, and
executed before the browser can begin to render a web page.
Even if a script is contained in an external file that is
cached, processing of all elements below the <script> tag is
blocked until the browser loads the code from disk and executes
it.
For some browsers, the situation is worse than for stylesheets:
while JavaScript is being processed, the browser blocks all other
resources from being downloaded.
For AJAX-type applications that use many bytes of JavaScript
code, this can add considerable latency. Loading jquery, jquery
UI, plugins, frameworks, site specific code, …
10. Split a class into multiple
javascript files
var VeryImportantClass = {
Solution importantMethod: function()
{
Minimize initial DoSomething1();
DoSomething2();
Javascript payload to DoSomething3();
absolute minimum. DoSomething4();
},
Split a class into unimportantMethod: function()
{
multiple files if it has DoSomething1();
to be a single class. DoSomething2();
DoSomething3();
Functions used before DoSomething4();
or during onload is in }
};
one file, everything
else in another file.
12. Microsoft Research Project:
Doloto
Doloto analyzes your website and splits the
javascripts into two parts – required for page load
and not required for page load.
13. #2 Stub the Functions Which
Aren't Called During Initial Load
Before.js
Problem var VeryImportantClass = {
Moving functions that aren’t importantMethod: function()
{
necessary during onload might DoSomething1();
cause javascript error, if some DoSomething2();
mousemove or click event },
unimportantMethod: function()
handler tries to call them {
before they are loaded. // No code here
<div }
};
onmousemove=“unimportantM
ethod()” />
After.js
Solution VeryImportantClass.unimportantMethod
= function()
Create stubs. Event handlers {
calling stubs won’t cause ...
Javascript error. Just nothing ...
}
will happen.
14. #3 Improve performance of pages
loading data via AJAX calls
Problem
The initial page load does not show any content to the
user.
On page load complete event, you make webservice
calls to load initial data in order to render page
content. Until then, the page is more or less empty.
The initial calls only happen when the necessary
javascripts are loaded. This causes perceived slowness.
Solution
Embed JSON needed for initial page loading as part of
the page output.
15. Embed JSON as part of page output
• Deliver initial data inside a script block.
• As soon as necessary javascripts load, it will use the data inside
script block instead of making webservice calls.
• Problem: Gathering all data on server means nothing happening on
browser.
<head>
<script type="text/javascript">
var data = {<%= GenerateJSON() %>};
</script>
<body>
.
.
<script src=“AbsoluteMinimal.js”></script>
<script type="text/javascript">
render(data);
</script>
16. Mix server side JSON and client
side AJAX calls
Spend max 1 sec on server preparing the embedded
JSON.
Take data that has been loaded within 1 sec and serialize
into JSON.
In parallel, load and cache the rest of the data for the
AJAX call to pickup.
Embed only the JSON that renders the visible part of the
screen.
Problem: For 1 sec user stares at blank screen. Nothing
happening on browser.
18. #4 Render initial data as
html from server
Instead of using scripts to render page from embedded JSON, render the
html directly from server. User gets the page as if it’s a static page. No
waiting for JS to download. No waiting for Webservice calls. There’s
nothing faster than this.
19. #5 Render placeholder of
content loaded dynamically
Generate placeholder for content where further data is loaded
dynamically. This gives a feeling that the page is building
progressively and gives better perceived performance.
20. #6 Grow the page vertically
• Content should grow uniformly, vertically. Do not shrink any
placeholder or element on the page. It causes a disturbing
rendering experience.
21. #7 Don’t combine Javascripts!
Everyone tells you to combine all your Javascripts into a
combined file. Don’t!
Instead of one large combined js file across the entire
website, create smaller grouped js files. For ex,
jQueryStuffCombined.js
Jquery, jqueryui
jQueryPluginsCombined.js
Jquery validator, animations, effects
Thirdparties
KnockoutJS, UnderscoreJS
MyCommonStuff.js
Don’t use your homepage to cache all JS you would ever need.
22. Bonus #8: Reflection on
Connection View
CSS
Large
combined
.eot!
JS
Suboptimal
distribution
of link and
script tags
Static
SSL
content
handshake
loading too
too slow
late
http://www.webpagetest.org/
23. That’s all folks!
Do not deliver a giant combined javascript to browser during
home page load, no matter who says so, even if it is Steve
Souders.
For homepage, make special combined javascript that delivers
absolute minimum scripts. It’s hard, extra maintenance
effort, but worth it. Every 500ms saving in home page load can
retain 20% more users.
Difference between 3 sec and 4 sec is life changing.
Do not use your homepage to download and cache as much
stuff on user’s browser as possible. It is the other way around.
Learn more about Production Performance and Scalability ideas
from:
http://omaralzabir.com/scaling-asp-net-websites-from-
thousands-to-millionslidnug/