I wanted to write this article for myself, but also as a useful tips webpage for anyone thinking “My website is slow” and wondering how to speed it up.
Firstly, if you’re website is going slow and it’s a CMS website like WordPress, then you are probably using too many plugins. Remove some plugins to speed up your website. The remaining tips on how to speed up your website are relevant to all websites that are going slow or need to be speeded up.
- The number one reason for websites going slow (assuming it’s not due to hardware or network resources being insufficient) is that there are too many http requests. Reduce http requests to speed up your website. This can be done by: Combining your background images into a single image and using image maps to show the segment of the image required.
- Use a CDN or seperate out parts of your website that have big downloads or lots of hits (such as the homepage or search pages in the case of Think Property). This would definately include all images on the website as these are the largest thing to download and make the website go slow. Watch out for rule number 8!
- Make Cache-Control Headers for static aspects of the website never expire.
- Gzip components of your website and make the browser do the work instead of your internet connection. This will make the website slower for users with slow clients, but faster for most users. Probably not a great option for mobile websites, though this will change.
- Load Stylesheets first – put them in the head. This won’t make your website load faster, but it will make the website appear to load faster 🙂
- Put scripts at the bottom of your website. Scripts stop concurrent downloads and can slow the website down. Load them last.
- Reduce DNS lookups. This completely goes against rule number 2, but it is an important one. DNS lookups slow your website down, so don’t use too many subdomains; don’t split your website up into too many parts to load. I recommend 2-4 as a useful maximum per page.
- Minifying CSS and scripts speeds up your website.
- Don’t use redirections.
- Don’t duplicate scripts. This just creates more to download and slows your website down.
- Edit ETags to stop duplicate entities being downloaded from multiple servers. Of course, this assumes that your website is big enough to be spread across multiple servers 🙂
- Make AJAX so it’s responses can be cached.
- If you use PHP, use
<?php flush(); ?>just after the head. This will allow the browser to start loading the page while the server is still preparing the rest of the page (and CSS if you adhered to rule 5).
- Use GET for aspects of your website that don’t need to be hidden / secured if the data to be sent in the get command is < 1,800 characters. (IE supports URLs with 2,000 characters). This might be used for AJAX queries.
- Postload as many components of the website as possible – what can you get away with loading more slowly? Can you load the footer after the rest of the website has loaded? Probably because the user will be scrolling through content before they get to the footer. This is another good tip to make your website appear to load faster.
- Preload components to take advantage of the time the browser is inactive and put some things like CSS and JS into the cache for the next page.
- Reduce the number of tags used to format content.
- Increasing the number of domains used increases the number of paralell downloads that can occur, but watch out for rule 8!
- Avoid iFrames, there are pro’s and con’s of using iFrames, but they are bad for SEO. This for me outweighs the pro’s.
- You could get rid of 404 pages because they are not useful and put demand on the website. Think Property will, however, have a 404 page that allows people to do a search for property or click to go to a selection of other useful resources, like property listings, calculators, etc… Avoid using DB searches to provide a more useful 404 page because this slows the website down.
- Reduce the number and size of cookies. This might involve having cookie free domains for some components.
- Use event delegation when coding event handlers to reduce the number of event handlers.
@Importto speeed up your website.
- The IE-proprietary AlphaImageLoader filter blocks rendering and freezes the browser while the image is being downloaded, slowing down your website. Don’t use
AlphaImageLoaderand use PNG8 instead. If you must use
AlphaImageLoader, use the underscore hack
_filterso the website loads faster for users of IE7 and above.
- Optimize Images before uploading them to the website. Reduce the palette size of GIF files to the number of colours used in the image. Try converting GIFs to PNGs to see if the file size reduces. Use a PNG optimizer tool. Remove EXIF imformation from JPGs with a JPG optimizer.
- Optimize CSS. Arrange images horizontally rather than vertically to reduce the size. Combine similar colours in the sprite to keep the colour palette size down. Remove gaps between images to reduce the load on the browser. This will speed up your website for users with slower clients.
- Don’t scale down images in html – present the smallest image size that you can.
- It’s better to have a favicon because the browser will request it anyway, so make a small, cacheable favicon with a decent expiry.
- If your website loads slowly on the iPhone, it might be because iPhones can’t cache components larger than 25Kb.
- With the exception of serving pages to iPhones (unsupported), you can speed up your website by packing components into a multipart document.
- Don’t create empty src tags. Usually this is done when coding JS. IE:
var img = new Image(); img.src = "";
Adhering to the above tips should speed up your website and stop it going slow 🙂 If you are using a CMS, you may also consider caching pages as HTML, delivering the html, then updating it when the CMS is updated. For sites like WordPress, there are plugins that do this. You may also consider using Yslow, which is a tool for assessing why websites are going slow 😉