Page load time

This mindmap breaks down the time it takes the browser to load a web page into five components: resource size, transfer size, resource count, resource wait and resource display. Further tips are given on how to reduce the impact of each of them.

Get Started. It's Free
or sign up with your email address
Rocket clouds
Page load time by Mind Map: Page load time

1. Published under a CC-BY license. Feel free to copy, embed, fork. Original author Dmitry Pashkevich

2. Resource count

2.1. Concatenate JS and CSS

2.2. Image sprites

2.3. Inline small CSS & JS

2.4. Inline small images (base64)

2.5. CSS effects instead of images

3. Transfer size

3.1. Caching

3.1.1. One resource = one URL (consistency)

3.1.2. ETag/Last-Modified headers

3.1.3. Expires/Cache-Control: max-age

3.1.4. URL fingerprinting (revving)

3.1.4.1. Via filename

3.1.4.2. Via query string

3.1.5. Avoid query strings in static resource URLs

3.1.6. Cache-Control: public header

3.1.7. Load libraries and fonts from public hostings

3.2. Encoding

3.2.1. gzip text assets

3.2.2. Don't abuse Base64

3.3. Protocol overhead

3.3.1. Prefer short URLs

3.3.2. Minimize cookie size

3.3.3. Use cookie-less domain for static resources

3.4. Other

3.4.1. Use simple error pages (404, 500, etc.) for non-document requests

4. Resource size

4.1. Images

4.1.1. Optimal format

4.1.2. Lossless compression

4.1.3. Strip metadata

4.1.4. Minimal needed resolution

4.2. HTML

4.2.1. Avoid excessive markup

4.2.2. Prefer HTTP headers over <meta http-equiv>

4.2.3. Minify

4.3. CSS/JS

4.3.1. Minify

4.3.2. Custom, minimal builds of libraries

4.3.3. DRY

4.4. Other

4.4.1. Fonts: strip metadata and unused character tables

4.4.2. Choose a compact data format

5. Resource wait

5.1. New connection overhead

5.1.1. Keep-Alive

5.1.2. Locate server close to target audience

5.1.3. Optimize server's TCP stack

5.2. Browser's max connections limit

5.2.1. Domain sharding

5.2.2. Use CDN

5.3. Blocking resources

5.3.1. Defer loading non-critical resources

5.3.2. JS at the end

5.3.3. CSS inside <head>

5.3.4. Flush output buffer early

5.4. Other

5.4.1. Avoid redirects

5.4.2. Main content early in HTML

6. Display time

6.1. Parsing and execution

6.1.1. HTML

6.1.1.1. Content-type + charset headers

6.1.2. CSS

6.1.3. JS

6.2. Paint

6.2.1. Don't overdo CSS effects

6.2.2. Avoid image scaling in browser

6.3. Layout

6.3.1. CSS inside <head>

6.3.2. Minimize element count and nesting

6.3.3. Specify image dimensions

6.3.4. Avoid using tables for layout

7. Notices

7.1. 1. HTTP 1.x over TCP assumed

7.2. 2. Using SPDY, HTTP2.0, SCTP, etc. is omitted as it requires a different approach and invalidates part of what is presented here

7.3. 3. Fine-tuning the TCP stack is omitted

7.4. 4. Fine-tuning specific Web servers is omitted