Front-end performance.

● 44 requests for anonymous user

● 60 requests for administrator

● 28 requests for anonymous user

● 39 requests for administrator

Why it’s important?

● Better user experience

● Higher conversion rate

● SEO

Numbers

● 80-95% of performance happens in the front end

● Amazon: 100ms cost 1% of sales

● Yahoo: 400ms improvement ~9% traffic

● Firefox: 2.2s improvement ~15.4% downloads

Tools

● Yslow

● PageSpeed

● Chrome DevTools

● Firebug

● Use fewer HTTP requests● Use CDN● Avoid empty src or href● Add Expires header● Compress components with gzip● Put CSS at top● Put JS at bottom● Make JS and CSS external● Reduce DNS lookups

● Minify JS and CSS● Avoid URL redirects● Remove duplicate CSS and JS● Configure ETags● Make AJAX cacheable● Use GET for AJAX requests● Reduce number of DOM elements● Avoid HTTP 404 error● Reduce cookie size

● Use cookie-free domains● Avoid AlphaImageLoader filter● Do not scale images in HTML● Make favicon small and cacheable

Advanced CSS/JS Aggregation

● gzip CSS/JS● Bundler: groups files together● CSS/JS compression● CSS/JS validation● JS to the footer● lot-lot more options

Advanced CSS/JS Aggregation● 23.4KB vs 4.5KB gzipped CSS

(~80% decrease)● 93.9KB vs 32.3KB gzipped JS

(~65% decrease)● 23.4KB vs 4.4KB gzip + minify CSS

(~81% decrease)● 93.9KB vs 28.5KB gzip + minify JS

(~70% decrease)

CSS

Write your styles cleverly● SMACSS● BEM● Object Oriented CSS

Write your styles cleverly● SMACSS● BEM● Object Oriented CSS● SASS / Compass● Less● ...

Use CSS3!!!

Do not do a lot to support legacy browsers!!!

Remove unused CSS

WTF?

Remove unused CSSOmega

Remove unused CSSAdaptive Theme

Remove unused CSSTao

function tao_css_alter(&$css) { $exclude = array( 'misc/vertical-tabs.css' => FALSE, 'modules/aggregator/aggregator.css' => FALSE, 'modules/block/block.css' => FALSE, 'modules/book/book.css' => FALSE, 'modules/comment/comment.css' => FALSE, //... 'modules/update/update.css' => FALSE, 'modules/user/user.css' => FALSE, ); $css = array_diff_key($css, $exclude);}

Use CSS sprites

3.85KB

2.5KB

Also

● Icon Fonts

● SVG

jQuery Update

Default: 1.4.4 (2010.11.11)

jQuery Update: 1.7 site’s theme + 1.5 admin pages

Images

Do not set 100% quality

100% qualityOriginal JPEG:

640x480px, 49.38KB

● No effects: 151KB

● Rotate 360°: 151KB

● Scale 2000px x 100%, no upscaling: 151KB

● Scale & Crop 480x360px: 139KB

100% quality

● No effects: 151KB

● Rotate 360°: 151KB

● Scale 2000px x 100%, no upscaling: 151KB

● Scale & Crop 480x360px: 139KB

Original JPEG:640x480px, 49.38KB

● Image Lazyloader

● Picture + Breakpoints

● Fences

● Views style settings

Markup

● CDN● Magic● Speedy● Minify● Core Library● UglifyJS

See also

Thank you