front end oprtimization

M. Waseem AsifAG 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


http://www.folio3.com/


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 powerof 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/defer/

What is difference between 'Defer' and 'Async' technique?◦ It’s almost identical. See http://www.sitepoint.com/non-

blocking-async-defer/ for details


http://www.websiteoptimization.com/speed/tweak/defer/

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#ajax_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#ajax_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/innerhtml/ 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

Design