06/08/2012
15 tips to speed up your website:
Any search engine wants to provide users a great user experience, just like Google, and a fast site improves overall site quality and increases user satisfaction. Everybody deserves a fast web experience. Some of the following tips are implemented well by 5gSoftware are well explained below because of their general usefulness.
"Experiments demonstrate that increasing web search latency 100 to 400ms reduces the daily number of searches per user by 0.2% to 0.6%. Furthermore, users do fewer searches the longer they are exposed. For longer delays, the loss of searches persists for a time even after latency returns to previous levels." Google says.
Note: Making a backup before starting is necessary!
a) Server
Choosing suitable hosting for your venture is the first step in starting a website. Hosting with a professional configuration can be of big help. Here you can find some good tips about choosing hosting.
1. Leverage browser caching:
"Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache. When you set an expires header for a resource, such as all jpeg images, the browser will store those resources in its cache. The next time the visitor comes back to the page it will load faster, as the browser will already have those images available," says CJ Patrick in a nice article about how to use expire headers to set caching: Expires Headers for SEO
2. Enable Keep-Alive:
"A Keep-Alive signal is often sent at predefined intervals and plays an important role on the Internet. After a signal is sent, if no reply is received, the link is assumed to be down and future data will be routed via another path until the link is up again," says wikipedia.
In fact, HTTP Keep-Alive allows TCP connections to stay alive and it helps reducing the latency for subsequent requests. So contact your hosting provider and tell them to think twice about this! Most hosting companies disable this feature, because it's an optional feature (whenever it transfers less than 60 bytes per request).
3. Enable gzip compression:
"Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip," says Yahoo.
Gzipping reduces the size of the HTTP response and helps to reduce response time. It's an easy way to reduce page weight. You can enable it by adding the following code to your .htaccess file:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE
Or, use the following PHP code at the top of your HTML/PHP file:
Or, simply use plugins for your CMS (like the WP HTTP Compression plugin for WordPress).
SEOmoz uses gzip. However, some external javascripts (AdRoll, Simpli and CloudFront) could reduce transfer size more than 60% by using gzip.
4. Make landing page redirects cache-able:
Mobile pages redirect users to a different URL, so making a cache-able redirect can speed up page load time for the next time visitors try to load site. Use a 302 redirect with a cache lifetime of one day. It should include a Vary: User-Agent as well as a Cache-Control: private. This way, only those visitors from mobile devices will redirect.
5. Use a CDN:
A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen. As you can see in the above image, it loads from different servers, based on the visitor's region.
You can manage your caches and lots of other useful tools in one WordPress using W3 Total Cache.
b) Content elements
Since you don't have total access to your server, content elements are the most important things that you can manipulate.
1. Minimize redirects
Sometimes to indicate the new location of a URL, track clicks, connect different parts of a site together or reserve multiple domains, you need to redirect the browser from one URL to another. Redirects trigger an extra HTTP request and add latency. Only keep redirects which are technically necessary and you can't find any other solution for it. These are Google's recommendations:
• Never reference URLs in your pages that are known to redirect to other URLs. Your application needs to have a way of updating URL references whenever resources change their location.
• Never require more than one redirect to get to a given resource. For instance, if C is the target page, and there are two different start points, A and B, both A and B should redirect directly to C; A should never redirect intermediately to B.
• Minimize the number of extra domains that issue redirects but don't actually serve content. Sometimes there is a temptation to redirect from multiple domains in order to reserve name space and catch incorrect user input (misspelled/mistyped URLs).
However, if you train users into thinking they can reach your site from multiple URLs, you can wind up in a costly cycle of buying up new domains just to stop cyber squatters from taking over every variant of your name.
2. Remove query strings from static resources
You can't cache a link with a "?" in its URL even if a Cache-control: public header is present. The question mark acts the same as Ctrl+F5. Use query strings for dynamic resources only, but 2-3 queries are reasonable ;)
3. Specify a character set
Specify a character set in HTTP headers to speed up browser rendering. This is done by adding a simple piece of code into your header:
Note: Some CMSs use functions for character set (like WordPress with ). We suggest that if you are sure about your character set, write it instead of using PHP functions. It helps to minimize request size, so try to use HTML instead of PHP everywhere that is possible.
4. Minify your codes
Removing HTML comments, CDATA sections, whitespaces and empty elements will decrease your page size; reduce network latency and speed up load time.
You can use simple online tools like Will Peavy minifier, and if you are using WordPress, Autoptimize can optimize and compress your codes and it supports CDN as well.
5. Avoid bad requests
Broken links result in 404/410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use online broken link checker or use WordPress link checker for free. You can also read about Xenu Link Sleuth and Screaming Frog tools at SEOmoz that can be really helpful.
6. Serve resources from a consistent URL
It's best to share Google's recommendation:
"For resources that are shared across multiple pages, make sure that each reference to the same resource uses an identical URL. If a resource is shared by multiple pages/sites that link to each other, but are hosted on different domains or hostnames, it's better to serve the file from a single hostname than to re-serve it from the hostname of each parent document. In this case, the caching benefits may outweigh the DNS lookup overhead. For example, if both mysite.example.com and yoursite.example.com use the same JS file, and mysite.example.com links to yoursite.example.com (which will require a DNS lookup anyway), it makes sense to just serve the JS file from mysite.example.com. In this way, the file is likely to already be in the browser cache when the user goes to yoursite.example.com."
7. Reduce DNS lookups
DNS lookups take a meaningful amount of time to look up the IP address for a hostname. The browser cannot do anything until the lookup is complete. Reducing the number of unique hostnames may increase response times. You can measure yours, by using Pingdom Tools.
Note: Sprite your images. This means put images that are loading every page of your site together to reduce your DNS lookups. You can find more information on SpriteMe
c) CSS, JS and Images
1. Specify image dimensions
Your browser begins to render a page before images are loaded. Specifying image dimensions helps it to wrap around non-replaceable elements. If no dimensions are specified, your browser will reflow once the images are downloaded. In order to do that in elements, use height and width tags specifications.
Note: Don't use dimensions to scale images on the fly -- the user will still be downloading the original file size, even if the image doesn't take up as much space on the screen.
2. Optimize images
Images can contain extra comments and use useless colors. Keeping image sizes to a minimum is a big help for users on slow connections. Try to save in JPEG format. You can use a CTRL+SHIFT+ALT+S shortcut to save an optimized image in Adobe Photoshop, use Yahoo! Smush.it, or if you are using WordPress, you can install the WP Smush.it plugin.
3. Put CSS at the top and JS at the bottom
Putting style sheets in the document head of the page prohibits progressive rendering, so browsers will block rendering to avoid having to redraw elements of the page. In most of cases, users will face a white page until the page is loaded completely. This also helps you to make a standard web page according to W3 standards. And, put your javascript code at the bottom of the page for the same reason.
Note: DO NOT forget to make a backup before making any changes and don't forget to share your tips or questions by commenting.
