Scaling API-first – The story of a global engineering organization
Front end optimization
1. Front end optimization
-Abhishek Anand
Web Engineering,
Digital Centre of Excellence,
HCL Technologies
2. 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 don't make them wait.
4. When to start frontend optimization?
Right from the start of a project
Image optimization and creating sprites for image.
5. 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)
Don't Scale Images in HTML
6. 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.
7. 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
8. 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
9. 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!
10. 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
11. 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.
12. 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';
14. 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" );
15. Reduce DNS Lookups
DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address
for a given hostname
16. 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
17. 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
18. Post-load Components
Splitting JavaScript before and after the onload event.
Fetching contents in second scroll by Ajax.
http://www.infinite-scroll.com/
19. 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.
