Fast, Faster, Fastest - A little journey into website optimization is a presentation given at Fronteers BE which covers the main techniques and tools that can help you achieve the best performance for your website. From various ways to compress images, to writing very efficient CSS, to using cache and compression to your advantage, the slides will explain why front-end optimization is necessary, how it impacts a business and even how big companies use performance perception for their websites.

1. Fast Fast ER Fast EST
a little journey into Website Optimization

2. @stelian
web designer @digiti
believes in optimization

3. “People don’t like
to wait”
- Captain Obvious

5. 40% of people abandon a
website that takes
more than 3 seconds
to load.
- Forrester Research

6. online shoppers expect
pages to load in
2 seconds
- Forrester Research

7. on the web 250ms might
win you the race
- Google & Microsoft studies

8. Page load times affect
online businesses

10. +500ms
-3%
Traffic
Page load
time

11. +500ms
-1.2%
Revenue
Page load
time

12. +100ms
-1%
Page load
Sales
time

13. “80-90% of the end-user
response time is spent on the
front-end”
- Steve Saunders, Google

14. Objectives
Low number of files
Small file size
Fast rendering

15. Low number of files

16. "Every HTTP request is
a gamble. A chance to
fail."
- Scott Jehl

17. 6
Connections per Hostname

18. Use CSS Sprites

20. 1 CSS file

21. 1 CSS file, ideally

22. 29

24. Use @media print
instead of print.css

25. 1 JS file per hostname

26. 40+

28. Small file size

29. Write
semantic HTML
avoiding unnecessary elements

30. Minify the
javascript

31. Smaller CSS
use a reset.css file to avoid repetition
use shorthand properties
*design with consistency
remove unused styling
* for the designers

32. Normal
body{
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 1em;
line-height: 1.5em;
font-style: italic;
font-weight: bold;
}
Shorthand
body{
font: italic bold 1em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
}

33. Consistency: font-size
23%
10+ 100+
78%
The number of font-size
declarations
Alexa top 1000 websites

34. Consistency: patterns
source: stubbornella.org

35. Minify the
CSS

36. Use font subsets
if possible

37. Choose the
right image format
binary files (images,
PDFs, ...)
84%
Alexa top 1000 websites

38. GIF
Only for animations

39. PNG-8
for small dimensions and no need for
true color support;
recommended for illustrations

40. PNG-8 Alpha Transparency
Fireworks

41. PNG-8 Alpha Transparency
ImageAlpha (Free)

42. PNG-24
when in need for high quality
graphics, although it tends to get
bigger in size

43. Use posterization to
reduce the number of
colors in a PNG-24 file

44. JPEG
great for large images that contain
photographic data

45. JPEG tips
80% quality is usually good enough
try to align edges to an 8x8 pixel grid
use JPEG selective quality in FW

46. JPEG
Left square aligned to the 8x8 grid,
right one not

47. JPEG Selective Quality
in Fireworks

48. Use ImageOptim
to compress images further
Alternatives: smush.it, punypng,
jpegmini

51. Original PNG-8 + Alpha Transparency
1068 KB 263 KB

52. Original PNG-8 + Alpha +ImageOptim
1068 KB 228 KB

53. Fast rendering

54. Cache static files

55. Cache static files
forever

56. “e fastest HTTP
request is the one not
made”

57. Using .htaccess
Header unset Pragma
FileETag None
Header unset ETag
# cache images for 10 years
<FilesMatch ".(ico|pdf|jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=315360000, public, must-revalidate"
Header unset Last-Modified
</FilesMatch>
# cache html/htm/xml/txt files for 2 hours
<FilesMatch ".(html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>
this is just an example;
for best results, use HTML5 Boilerplate

58. Cache AJAX requests

59. Faster CSS
Don't use @import
Stay away from *
Avoid using a tag as a key
body * {...}
body > * {...}
ul.active li a {...}
ul.active > li > a {...}

60. Use CSS3 responsibly
don’t overuse border-radius, box-shadow,
gradients
http://perfectionkills.com

61. Use domain sharding
to increase the number of
concurrent connections

62. Use a CDN
Content Delivery Network

63. Use CDN hosted
JS libraries

64. Specify the jQuery version
for better caching
http://code.jquery.com/jquery-latest.min.js no cache
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js 1 hour
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 1 year

65. Always load scripts
asyncroniusly and put
them at the bottom of
the page

66. Compress only
compressible resources
HTML, CSS, JS, XML, SVG, ICO
use GZIP instead of Deflate
use lowercase for better compression
HTML5 Boilerplate .htaccess recommened

67. e favicon
have one to avoid a 404
load it from a subdomain
compress it
cache it forever

68. Avoid mixed content
warnings
http://code.jquery.com/jquery-latest.min.js
//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

69. Minimize reflows

70. Watch out for 404
favicon
apple touch icons
apple-touch-icon-ZxZ-precomposed (android)
crossdomain.xml

71. Trigger hardware
accelerated CSS in iOS

72. Test
PageSpeed, Yslow

73. Measure
Google Analytics Site
Speed
//default sample rate is 1%
_gaq.push(['_setSiteSpeedSampleRate', 5]);

74. So, what now?

75. Cheat
Lie
Deceive

76. Performance
Perception

77. Apple
The iPhone saves a screenshot of every app
when it closes. So when you relaunch the app
it loads that screenshot first.

78. Instagram

79. Instagram

80. Instagram

81. Amazon
Priority Loading

82. Tools & Resources(1 of 2)
Tools
๏ ImageOptim
๏ ImageAlpha
๏ HTML5 Boilerplate
๏ Smush.it - PunyPNG - JPEGmini - PNGGauntlet (Win)
๏ Online YUI Compressor
๏ CSS Sprite Generator - CSSsprite Photoshop script
๏ Page Speed - YSlow
Resources
๏ Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times
๏ How Loading Time Affects Your Bottom Line (Infographic)
๏ For Impatient Web Users, an Eye Blink Is Just Too Long to Wait
๏ Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF)
๏ If Google increased page load by 500ms it would cost them 1.2% of their revenue (Video)
๏ Every 100ms of latency costs Amazon 1% of profit
๏ The Performance Golden Rule

83. Tools & Resources(2 of 2)
๏ Most Browsers Allow 6 Concurrent Connections per Hostname
๏ Top 5 Mistakes of Massive CSS (Video + Graphs)
๏ How to create CSS objects? Get the granularity right!
๏ HTTP Compression use by Alexa Top 1000
๏ Profiling CSS for fun and profit. Optimization notes. (CSS3 Performance)
๏ Maximize Your Chances of Caching Your jQuery
๏ Lose the Wait: HTTP Compression
๏ Instagram and Optimizing Favicons
๏ Use Lowercase Markup For Better Compression
๏ Small site? Raise your page load time calculation sample to 100%
๏ The iPhone’s Perceived Performance
๏ The 3 White Lies Behind Instagram’s Lightning Speed
๏ Making a Slow Site Appear Fast