Front End Oprtimization
-
Upload
folio3-software -
Category
Design
-
view
185 -
download
1
Transcript of Front End Oprtimization
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
www.folio3.com Copyright 2015@folio_3
Generation
(50%)
Delivery
(50%)100%
Database, Cache, Code, Web server, sphinx
CDN, Compression, Browser Cache, HTTP Requests, blocking calls etc
www.folio3.com Copyright 2015@folio_3
Reduce HTTP requests
Use browser cache properly
Compress content With GZIP
Minimize JS, CSS and HTML
http://www.infotales.com/web-application-performance/
www.folio3.com Copyright 2015@folio_3
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!!!
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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 …
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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>
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
<html>
<head><!-- css, js etc --></head>
<body>
<div id="doc">
<div id=“hd”>Page Header</div>
<!-- flushing here does nothing -->
<?php flush(); ?>
<div id=”bd”>BODY OF THE PAGE</div>
</div>
</body>
</html>
www.folio3.com Copyright 2015@folio_3
<html>
<head><!-- css, js etc --></head>
<!-- flushing here causes the <head> to render -->
<?php flush(); ?>
<body>
<div id="hd“>Page Header</div>
<!-- flushing here causes the “hd” div to render -->
<?php flush(); ?>
<div id=”bd”>Content of page</div>
<!-- flushing here causes the “bd” div to render -->
<?php flush(); ?>
<div id=”footer”>Page Footer</div>
</body></html>
www.folio3.com Copyright 2015@folio_3
Blank space doesn’t look good.Make it seems like nothing is happening
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
In the end, user testing showed that perceived performance of the new page was same as of the old page
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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!
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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=“”>
www.folio3.com Copyright 2015@folio_3
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.
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3
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.
www.folio3.com Copyright 2015@folio_3
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.
www.folio3.com Copyright 2015@folio_3
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
www.folio3.com Copyright 2015@folio_3