With the rapid changing in technology powering Web Browsers, web sites have become more sophisticated, advanced and heavy in file size.
It is important your site is as efficient as it can possibly be so that loading times don’t impact the users overall experience and user satisfaction. Everybody enjoys a fast web experience whereby there isn’t a noticeable delay or lag to move between content.
According to Google, “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.”.
1. Pick a Good Host
This is the fundamental decision you have to make, or possible to re-evaluate if you’re already hosted somewhere. Is your hosting provider living up to the high expectations and speeds you wanted? We host all of our clients on dedicated servers, this reduces any clutter that typical servers will have (as they’re normally crammed with several tens of accounts, if not hundreds).
2. Take Advantage of Browser Caching
Taking full advantage of browser caching is ideal if your site distributes a high quantity of images that you don’t want to be re-downloaded on every visit.
Expires headers are used to tell the browser whether a resource on a website needs to be fetched from the server or if it can just be fetched from the browsers cache. If you set an expires header for a resource, your browser will automatically cache the resource and keep returning it, until the header expires. Therefore the next time the visitor comes back, it will load much faster as the browser already has a copy of the media content to display.
3. Compress Everything
According to Yahoo, “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,”.
Gzipping reduces the size of the HTTP response and helps to reduce response time. It’s an easy way to reduce page weight. If you’re running a cPanel server setup, it’s easy to enable for your entire site without having to do any gritty work.
4. Use a CDN
A content delivery network or content distribution network (CDN) is a large distributed system of servers that contain copies of data, placed at various points in a network so as to improve and maximise bandwidth for access to the data from clients throughout the network. The goal of a CDN is to serve content to end-users with high availability and high performance.
Here at ALJT Media, we take advantage of the service provided by Amazon CloudFront.
5. Cache Redirects
If your website has a lot of landing pages that are used to redirect your visitors to a more suited area, such as a mobile site, then making the redirect cachable can speed up page loading time for the visitor on all other consequent visits.
Redirects should have a valid 302 redirect header with a cache lifetime of one day upwards. You should include the ‘Vary: User-Agent’ and ‘Cache-Control: private’
6. Give Me a Character Set
That’s what a browser looks for whenever you access a page. It’s common practice to specify a character set in the HTTP headers to speed up browser rendering. Although this is a common and most probably obvious thing for a lot of developers, some developers still miss it out. Especially with the change in HTML structure introduced by HTML5.
HTML4
1 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
HTML5
1 |
<meta charset="utf-8" /> |
7. Minify and Condense
If you’re sending out a lot of individual requests to CSS, Javascript or image files, then every request is a new connection. The more requests, the slower it’ll be to load your page.
It is good practice in CSS/JS to minify your code – this strips out any unwanted comments, CDATA, whitespace, empty elements, duplicate elements and reduces the overall size to download, reducing the network latency and speeding up your loading times.
On top of this, it’s best to create a single point of entry for your CSS and Javascript. Therefore condensing all of your Javascript into one file that can be requested and returned is ideal. You can create a simple PHP script that includes all of the JS files you need, then simply point to that (without any parameters) so it is a static reference to all scripts and can be cached. Same applies for CSS, you don’t need multiple links to CSS files, merge them together.
Although I say this, I generally tend to stick with external CDN’s, such as jQuery through Google and AddThis/ShareThis functions.
8. Make Dynamic Resources Static
This ties into the point above – you can’t Minify dynamic content ‘on-the-fly’ as that’ll be much slower. So, if you’re using a lot of query strings to generate CSS/JS – you want to consider removing the query string parameters and putting all of your parts into a single static file. If you have a link with a query string ‘?’ in its URL then you can’t cache the URL even if you have set the correct cache headers.
If it doesn’t need to be dynamic, then don’t make it dynamic.
9. 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.
To measure your DNS loading times, you can use Pingdom Tools.
If you’re using HTML5 (which you should be) you’re able to setup DNS prefetching in your meta data. Although anchor tags have the ‘href’ attributes which typically lead to other external host names, browsers do not interpret or execute the DNS lookups on the domain names. DNS prefetching allows you to pre-define what DNS you want the browser to lookup, so it can be cached and cut down on the number of requests needed down the line.
1 2 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://static.aljtmedia.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://cdn.aljtmedia.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
10. Optimise Your Images
Most websites contain a large number of images that are too big to be added to sprites or need to be dynamically created in some way, such as an admin controlled slider. Images usually contain ‘pointless’ bits that are full of comments and useless colours. If you’re saving images, you want to save them in an optimised format, what’s commonly known as a method of ‘lossless compression’.
Losslessly compressing images ensure that no quality is lost, but ensures that the additional bytes of unncessary data is stripped out of your images, producing smaller file sizes and increasing loading times.
If you’re looking to optimise your images on the fly check out Yahoo! Smush.it that we use at ALJT Media. We also use Kraken which has a free web-interface and the free to download application PNGGauntlet to compress and ensure we’re using the most optimised and compressed image.
11. Hey – Is That a Sprite?
Do you use a lot of small icons or images on your website? Don’t forget that every single image is a new request – why not just put them all into one large file and use CSS to reference which image you want? This reduces your DNS lookups and reduces your page loading time.
There are some handy tools out there if you’re not keen on making one yourself in Photoshop – CSS Sprite Generator.
12. Specify Image Dimensions
This is one that not many people are aware of, but specifying image dimensions helps out your browser when it comes to rendering your page. Your browser automatically starts rendering a page before everything has finished loading. Specifying dimensions means your browser doesn’t have to render your page again once the images are downloaded.
However, you shouldn’t use image dimensions to scale images on the fly, if anything this will have a negative impact. You’ll still be downloading the full size image. As most websites do, you should create a copy of the image at multiple sizes to suit your needs.
13. Put CSS at the Top, Javascript at the Bottom
Putting stylelsheets in the document head of the page prohibits progressive rendering, so browsers will block rendering to avoid having to redraw elements of the page. Usually, visitors will have a white page until the site is loaded completely but this saves any elements or fonts ‘flashing’ when they’re actually loaded and rendered by the browser. 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.
14. Serve Static Content from a Cookieless Domain
Serving static content from a cookieless domain is a standard performance best practice, one identified by YSlow or Page Speed. It’s a simple concept but can be tricky to achieve.
From a performance angle, once a cookie is set for a particular domain, all subsequent HTTP requests for that domain must include that cookie. Even if the server has no use for the cookie, as is usually the case with static components, the cookie is sent over the wire anyway, bloating our request headers with useless code.
For information on how to properly setup and distribute your static content from a cookieless domain visit RavelRumba by Rob Flaherty.
Our Results
I ran the Pingdom Tools test whilst writing the article, here’s what we got. Click the links below to view our other results:
Leave a Reply