This document provides tips for optimizing front-end performance. It discusses optimizing assets like images, CSS, and JavaScript to reduce file sizes and load times. Specific techniques include image sprites, CSS combining, lazy loading images, and minimizing DOM access. It also covers optimizing the rendering process by prioritizing visible content, avoiding layout thrashing, and deferring non-critical scripts. The document emphasizes the importance of front-end performance and provides references for further reading on the topic.

1. Front-end Performance
Tips
!quot;#$!%&'()*!+,-

2. Agenda
• Why Front-End?
• Loading phase
• Rendering phase
• Running phase
• Conclusion

3. Why Front-End?

4. Back-End vs. Front-End
• Performance Optimization
• Back-end
• Front-end

5. Back-End vs. Front-End
• Performance Optimization
• Back-end
• Front-end 1.969 sec
0.099 sec HTML loading time : 5%

6. Loading

7. Minimize HTTP Requests
• Most Important Guideline
• Performance Tuning
• Same Contents
• Low HTTP Request (=Connection)
• Techniques
• Simple Design
• Combine Image/CSS/JavaScript

8. 100
75
50
25
0
html iframe flash js css css image image
Daum Naver Cyworld Yahoo kr
Request Stats.
by YSlow

9. Image
• Image map
• CSS Sprite
• CSS width, height, background property
• Inline image
• Base64 encoded image data URL format

10. <span style=“background-image:url('sprites.gif');
background-position:-260px -90px;
width:10px;height:10pxquot;></span>

11. CSS sprite - tv!

12. CSS sprite - tv!

13. CSS sprite - tv!

14. CSS sprite - tv!

15. CSS sprite - tv!

16. CSS sprite - YouTube

17. CSS sprite - YouTube
<img width=”10” height=”10” src=”p.gif”
style=”background:url(bg.gif)”/>

18. JavaScript/CSS combine
• JavaScript
• variable, function conflict
• CSS
• selector conflict
• media=”print” ! @media print { }

19. @media rule
page.html
<link ... href=”style.css” />
<link ... href=”print.css” media=”print” />
page.html
<link ... href=”style.css” />
style.css
#wrap { … }
@media print {
#wrap { … }
}

20. On demand loading
• Ajax
• Post Image loading
• Post JavaScript / CSS loading

21. Post image loading

22. Post image loading
<div onscroll=”deferLoad(‘key’)”><ul>
<li><img src=”image1.gif” /></li>
...
<li><img src=”blank.gif”
onload=”registerDeferImg(‘key’,
this,’image3.gif’)” /></li>
...
</ul></div>

23. Cookie
• Remove unnecessary cookie
• Set expire date
• Check domain level
• Separate static / dynamic resource domain

24. Rendering

25. Initial Layout
• Depend on HTML / CSS not JavaScript
• quot;# $ %& '(
• Window/Frame size
• Not fully supported css property

26. JavaScript Block Downloading
• Move To Bottom

27. JavaScript block rendering

28. FOUC & Blank White Screen
• Why?
• @import or <link> at bottom
• Blank White Screen
• New Window / Homepage
• Move To Top

29. FOUC & Blank White Screen

30. AlphaImageLoader filter
• Rendering Semi-transparent PNG24
• Problem
• Block Loading & Rendering, Freeze Browser
• link & mouse pointer
• Solution
• IE conditional comment & IE6 ‘_’ hack
• a { position:relative; cursor:pointer; }

31. AlphaImageLoader demo

32. PNG24

33. AlphaImageLoader filter
IE conditional comment
style.css
.png {background:transparent url(img.png) 0 0 no-repeat;}
page.html
<!--[if lte IE 6]>
<style type=”text/css”>
.png { background-image:none; filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader(
src='img.png',sizingMethod='scale'); }
</style>
<![endif]-->

34. Efficient CSS selector
• Avoid universal rule
• Don't qualify ID-categorized rules with tag
names or classes
• Avoid the descendant selector
• Rely on inheritance

35. Running

36. CSS expression
font-size:
expression(document.body.clientWidth/10+‘px’);
• IE proprietary
• Continuously run when
mousemove, keypress, resize, scroll event
• Solution / Alternate
• One-time expression
• Event Handling

37. Background Flickering
• :hover (mouse over) action
• IE6
• Flickering
• Re-Request
• http://fivesevensix.com/studies/ie6flicker/

38. Flickering demo

39. Background flickering Solution
• JavaScript
document.execCommand(quot;BackgroundImageCachequot;,
false, true);
• CSS
html { filter:expression(document.execCommand(
quot;BackgroundImageCachequot;, false, true)); }
• Web Server - Apache
BrowserMatch quot;MSIEquot; brokenvary=1
BrowserMatch quot;Mozilla/4.[0-9]{2}quot; brokenvary=1
BrowserMatch quot;Operaquot; !brokenvary
SetEnvIf brokenvary 1 force-no-vary

40. String Handling
• Concatenation
• + operator ! array.join()
• Search
• regexp ! string.indexOf()
• Regular Expression
• new RegExp() ! / ~ / literal

41. DOM Access
• Minimize DOM access
• Offline access
• Reuse reference

42. 50x50 table creation
W3C DOM Table methods innerHTML
by Windows XP,
Quirksmode.org
IE6
IE7
Firefox2
Firefox3
Opera
Safari
0 1,000 2,000 3,000 4,000
ms
DOM I/O test

43. Set Style
• by style property - BAD
elm.style.backgroundColor = ‘#f00’;
elm.style.width = ‘20px’;
• by CSS & className property - GOOD
style.css
.foo { background-color:#f00; width:20px; }
script.js
elm.className = ‘foo’;

44. 4x425(1,700) td style
className style by Windows XP,
Quirksmode.org
IE6
IE7
Firefox2
Firefox3
Opera
Safari
0 100 200 300 400
ms
Set Style test

45. JavaScript Framework
• prototype, jQuery,YUI ...
• Performance issue
• File size
• Internal object inheritance
• $() vs. document.getElementById()

46. the Others
• Cache
• CDN(Contents Delivery Network)
• Domain name
• DNS lookup
• Parallel download
• ETags
• Redirect

47. Tools
• Firebug
• IBM page detailer
• YSlow
• Fiddler

48. Conclusion

49. • Front-end Performance
• Trade-off
• Service / Client environment
• As UI Developer
• Unobtrusive JavaScript
• Development Process
• Accessibility

50. References
• YDN Exceptional Performance :
Best Practices for Speeding Up Your Web Site
• ) *+, -./ 01(High Performance
Web Sites), 2'3, Steve Souders
• QuirksMode.org

51. Q/A

52. Thank you
suguni@gmail.com
http://yuiworld.kr/suguni