Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front end-performance


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Front end-performance

  1. 1. Faster Page Loads with Front End Performance Azri
  2. 2. AGENDAMe and my companyTools & MeasurementImprove page load time Azri
  3. 3. ‘Me’ My village HUZURABADAzri
  4. 4. More about ‘Me’• I build applications on Drupal• I am an active contributor of code on Drupal, jQuery and PHP communities• One of my projects, a real-time collaboration suite was showcased at TechCrunch 50 in SF• I build Facebook Applications• ... Azri
  5. 5. My Company We are based inWe code on We build products & solutions using Azri
  6. 6. Web Page CSS IMAGESHTML + + FlashXHR Javascript Azri
  7. 7. 80 % of load time Come fromCSS + JS + Images Azri
  8. 8. 5 CSS Requests 27 JS Requests 29 Image RequestsAzri
  9. 9. Measure Overal load time Page size Time until DOM is loaded Time until Page is rendered Time until Page is functional Azri
  10. 10. Azri
  11. 11. ToolsYslowFirebug Azri
  12. 12. YSlow Azri
  13. 13. Waterfall ChartStarrt Connect First byte transfer Last byte transfer Azri
  14. 14. Reduce Requests Compress Styles and JS  Built into Drupal  vanced-cssjs-aggregation Sprites  Many images into one file  Shift into view with background- position Azri
  15. 15. Reduce Requests No Redirects Use CSS Instead of Images -moz-border-radius:4px; -webkit-border-radius:4px; -border-radius:4px; Data: URLs in style sheets background: white url(data:image/png;base64,iVBORw0KGgoAA AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/// +l2Z/dAAAAM0l EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/ A6 P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) Azri
  16. 16. Use CDN Content Delivery Network Servers Scattered around world Reduces roundtrip time Some providers  Akamai  Simple CDN  Panther Express Azri
  17. 17. Cache Use Exprires header for http request Browser caches content Browser checks whether content is fresh For images, js, css set expires header far future Change filename/URL when updating Azri
  18. 18. Compress Content Use apache mod_deflate module to compress content Reduces page size more than 50% Compress script and styles Azri
  19. 19. Keep CSS TOPPut <style> or <link> tags in <head> Page renders when all css loaded Loading CSS later causes re- rendering Azri
  20. 20. Keep JS Bottom Just before </body> Loading scripts in the head will block page rendering Scripts load sequentially Azri
  21. 21. Cookie Free Domain Use cookie-free domain for static content (images, css, js)  Create sub domain that point to same server  Use CDN module to serve static content with the new domain Serve static content with nginx or lighttpd servers Azri
  22. 22. Run Will reduce the size of images Removes white space from the images Keeps the quality of the image Azri
  23. 23. Parallelization Browser has limitation of 2 requests per domain User multiple domains to serve static content Use CDN module to serve content from multiple domains Azri
  24. 24. Questions? Questions? Azri