What will make my website faster? How to optimize page load time? How to make web site appear to load faster for end user?
Updated Feb 9, 2011.
This is excerpt from article: How big HTML images / CSS / JS / png / etc. should be to fit network packet (MTU) efficiently
List of things that will make your website much faster:
- Server must support Keep-Alive. Otherwise change server / host / hosting company / etc. Do it NOW!
- Reduce HTTP requests (CSS sprites, combine CSS, combine JS, inline CSS, inline JS)
- Minifiy HTML, JS, CSS. Google Closure Tools, YUI Compressor, Minification
- Gzip text/html, css, js (IE6 does not un-gzip CSS and JS, if reference is not from HEAD)
- For IE 5 & 6 use gzip-only-text/html
- Check if (Content-Encoding: gzip) then (Vary: Accept-Encoding) to allow cache both versions in proxy servers
- CSS goes in head, JS goes at bottom – right before body closing tag
- Defer JS if possible. Defer allows to load js after onload
- Image formats: for photos – always use JPG, for everything else – PNG 8, for animations – GIF
- Compress images: for JPG use
jpegtran or jpegoptimAdobe Photoshop or Advanced JPEG Compressor (both non-free) or free GIMP, for PNG use OptiPNG or PNGOUT. I use non-free but the best one – PNGOUTWin - Think connections! Waterfall. webpagetest.org (probably the best site for web page speed / optimization test), Zoompf (a little overkill, but can be useful), Pingdom Tools
- Try to serve assets in parallel, e.g, images.example.com, images2.example.com; subdomains can be on the same IP
- Use 2-3 max 4 sub-domains
- Optimize response headers, smaller, meaningful
- Avoid redirects (301, 302, META refresh, document.location)
- Remove ETAG
- Use Expires + cache-control
- 25k and greater files are not cached on iPhone
- Cache dynamic content PHP, ASPX, ruby etc.
- example.com?param is not cached by most proxies
- Serve static assets from cookie-less domain, like yimg.yahoo.com
- After onload via js can pre-cache images (if you know where visitor will go next)
- Can use double heads (if a lot of meta then put 2nd head at the bottom after closing BODY tag)
- Use CDN if can afford
And remember about:
- Validate HTML
- Validate CSS
- Validate RSS
- Validate all 3 – HTML, CSS, RSS/Atom
- Google Webmaster Tools
- Test IE (Trident), FF (Gecko), Chrome & Safari (WebKit), Konqueror (KHTML), Opera (Presto), lynx :)
- FF plugin — Html Validator
- Firebug + Yslow! (Yahoo) + Page Speed (Google)
- Aim for 99/100 both for yslow and pagespeed. It is possible!
- sitemap.xml
- robots.txt
- favicon.ico (or will get many 404s)
- apple-touch-icon.png (for iPhones)
- If up-time is critical use website monitoring tool / service like pingdom.com
Related tools / links:
- Apache module mod_pagespeed. Read more in Google Webmaster Blog about mod_pagespeed
- To test if your website can handle x users. Website stress test (loadimpact.com).
- GTmetrix – Analyze Performance
- Yottaa – Monitoring & Scoring the performance Beta
- Show Slow
- Google Webmaster Guidelines
- W3C Link Checker
- Check and Visualize your RDF documents – RDF Validator
More reading and watching:
- Web Performance Best Practices
- Why is Google Chrome fast? Spotlight on DNS pre-resolution (youtube.com)
- Velocity 2010: Urs Holzle (youtube.com)
- First Principles of Interaction Design
- Image Optimization – 7 mistakes
- CSS and image optimization
While making website faster, do not forget about security:
Things that big guys (such as Google, Microsoft, Yahoo, Akamai) do. This requires custom software, customized Linux / BSD / Apache compilation, and of course deep knowledge in networking, OSI model, TCP, etc.:
- Google and Microsoft Cheat on Slow-Start. (discussions: Slashdot, reddit).
P.S. This blog (wishmesh.com) is not optimized for anything (speed, size, etc.). People are lazy. They optimize only when there is reason to do it, and we like most humans are lazy, so this blog runs on default WordPress hosted on shared server.