drupal front-end performance
DESCRIPTION
Drupal front-end performanceTRANSCRIPT
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