• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Front end-performance

Front end-performance






Total Views
Views on SlideShare
Embed Views



1 Embed 7

http://pflame.co.in 7



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Front end-performance Front end-performance Presentation Transcript

    • Faster Page Loads with Front End Performance prajwala@azrisolutions.com Azri
    • AGENDAMe and my companyTools & MeasurementImprove page load time Azri
    • ‘Me’ My village HUZURABADAzri
    • 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
    • My Company We are based inWe code on We build products & solutions using Azri
    • Web Page CSS IMAGESHTML + + FlashXHR Javascript Azri
    • 80 % of load time Come fromCSS + JS + Images Azri
    • 5 CSS Requests 27 JS Requests 29 Image RequestsAzri
    • Measure Overal load time Page size Time until DOM is loaded Time until Page is rendered Time until Page is functional Azri
    • Azri
    • ToolsYslowFirebug NetWebpagetest.orgBlaze.io Azri
    • YSlow Azri
    • Waterfall ChartStarrt Connect First byte transfer Last byte transfer Azri
    • Reduce Requests Compress Styles and JS  Built into Drupal  http://drupalmodules.com/module/ad vanced-cssjs-aggregation Sprites  Many images into one file  Shift into view with background- position Azri
    • 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
    • Use CDN Content Delivery Network Servers Scattered around world Reduces roundtrip time Some providers  Akamai  Simple CDN  Panther Express Azri
    • 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
    • Compress Content Use apache mod_deflate module to compress content Reduces page size more than 50% Compress script and styles Azri
    • Keep CSS TOPPut <style> or <link> tags in <head> Page renders when all css loaded Loading CSS later causes re- rendering Azri
    • Keep JS Bottom Just before </body> Loading scripts in the head will block page rendering Scripts load sequentially Azri
    • 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
    • Smush.it Run smush.it Will reduce the size of images Removes white space from the images Keeps the quality of the image Azri
    • 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
    • Questions? Questions? prajwala@azrisolutions.com asif@azrisolutions.com Azri