Download - Drupal front-end performance
![Page 1: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/1.jpg)
Front-end performance.
![Page 2: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/2.jpg)
![Page 3: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/3.jpg)
● 44 requests for anonymous user
● 60 requests for administrator
![Page 4: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/4.jpg)
![Page 5: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/5.jpg)
![Page 6: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/6.jpg)
● 28 requests for anonymous user
● 39 requests for administrator
![Page 7: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/7.jpg)
Why it’s important?
![Page 8: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/8.jpg)
● Better user experience
● Higher conversion rate
● SEO
![Page 9: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/9.jpg)
Numbers
![Page 10: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/10.jpg)
● 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
![Page 11: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/11.jpg)
Tools
![Page 12: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/12.jpg)
● Yslow
● PageSpeed
● Chrome DevTools
● Firebug
![Page 13: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/13.jpg)
● 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
![Page 14: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/14.jpg)
● 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
![Page 15: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/15.jpg)
● Use cookie-free domains● Avoid AlphaImageLoader filter● Do not scale images in HTML● Make favicon small and cacheable
![Page 16: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/16.jpg)
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
![Page 17: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/17.jpg)
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)
![Page 18: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/18.jpg)
CSS
![Page 19: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/19.jpg)
Write your styles cleverly● SMACSS● BEM● Object Oriented CSS
![Page 20: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/20.jpg)
Write your styles cleverly● SMACSS● BEM● Object Oriented CSS● SASS / Compass● Less● ...
![Page 21: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/21.jpg)
Use CSS3!!!
![Page 22: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/22.jpg)
Do not do a lot to support legacy browsers!!!
![Page 23: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/23.jpg)
Remove unused CSS
WTF?
![Page 24: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/24.jpg)
Remove unused CSSOmega
![Page 25: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/25.jpg)
Remove unused CSSAdaptive Theme
![Page 26: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/26.jpg)
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);}
![Page 27: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/27.jpg)
Use CSS sprites
3.85KB
2.5KB
![Page 28: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/28.jpg)
Also
● Icon Fonts
● SVG
![Page 29: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/29.jpg)
jQuery Update
Default: 1.4.4 (2010.11.11)
jQuery Update: 1.7 site’s theme + 1.5 admin pages
![Page 30: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/30.jpg)
Images
![Page 31: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/31.jpg)
Do not set 100% quality
![Page 32: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/32.jpg)
100% qualityOriginal JPEG:
640x480px, 49.38KB
● No effects: 151KB
● Rotate 360°: 151KB
● Scale 2000px x 100%, no upscaling: 151KB
● Scale & Crop 480x360px: 139KB
![Page 33: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/33.jpg)
100% quality
● No effects: 151KB
● Rotate 360°: 151KB
● Scale 2000px x 100%, no upscaling: 151KB
● Scale & Crop 480x360px: 139KB
Original JPEG:640x480px, 49.38KB
![Page 34: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/34.jpg)
● Image Lazyloader
● Picture + Breakpoints
![Page 35: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/35.jpg)
● Fences
● Views style settings
Markup
![Page 36: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/36.jpg)
● CDN● Magic● Speedy● Minify● Core Library● UglifyJS
See also
![Page 37: Drupal front-end performance](https://reader036.vdocuments.mx/reader036/viewer/2022081512/558d3b80d8b42a6a688b4776/html5/thumbnails/37.jpg)
Thank you