Front End Oprtimization

M. Waseem Asif
AG Tech Session 28th June 2012
@folio_3 www.folio3.com Copyright 2015

 Optimizing the client side delivery of web
resources
 Performance areas
◦ Generation time (10% to 20%)
◦ Delivery time (80% to 90%)
 Why it is important
◦ Faster = Better
◦ Faster = Happy Customers
◦ Happy customers = More revenue
◦ Google effect = More traffic
www.folio3.com Copyright 2015@folio_3

Generation
Time
Delivery Time

Generation
(50%)
Delivery
(50%)
100%
Database, Cache, Code,
Web server, sphinx
CDN, Compression,
Browser Cache, HTTP
Requests, blocking calls
etc

 Reduce HTTP requests
 Use browser cache properly
 Compress content With GZIP
 Minimize JS, CSS and HTML
 http://www.infotales.com/web-application-performance/

 HTTP requests are complicated
 Involve too many players
◦ Client, proxy, ISP, routers, servers etc
 Use Sprites
◦ More efforts in design & integration
 Combine Files
 CSS3 can help
◦ Rounded corners, gradients and more
 Over Doing Can Kill UX!!!

 If cached properly, resources are not
downloaded on next requests
 Set “expires” header for static resources
 “304 Not Modified” requests
◦ Involves http round trip but file is not downloaded

 90% traffic goes through browsers that
support GZIP compression
 Reduces file size dramatically
◦ CSS, JS, HTML and Text based files
◦ Not effective for images, PDF etc
◦ Need server resource

 Using “min” versions reduce file sizes
 Compressors
◦ Remove empty lines
◦ Remove spaces
◦ Optimize tags and variables etc
 jQuery size = 256K, Min = 92K
 Many tools available
◦ CssCompressor.com
◦ JS Minifier
◦ JSCompress.com
◦ And more …

 Avoid Blocking Calls
 Page Flushing
 Use “Lazy” Loading
 “Perceived” Performance
 Don’t let 3rd Parties Slow You Down
 CSS3 and HTML 5
 Time of Interactivity

 JavaScript calls
◦ Resources in the page are blocked
◦ Elements are blocked from rendering
 Rendering is blocked unless CSS is loaded
◦ Blocked rendering means blank page
◦ Put CSS in Header
◦ Keep it small and minimized

Blocking Call

 How to avoid:
◦ aSync Loading
◦ Load bootstrap file first and then rest of the files
◦ Use “defer” tag
◦ Don’t use document.write to load scripts
var a = document.createElement("script");
a.async = true;
a.src = "http://example.com/a.js";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(a, s0);
<script src="demo_defer.js" defer="defer"></script>
<script defer="defer"> //some code </script>

 Getting data out to the browser fast
 Browser is idle unless it gets data
 Flushing after <head> ensures CSS/JS starts
to download
 The browser won't render a block-level
element inside of <body> until the closing
tag has been received

<html>
<head></head>
<body>
<div id="doc">
<div id=“hd”>Page Header</div>

<?php flush(); ?>
<div id=”bd”>BODY OF THE PAGE</div>
</div>
</body>
</html>

<html>
<head></head>

<?php flush(); ?>
<body>
<div id="hd“>Page Header</div>

<?php flush(); ?>
<div id=”bd”>Content of page</div>

<?php flush(); ?>
<div id=”footer”>Page Footer</div>
</body></html>

Don't
underestimate
the power
of perception

Blank space doesn’t look good.
Make it seems like nothing is happening

 Initially the Yahoo! new page was slower to
load than the previous page
◦ A lot of CSS/JS was added
 Progressive rendering avoid blank spaces.
 Decrease time to interactivity
 Preload the Spinners
 JavaScript at the bottom
◦ Ensures it doesn't block rendering

 In the end, user testing showed that
perceived performance of the new page was
same as of the old page

 Time between the initial page request and
when the user can complete an action
 Links work. Forms can be submitted even
while the page is loading
 Not relying on JS for everything provides an
opportunity to deliver what appears to be a
faster experience

 Response time
◦ Amazon Web Services (432ms)
◦ Twitter (832ms)
◦ Facebook (918ms)
◦ PayPal (1.788s)
 How to avoid
◦ Non Blocking Call
 Move to iframe
◦ Asynchronous loading
◦ Deferral / On Demand render
 TerchCrunch.com
◦ Just say no!

 Modern browsers support many new features.
◦ Rounded Corners
◦ Gradients
◦ Fancy Borders
◦ Some more stuff
◦ UTF-8 Can help
◦ zocial.smcllns.com
 HTML 5 can help reduce html size
◦ developers.google.com/speed/articles/html5-performance
 A lot of new HTML5 features

 CDN can help
 Does not return a lot of html in JSON
◦ JSON parsing of HTML is slow
 SPDY by Google
◦ Chrome & FF Support SPDY
 Always specify image dimensions
◦ Helps in rendering
 Cacheable Ajax can help
 Avoid empty image src <img src=“”>

 Compress images PNG, WebP by Google
 Use GET for AJAX Requests
 Use HTTPS only where necessary.
 Don’t server same files from different URLs
 JSON vs. XML in AJAX
 Local Storage
 HTTP Push Techniques
 Automated solutions for performance.

 Google Analytics Site Speed
 Google Webmaster Tools
 PageSpeed from Google
 YSlow from Yahoo!
 WebPageTest.org
◦ Remote location testing
◦ Number of locations available
◦ Can help identify gaps
 PingDom.com

 How to use "flush" in template engines?
◦ Well, this needs to be found out. Some frameworks like
CI provides ability to render template without buffer.
This feature might be used.
 What does 'Defer' do?
◦ It delays execution of scripts until the body content is
parsed and rendered. For more details see
http://www.websiteoptimization.com/speed/tweak/defe
r/
 What is difference between 'Defer' and 'Async'
technique?
◦ It’s almost identical. See http://www.sitepoint.com/non-
blocking-async-defer/ for details

 What is the disadvantage of POST in Ajax calls?
◦ POST is implemented in the browsers as a two-step
process: sending the headers first, then sending the
data. So it's best to use GET, which only takes one TCP
packet to send (unless you have a lot of cookies). The
maximum URL length in IE is 2K, so if you send more
than 2K data you might not be able to use GET. See
http://developer.yahoo.com/performance/rules.html#aj
ax_get for details.
 What to put in image source, if we want to leave
it blank?
◦ Refer to
http://developer.yahoo.com/performance/rules.html#aj
ax_get for details.

 Any disadvantage of excessive flushing?
◦ Excessive usage of anything cannot guarantee good
performance. Thus should be used in a balanced
manner. However I don't know any particular
disadvantages at the moment.
 Does custom attributes affect page
rendering?
◦ It should not, but can't be assured.
 DOM manipulation Vs InnerHTML?
◦ DOM manipulations are heavier than InnerHtml. See
http://andrew.hedges.name/experiments/innerhtm
l/ for details.

 WebPerformanceToday.com
 Yahoo! Case study
◦ http://velocityconf.com/velocity2010/public/sched
ule/detail/11802
 Best practices
◦ https://developers.google.com/speed/docs/best-
practices/rules_intro
◦ http://developer.yahoo.com/performance/rules.ht
ml
 SteveSouders.com
◦ http://stevesouders.com/cuzillion/?ex=10008&title
=Scripts+Block+Downloads

Front End Oprtimization

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (16)

Similaire à Front End Oprtimization

Similaire à Front End Oprtimization (20)

Plus de Folio3 Software

Plus de Folio3 Software (14)

Dernier

Dernier (20)

Front End Oprtimization

Notes de l'éditeur