Front end optimization
Upcoming SlideShare
Loading in...5
×
 

Front end optimization

on

  • 1,146 views

 

Statistics

Views

Total Views
1,146
Slideshare-icon Views on SlideShare
1,144
Embed Views
2

Actions

Likes
1
Downloads
12
Comments
0

2 Embeds 2

http://us-w1.rockmelt.com 1
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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.

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

    Front end optimization Front end optimization Presentation Transcript

    • Front end optimization -Abhishek Anand Web Engineering, Digital Centre of Excellence, HCL Technologies
    • Why should we optimize frontend? 80% of the end-user response time is spent on the front-end. Frontend optimization can cut off 25% to 50% of the page load time. Page load times are important. Amazon insiders estimate that every 100 ms increase in latency costs Amazon roughly %1 of profit. Visitors hate slow sites, so dont make them wait.
    • Tools Yslow Google page speed Firebug
    • When to start frontend optimization? Right from the start of a project Image optimization and creating sprites for image.
    • Image optimization Progressive JPEG for large images with multiple colors, for anything with complex gradients (e.g., a photo). PNG if you need transparency, for small and simple image (e.g., icons) Dont Scale Images in HTML
    • Minimize HTTP Requests Combine CSS & JS into as few files as possible.  /admin/settings/performance -“Optimize CSS files” and “Optimize JS files” from performance page: Create sprite images for background Images.  use the CSS background-image and background-position properties to display the desired image segment.
    • Minimize HTTP Requests Inline images use the data: URL scheme to embed the image data in the actual page http://drupal.org/project/css_emimage Avoid Redirects Use GET for AJAX Requests
    • Reduce Payload size Minify JavaScript and CSS Minifying HTML is useless! Remove Duplicate Scripts Make Ajax Cacheable Flush the Buffer Early. (Not very useful in drupal) Reduce the Number of DOM Elements
    • Progressive Page Loading Move <?php print $scripts; ?> to the bottom, of the template file. right above: <?php print $closure; ?>.If a module is printing its own JS in the head: find “drupal_add_js” in that module directory and change it’s scope to “footer”.Do not use inline script.This breaks some JavaScripts!
    • CSS Cleanup you can strip it out by finding/adding this function in your themes template.php file: phptemplate_preprocess_page Use Google page speed to find unused CSS files
    • Split Components Across Domains Use CDN http://drupal.org/project/cdn Most browsers only download two resources from one domain at a time (only one at a time for JS). Spreading static resources (like images, CSS, and JS) across couple of sub-domains will allow browsers to download things, 2 at a time, from each domain simultaneously.
    • Setting up cookie domain A domain that sets a cookie is considered a “cookie enabled domain” by whatever requests it. Disable cookies on static domains. In settings.php uncomment this line and put your domain in like this: $cookie_domain = ‘example.com;
    • Expires Header  LoadModule expires_module modules/mod_expires.so Gzip Components  LoadModule expires_module modules/mod_expires.so Configure E-tags  FileETag MTime Size
    • Avoid CSS Expressions CSS expressions are a powerful (but dangerous) way to set CSS properties dynamically background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
    • Reduce DNS Lookups DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname
    • No 404s HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit. Avoid Empty Image src
    • Avoid Filters The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied
    • Post-load Components Splitting JavaScript before and after the onload event. Fetching contents in second scroll by Ajax. http://www.infinite-scroll.com/
    • Preload Components Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components. Conditional preload - based on a user action you make a guess where the user is headed next and preload accordingly. Anticipated preload - preload in advance before launching a redesign.
    • Thank You! Thank You!Questions? Questions?Comments? Comments?