| Sno |
Activity |
Definition |
| 1 |
Minimize HTTP Requests |
Each image, script file, css and other external files are counted as 1 HTTP request individually |
| 2 |
Use a Content Delivery Network |
CDNs allow faster downloading of files at Users end, as they have tie ups with ISPs directly.
Similar to LAN transfer. Eg. Akamai |
| 3 |
Avoid empty src or href |
IE - Makes a request to directory in which the page is located
Chrome/Safari/Firefox - Make request to original page
This can create Errors and useless Extra Traffic at Web Server |
| 4 |
Add an Expires or a Cache-Control Header |
For static components: implement "Never expire" policy by setting far future Expires header
For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests |
| 5 |
Gzip Components |
Gzip is a compression algorithum which can reduce ~70% file size of static/text based content.
Smaller file size, faster loading and lesser bandwidth consumed. |
| 6 |
Put StyleSheets at the Top |
Stylesheets (CSS) files by nature can be parallely loaded along with other static content like images.
Loading them early also helps in faster rendering of page. |
| 7 |
Put Scripts at the Bottom |
Browsers open 2 connections per Hostname (aka Parallel Downloading.)
While a script is downloading the browser won't start any other downloads, even on different hostnames. |
| 8 |
Avoid CSS Expressions |
Used to set CSS properties dynamically. Especially for IE. Powerful and dangerous. As they are recalculated on every mouse movement and keyboard input. |
| 9 |
Make JavaScript and CSS External |
Reduces size of main HTML page at the cost of extra HTTP requests. However, if CSS/JS are cached properly then HTTP requests can also be saved. |
| 10 |
Reduce DNS Lookups |
DNS maps hostnames to IP addresses, just as phonebooks map people's names to their phone numbers. Takes 20-120 mil secs to resolve a hostname to IP. Browser cannot download anything uptill the DNS is not resolved. |
| 11 |
Minify JavaScript and CSS |
Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. |
| 12 |
Avoid Redirects |
Redirects slow down the user experience.
Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived. |
| 13 |
Remove Duplicate Scripts |
If a JS file is referred to twice for same page:
IE - Will download it again, even if JS is cached
However, all browsers even if they don't download it, will always execute it twice, that is unwated time spent on processing. |
| 14 |
Configure ETags |
Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser's cache matches the one on the origin server.
Can be a boon or a curse.
Single web server - Definitely a boon
Multiple web servers - Needs evaluation, can even degrade performance |
| 15 |
Make AJAX Cacheable |
Ajax responses should be made cacheable, this will significantly improve User Experience |
| 16 |
Use GET for AJAX Requests |
Ajax requests (XMLHttpRequest)
POST - Sends headers then sends Data.
GET - Sends Data directly. However, cap on URL length is 2,000 chars, data larger than that should be sent using POST method. |
| 17 |
Reduce the Number of DOM Elements |
A complex page design means more bytes to download and it also means slower DOM access in JavaScript.
It makes a difference if you loop through 500 or 5000 DOM (design/HTML) elements on the page when you want to add an event handler for example.
To get count of DOM elements FireBug > Console >
document.getElementsByTagName('*').length
Ideal size - 500 to 700 elements for a very busy page |
| 18 |
No 404s |
HTTP requests are costly and getting useless response will further bring down user experience.
1) Some sites keep helpful 404 pages, however this can lead to unwanted DB hits eg. "Did you mean X".
2) When external JS files return 404.
a) First it blocks browser from loading anything else,
b) Secondly the browser might try to parse the error page to find something useable. |
| 19 |
Reduce Cookie Size |
Bloating cookies with unwanted information can also slow down user responses. As cookies travel with every request user makes.
Cookie size - <400 Bytes for any single cookie |
| 20 |
Use Cookie-Free Domains for Components |
As cookies travel with each request, static content (images/css/etc) that don't require them should be served from cookie free domains as this will speed up trasmission. |
| 21 |
Avoid Filters |
The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7.
Blocks rendering
Freezes the browser
Increases memory comsumption
Applied per element, not per image, so the problem is multiplied.
Solution -
1) Use gracefully degrading PNG8 instead
2) If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users. |
| 22 |
Do Not Scale Images in HTML |
Optimize image resolution to match front end requirement don't scale down a large size image in HTML. |
| 23 |
Make favicon.ico Small and Cacheable |
It's a necessary evil and Interferes with the download sequence. To set it right
Size - <1 Kb
Cache - Long term
Serving - Cookie-less domain |
| 24 |
Avoid bad requests |
Same as No 404, bad requests are generated by User (4xx) and Server (5xx) - So all 4xx and 5xx series errors should be addressed |
| 25 |
Avoid CSS @import |
Changes default nature of CSS download from Parallel to Serial. This is similar to loading CSS at the end of the page, which is a bad practice. |
| 26 |
Avoid CSS expressions |
As mentioned earlier |
| 27 |
Avoid document.write |
If external resources (JS/CSS/Images/etc) are invoked via document.write they cannot be prefetched. |
| 28 |
Combine external CSS |
Club all CSS into 1 file |
| 29 |
Combine external JavaScript |
Club all JS into 1 |
| 30 |
Combine images using CSS sprites |
Each request incurs a fixed amount of request overhead. Reduce this overhead from one request per image to one request for the entire sprite. |
| 31 |
Defer loading of JavaScript |
Identify JS functions not used by document before onload event. Load them seperately using event handler.
Alternately "defer" can be used as a mode in HTML4/5
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script> |
| 32 |
Defer parsing of JavaScript |
|
| 33 |
Enable compression |
Same as Gzip components |
| 34 |
Leverage browser caching |
Setting an Expiry/Max-age header for a resource helps browsers to cache items locally in user machines |
| 35 |
Leverage proxy caching |
Enabling public caching in the HTTP headers for static resources allows the browser to download resources from a nearby proxy server rather than from a remote origin server.
This means that even first-time users to your site can benefit from caching. Similar to CDN. |
| 36 |
Make landing page redirects cacheable |
Redirects slow down the user experience. If they are not cached to do so:
Expires or Cache-Control header must be added to response
Mobile phone redirects should be handled seperately |
| 37 |
Minify CSS |
Similar to Minify JavaScript and CSS |
| 38 |
Minify HTML |
Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time. |
| 39 |
Minify JavaScript |
Similar to Minify JavaScript and CSS |
| 40 |
Minimize request size |
HTTP request should not go beyond 1 packet. That is ~1500 bytes.
Cookie size - < 400 Bytes.
URL length - < 500 Bytes including parameters
Browser-fields - Request/Response headers, only set required ones |
| 41 |
Minimize DNS lookups |
Similar to Reduce DNS lookups |
| 42 |
Minimize redirects |
Similar to Avoid redirects |
| 43 |
Optimize images |
Choose an appropriate image file format
PNGs are almost always superior to GIFs
GIFs to be used for very small or simple graphics
JPG for photographic style images
BMP and Tiff to be avoided
Use an image compressor
JPG - JPEGtran or JPEGoptim
PNG - OptiPNG or PNGout |
| 44 |
Optimize the order of styles and scripts |
<head>
<!-- Title -->
<!-- Meta -->
<!-- CSS -->
<!-- Favicon -->
<!-- JS if required (inline/external) -->
</head> |
| 45 |
Parallelize downloads across hostnames |
100 resources
4 hosts
each host should serve 25 resources
no one host should serve more than 38 resources
*** Also many browsers do not download JavaScript files in parallel, so there is no benefit from serving them from multiple hostnames |
| 46 |
Prefer asynchronous resources |
Fetching resources asynchronously prevents those resources from blocking the page load.
Example
<script>
var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script> |
| 47 |
Put CSS in the document head |
Similar to Put stylesheets at the top |
| 48 |
Remove unused CSS |
Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner |
| 49 |
Serve resources from a consistent URL |
Shared resources across multiple pages in a site such as images, .css and .js files should always be served from a consistent URL. This greatly helps in reducing bandwidth comsumption for both User and Server. |
| 50 |
Serve scaled images |
If a page contains a large image and thumbnail of the same is to displayed, the same large image can be scaled down and reused, provided the aspect ratio for thumbnail is maintained. |
| 51 |
Serve static content from a cookieless domain |
Similar to Use Cookie-Free Domains for Components |
| 52 |
Specify a character set |
Add Content-Type with charset response header
Content-Type: text/html; charset=utf-8
This brings extra buffering to the page, as the first thing a browser does is to try and obtain most suitable charset to display information on a page
NOTE : Both charset header and <meta> charset should be identical for a page |
| 53 |
Specify image dimensions |
Specify height and width at <img> element level
This helps in reserving space for image before it loads and boosts page rendering |
| 54 |
Use efficient CSS selectors |
1) Avoid a universal key selector.
Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.
2) Make your rules as specific as possible.
Prefer class and ID selectors over tag selectors.
3) Remove redundant qualifiers.
These qualifiers are redundant:
a) ID selectors qualified by class and/or tag selectors
b) Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).
4) Avoid using descendant selectors, especially those that specify redundant ancestors.
For example, the rule body ul li a {...} specifies a redundant body selector, since all elements are descendants of the body tag.
5) Use class selectors instead of descendant selectors.
instead of using 2 style rules to display ordered list and ordered list
ul li {color: blue;}
ol li {color: red;}
encode the styles into two class names and use those in your rules
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;} |
| 55 |
Implementing mod pagespeed for apache |
Apache module to bring page speed recommendations aboard |
| 56 |
PHP flush(); |
Putting PHP Flush after the </head> segment can improve performance significantly
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content --> |
| 57 |
Implement Xcache / ZendOpcache |
The Xcache / Zend OPcache provides faster PHP execution through opcode caching and
optimization. It improves PHP performance by storing precompiled script
bytecode in the shared memory. This eliminates the stages of reading code from
the disk and compiling it on future access. In addition, it applies a few
bytecode optimization patterns that make code execution faster. |
| 58 |
Post-load content |
What's absolutely required in order to render the page initially?
The rest of the content and components can wait.
YUI Image Loader - Loads images in the visible scroll
YUI GET Utility |
| 59 |
Pre-load content |
Unconditional Preload - If you visit Google's homepage, it preloads all required files for Search Result page.
Conditional Preload - Yahoo search preloads extra components basis search terms
Anticipated Preload - When planning a redesign, preload all new design requisite on older version of pages |
| 60 |
Minimize Iframes |
Costly even if blank
Affects initialization time of onload event |
| 61 |
Optimize css sprites |
Smaller size - Arrange images horizontally instead of vertical
Optimize - Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
Mobile friendly - Don't leave big gaps between images |
| 62 |
iPhone caching |
iPhone doesn't cache components larger than 25KB in size |
| 63 |
Mobile phone redirects |
Mobile-specific redirects must be privately cacheable.
Else proxies will serve mobile redirect to non-mobile users. 1) Use a 302 redirect with a cache lifetime of one day.
2) To avoid mobile redirect to non-mobile user redirect should contain
a) Vary: User-Agent header
b) Cache-Control: private header.
c) Expires header in the past, to prevent old HTTP/1.0 proxies from caching these redirects |
| 64 |
W3C Validation of CSS & HTML |
This speeds up page drawing and rendering in the browser as there is no extra computation done from browsers end to display the page properly |
