Your SlideShare is downloading. ×
0
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Front-end Performance in Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front-end Performance in Drupal

1,403

Published on

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!

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • @attiks Dank!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,403
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
2
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • 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

    ×