A tutorial on how to improve performance of webpages. Covers most of the artifacts needed for a good audit score on browsers.

1. Performance Tuning of web pages
By Ritesh M Nayak

2. Why is speed important?
• Offers a good user
experience
• No broken functionality
• Part of SLAs for many
projects
• Doesn’t make one feel like
they are living in the 90s
Does anyone remember this?

3. Why is speed important?

4. Speed is the new SEO

5. remember the 80/20 rule
10 to 20% of the end user response time is
spent downloading the actual HTML content of
the page, the rest is used to download the
components of a page.

6. Audit of a popular webpage

7. Load time: 26 seconds
Page size: 5.2 MB
Requests: 172 HTTP requests
This is horribly wrong

8. Follow these basic rules if you
want to improve performance
Please download the Yslow plugin for firefox or
use the Chrome’s built in Audit feature

9. 1. Make fewer HTTP requests
Let’s talk a little bit about HTTP 1.1 and browser implementations here
• Combine JS and CSS files
• Use sprites instead of individual images
• Inline images

10. 2. Use a CDN
• Understand what server proximity constraints
are and choose accordingly
• CDNs are inexpensive these days and can
make a great difference to your application
Ex: Rackspace’s CloudFiles, Amazon’s CloudFront
or Akamai
at $10c /GB/Month it is totally worth it

11. 3.Use the Expires header
• Helps restrict unnecessary requests
• Use expires date in the far future
• HTTP 1.1 also supports cache-control , so use
the max-age with a high value
HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Thu, 10 Mar 2011 12:23:32 GTM
Expires: Thu, 10 Mar 2032 18:23:32 GTM
On Apache, look at the mod_expires module for more info

12. 4. GZIP components
•
•
•
•
GET /sample.com/index
HTTP/1.1
HOST: sample.com
Accept-Encoding: gzip,deflate
Helpful in conserving bandwidth
Compress all text responses
Use the vary header if you use proxies
Don’t use ETAGS in the header
On Apache, look at the mod_zip and mod_deflate for more info
50%

13. 5. CSS on top
• Users don’t get to see un-styled content/white
screen
• Drop all inline styles if possible and don’t use
browser specific CSS effects (esp. IE)(not
cached)
• Progressive rendering
Avoid CSS expressions !
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

14. 6. JS at the bottom
• Helps in unblocking parallel downloads
• DOM is mostly accessible unless you are doing
something fancy
• Order them in the way you want them
executed
• Drop inline scripts (not cached)

15. 7. Reduce DNS lookups
• Typically takes 20-120 ms to look up a domain
• As a practice, don’t use more than 4
hostnames

16. 8. Minify Javascript
• Reduced bandwidth significantly
• Use asset mgmt. libraries like assetic(php),
static resources (grails)
• It is also useful to Obfuscate JavaScript
sometimes to protect your code against
attacks

17. 9. Avoid redirects
• Creates a lot of Idle time for the user
• Use only for POSTs, but not for tracking,
rewrite
Look at mod_rewrite best practices when using the module

18. 10. Cache AJAX requests
• Use GET requests for AJAX (uses 1 packet)
• Seem fairly obvious but not done by people
• Especially for auto-complete textboxes or
commonly occurring states like checking for
username availability etc
To override the caching, append current timestamp to the ajax
request as a query parameter
?thetimeis=42392991821

19. 11. Caching caching caching
• Use memcached; can be deployed separately
• Use database level caching via ORMs or other
similar libraries. Consistent queries also help
optimize query tuning
• Cache commonly hit pages (interpreted
languages)

20. 12. flush()
• Use PHPs flush() function to render a partially
complete HTML page, so that the components
can start loading instead of the browser
remaining idle
More info here: http://php.net/manual/en/function.flush.php

21. 13. Pre/post loading components
• Post load components which are out of the
immediate viewport of the user.
Example: scripts not needed at DOM load
• Pre load components rendered as part of a
container refresh

22. 14. Split components on domains
• To maximize parallel downloads, use different
subdomains (stick to 4 hostnames)
• Use a cookieless subdomain/domain for
components

23. 15. Minimize , cut , snip , chop
• Minimize DOM elements. Slows down JS
• Minimize IFrame (block page onload)
• Minimize 3rd party scripts. See if you load
those asynchronously
• Reduce the cookie size (more info here)
• Optimize images, use PNG instead of GIF.
Reduce JPG quality. Tools like jpgtran,
pngcrush, optipng will help, remove exif and
comments

24. Mobile Browser
• Keep components under 25kb
• Minify HTML in addition to js and css
• Use multipart documents (email)