Front-end Performance in Drupal
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Front-end Performance in Drupal

on

  • 1,562 views

Backend tools als APC, Memcache en Varnish helpen natuurlijk om je site sneller te maken en die gebruiken we daarom ook graag. Echter, de kans is groot dat de meeste performanceproblemen zich bevinden ...

Backend tools als APC, Memcache en Varnish helpen natuurlijk om je site sneller te maken en die gebruiken we daarom ook graag. Echter, de kans is groot dat de meeste performanceproblemen zich bevinden in de front-end: te veel externe resources, een niet-optimale HTML opmaak en JavaScript dat op de verkeerde plek geladen wordt. Wist je dat 80 tot 90% van de laadtijd van een pagina puur front-end is? Laten we daar dan beginnen met optimaliseren!

Statistics

Views

Total Views
1,562
Views on SlideShare
1,538
Embed Views
24

Actions

Likes
0
Downloads
4
Comments
2

1 Embed 24

https://twitter.com 24

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @attiks Dank!
    Are you sure you want to
    Your message goes here
    Processing…
  • Nog enkele links die interessant kunnen zijn:
    Voor responsive sites: http://drupal.org/project/picture
    Voor alle sites: http://drupal.org/project/image_optimize_effect maar zorg er voor dat je de drush commando's gebruikt
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Google sites gebruikt www.gstatic.com als cookieless domein, Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.
  • DEMO: Audit window tonen
  • Door CSS en JS te comprimeren en caching aan te zetten: 121 ipv 138 requests en de helft minder data
  • Gebruik onderstaande gegevens of laat uw visitekaartje achter.

Front-end Performance in Drupal Presentation Transcript

  • 1. 25 april2013Front-end performance
  • 2. Waarom focus op front-end?• De meeste rendertijd gebeurtin de front-end (JavaScript, CSS3)• Google:100 ms = 10% minder traffic,500 ms = 20% minder traffic• Amazon: elke 100ms trager = 1% minder sales• Google rankt snelle sites hoger
  • 3. De basics• Minder requestsCSS / JS aggregatie & Image sprites• Minder codeMinify (JSHint, Speedy module) & verwijder ongebruikte CSS / JS• Minder dataGzip compressie• Gebruik een CDN (Content Delivery Network)• Maximize browser caching (cache control directive)• Stylesheets in head, JavaScript in footer (en geen inline)
  • 4. Beginsituatie• Geen caching• Geencompressie• Veel resources• 138 requests87.3 KB, 2.63 s
  • 5. Caching aanzetten helpt• Cachingaanzetten(settings.php)• Al iets beter121 requests47.8 KB, 1.32 s>
  • 6. Minder CSS / JS• Gebruikhook_css_alter() enhook_js_alter()• Verwijderongebruiktefiles• Groepeer CSSin dezelfdegroep
  • 7. JavaScript naar de footerModernizr script in de header en zet de andere scripts in de footer (JS_DEFAULT).function hero_js_alter(&$javascript) {// Place the modernizr JS in the header, so the rest can be in the footer.$modernizer_script = drupal_get_path(theme, hero) . /js/foundation/modernizr.foundation.js;$javascript[$modernizer_script][in_header] = TRUE;foreach ($javascript as &$js) {if ($js[in_header] != TRUE && $js[type] != inline) {$js[group] = JS_DEFAULT;$js[scope] = footer;}}}
  • 8. Requests verminderen metsprites• Elk ingredientheeft een eigenafbeelding. Datzijn al 39requests.
  • 9. Requests verminderen metspritesIn plaats van veel losse afbeeldingen1 grote afbeelding die alle afbeeldingen bevatVoor:a.button-add { background: url(button-add.png); }a.button-add:hover { background: url(button-add-active.png); }Na:a.button-add { background: url(sprite.png); background-position: 0 0; }a.button-add:hover { background-position: 0 50px; }
  • 10. Spriting in Compass - SCSS$ingredients-layout: horizontal;@import "ingredients/*.png";.product-ingredients-desktop > li {@include ingredients-sprite(mango);}@each $ingredient in aardbeien, appel, banaan, etc {&[data-id="#{$ingredient}"] {@include ingredients-sprite-position("#{$ingredient}");}}
  • 11. Spriting in Compass - CSS.product-ingredients-desktop > li {background: url(../images/ingredients-sa16d376cfe.png) no-repeat;}.product-ingredients-desktop > li {background-position: -1750px 0;}.product-ingredients-desktop > li[data-id="aardbei"] {background-position: -210px -5px;}.product-ingredients-desktop > li[data-id="appel"] {background-position: -420px -5px;}.product-ingredients-desktop > li[data-id="banaan"] {background-position: -630px -5px;}
  • 12. Spriting: het resultaat• En weer iets sneller:74 requests, 16.8 KB, 939 ms
  • 13. Content Delivery Network• Module: http://drupal.org/project/cdn• Haal files van een server dichtbij• Domein zet geen cookies (veel sneller)• Veel minder requests op de webserver75 requests, 25.0 KB, 962 ms
  • 14. Nog twee tipsSpecifieke selectors in CSS.selector is sneller dan .body .page .selectorDOM aanpassen met jQuery is traagDoe dit zo min mogelijk. Beter eerst je aanpassingen in JS doen en ineenswegschrijven naar de DOM.
  • 15. Leesvoer• https://developers.google.com/speed/docs/best-practices/request• http://www.sitepoint.com/web-site-optimization-steps/• http://developer.yahoo.com/performance/rules.html• http://www.metaltoad.com/blog/drupal-7-taking-control-css-and-js-aggregation
  • 16. Vragen?baris@limoengroen.nl | www.limoengroen.nl | 020 - 737 1880