1 / 49

Optimizing JavaScript for Enhanced Web Performance

This presentation focuses on improving web performance by addressing the significant impact of JavaScript on page load times. Originating from Steve Souders' work, it discusses essential techniques such as moving scripts to the bottom of HTML documents, using async and defer attributes, and leveraging local storage for caching. The session highlights statistical insights showing that JavaScript is a leading cause of slow web pages and proposes practical solutions to optimize loading and execution, ultimately enhancing user experience, increasing traffic, and boosting revenue potential.

manju
Download Presentation

Optimizing JavaScript for Enhanced Web Performance

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Performance stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

  2. YSlow Cuzillion SpriteMe Hammerhead

  3. Web Performance Optimization WPO • drives traffic • improves UX • increases revenue • reduces costs

  4. What’s the #1 cause of slow web pages?

  5. JAVASCRIPT!

  6. 31% { all requests containing “.js” are skipped

  7. http://httparchive.org/trends.php?s=intersection

  8. 1995: scripts in HEAD • <head> • <script src=‘a.js’></script> • </head> blocks other downloads (IE 6-7, images in IE, iframes) downloaded sequentially (IE 6-7) blocks rendering during download & parse-execute

  9. 2007: move scripts to bottom • ... • <script src=‘a.js’></script> • </body> doesn’t block other downloads downloaded sequentially in IE 6-7 blocks rendering during download & parse-execute

  10. 2009: load scripts async var se = document.createElement(‘script’); se.src = ‘a.js’; document.getElementsByTagName(‘head’)[0].appendChild(se); doesn’t block other downloads downloaded in parallel (all browsers) blocks rendering during parse-execute

  11. 2010: async + on-demand exec var se = new Image(); // Object se.onload = registerScript; se.src = ‘a.js’; separate download from parse-execute doesn’t block other downloads downloaded in parallel (all browsers) doesn’t block rendering until demanded

  12. 20??: markup

  13. script async & defer parsing doesn’t wait for script: • async– executed when available • defer – executed when parsing finished when is it downloaded? missing: • defer download AND execution • async/defer download, execute on demand

  14. 20??: markup <script src=‘a.js’ [async|defer|noexecute] [deferdownload]> doesn’t block downloads downloaded in parallel doesn’t block rendering until demanded doesn’t contend for a connection easier

  15. ControlJSa JavaScript module for making scripts load faster http://controljs.org/ just change HTML inline & external scripts • <script type=‘text/cjs’ • data-cjssrc=‘main.js’> • </script> • <script type=‘text/cjs’> • var name = getName(); • </script>

  16. ControlJSa JavaScript module for making scripts load faster download without executing • <script type=‘text/cjs’ • data-cjssrc=‘main.js’ • data-cjsexec=false> • <script> Later if/when needed: • CJS.execScript(src);

  17. GMail Mobile <script type=‘text/javascript’> /* var ... */ </script> get script DOM element's text remove comments eval() when invoked awesome for prefetching JS that might (not) be needed http://goo.gl/l5ZLQ

  18. localStorage

  19. yuiblog.com/blog/2007/01/04/performance-research-part-2/

  20. blaze.io/mobile/understanding-mobile-cache-sizes/

  21. Home screen apps on iPhone are slower because resources are re-requested even though they should be read from cache.

  22. localStorage window.localStorage: • setItem() • getItem() • removeItem() • clear() also sessionStorage all popular browsers, 5MB max http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html

  23. localStorage as cache 1st doc: write JS & CSS blocks to localStorage • mres.-0yDUQJ03U8Hjija: <script>(function(){... set cookie with entries & version • MRES=-0yDUQJ03U8Hjija:-4EaJoFuDoX0iloI:... later docs: read JS & CSS from localStorage • document.write( localStorage.getItem(mres.-0yDUQJ03U8Hjija) ); http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/

  24. Google Analytics Async Snippet code.google.com/apis/analytics/docs/tracking/asyncTracking.html varga = document.createElement(‘script’); ga.type= ‘text/javascript’; ga.async= true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; vars = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);

  25. avoid mixed content warning protocol relative URLs have problems set src last stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/ varga = document.createElement(‘script’); ga.type= ‘text/javascript’; ga.async= true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; vars = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);

  26. previously: getElementsByTagName(‘head’)[0].appendChild(ga) HEAD might not exist Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2 stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/ stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/ varga = document.createElement(‘script’); ga.type= ‘text/javascript’; ga.async= true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; vars = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);

  27. some browsers preserve execution order Firefox 3.6, Opera, OmniWeb stevesouders.com/tests/jsorder.php varga = document.createElement(‘script’); ga.type= ‘text/javascript’; ga.async= true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; vars = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);

  28. stevesouders.com/tests/jsorder.php

  29. some browsers preserve execution order Firefox 3.6, Opera, OmniWeb async=true fixes this (except Opera) stevesouders.com/tests/jsorder.php varga = document.createElement(‘script’); ga.type= ‘text/javascript’; ga.async= true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; vars = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);

  30. A B C <html> <head> <link rel=stylesheet ...> <style>...</style> <script [...]></script> </head> <body> <div> <p> <ul> </body> </html> onload: D

  31. A script loads sooner beacon fires sooner blocks other async (Opera) may block rendering <html> <head> <link rel=stylesheet ...> <style>...</style> <script [...]></script> </head> <body> <div> <p> <ul> </body> </html> onload:

  32. B script loads later beacon fires later blocks fewer async (Opera) may block rendering <html> <head> <link rel=stylesheet ...> <style>...</style> <script [...]></script> </head> <body> <div> <p> <ul> </body> </html> onload:

  33. script loads last beacon fires late doesn’t block async doesn’t block rendering C <html> <head> <link rel=stylesheet ...> <style>...</style> <script [...]></script> </head> <body> <div> <p> <ul> </body> </html> onload:

  34. script loads after page beacon fires very late doesn’t block async doesn’t block rendering onload fires sooner <html> <head> <link rel=stylesheet ...> <style>...</style> <script [...]></script> </head> <body> <div> <p> <ul> </body> </html> onload: D

  35. more

  36. stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/

  37. stevesouders.com/mobileperf/mobileperfbkm.php

  38. Top 100 Top 1000

  39. takeaways WPO WebPagetest.org Cuzillion.com Browserscope.org ControlJS.org localStorage GA snippet is good Loadtimer.org MobilePerf.org HTTPArchive.org Velocity stevesouders.com

  40. @souders http://stevesouders.com/docs/sfjs-20120112.pptx

More Related