An Introduction to Speed
A web browser, just like the one you’re using now, uses HTTP requests to load a webpage. The absolute minimum number of HTTP requests a page can make is 1. That would be, requesting the page you’re on assuming it doesn’t include any other files.
When you visit any page your browser makes a copy of some of the files, you probably already know this. So caching is important when you have people visiting your site multiple times. Larger files take longer to load, so if we have them stored locally (cached) your website will load faster.
Making Your Website Faster
Manipulating the Cache
Loading less images means less HTTP request. That means faster load times! So removing images that you don’t need is your next option. Sometimes you need a lot of images though, and that’s where CSS sprites come in! To put it simply, you put all of your images that don’t repeat into one file. You can then include them in CSS like so:
background: url('images/file.png') Xpx Ypx; width: 500px; height: 500px;
The Xpx and Ypx are the coordinates of the image you want in the sprite file, and the width and height are the width and the height of it. So this is more lines of code, which you’d think would take longer to load, right? However, the fact that you’re loading multiple images in one file and thus making less HTTP requests will actually greatly decrease your load times.
Sometimes though, you’ll find you have a lot of files and scripts that are used on almost all your pages, all in different files! That’s no good! So what you should do is combine these into one, which should hopefully radically decrease load times.
Sometimes a slow down on your website can be caused by your server, in which case you should contact your web host, or whatever you’re using. It’s always good to make sure, if you don’t know why things are going so slowly.
Optimize your files
GZipping is obviously not possible with external files on other websites, so social buttons don’t get to be a part of this. However, for your own files, GZipping can really reduce load times! This code comes curtesy of Techiepark
<IfModule mod_deflate.c> SetOutputFilter DEFLATE # Don’t compress SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary #Dealing with proxy servers <IfModule mod_headers.c> Header append Vary User-Agent </IfModule> </IfModule>
Everytime you make a mistake in HTML your browser has to figure out what you did wrong and corrects it to the best of its ability. Less errors in your code means less correcting, so the browser can spend more time actually loading the page instead!
Some Useful Stuff
- You might want to try out Pingdom for testing just how fast your website loads
- If you’re using Chrome or Safari (dev tools) you can right click and select ‘Inspect Element’. Then click Audit and run it. This will give you lots of tips on how you can speed it up even more!
- I believe in you!