While more websites incorporate the latest trends in media add ons and web 2.0 graphical effects, finding the right methods to speed up a website become more and more important. Not only will these tips reduce web site size and load times, you will be also be keeping your bandwidth down making you’re web site more environmentally friendly!
Optimizing your website to run faster can also get you listed higher in google, increase the number of visitors that visit your website and increase your earnings. As an example we can mention that we were able to increase the traffic to this website by 20% when we optimized it for one of our clients. The optimization focused entirely on speed and page caching.
1. (Markup) Validate your code
Why make a users browser think harder than it has to? validate your markup to ensure your code can be easily read.
2. (Compression) Enable Gzip
It is interesting how many people don’t enable gzip or haven’t even heard of it! Would you send an email with a whole load of media in gzip or uncompressed? It’s the same with websites enable gzip on your website and user’s browsers will do the rest automatically.
3. (CSS) Use CSS instead of tables
Using CSS you can change the order of elements to load, this means you can load the top of the page before the entire page has finished loading. This will encourage users to stay as they have content readily available straight away. If you design your page with tables the users browser will wait until the table is fully downloaded.
4. (CSS) Use CSS instead of embedded style attribute
Using CSS you can reduce the amount of repeated style text to achieve the same effect.
Example:
<p style="text-align:center; font-size:small; font-family:Arial, Helvetica, sans-serif; ">Hello world!</p>
<p style="text-align:center; font-size:small; font-family:Arial, Helvetica, sans-serif; ">Hello world again!</p>
<p style="text-align:center; font-size:small; font-family:Arial, Helvetica, sans-serif; ">Hello world again again!</p>
Changes to:
.centerp {text-align:center; font-size:small; font-family:Arial, Helvetica, sans-serif; }
<p>Hello world!</p>
<p >Hello world again!</p>
<p >Hello world again again!</p>
5. (CSS) Use shorthand CSS properties
This method is nice and simple.
Example:
.box {
/*This line:*/ border-bottom-color:#000000; border-bottom-style:dotted; border-bottom-width:1px;
/*Is the same as this line:*/ border:0px dotted #000; border-bottom-width:1px;
/*(Whilst using less code)*/ }
6. (CSS) External Scripts
Remove all unified scripts such as CSS or Javascript from all pages and place them in a single file which can be accessed by all. After a users browser has cached the external file for one page it won’t need to download it again for the rest of the pages.
7. (Images) Choosing the right image format
I generally stick to three formats:
– jpg for actual images
– gif for transparent corners, small colourful gradients and banners.
– png for low colour images.
Using these formats will decrease file size.
8. (Images) Removing black image areas
Many websites have a large banner at the top which is plain par their logo. The logo should be the only part of the image placed on top of a html element with the same colour. This will achieve the same effect, with lower file sizes.
9. (Images) Don’t use images to display text
There are many reasons why not to do this including accessibility and SEO, with so many possibilities in CSS there really is no need to place text inside an image.
10. (links) Don’t Use absolute links
This is another code reduction technique.
Example:
<a href="https://patembe.com/mypage.html">My Page</a>
Changed to:
<a href="mypage.html">My Page</a>
ps you can use ../ in the url to navigate up a directory.
11. (links) Define your folders as folders not pages
You may not have taught so but placing a / at the end of a url to indicate the destination is a folder (if it is a folder) will actually seed up the loading process by a small amount.
12. (links) Reduce http requests
Incorporate images and scripts and reuse them, this will significantly reduce download time.
13. (links) Avoid slow external images or ads
Ads and external images rely on other peoples servers. If these servers are slow or at risk of going down, don’t use them.